My Movie - Bugs (#332)

- done: setup metadata in editor.js for the Generate Movie Button
- done: update endpoint, now during stylization, the upload of the
original video uses the new_video endpoint, which provides the file with
a title field
- fixed: rendered movies art style tag now show the art style's label
properly
- fixed: clicking the media link to the video brings user back to
studio.storyteller.ai/[video_url]
- fixed: completed card DOM nesting issue

potentially fixed but the product does not reflect due to server issues:
- AI Stylize videos should also take the title from the original video
and show that title

Co-authored-by: wil <wil@storyteller.ai>

app/contexts/EngineProvider.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useEffect, useContext, useState } from "react";
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { AppUiContext } from "~/contexts/AppUiContext";
 import { EngineContext } from "./EngineContext";
-import { signalScene } from "~/store";
+import { signalScene, getSceneSignals } from "~/store";
 
 import Editor from "~/pages/PageEnigma/js/editor";
 
@@ -30,6 +30,7 @@ export const EngineProvider = ({
           dispatchAppUiState,
           authState,
           signalScene,
+          getSceneSignals
         });
       }
       return curr;

app/hooks/useInferenceJobManager/useInferenceJobManager.tsx

@@ -93,7 +93,7 @@ export function GetCompletedMovies(username?: string) {
           JSON.stringify(movies.value) !==
           JSON.stringify({ movies: res.results })
         ) {
-          console.log("movies", res.results);
+          // console.log("movies", res.results);
           movies.value = { movies: res.results };
         }
       }

app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx

@@ -9,6 +9,14 @@ import { environmentVariables } from "~/store";
 import { useSignals } from "@preact/signals-react/runtime";
 import { downloadFile } from "~/pages/PageEnigma/comps/GenerateModals/utils/downloadFile";
 import { ToasterContext } from "~/contexts/ToasterContext";
