web/workers: use opfs instead of blobs for better memory management

spent almost an entire day figuring this out but it's so worth it

web/src/lib/workers/fetch.ts

@@ -1,3 +1,5 @@
+import { OPFSStorage } from "$lib/storage";
+
 const error = (code: string) => {
     // TODO: return proper errors and code here
     self.postMessage({
@@ -22,20 +24,21 @@ const fetchFile = async (url: string) => {
         const totalBytes = contentLength ? parseInt(contentLength, 10) : null;
         const reader = response.body?.getReader();
 
+        const storage = await OPFSStorage.init();
+
         if (!reader) {
             error("no reader");
             return self.close();
         }
 
         let receivedBytes = 0;
-        const chunks = [];
 
         while (true) {
             const { done, value } = await reader.read();
             if (done) break;
 
+            await storage.write(value, receivedBytes);
             receivedBytes += value.length;
-            chunks.push(value);
 
             if (totalBytes) {
                 self.postMessage({
@@ -52,15 +55,22 @@ const fetchFile = async (url: string) => {
             return self.close();
         }
 
-        const file = new File(chunks, "file", { type: contentType });
+        const file = await storage.res();
+
+        if (Number(contentLength) !== file.size) {
+            error("file is not downloaded fully");
+        }
 
         self.postMessage({
             cobaltFetchWorker: {
-                file
+                result: {
+                    file,
+                    type: contentType,
+                }
             }
         });
     } catch (e) {
-        console.log(e)
+        console.log(e);
         error("error when downloading the file");
         return self.close();
     }

web/src/lib/workers/remux.ts

@@ -1,5 +1,7 @@
 import LibAVWrapper from "$lib/libav";
+
 import type { FileInfo } from "$lib/types/libav";
+import type { CobaltFileReference } from "$lib/types/storage";
 
 const error = (code: string) => {
     self.postMessage({
@@ -25,14 +27,17 @@ const ff = new LibAVWrapper((progress) => {
 
 ff.init();
 
-const remux = async (files: File[], args: string[], output: FileInfo, filename: string) => {
+const remux = async (files: CobaltFileReference[], args: string[], output: FileInfo, filename: string) => {
     if (!(files && output && args)) return;
 
     await ff.init();
 
     try {
         // probing just the first file in files array (usually audio) for duration progress
-        const file_info = await ff.probe(files[0]).catch((e) => {
+        const probeFile = files[0]?.file;
+        if (!probeFile) return error("couldn't probe one of files");
+
+        const file_info = await ff.probe(probeFile).catch((e) => {
             if (e?.message?.toLowerCase().includes("out of memory")) {
                 console.error("uh oh! out of memory");
                 console.error(e);
@@ -87,6 +92,7 @@ const remux = async (files: File[], args: string[], output: FileInfo, filename:
         });
     } catch (e) {
         console.log(e);
+        return error("remux.crashed");
     }
 }