Use ZipFS for web player asset bundle (#15924)

* wip

* fix mount path

* Fix path for zip bundle

* fix case where idbfs sets up correctly and filesystem initializes too early

* Use partfiles to keep each zip small

* use bufferview slices instead of resize to support firefox

pkg/emscripten/libretro/index.html

@@ -109,7 +109,7 @@
                            <a class="dropdown-item" href="." data-core="vice_xscpu64">VICE xscpu4</a>
                            <a class="dropdown-item" href="." data-core="vice_xvic">VICE xVIC</a>
                            <a class="dropdown-item" href="." data-core="vitaquake2">Vita Quake2</a>
-                           <a class="dropdown-item" href="." data-core="vitaquake2-roque">Vita Quake2 (rogue)</a>
+                           <a class="dropdown-item" href="." data-core="vitaquake2-rogue">Vita Quake2 (rogue)</a>
                            <a class="dropdown-item" href="." data-core="vitaquake2-xatrix">Vita Quake2 (xatrix)</a>
                            <a class="dropdown-item" href="." data-core="vitaquake2-zaero">Vita Quake2 (zaero)</a>
                            <a class="dropdown-item" href="." data-core="virtualjaguar">Virtual Jaguar</a>

pkg/emscripten/libretro/libretro.js

@@ -125,7 +125,6 @@ function idbfsInit()
             //fallback to imfs
             afs = new BrowserFS.FileSystem.InMemory();
             console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
-            setupFileSystem("browser");
             appInitialized();
          }
          else
@@ -137,7 +136,6 @@ function idbfsInit()
                {
                   afs = new BrowserFS.FileSystem.InMemory();
                   console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
-                  setupFileSystem("browser");
                   appInitialized();
                }
                else
@@ -157,17 +155,17 @@ function idbfsSyncComplete()
    $('#icnLocal').addClass('fa-check');
    console.log("WEBPLAYER: idbfs setup successful");
 
-   setupFileSystem("browser");
    appInitialized();
 }
 
 function appInitialized()
 {
-     /* Need to wait for both the file system and the wasm runtime 
+     /* Need to wait for the file system, the wasm runtime, and the zip download
         to complete before enabling the Run button. */
      initializationCount++;
-     if (initializationCount == 2)
+     if (initializationCount == 3)
      {
+         setupFileSystem("browser");
          preLoadingComplete();
      }
  }
@@ -183,6 +181,34 @@ function preLoadingComplete()
   $('#btnRun').removeClass('disabled');
 }
 
+var zipTOC;
+
+function zipfsInit() {
+  // 256 MB max bundle size
+  let buffer = new ArrayBuffer(256*1024*1024);
+  let bufferView = new Uint8Array(buffer);
+  let idx = 0;
+  // bundle should be in four parts (this can be changed later)
+  Promise.all([fetch("assets/frontend/bundle.zip.aa"),
+               fetch("assets/frontend/bundle.zip.ab"),
+               fetch("assets/frontend/bundle.zip.ac"),
+               fetch("assets/frontend/bundle.zip.ad")
+              ]).then(function(resps) {
+    Promise.all(resps.map((r) => r.arrayBuffer())).then(function(buffers) {
+      for (let buf of buffers) {
+        if (idx+buf.byteLength > buffer.maxByteLength) {
+          console.log("WEBPLAYER: error: bundle.zip is too large");
+        }
+        bufferView.set(new Uint8Array(buf), idx, buf.byteLength);
+        idx += buf.byteLength;
+      }
+      BrowserFS.FileSystem.ZipFS.computeIndex(BrowserFS.BFSRequire('buffer').Buffer(new Uint8Array(buffer, 0, idx)), function(toc) {
+        zipTOC = toc;
+        appInitialized();
+      });
+    })
+  });
+}
 function setupFileSystem(backend)
 {
    /* create a mountable filesystem that will server as a root
@@ -190,8 +216,7 @@ function setupFileSystem(backend)
    var mfs =  new BrowserFS.FileSystem.MountableFileSystem();
 
    /* create an XmlHttpRequest filesystem for the bundled data */
-   var xfs1 =  new BrowserFS.FileSystem.XmlHttpRequest
+   var xfs1 = new BrowserFS.FileSystem.ZipFS(zipTOC);
-      (".index-xhr", "assets/frontend/bundle/");
    /* create an XmlHttpRequest filesystem for core assets */
    var xfs2 =  new BrowserFS.FileSystem.XmlHttpRequest
       (".index-xhr", "assets/cores/");
@@ -199,7 +224,7 @@ function setupFileSystem(backend)
    console.log("WEBPLAYER: initializing filesystem: " + backend);
    mfs.mount('/home/web_user/retroarch/userdata', afs);
 
-   mfs.mount('/home/web_user/retroarch/bundle', xfs1);
+   mfs.mount('/home/web_user/retroarch/', xfs1);
    mfs.mount('/home/web_user/retroarch/userdata/content/downloads', xfs2);
    BrowserFS.initialize(mfs);
    var BFS = new BrowserFS.EmscriptenFS(Module.FS, Module.PATH, Module.ERRNO_CODES);
@@ -363,6 +388,7 @@ function loadCore(core) {
          $('#lblDrop').removeClass('active');
          $('#lblLocal').addClass('active');
          idbfsInit();
+         zipfsInit();
       }).catch(err => { console.error("Couldn't instantiate module",err); throw err; });
    }).catch(err => { console.error("Couldn't load script",err); throw err; });
 }