From 12e7d395feabee6b718bf483c2e855563dc4c9e0 Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Tue, 3 Dec 2024 21:20:19 -0500
Subject: [PATCH 1/7] Add ability to load files through wasm in a browser

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 app.cpp            | 11 +++++++++++
 shell_minimal.html | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/app.cpp b/app.cpp
index af0ca6b..649a7aa 100644
--- a/app.cpp
+++ b/app.cpp
@@ -15,6 +15,8 @@
 
 #ifndef EMSCRIPTEN
 #include "nfd.h"
+#else
+#include <emscripten.h>
 #endif
 
 #include "mz.h"
@@ -759,6 +761,13 @@ void SaveTheme() {
 
 std::string OpenFileDialog() {
 #ifdef EMSCRIPTEN
+    // https://stackoverflow.com/a/69935189
+    EM_ASM(
+        var file_selector = document.createElement('input');
+        file_selector.setAttribute('type', 'file');
+        file_selector.setAttribute('onchange','Module.LoadStringFromEvent(event)');
+        file_selector.click();
+    );
     return "";
 #else
     nfdchar_t* outPath = NULL;
@@ -803,11 +812,13 @@ void DrawMenu() {
                 if (path != "")
                     LoadFile(path);
             }
+#ifndef EMSCRIPTEN
             if (ImGui::MenuItem("Save As...")) {
                 auto path = SaveFileDialog();
                 if (path != "")
                     SaveFile(path);
             }
+#endif
             if (ImGui::MenuItem("Revert")) {
                 LoadFile(appState.file_path);
             }
diff --git a/shell_minimal.html b/shell_minimal.html
index d45b812..77c1ac3 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>Raven</title>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
     <style>
         body { margin: 0; background-color: black }
         .emscripten {
@@ -47,6 +48,23 @@
       // ... And free it when we're done.
       _free(stringOnWasmHeap);
     }
+    // https://stackoverflow.com/a/69935189
+    Module.LoadStringFromEvent = function (event) {
+      const file_reader = new FileReader();
+      file_reader.onload = (event) => {
+        // This is annoying, but we need to allocate memory manually on the wasm heap
+        // to avoid a stack overflow if you pass in a very large string.
+        var lengthBytes = lengthBytesUTF8(event.target.result) + 1;
+        var stringOnWasmHeap = _malloc(lengthBytes);
+        stringToUTF8(event.target.result, stringOnWasmHeap, lengthBytes);
+
+        Module.ccall("js_LoadString", "number", ["number"], [stringOnWasmHeap]);
+
+        // ... And free it when we're done.
+        _free(stringOnWasmHeap);
+      }
+      file_reader.readAsBinaryString(event.target.files[0]);
+    }
     Module.LoadUrl = Module.cwrap("js_LoadUrl", "number", ["string"]);
   }
 

From 5a4adf1cb1c3a01d05723e2992d2ca2fc708b43e Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Wed, 4 Dec 2024 20:58:09 -0500
Subject: [PATCH 2/7] More progress. Pyodide is hooked up and we can almost
 read any file

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 CMakeLists.txt     |  6 +++++
 shell_minimal.html | 67 +++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 93382c8..2690e47 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -40,6 +40,12 @@ elseif(EMSCRIPTEN)
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -DIMGUI_DISABLE_FILE_FUNCTIONS")
   set_target_properties(raven PROPERTIES SUFFIX .html)
   target_link_libraries(raven PUBLIC ${LIBS})
+  # Make sure the shell file is rebuilt when the HTML file changes.
+  set_property(
+    TARGET raven
+    PROPERTY LINK_DEPENDS
+    ${CMAKE_CURRENT_LIST_DIR}/shell_minimal.html
+  )
 else()
   target_sources(raven PUBLIC main_glfw.cpp)
 endif()
diff --git a/shell_minimal.html b/shell_minimal.html
index 77c1ac3..836d60c 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -49,9 +49,26 @@
       _free(stringOnWasmHeap);
     }
     // https://stackoverflow.com/a/69935189
-    Module.LoadStringFromEvent = function (event) {
+    Module.LoadStringFromEvent = function (element_event) {
       const file_reader = new FileReader();
+      let file_name = element_event.target.files[0].name;
+
       file_reader.onload = (event) => {
+
+        pyodide.registerJsModule("otio_js_data", {file_name: file_name});
+
+        // Get adapter
+        var adapter = pyodide.runPython(`
+          from otio_js_data import file_name
+          import opentimelineio
+
+          adapter = opentimelineio.adapters.from_filepath(file_name)
+          timeline = opentimelineio.adapters.read_from_string(adapter, adapter_name=adapter.name)
+          opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json')
+        `)
+
+        console.log('adapter:', adapter)
+
         // This is annoying, but we need to allocate memory manually on the wasm heap
         // to avoid a stack overflow if you pass in a very large string.
         var lengthBytes = lengthBytesUTF8(event.target.result) + 1;
@@ -63,11 +80,53 @@
         // ... And free it when we're done.
         _free(stringOnWasmHeap);
       }
-      file_reader.readAsBinaryString(event.target.files[0]);
+      file_reader.readAsBinaryString(element_event.target.files[0]);
     }
     Module.LoadUrl = Module.cwrap("js_LoadUrl", "number", ["string"]);
   }
 
