rename media files

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;

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<string, RenameMediaRequest, RenameMediaResponse,{}>({
+  method: "POST",
+  routingFunction: (media_token: string) => `/v1/media_files/rename/${ media_token }`,
+});

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<SessionContextType>({
   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,

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<
                     />
                   </Route>
 
+                  <Route path="/media/rename/:media_file_token">
+                    <MediaRenamePage 
+                    />
+                  </Route>
+
                   <Route path="/media/:token">
                     <MediaPage />
                   </Route>

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() {
                 </div>
               </Panel>
 
-              {canEditTtsModel(user?.user_token || "") && (
-                <div className="d-flex gap-2">
-                  <Button
-                    full={true}
-                    variant="danger"
-                    label="Delete Media"
-                    onClick={openDeleteModal}
-                  />
-                </div>
+              {canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "") && (
+                <>
+                  <div className="d-flex gap-2">
+                    <Button
+                      full={true}
+                      variant="danger"
+                      label="Delete Media"
+                      onClick={openDeleteModal}
+                    />
+                  </div>
+                  <div className="d-flex gap-2">
+                    <Button
+                      full={true}
+                      variant="secondary"
+                      label="Rename File"
+                      onClick={openDeleteModal}
+                      to={`/media/rename/${mediaFile?.token || ""}`}
+                    />
+                  </div>
+                </>
               )}
             </div>
           </div>

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<MediaFile|undefined>(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<HTMLInputElement>
+  ) => {
+    const value = (ev.target as HTMLInputElement).value.trim();
+    setMediaTitle(value);
+  }
+
+  if (!canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "")) {
+    return (
+      <Container type="panel">
+        <PageHeader
+          titleIcon={faCircleExclamation}
+          title="Access Denied"
+          subText="You do not have permission to edit this file."
+          panel={true}
+          extension={
+            <div className="d-flex">
+              <Button
+                label="Back to homepage"
+                to={`/media/${media_file_token}`}
+                className="d-flex"
+              />
+            </div>
+          }
+        />
+      </Container>
+    );
+  }
+
+  return (
+    <Container type="panel" className="mb-5">
+      <PageHeader
+        title="Rename Media"
+        titleIcon={faEdit}
+        subText="Rename the file to make it easier to find"
+        panel={false}
+        showBackButton={true}
+        backbuttonLabel="Back"
+        backbuttonTo={`/media/${media_file_token}`}
+      />
+        <SplitPanel {...{ busy: false, dividerFooter: true }}>
+          <SplitPanel.Body padding={true}>
+              <TempInput
+                {...{
+                  label: "New Name",
+                  name: "title",
+                  onChange: onChange,
+                  placeholder: "File name",
+                  value: mediaTitle,
+                }}
+              />
+          </SplitPanel.Body>
+          <SplitPanel.Footer padding={true}>
+            <div className="d-flex gap-2 justify-content-end">
+              <Button
+                {...{
+                  label: "Cancel",
+                  to: `/media/${media_file_token}`,
+                  variant: "secondary",
+                }}
+              />
+              <Button
+                {...{
+                  label: "Rename File",
+                  onClick: performRename,
+                }}
+              />
+            </div>
+          </SplitPanel.Footer>
+        </SplitPanel>
+    </Container>
+  );
+  //}
+}