Merge pull request #153 from storytold/feature/loading-screens-stylize

Add Loading Screen for stylize and remove the file download

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -15,14 +15,13 @@ export const PageEnigmaComponent = () => {
   const editor = useContext(EngineContext);
   const [page, setPage] = useState("edit");
   const params = useParams();
-  console.log(params);
   
   useEffect(() => {
     if (editor && editor.can_initialize && dispatchAppUiState !== null) {
       console.log("initializing Editor");
       
      const sceneToken = params["sceneToken"]
-      console.log(sceneToken)
+  
       editor.initialize({
         dispatchAppUiState
       },sceneToken);

app/pages/PageEnigma/PageStyling.tsx

@@ -5,7 +5,7 @@ import {
   faArrowsRotate,
   faFilm,
 } from "@fortawesome/pro-solid-svg-icons";
-import { Button, Link } from "~/components";
+import { Button,LoadingBar } from "~/components";
 import { StyleSelection } from "~/pages/PageEnigma/comps/StyleSelection";
 import { LowerPanel } from "~/modules/LowerPanel";
 import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid";
@@ -18,10 +18,11 @@ import { EngineContext } from "~/contexts/EngineContext";
 interface Props {
   setPage: (page: string) => void;
 }
-
+import { AppUiContext } from "~/contexts/AppUiContext";
 export const PageStyling = ({ setPage }: Props) => {
   useSignals();
   const editorEngine = useContext(EngineContext);
+  const [appUiState] = useContext(AppUiContext);
 
   const generateFrame = async () => {
     await editorEngine?.generateFrame();
@@ -73,6 +74,15 @@ export const PageStyling = ({ setPage }: Props) => {
           </LowerPanel>
         </div>
       </div>
+      <LoadingBar
+              id="editor-loading-bar"
+              wrapperClassName="absolute top-0 left-0"
+              innerWrapperClassName="max-w-screen-sm"
+              isShowing={appUiState.showEditorLoadingBar.isShowing}
+              message={appUiState.showEditorLoadingBar.message}
+              label={appUiState.showEditorLoadingBar.label}
+              progress={appUiState.showEditorLoadingBar.progress}
+          />
     </div>
   );
 };

app/pages/PageEnigma/js/editor.ts

@@ -31,6 +31,7 @@ import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { AssetType, MediaItem } from "~/pages/PageEnigma/models";
+import { LoadingBar } from "~/components";
 
 // Main editor class that will call everything else all you need to call is " initialize() ".
 class Editor {
@@ -558,6 +559,30 @@ class Editor {
     this.activeScene.load_glb(media_file_token);
   }
 
+  async showLoading() {
+    this.dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR,
+    });
+  }
+
+  async updateLoad(progress:number,message:string) {
+    this.dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
+      payload: {
+        showEditorLoadingBar: {
+          progress: progress,
+          message: message
+        },
+      },
+    });
+  }
+
+  async endLoading() {
+    this.dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR,
+    });
+  }
+
   async _test_demo() {
     // note the database from the server is the source of truth for all the data.
     // Test code here
@@ -858,6 +883,16 @@ class Editor {
     );
   }
 
+  async _debugDownloadVideo(videoURL:string) {
+      // DEBUG ONLY to download the video
+
+      let a = document.createElement('a');
+      a.href = videoURL;
+      a.download = 'video.mp4'; // Name of the downloaded file
+      document.body.appendChild(a);
+      a.click(); // Trigger the download
+  }
+
   async stopPlayback(compile_audio: boolean = true) {
     //let video_fps = Math.floor(this.frames * (this.cap_fps / this.timeline.timeline_limit));
     //console.log("Video FPS:", video_fps)
@@ -865,19 +900,14 @@ class Editor {
 
     console.log(this.frame_buffer);
 
-
     const videoBlob = new Blob(this.frame_buffer, { type: 'video/webm' });
     const videoURL = URL.createObjectURL(videoBlob);
     //const arrayBuffer = await videoBlob.arrayBuffer();
     //const uint8Array = new Uint8Array(arrayBuffer);
   
     // Create an anchor element
-    let a = document.createElement('a');
-    a.href = videoURL;
-    a.download = 'video.mp4'; // Name of the downloaded file
-    document.body.appendChild(a);
-    a.click(); // Trigger the download
-
+    // DEBUG ONLY to download the video
+    //this._debugDownloadVideo(videoURL)
 
     this.generating_preview = true;
     const ffmpeg = createFFmpeg({ log: true });
@@ -892,6 +922,7 @@ class Editor {
     //  );
     //}
 
+    this.updateLoad(50,"Processing ...")
 
     // Write the Uint8Array to the FFmpeg file system
     ffmpeg.FS('writeFile', 'input.webm', await fetchFile(videoURL));
@@ -957,6 +988,8 @@ class Editor {
       });
 
     // {"success":true,"inference_job_token":"jinf_j3nbqbd15wqxb0xcks13qh3f3bz"}
+    this.updateLoad(100,"Done Check Your Media Tab On Profile.")
+    this.endLoading()
 
     console.log(result);
     this.recorder = undefined;
@@ -1020,7 +1053,7 @@ class Editor {
         this.switchCameraView();
       }
       this.activeScene.renderMode(true);
-
+  
       const ffmpeg = createFFmpeg({ log: false });
       await ffmpeg.load();
       await ffmpeg.FS("writeFile", `render.png`, await fetchFile(imgData));
@@ -1056,10 +1089,14 @@ class Editor {
 
   // This initializes the generation of a video render scene is where the core work happens
   generateVideo() {
+    
     console.log("Generating video...", this.frame_buffer);
     if (this.rendering) {
       return;
     }
+
+    this.showLoading()
+
     this.rendering = true; // has to go first to debounce
     this.startPlayback();
     this.frame_buffer = [];
@@ -1073,6 +1110,9 @@ class Editor {
   }
 
   startPlayback() {
+
+    this.updateLoad(25,"Starting Processing")
+  
     this.timeline.is_playing = true;
     this.timeline.scrubber_frame_position = 0;
     if (!this.camera_person_mode) {