Add support for python adapters when compiling with emscripten

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()

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);
             }

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,9 +48,119 @@
       // ... 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 = (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'
+          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
+        `);
+
+        // 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(timeline_json) + 1;
+        var stringOnWasmHeap = _malloc(lengthBytes);
+        stringToUTF8(timeline_json, stringOnWasmHeap, lengthBytes);
+
+        Module.ccall("js_LoadString", "number", ["number"], [stringOnWasmHeap]);
+
+        // ... And free it when we're done.
+        _free(stringOnWasmHeap);
+      }
+      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"]);
   }
 
+  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;
+  }
+
+  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.
    */
@@ -64,8 +175,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(' ');