From 6683bf3d705025bc92b98d3dbbe2b0e4c4c8fb12 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Fri, 29 Mar 2024 01:35:54 -0400 Subject: [PATCH] rename media files --- .../src/api/media_files/GetMedia.ts | 1 + .../src/api/media_files/RenameMedia.ts | 14 ++ .../SessionProvider/SessionProvider.tsx | 5 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 6 + .../src/v2/view/pages/media/MediaPage.tsx | 31 +++-- .../v2/view/pages/media/MediaRenamePage.tsx | 122 ++++++++++++++++++ 6 files changed, 169 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/api/media_files/RenameMedia.ts create mode 100644 packages/fakeyou.com/src/v2/view/pages/media/MediaRenamePage.tsx diff --git a/packages/components/src/api/media_files/GetMedia.ts b/packages/components/src/api/media_files/GetMedia.ts index b9cdc5d8d1..30ce6ee44d 100644 --- a/packages/components/src/api/media_files/GetMedia.ts +++ b/packages/components/src/api/media_files/GetMedia.ts @@ -14,6 +14,7 @@ export interface MediaFile { public_bucket_path: string; maybe_engine_extension: string | null; maybe_batch_token: string; + maybe_title: string | null; maybe_creator_user: UserDetailsLight | null; maybe_prompt_token: string | null; creator_set_visibility: string; diff --git a/packages/components/src/api/media_files/RenameMedia.ts b/packages/components/src/api/media_files/RenameMedia.ts new file mode 100644 index 0000000000..e04329dbcf --- /dev/null +++ b/packages/components/src/api/media_files/RenameMedia.ts @@ -0,0 +1,14 @@ +import MakeRequest from "../MakeRequest"; + +export interface RenameMediaRequest { + name?: string, +} + +export interface RenameMediaResponse { + success: boolean +} + +export const RenameMedia = MakeRequest({ + method: "POST", + routingFunction: (media_token: string) => `/v1/media_files/rename/${ media_token }`, +}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx b/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx index c7b12e9035..b253c97c35 100644 --- a/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx +++ b/packages/fakeyou.com/src/components/providers/SessionProvider/SessionProvider.tsx @@ -23,6 +23,7 @@ interface ModalProps { // this too interface SessionContextType { canAccessStudio: () => boolean; canEditTtsModel: (token: string) => boolean; + canEditMediaFile: (token: string) => boolean; canBanUsers: () => boolean; check: () => boolean; loggedIn: boolean; @@ -52,6 +53,7 @@ interface Props { export const SessionContext = createContext({ canAccessStudio: () => false, canEditTtsModel: () => false, + canEditMediaFile: () => false, canBanUsers: () => false, check: () => false, loggedIn: false, @@ -91,6 +93,8 @@ export default function SessionProvider({ !otherUserToken || !user?.user_token ? false : user.user_token === otherUserToken; const canEditTtsModel = (userToken: string) => user?.can_delete_other_users_tts_models || userTokenMatch(userToken); + const canEditMediaFile = (userToken: string) => + user?.can_delete_other_users_tts_results || userTokenMatch(userToken); const canBanUsers = () => user?.can_ban_users || false; const canAccessStudio = () => { const hostnameAllowed = StudioRolloutHostnameAllowed(); @@ -108,6 +112,7 @@ export default function SessionProvider({ value: { canAccessStudio, canEditTtsModel, + canEditMediaFile, canBanUsers, check, loggedIn, diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index cf7ebb963d..d818d36256 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -98,6 +98,7 @@ import { StorytellerStudioListPage } from "./pages/storyteller_studio/Storytelle import TopNav from "components/layout/TopNav/TopNav"; import SideNav from "components/layout/SideNav/SideNav"; import MediaPage from "./pages/media/MediaPage"; +import MediaRenamePage from "./pages/media/MediaRenamePage"; import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage"; import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage"; import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesignerVoiceEditPage"; @@ -379,6 +380,11 @@ class PageContainer extends React.Component< /> + + + + diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 7bfb5e900a..f12f186a8f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -41,7 +41,7 @@ import { mediaTypeLabels } from "utils/mediaTypeLabels"; import { EngineMediaPanel } from "./components/EngineMediaPanel/EngineMediaPanel"; export default function MediaPage() { - const { canEditTtsModel, user } = useSession(); + const { canEditMediaFile, user } = useSession(); const { token } = useParams<{ token: string }>(); const bookmarks = useBookmarks(); const ratings = useRatings(); @@ -811,15 +811,26 @@ export default function MediaPage() { - {canEditTtsModel(user?.user_token || "") && ( -
-
+ {canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "") && ( + <> +
+
+
+
+ )} diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaRenamePage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaRenamePage.tsx new file mode 100644 index 0000000000..81faf98201 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaRenamePage.tsx @@ -0,0 +1,122 @@ +import React, { useEffect, useState } from "react"; +import { useHistory, useParams } from "react-router-dom"; +import { + faCircleExclamation, + faEdit, +} from "@fortawesome/pro-solid-svg-icons"; +import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +import PageHeader from "components/layout/PageHeader"; +import { + Button, + Container, + SplitPanel, + TempInput, +} from "components/common"; +import { useSession } from "hooks"; +import { GetMedia, MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; +import { RenameMedia } from "@storyteller/components/src/api/media_files/RenameMedia"; + +export default function MediaRenamePage() { + const { media_file_token } = useParams<{ media_file_token: string }>(); + const history = useHistory(); + + const { canEditMediaFile } = useSession(); + const [ mediaFile, setMediaFile ] = useState(undefined); + + const [ mediaTitle, setMediaTitle ] = useState(""); + + usePrefixedDocumentTitle("Rename Media"); + + useEffect(() => { + GetMedia(media_file_token,{}) + .then((res) => { + if (res.success && res.media_file) { + setMediaFile(res.media_file); + setMediaTitle(res.media_file.maybe_title || ""); + + } + }) + },[setMediaFile, media_file_token]); + + const performRename = async () => { + RenameMedia(media_file_token, { + name: mediaTitle, + }).then((res: any) => { + history.replace(`/media/${media_file_token}`); + }); + } + + const onChange = ( + ev: React.FormEvent + ) => { + const value = (ev.target as HTMLInputElement).value.trim(); + setMediaTitle(value); + } + + if (!canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "")) { + return ( + + +