diff --git a/vocodes/src/common/FrontendUrlConfig.ts b/vocodes/src/common/FrontendUrlConfig.ts index 4bccbd4a3a..b1d807fd57 100644 --- a/vocodes/src/common/FrontendUrlConfig.ts +++ b/vocodes/src/common/FrontendUrlConfig.ts @@ -20,6 +20,10 @@ class FrontendUrlConfig { return `/tts/${modelToken}/edit`; } + static ttsResultDeletePage(resultToken: string) : string { + return `/tts/result/${resultToken}/delete`; + } + // User links static userProfilePage(userDisplayName: string) : string { diff --git a/vocodes/src/session/SessionWrapper.ts b/vocodes/src/session/SessionWrapper.ts index d25c06f5b5..067827cee2 100644 --- a/vocodes/src/session/SessionWrapper.ts +++ b/vocodes/src/session/SessionWrapper.ts @@ -118,6 +118,13 @@ export class SessionWrapper { public canDeleteOtherUsersW2lResults() : boolean { return this.sessionStateResponse?.user?.can_delete_other_users_w2l_results || false; } + + public deleteTtsResultAsMod(creatorUserToken: MaybeString) : boolean { + if (this.verifyUserTokenMatch(creatorUserToken)) { + return true; + } + return this.canDeleteOtherUsersTtsResults(); + } private verifyUserTokenMatch(otherUserToken: MaybeString) : boolean { // Default to false if user token on either side is falsey. diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index 99316e266d..b17d0c2011 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/vocodes/src/v2/NewVocodesContainer.tsx @@ -28,6 +28,7 @@ import { ModerationViewIpBanFc } from './moderation/moderation_view_ip_ban/Moder import { AboutFc } from './about/about_page/AboutFc'; import { TermsFc } from './about/terms_page/TermsFc'; import { TtsModelEditFc } from './tts/tts_model_edit/TtsModelEditFc'; +import { TtsResultDeleteFc } from './tts/tts_result_delete/TtsResultDeleteFc'; interface Props { sessionWrapper: SessionWrapper, @@ -109,11 +110,17 @@ class NewVocodesContainer extends React.Component { /> + + + + - + (undefined); + + useEffect(() => { + const api = new ApiConfig(); + const endpointUrl = api.viewTtsInferenceResult(token); + + fetch(endpointUrl, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .then(res => res.json()) + .then(res => { + const modelsResponse : TtsInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } + + 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 || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at; + + const handleDeleteFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.deleteTtsInferenceResult(token); + + const request = { + set_delete: !currentlyDeleted, + as_mod: props.sessionWrapper.deleteTtsResultAsMod(ttsInferenceResult?.maybe_creator_user_token) + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + if (res.success) { + if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { + history.go(0); // force reload + } else { + history.push('/'); + } + } + }) + .catch(e => { + }); + return false; + } + + if (ttsInferenceResult === undefined) { + return
; + } + + let modelLink = `/tts/${ttsInferenceResult.tts_model_token}`; + let durationSeconds = ttsInferenceResult?.duration_millis / 1000; + let modelName = ttsInferenceResult.tts_model_title; + + let creatorDetails = Anonymous user; + if (!!ttsInferenceResult.maybe_creator_user_token) { + let creatorLink = `/profile/${ttsInferenceResult.maybe_creator_username}`; + creatorDetails = ( + + +   + {ttsInferenceResult.maybe_creator_display_name} + + ); + } + + let modelCreatorDetails = Anonymous user; + if (!!ttsInferenceResult.maybe_model_creator_user_token) { + let modelCreatorLink = `/profile/${ttsInferenceResult.maybe_model_creator_username}`; + modelCreatorDetails = ( + + +   + {ttsInferenceResult.maybe_model_creator_display_name} + + ); + } + + const buttonTitle = currentlyDeleted ? "Undelete" : "Delete"; + + 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 ( +
+

Delete Result ?

+ +
+ +
+ + +

+ +

+ +
+ +
+
+ +

Info

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DetailValue
Original Text + {ttsInferenceResult.raw_inference_text} +
Audio Creator + {creatorDetails} +
Model used + + {modelName} + +
Model creator + {modelCreatorDetails} +
Duration{durationSeconds} seconds
+ +
+ ) +} + +export { TtsResultDeleteFc }; diff --git a/vocodes/src/v2/tts/tts_result_view/TtsResultViewFc.tsx b/vocodes/src/v2/tts/tts_result_view/TtsResultViewFc.tsx index bb978d11e8..26e0ecbab1 100644 --- a/vocodes/src/v2/tts/tts_result_view/TtsResultViewFc.tsx +++ b/vocodes/src/v2/tts/tts_result_view/TtsResultViewFc.tsx @@ -4,9 +4,9 @@ import { SessionWrapper } from '../../../session/SessionWrapper'; import { useParams, Link } from 'react-router-dom'; import { GravatarFc } from '../../common/GravatarFc'; import { SpectrogramFc } from './SpectrogramFc'; -import { TtsResultViewDeleteFc } from './TtsResultView_DeleteFc'; import { ReportDiscordLinkFc } from '../../common/DiscordReportLinkFc'; import { BucketConfig } from '../../../common/BucketConfig'; +import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig'; interface TtsInferenceResultResponsePayload { success: boolean, @@ -98,7 +98,7 @@ function TtsResultViewFc(props: Props) { let modelName = ttsInferenceResult.tts_model_title; - const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at; + //const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at; let moderatorRows = null; @@ -234,12 +234,10 @@ function TtsResultViewFc(props: Props) { - + Delete?