+import { styleList } from "~/pages/PageEnigma/styleList";
+
+function getStyleName(typeInput: string){
+  const foundStyle = styleList.find((style)=>{
+    return style.type === typeInput;
+  });
+  return foundStyle ? foundStyle.label : "Unknown Style";
+}
 
 interface Props {
   movie: MediaInfo;
@@ -17,6 +25,7 @@ interface Props {
 
 export function CompletedCard({ movie, setMovieId }: Props) {
   useSignals();
+  // console.log(movie);
   const { addToast } = useContext(ToasterContext);
   const bucketConfig = useRef<BucketConfig>(new BucketConfig());
   const [loadError, setLoadError] = useState(false);
@@ -27,10 +36,10 @@ export function CompletedCard({ movie, setMovieId }: Props) {
     360,
     20,
   );
-
+  const styleName = movie.maybe_style_name && getStyleName(movie.maybe_style_name);
   return (
-    <button
-      className="flex w-full items-center justify-between px-5 py-3 text-start transition-all duration-150 hover:bg-brand-secondary/40"
+    <div
+      className="flex w-full items-center justify-between px-5 py-3 text-start transition-all duration-150 hover:bg-brand-secondary/40 hover:cursor-pointer"
       onClick={() => {
         setMovieId(movie.token);
       }}>
@@ -50,7 +59,11 @@ export function CompletedCard({ movie, setMovieId }: Props) {
         <div className="flex flex-col justify-center gap-1">
           <div className="font-medium">{movie.maybe_title || "Untitled"}</div>
           <div>
-            <div className="text-sm text-white/60">Anime 2D</div>
+            {styleName &&
+              <div className="text-sm text-white/60">
+                {styleName}
+              </div>
+            }
             <div className="text-sm text-white/60">
               {dayjs(movie.updated_at).format("MMM D, YYYY HH:mm:ss")}
             </div>
@@ -70,6 +83,6 @@ export function CompletedCard({ movie, setMovieId }: Props) {
           </button>
         </Tooltip>
       </div>
-    </button>
+    </div>
   );
 }

app/pages/PageEnigma/js/api_manager.ts

@@ -221,17 +221,27 @@ export class APIManager {
     return file;
   }
 
-  public async uploadMedia(blob: any, fileName: string) {
+  public async uploadMedia({
+    blob, fileName, title, styleName
+  }:{
+    blob: Blob,
+    fileName: string,
+    title: string,
+    styleName?: string,
+  }) {
     // Promise<APIManagerResponseSuccess>
-    const url = `${this.baseUrl}/v1/media_files/upload`;
+    //TODO: UPDATE ENDPOINT!!!!
+    const url = `${this.baseUrl}/v1/media_files/upload/new_video`;
     const uuid = uuidv4();
 
     const formData = new FormData();
     formData.append("uuid_idempotency_token", uuid);
+
     formData.append("file", blob, fileName);
-    formData.append("source", "file");
-    formData.append("type", "video");
-    formData.append("source", "file");
+    // formData.append("source", "file");
+    // formData.append("type", "video");
+    if (styleName) formData.append("maybe_style_name", styleName);
+    formData.append("maybe_title", title);
 
     const response = await fetch(url, {
       method: "POST",

app/pages/PageEnigma/js/editor.ts

@@ -42,12 +42,14 @@ import {
 } from "~/pages/PageEnigma/store/engine";
 import { AuthState } from "~/contexts/Authentication/types";
 import { hotkeysStatus } from "~/pages/PageEnigma/store";
+import { SceneSignal } from "~/store";
 
 // Main editor class that will call everything else all you need to call is " initialize() ".
 
 export type EditorConstructorConfig = {
   dispatchAppUiState: React.Dispatch<AppUiAction>;
   signalScene: (data: any) => void;
+  getSceneSignals: ()=>SceneSignal
   authState: AuthState;
 };
 
@@ -121,6 +123,7 @@ class Editor {
   dispatchAppUiState: React.Dispatch<AppUiAction>;
   authState: AuthState;
   signalScene: (data: any) => void;
+  getSceneSignals: () => SceneSignal;
   render_width: number;
   render_height: number;
 
@@ -144,6 +147,7 @@ class Editor {
   constructor({
     dispatchAppUiState,
     signalScene,
+    getSceneSignals,
     authState,
   }: EditorConstructorConfig) {
     console.log(
@@ -253,6 +257,7 @@ class Editor {
     //setup reactland Callbacks
     this.dispatchAppUiState = dispatchAppUiState;
     this.signalScene = signalScene;
+    this.getSceneSignals = getSceneSignals;
     this.authState = authState;
 
     // Scene State
@@ -567,7 +572,7 @@ class Editor {
         if (c instanceof THREE.Mesh) {
           if (c.morphTargetInfluences && c.morphTargetDictionary) {
             const blendShapeIndexE = c.morphTargetDictionary["E"];
-            console.log(c.morphTargetDictionary, blendShapeIndexE);
+            // console.log(c.morphTargetDictionary, blendShapeIndexE)
             if (blendShapeIndexE !== null) {
               hasLipsync = true;
             }
@@ -1201,7 +1206,13 @@ class Editor {
     // Create a Blob from the output file for downloading
     const blob = new Blob([output.buffer], { type: "video/mp4" });
 
-    const data: any = await this.api_manager.uploadMedia(blob, "render.mp4");
+    const title = this.getSceneSignals().title || "Untitled";
+
+    const data: any = await this.api_manager.uploadMedia({
+      blob,
+      fileName: `${title}.mp4`,
+      title,
+    });
 
     if (data == null) {
       return;

app/pages/PageEnigma/models/movies.ts

@@ -27,6 +27,7 @@ export interface MediaInfo {
   maybe_origin_model_type: null | string;
   maybe_origin_model_token: null | string;
   maybe_duration_millis: number | null;
+  maybe_style_name: null | string;
   public_bucket_path: string;
   cover_image: {
     maybe_cover_image_public_bucket_path: null | string;

app/store/scene.ts

@@ -24,4 +24,8 @@ export const signalScene = (data:SceneSignal)=>{
     //TODO: MILES: implement flagging of isModified
     // from editor side, and take this out after
   };
+}
+
+export const getSceneSignals = ():SceneSignal=>{
+  return scene.value;
 }