diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx index c302a403c2..7679724eba 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx @@ -1,92 +1,100 @@ -import React, { useState, useEffect } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { Gravatar } from '@storyteller/components/src/elements/Gravatar'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; +import React, { useState, useEffect } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; + +const Fade = require("react-reveal/Fade"); interface TtsInferenceResultResponsePayload { - success: boolean, - result: TtsInferenceResult, + success: boolean; + result: TtsInferenceResult; } interface TtsInferenceResult { - tts_result_token: string, + tts_result_token: string; - tts_model_token: string, - tts_model_title: string, + tts_model_token: string; + tts_model_title: string; - raw_inference_text: string, + raw_inference_text: string; - maybe_creator_user_token?: string, - maybe_creator_username?: string, - maybe_creator_display_name?: string, - maybe_creator_gravatar_hash?: string, + maybe_creator_user_token?: string; + maybe_creator_username?: string; + maybe_creator_display_name?: string; + maybe_creator_gravatar_hash?: string; - maybe_model_creator_user_token?: string, - maybe_model_creator_username?: string, - maybe_model_creator_display_name?: string, - maybe_model_creator_gravatar_hash?: string, + maybe_model_creator_user_token?: string; + maybe_model_creator_username?: string; + maybe_model_creator_display_name?: string; + maybe_model_creator_gravatar_hash?: string; - public_bucket_wav_audio_path: string, - public_bucket_spectrogram_path: string, + public_bucket_wav_audio_path: string; + public_bucket_spectrogram_path: string; - file_size_bytes: number, - duration_millis: number, - created_at: string, - updated_at: string, + file_size_bytes: number; + duration_millis: number; + created_at: string; + updated_at: string; - maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined, + maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined; } interface TtsInferenceResultModeratorFields { - creator_ip_address: string, - mod_deleted_at: string | undefined | null, - user_deleted_at: string | undefined | null, + creator_ip_address: string; + mod_deleted_at: string | undefined | null; + user_deleted_at: string | undefined | null; } interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function TtsResultDeleteFc(props: Props) { const history = useHistory(); - let { token } : { token: string } = useParams(); + let { token }: { token: string } = useParams(); - const [ttsInferenceResult, setTtsInferenceResult] = useState(undefined); + const [ttsInferenceResult, setTtsInferenceResult] = useState< + TtsInferenceResult | undefined + >(undefined); useEffect(() => { const api = new ApiConfig(); const endpointUrl = api.viewTtsInferenceResult(token); fetch(endpointUrl, { - method: 'GET', + method: "GET", headers: { - 'Accept': 'application/json', + Accept: "application/json", }, - credentials: 'include', + credentials: "include", }) - .then(res => res.json()) - .then(res => { - const modelsResponse : TtsInferenceResultResponsePayload = res; - if (!modelsResponse.success) { - return; - } + .then((res) => res.json()) + .then((res) => { + const modelsResponse: TtsInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } - setTtsInferenceResult(modelsResponse.result) - }) - .catch(e => { - //this.props.onSpeakErrorCallback(); - }); + setTtsInferenceResult(modelsResponse.result); + }) + .catch((e) => { + //this.props.onSpeakErrorCallback(); + }); }, [token]); // NB: Empty array dependency sets to run ONLY on mount - const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || + const currentlyDeleted = + !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at; const resultLink = FrontendUrlConfig.ttsResultPage(token); - const handleDeleteFormSubmit = (ev: React.FormEvent) : boolean => { + const handleDeleteFormSubmit = ( + ev: React.FormEvent + ): boolean => { ev.preventDefault(); const api = new ApiConfig(); @@ -94,38 +102,41 @@ function TtsResultDeleteFc(props: Props) { const request = { set_delete: !currentlyDeleted, - as_mod: props.sessionWrapper.deleteTtsResultAsMod(ttsInferenceResult?.maybe_creator_user_token) - } + as_mod: props.sessionWrapper.deleteTtsResultAsMod( + ttsInferenceResult?.maybe_creator_user_token + ), + }; fetch(endpointUrl, { - method: 'POST', + method: "POST", headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, - credentials: 'include', + credentials: "include", body: JSON.stringify(request), }) - .then(res => res.json()) - .then(res => { - if (res.success) { - if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { - history.push(resultLink); // Mods can perform further actions - } else { - history.push('/'); + .then((res) => res.json()) + .then((res) => { + if (res.success) { + if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { + history.push(resultLink); // Mods can perform further actions + } else { + history.push("/"); + } } - } - }) - .catch(e => { - }); + }) + .catch((e) => {}); return false; - } + }; if (ttsInferenceResult === undefined) { return
; // Exit rendering until data loads. } - const modelLink = FrontendUrlConfig.ttsModelPage(ttsInferenceResult.tts_model_token); + const modelLink = FrontendUrlConfig.ttsModelPage( + ttsInferenceResult.tts_model_token + ); let durationSeconds = ttsInferenceResult?.duration_millis / 1000; let modelName = ttsInferenceResult.tts_model_title; @@ -137,11 +148,13 @@ function TtsResultDeleteFc(props: Props) { + username={ttsInferenceResult.maybe_creator_display_name || ""} + email_hash={ttsInferenceResult.maybe_creator_gravatar_hash || ""} + />   - {ttsInferenceResult.maybe_creator_display_name} + + {ttsInferenceResult.maybe_creator_display_name} + ); } @@ -153,11 +166,15 @@ function TtsResultDeleteFc(props: Props) { + username={ttsInferenceResult.maybe_model_creator_display_name || ""} + email_hash={ + ttsInferenceResult.maybe_model_creator_gravatar_hash || "" + } + />   - {ttsInferenceResult.maybe_model_creator_display_name} + + {ttsInferenceResult.maybe_model_creator_display_name} + ); } @@ -166,87 +183,86 @@ function TtsResultDeleteFc(props: Props) { const buttonTitle = currentlyDeleted ? "Confirm Undelete" : "Confirm Delete"; - const formLabel = currentlyDeleted ? - "Recover the TTS Result (makes it visible again)" : - "Delete TTS Result (hides from everyone but mods)"; + const buttonCss = currentlyDeleted + ? "button is-warning is-large is-fullwidth" + : "button is-danger is-large is-fullwidth"; + + const formLabel = currentlyDeleted + ? "Recover the TTS Result (makes it visible again)" + : "Delete TTS Result (hides from everyone but mods)"; return ( -
-
-

{h1Title}

+ +
+

{h1Title}

+
+ < Back to result +
+
+ -
-

- < Back to result -

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Detail + + Value +
Original Text + {ttsInferenceResult.raw_inference_text} +
Audio Creator{creatorDetails}
Model used + {modelName} +
Model creator{modelCreatorDetails}
Duration{durationSeconds} seconds
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DetailValue
Original Text - {ttsInferenceResult.raw_inference_text} -
Audio Creator - {creatorDetails} -
Model used - - {modelName} - -
Model creator - {modelCreatorDetails} -
Duration{durationSeconds} seconds
-
-
-
-
- - -

- -

+ +
+ +

{formLabel}

+
+
- -
- -
-

- < Back to result -

-
-
- ) + ); } export { TtsResultDeleteFc }; diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx index 03286a1d97..9ccb7fa83c 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx @@ -1,65 +1,70 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { VisibleIconFc } from '../../_icons/VisibleIcon'; -import { HiddenIconFc } from '../../_icons/HiddenIcon'; +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; -const DEFAULT_VISIBILITY = 'public'; +const Fade = require("react-reveal/Fade"); + +const DEFAULT_VISIBILITY = "public"; interface TtsInferenceResultResponsePayload { - success: boolean, - result: TtsInferenceResult, + success: boolean; + result: TtsInferenceResult; } interface TtsInferenceResult { - tts_result_token: string, + tts_result_token: string; - tts_model_token: string, - tts_model_title: string, + tts_model_token: string; + tts_model_title: string; - raw_inference_text: string, + raw_inference_text: string; - maybe_creator_user_token?: string, - maybe_creator_username?: string, - maybe_creator_display_name?: string, - maybe_creator_gravatar_hash?: string, + maybe_creator_user_token?: string; + maybe_creator_username?: string; + maybe_creator_display_name?: string; + maybe_creator_gravatar_hash?: string; - maybe_model_creator_user_token?: string, - maybe_model_creator_username?: string, - maybe_model_creator_display_name?: string, - maybe_model_creator_gravatar_hash?: string, + maybe_model_creator_user_token?: string; + maybe_model_creator_username?: string; + maybe_model_creator_display_name?: string; + maybe_model_creator_gravatar_hash?: string; - public_bucket_wav_audio_path: string, - public_bucket_spectrogram_path: string, + public_bucket_wav_audio_path: string; + public_bucket_spectrogram_path: string; - creator_set_visibility?: string, + creator_set_visibility?: string; - file_size_bytes: number, - duration_millis: number, - created_at: string, - updated_at: string, + file_size_bytes: number; + duration_millis: number; + created_at: string; + updated_at: string; - maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined, + maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined; } interface TtsInferenceResultModeratorFields { - creator_ip_address: string, - mod_deleted_at: string | undefined | null, - user_deleted_at: string | undefined | null, + creator_ip_address: string; + mod_deleted_at: string | undefined | null; + user_deleted_at: string | undefined | null; } interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function TtsResultEditFc(props: Props) { - let { token } : { token : string } = useParams(); + let { token }: { token: string } = useParams(); const history = useHistory(); - const [ttsInferenceResult, setTtsInferenceResult] = useState(undefined); + const [ttsInferenceResult, setTtsInferenceResult] = useState< + TtsInferenceResult | undefined + >(undefined); const [visibility, setVisibility] = useState(DEFAULT_VISIBILITY); const getTtsResult = useCallback((token) => { @@ -67,24 +72,25 @@ function TtsResultEditFc(props: Props) { const endpointUrl = api.viewTtsInferenceResult(token); fetch(endpointUrl, { - method: 'GET', + method: "GET", headers: { - 'Accept': 'application/json', + Accept: "application/json", }, - credentials: 'include', + credentials: "include", }) - .then(res => res.json()) - .then(res => { - const modelsResponse : TtsInferenceResultResponsePayload = res; - if (!modelsResponse.success) { - return; - } + .then((res) => res.json()) + .then((res) => { + const modelsResponse: TtsInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } - setTtsInferenceResult(modelsResponse.result); - setVisibility(modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY); - }) - .catch(e => { - }); + setTtsInferenceResult(modelsResponse.result); + setVisibility( + modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY + ); + }) + .catch((e) => {}); }, []); useEffect(() => { @@ -92,12 +98,12 @@ function TtsResultEditFc(props: Props) { }, [token, getTtsResult]); const handleVisibilityChange = (ev: React.FormEvent) => { - setVisibility((ev.target as HTMLSelectElement).value) + setVisibility((ev.target as HTMLSelectElement).value); }; const resultLink = FrontendUrlConfig.ttsResultPage(token); - const handleFormSubmit = (ev: React.FormEvent) => { + const handleFormSubmit = (ev: React.FormEvent) => { ev.preventDefault(); if (!ttsInferenceResult) { @@ -108,79 +114,94 @@ function TtsResultEditFc(props: Props) { const api = new ApiConfig(); const endpointUrl = api.editTtsInferenceResult(resultToken); - + const request = { creator_set_visibility: visibility || DEFAULT_VISIBILITY, - } + }; fetch(endpointUrl, { - method: 'POST', + method: "POST", headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, - credentials: 'include', + credentials: "include", body: JSON.stringify(request), }) - .then(res => res.json()) - .then(res => { - if (res === undefined || - !res.success) { - return; // Endpoint error? - } + .then((res) => res.json()) + .then((res) => { + if (res === undefined || !res.success) { + return; // Endpoint error? + } - history.push(resultLink); - }) - .catch(e => { - }); + history.push(resultLink); + }) + .catch((e) => {}); return false; }; let isDisabled = !ttsInferenceResult; - const visibilityIcon = (visibility === 'public') ? : ; + const visibilityIcon = + visibility === "public" ? ( + + ) : ( + + ); return ( -
-
-

Edit Result Visibility

- -

- < Back to result -

+
+ +
+

Edit Result Visibility

+
+ < Back to result +
+
+
- -
- -
- -
+
+ +
+
+ +
+ +
+
+
+
- -
- - - + +
+ +
+
-
-
- ) + ); } export { TtsResultEditFc }; - diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx index e416d21a1c..4580a01582 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx @@ -6,8 +6,7 @@ import { useParams, Link } from "react-router-dom"; import { SpectrogramFc } from "./SpectrogramFc"; import { ReportDiscordLinkFc } from "../../_common/DiscordReportLinkFc"; import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; -import { HiddenIconFc } from "../../_icons/HiddenIcon"; -import { VisibleIconFc } from "../../_icons/VisibleIcon"; + import { GetTtsResult, GetTtsResultIsErr, @@ -17,7 +16,17 @@ import { } from "../../../api/tts/GetTtsResult"; import { TtsResultAudioPlayerFc } from "./TtsResultAudioPlayerFc"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faDownload, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { + faDownload, + faEdit, + faTrash, + faEye, + faEyeSlash, +} from "@fortawesome/free-solid-svg-icons"; +import { distance, delay, duration } from "../../../../data/animation"; + +const Fade = require("react-reveal/Fade"); + interface Props { sessionWrapper: SessionWrapper; } @@ -105,56 +114,64 @@ function TtsResultViewFc(props: Props) { ) { moderatorRows = ( <> -
-
-

Moderator Details

-
- - - - - - - - - - - - - - - - - - - - - - - -
Model creator is banned - {ttsInferenceResult?.maybe_moderator_fields - ?.model_creator_is_banned - ? "banned" - : "good standing"} -
Result creator is banned (if user) - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_is_banned_if_user - ? "banned" - : "good standing"} -
Result creator IP address - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_ip_address || "server error"} -
Mod deleted at (UTC) - {ttsInferenceResult?.maybe_moderator_fields - ?.mod_deleted_at || "not deleted"} -
Result creator deleted at (UTC) - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_deleted_at || "not deleted"} -
+ +
+
+

Moderator Details

+
+ + + + + + + + + + + + + + + + + + + + + + + +
Model creator is banned + {ttsInferenceResult?.maybe_moderator_fields + ?.model_creator_is_banned + ? "banned" + : "good standing"} +
Result creator is banned (if user) + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_is_banned_if_user + ? "banned" + : "good standing"} +
Result creator IP address + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_ip_address || "server error"} +
Mod deleted at (UTC) + {ttsInferenceResult?.maybe_moderator_fields + ?.mod_deleted_at || "not deleted"} +
Result creator deleted at (UTC) + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_deleted_at || "not deleted"} +
+
-
+ ); } @@ -200,11 +217,11 @@ function TtsResultViewFc(props: Props) { let resultVisibility = ttsInferenceResult?.creator_set_visibility === "hidden" ? ( - Hidden + Hidden ) : ( - Public + Public ); @@ -270,32 +287,41 @@ function TtsResultViewFc(props: Props) { return (
-
-
-

- {headingTitle} -

-
-
- -
-
- {subtitle} -
- - - - Download File{" "} - + +
+
+

+ {headingTitle} +

-
+ - {/* Without wavesurfer, + +
+
+ {subtitle} + +
+
+ + {/* Without wavesurfer, */} -
-
-

Spectrogram

- -
-
- -
-
-

Result Details

-
- - - - - - - - - - - - - - - - - - - -
Original text - {ttsInferenceResult.raw_inference_text} -
Audio creator{creatorDetails}
Audio duration{durationSeconds} seconds
Visibility{resultVisibility}
+
+
+

Spectrogram

+
-
-
-
-

Model Used

-
- - - - - - - - - - - - - - - -
Model name - {modelName} -
Model creator{modelCreatorDetails}
Vocoder used{vocoderUsed}
+
+
+

Result Details

+
+ + + + + + + + + + + + + + + + + + + +
Original text + {ttsInferenceResult.raw_inference_text} +
Audio creator{creatorDetails}
Audio duration{durationSeconds} seconds
Visibility{resultVisibility}
+
-
- {debugRows} - - {moderatorRows} - -
-
- {editButton} - {deleteButton} +
+
+

Model Used

+
+ + + + + + + + + + + + + + + +
Model name + {modelName} +
Model creator{modelCreatorDetails}
Vocoder used{vocoderUsed}
+
+
-

- -

-
+ + +
{debugRows}
+ +
{moderatorRows}
+ + +
+
+ {editButton} + {deleteButton} +
+

+ +

+
+
); }