From 378634bdd98535c42bbfffd6f12965bc30f164fe Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Fri, 12 Apr 2024 16:22:24 -0400
Subject: [PATCH] fixed video uploads by updating ffmpegs commands and
 converting the webm to mp4 first.

---
 app/pages/PageEnigma/js/editor.ts | 82 ++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index f4aceb9c81..e77e9192e6 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -218,11 +218,11 @@ class Editor {
     );
   }
 
-  isEmpty(value:string) {
+  isEmpty(value: string) {
     return (value == null || (typeof value === "string" && value.trim().length === 0));
   }
-  
-  initialize(config: any,sceneToken) {
+
+  initialize(config: any, sceneToken) {
 
     //setup reactland Callbacks
     this.dispatchAppUiState = config.dispatchAppUiState;
@@ -357,7 +357,7 @@ class Editor {
     if (this.isEmpty(sceneToken) == false) {
       this.loadScene(sceneToken)
     }
-    
+
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
       payload: {
@@ -565,7 +565,7 @@ class Editor {
     });
   }
 
-  async updateLoad(progress:number,message:string) {
+  async updateLoad(progress: number, message: string) {
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
       payload: {
@@ -883,14 +883,14 @@ class Editor {
     );
   }
 
-  async _debugDownloadVideo(videoURL:string) {
-      // DEBUG ONLY to download the video
+  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
+    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) {
@@ -902,27 +902,12 @@ class Editor {
 
     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
-    // DEBUG ONLY to download the video
-    //this._debugDownloadVideo(videoURL)
 
     this.generating_preview = true;
     const ffmpeg = createFFmpeg({ log: true });
     await ffmpeg.load();
 
-    //for (let index = 0; index < this.frame_buffer.length; index++) {
-    //  const element = this.frame_buffer[index];
-    //  await ffmpeg.FS(
-    //    "writeFile",
-    //    `image${index}.jpg`,
-    //    await fetchFile(element),
-    //  );
-    //}
-
-    this.updateLoad(50,"Processing ...")
+    this.updateLoad(50, "Processing ...")
 
     // Write the Uint8Array to the FFmpeg file system
     ffmpeg.FS('writeFile', 'input.webm', await fetchFile(videoURL));
@@ -930,6 +915,24 @@ class Editor {
     await ffmpeg.run(
       "-i",
       "input.webm",
+      "-vf",
+      "scale=516:290",
+      "-c:v",
+      "libx264",
+      "-preset",
+      "fast",
+      "-crf", 
+      "23",
+      "-c:a",
+      "aac",
+      "-b:a",
+      "192k",
+      "input.mp4",
+    );
+
+    await ffmpeg.run(
+      "-i",
+      "input.mp4",
       "-f",
       "lavfi",
       "-i",
@@ -967,6 +970,17 @@ class Editor {
     // Create a Blob from the output file for downloading
     const blob = new Blob([output.buffer], { type: "video/mp4" });
 
+    // Create a URL for the blob
+    const url = URL.createObjectURL(blob);
+
+    // Create an anchor element (<a>) and trigger the download
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "render.mp4"; // Set the file name for the download
+    document.body.appendChild(a); // Append the anchor to the document
+    a.click(); // Simulate a click on the anchor to trigger the download
+
+
     const data: any = await this.api_manager.uploadMedia(blob, "render.mp4");
 
     if (data == null) {
@@ -988,8 +1002,8 @@ class Editor {
       });
 
     // {"success":true,"inference_job_token":"jinf_j3nbqbd15wqxb0xcks13qh3f3bz"}
-    this.updateLoad(100,"Done Check Your Media Tab On Profile.")
-    this.endLoading()
+    this.updateLoad(100, "Done Check Your Media Tab On Profile.");
+    this.endLoading();
 
     console.log(result);
     this.recorder = undefined;
@@ -1053,7 +1067,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));
@@ -1089,7 +1103,7 @@ 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;
@@ -1111,8 +1125,8 @@ class Editor {
 
   startPlayback() {
 
-    this.updateLoad(25,"Starting Processing")
-  
+    this.updateLoad(25, "Starting Processing")
+
     this.timeline.is_playing = true;
     this.timeline.scrubber_frame_position = 0;
     if (!this.camera_person_mode) {