+  async function initializePyodide() {
+    console.log("Loading pyodide");
+    let pyodide = await loadPyodide();
+    console.log("Loaded pyodide");
+  
+    console.log("Installing micropip");
+    await pyodide.loadPackage("micropip");
+    console.log("Installed micropip");
+
+    console.log("Installing OTIO python bindings and plugins");
+    const micropip = pyodide.pyimport("micropip");
+    await micropip.install(['https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl', 'otio-svg-adapter']);
+    console.log("Installed OTIO python bindings and plugins");
+
+    // This is a hack. See https://github.com/pyodide/pyodide/pull/4836
+    pyodide._module.reportUndefinedSymbols();
+
+    window.pyodide = pyodide;
+  }
+
+  async function waitForPyodide() {
+    addRunDependency("pyodide");
+
+    if (window.pyodide) {
+      console.log("Pyodide already loaded");
+      removeRunDependency("pyodide");
+      return;
+    }
+
+    console.log("Waiting for pyodide");
+    await new Promise((resolve, reject) => {
+      let check = setInterval(() => {
+        if (window.pyodide) {
+          clearInterval(check);
+          resolve();
+        }
+      }, 50);
+    });
+    console.log("Pyodide loaded");
+    removeRunDependency("pyodide");
+  }
+
   /**
    * Once raven loads, load any OTIO timeline that was passed in.
    */
