diff --git a/app/contexts/EngineProvider.tsx b/app/contexts/EngineProvider.tsx index b7b6e411d0..b9b728ba92 100644 --- a/app/contexts/EngineProvider.tsx +++ b/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; diff --git a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx index 6fb6e10a62..996e22a253 100644 --- a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx +++ b/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 }; } } diff --git a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx index ff5e2d6b13..c427656c44 100644 --- a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx +++ b/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(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 ( - - + ); } diff --git a/app/pages/PageEnigma/js/api_manager.ts b/app/pages/PageEnigma/js/api_manager.ts index a885b50320..ff271c9b5e 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/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 - 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", diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index e3b6110e3f..12c02f5aee 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/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; signalScene: (data: any) => void; + getSceneSignals: ()=>SceneSignal authState: AuthState; }; @@ -121,6 +123,7 @@ class Editor { dispatchAppUiState: React.Dispatch; 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; diff --git a/app/pages/PageEnigma/models/movies.ts b/app/pages/PageEnigma/models/movies.ts index e6416c3cc6..1fe7ad84d9 100644 --- a/app/pages/PageEnigma/models/movies.ts +++ b/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; diff --git a/app/store/scene.ts b/app/store/scene.ts index 2ced749992..a11e8d2e07 100644 --- a/app/store/scene.ts +++ b/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; } \ No newline at end of file