@@ -82,8 +141,8 @@
       var Module = {
         // otioLoadUrl: "",
         // otioLoadString: "",
-        preRun: [exposeRavenFunctions],
-        postRun: [ravenPostRun],
+        preRun: [exposeRavenFunctions, initializePyodide],
+        postRun: [ravenPostRun, waitForPyodide],
         print: (function() {
             return function(text) {
                 text = Array.prototype.slice.call(arguments).join(' ');

From 8048851751386f806a51ac12622eb1d4c148d837 Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Thu, 5 Dec 2024 21:30:26 -0500
Subject: [PATCH 3/7] Loading AAF is now working

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 shell_minimal.html | 53 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/shell_minimal.html b/shell_minimal.html
index 836d60c..41e8cf9 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -48,39 +48,60 @@
       // ... And free it when we're done.
       _free(stringOnWasmHeap);
     }
+
     // https://stackoverflow.com/a/69935189
     Module.LoadStringFromEvent = function (element_event) {
       const file_reader = new FileReader();
       let file_name = element_event.target.files[0].name;
 
-      file_reader.onload = (event) => {
+      file_reader.onload = (evt) => {
 
-        pyodide.registerJsModule("otio_js_data", {file_name: file_name});
+        pyodide.registerJsModule("otio_js_data", {file_name: file_name, data: evt.target.result});
 
+        console.log('file_name:', file_name);
         // Get adapter
-        var adapter = pyodide.runPython(`
-          from otio_js_data import file_name
+        let timeline_json = pyodide.runPython(`
+          import tempfile
+
+          from otio_js_data import file_name, data
           import opentimelineio
 
-          adapter = opentimelineio.adapters.from_filepath(file_name)
-          timeline = opentimelineio.adapters.read_from_string(adapter, adapter_name=adapter.name)
-          opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json')
-        `)
+          mode = 'w'
+          if not isinstance(data, str):
+              mode = 'wb'
+
+          with tempfile.NamedTemporaryFile(mode=mode, suffix="." + file_name.split(".")[-1]) as f:
+              if not isinstance(data, str):
+                  # Probably an ArrayBuffer. So convert to a memoryview
+                  # https://pyodide.org/en/stable/usage/type-conversions.html#buffers
+                  f.write(data.to_py())
+              else:
+                  f.write(data)
 
-        console.log('adapter:', adapter)
+              f.flush()
+              f.seek(0)
+
+              timeline = opentimelineio.adapters.read_from_file(f.name)
+              output = opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json', indent=0)
+          output
+        `);
 
         // This is annoying, but we need to allocate memory manually on the wasm heap
         // to avoid a stack overflow if you pass in a very large string.
-        var lengthBytes = lengthBytesUTF8(event.target.result) + 1;
+        var lengthBytes = lengthBytesUTF8(timeline_json) + 1;
         var stringOnWasmHeap = _malloc(lengthBytes);
-        stringToUTF8(event.target.result, stringOnWasmHeap, lengthBytes);
+        stringToUTF8(timeline_json, stringOnWasmHeap, lengthBytes);
 
         Module.ccall("js_LoadString", "number", ["number"], [stringOnWasmHeap]);
 
         // ... And free it when we're done.
         _free(stringOnWasmHeap);
       }
-      file_reader.readAsBinaryString(element_event.target.files[0]);
+      if (element_event.target.files[0].name.endsWith('.aaf')) {
+        file_reader.readAsArrayBuffer(element_event.target.files[0]);
+      } else {
+        file_reader.readAsBinaryString(element_event.target.files[0]);
+      }
     }
     Module.LoadUrl = Module.cwrap("js_LoadUrl", "number", ["string"]);
   }
@@ -96,7 +117,13 @@
 
     console.log("Installing OTIO python bindings and plugins");
     const micropip = pyodide.pyimport("micropip");
-    await micropip.install(['https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl', 'otio-svg-adapter']);
+    await micropip.install(
+      [
+        'https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl',
+        'otio-svg-adapter',
+        'otio-aaf-adapter',
+      ]
+    );
     console.log("Installed OTIO python bindings and plugins");
 
     // This is a hack. See https://github.com/pyodide/pyodide/pull/4836

From 66689193d2d9fb1dad22fbaaee8144f581534fa4 Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Thu, 5 Dec 2024 21:35:06 -0500
Subject: [PATCH 4/7] Install all the adapters

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 shell_minimal.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/shell_minimal.html b/shell_minimal.html
index 41e8cf9..b05ce34 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -120,8 +120,15 @@
     await micropip.install(
       [
         'https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl',
-        'otio-svg-adapter',
         'otio-aaf-adapter',
+        'otio-burnins-adapter',
+        'otio-xges-adapter',
+        'otio-ale-adapter',
+        'otio-hls-playlist-adapter',
+        'otio-fcpx-xml-adapter',
+        'otio-maya-sequencer-adapter',
+        'otio-cmx3600-adapter',
+        'otio-fcp-adapter',
       ]
     );
     console.log("Installed OTIO python bindings and plugins");

From 3d2e2685e9bb887a68774dffd0ea0dd5fa31c8b1 Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Sat, 7 Dec 2024 12:06:31 -0500
Subject: [PATCH 5/7] Fix bug that was causing the same file to always be
 loaded even if selecting a different file

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 shell_minimal.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/shell_minimal.html b/shell_minimal.html
index b05ce34..f8a5620 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -55,15 +55,10 @@
       let file_name = element_event.target.files[0].name;
 
       file_reader.onload = (evt) => {
-
-        pyodide.registerJsModule("otio_js_data", {file_name: file_name, data: evt.target.result});
-
-        console.log('file_name:', file_name);
         // Get adapter
         let timeline_json = pyodide.runPython(`
           import tempfile
 
-          from otio_js_data import file_name, data
           import opentimelineio
 
           mode = 'w'
@@ -84,7 +79,7 @@
               timeline = opentimelineio.adapters.read_from_file(f.name)
               output = opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json', indent=0)
           output
-        `);
+        `, {locals: pyodide.toPy({data: evt.target.result, file_name})});
 
         // This is annoying, but we need to allocate memory manually on the wasm heap
         // to avoid a stack overflow if you pass in a very large string.

From 3866b82ecd607e83e66292f714eb4e83dd9a04ca Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Sat, 7 Dec 2024 12:07:23 -0500
Subject: [PATCH 6/7] Simplify pyodide code by using a promise instead of a
 setInterval in a loop

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 shell_minimal.html | 84 ++++++++++++++++++++++------------------------
 1 file changed, 40 insertions(+), 44 deletions(-)

diff --git a/shell_minimal.html b/shell_minimal.html
index f8a5620..841966a 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -102,57 +102,53 @@
   }
 
   async function initializePyodide() {
-    console.log("Loading pyodide");
-    let pyodide = await loadPyodide();
-    console.log("Loaded pyodide");
-  
-    console.log("Installing micropip");
-    await pyodide.loadPackage("micropip");
-    console.log("Installed micropip");
-
-    console.log("Installing OTIO python bindings and plugins");
-    const micropip = pyodide.pyimport("micropip");
-    await micropip.install(
-      [
-        'https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl',
-        'otio-aaf-adapter',
-        'otio-burnins-adapter',
-        'otio-xges-adapter',
-        'otio-ale-adapter',
-        'otio-hls-playlist-adapter',
-        'otio-fcpx-xml-adapter',
-        'otio-maya-sequencer-adapter',
-        'otio-cmx3600-adapter',
-        'otio-fcp-adapter',
-      ]
-    );
-    console.log("Installed OTIO python bindings and plugins");
-
-    // This is a hack. See https://github.com/pyodide/pyodide/pull/4836
-    pyodide._module.reportUndefinedSymbols();
-
-    window.pyodide = pyodide;
+    window.initializePyodidePromise = new Promise(async function(resolve, reject) {
+      try {
+        console.log("Loading pyodide");
+        let pyodide = await loadPyodide();
+        console.log("Loaded pyodide");
+
+        console.log("Installing micropip");
+        await pyodide.loadPackage("micropip");
+        console.log("Installed micropip");
+
+        console.log("Installing OTIO python bindings and plugins");
+        const micropip = pyodide.pyimport("micropip");
+        await micropip.install(
+          [
+            'https://jcmorin.dev/otio-wasm/opentimelineio-0.18.0.dev1-cp312-cp312-pyodide_2024_0_wasm32.whl',
+            'otio-aaf-adapter',
+            'otio-burnins-adapter',
+            'otio-xges-adapter',
+            'otio-ale-adapter',
+            'otio-hls-playlist-adapter',
+            'otio-fcpx-xml-adapter',
+            'otio-maya-sequencer-adapter',
+            'otio-cmx3600-adapter',
+            'otio-fcp-adapter',
+          ]
+        );
+        console.log("Installed OTIO python bindings and plugins");
+
+        // This is a hack. See https://github.com/pyodide/pyodide/pull/4836
+        pyodide._module.reportUndefinedSymbols();
+
+        window.pyodide = pyodide;
+      } catch (e) {
+        console.error(e);
+        reject(e);
+      }
+      resolve();
+    });
   }
 
   async function waitForPyodide() {
     addRunDependency("pyodide");
 
-    if (window.pyodide) {
-      console.log("Pyodide already loaded");
-      removeRunDependency("pyodide");
-      return;
-    }
-
     console.log("Waiting for pyodide");
-    await new Promise((resolve, reject) => {
-      let check = setInterval(() => {
-        if (window.pyodide) {
-          clearInterval(check);
-          resolve();
-        }
-      }, 50);
-    });
+    await window.initializePyodidePromise;
     console.log("Pyodide loaded");
+
     removeRunDependency("pyodide");
   }
 

From e210ecaa0a5e2ca9d75de1b40d337a67221e538f Mon Sep 17 00:00:00 2001
From: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
Date: Sat, 7 Dec 2024 12:16:43 -0500
Subject: [PATCH 7/7] Don't use Pyodide when loading an OTIO file

Signed-off-by: Jean-Christophe Morin <jean_christophe_morin@hotmail.com>
---
 shell_minimal.html | 50 +++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/shell_minimal.html b/shell_minimal.html
index 841966a..72ca4a5 100644
--- a/shell_minimal.html
+++ b/shell_minimal.html
@@ -55,31 +55,31 @@
       let file_name = element_event.target.files[0].name;
 
       file_reader.onload = (evt) => {
-        // Get adapter
-        let timeline_json = pyodide.runPython(`
-          import tempfile
-
-          import opentimelineio
-
-          mode = 'w'
-          if not isinstance(data, str):
-              mode = 'wb'
-
-          with tempfile.NamedTemporaryFile(mode=mode, suffix="." + file_name.split(".")[-1]) as f:
-              if not isinstance(data, str):
-                  # Probably an ArrayBuffer. So convert to a memoryview
-                  # https://pyodide.org/en/stable/usage/type-conversions.html#buffers
-                  f.write(data.to_py())
-              else:
-                  f.write(data)
-
-              f.flush()
-              f.seek(0)
-
-              timeline = opentimelineio.adapters.read_from_file(f.name)
-              output = opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json', indent=0)
-          output
-        `, {locals: pyodide.toPy({data: evt.target.result, file_name})});
+        if (file_name.endsWith(".otio")) {
+          timeline_json = evt.target.result;
+        } else {
+          console.log("Loading using pyodide")
+          // Get adapter
+          timeline_json = pyodide.runPython(`
+            import tempfile
+
+            import opentimelineio
+
+            mode = 'w'
+            if not isinstance(data, str):
+                mode = 'wb'
+
+            with tempfile.NamedTemporaryFile(mode=mode, suffix="." + file_name.split(".")[-1]) as f:
+                f.write(data)
+
+                f.flush()
+                f.seek(0)
+
+                timeline = opentimelineio.adapters.read_from_file(f.name)
+                output = opentimelineio.adapters.write_to_string(timeline, adapter_name='otio_json', indent=0)
+            output
+          `, {locals: pyodide.toPy({data: evt.target.result, file_name})});
+        }
 
         // This is annoying, but we need to allocate memory manually on the wasm heap
         // to avoid a stack overflow if you pass in a very large string.