web/remux: warn user & terminate libav before switching tabs

warning about aborting processing will be shown before navigating away from remuxing tab

web/i18n/en/button.json

@@ -13,5 +13,7 @@
     "star": "star",
     "follow": "follow",
     "save": "save",
-    "export": "export"
+    "export": "export",
+    "yes": "yes",
+    "no": "no"
 }

web/i18n/en/dialog.json

@@ -17,5 +17,8 @@
     "api.override.title": "processing instance override",
     "api.override.body": "{{ value }} is now the processing instance. if you don't trust it, press \"cancel\" and it'll be ignored.\n\nyou can change your choice later in processing settings.",
 
-    "safety.custom_instance.body": "custom instances can potentially pose privacy & safety risks.\n\nbad instances can:\n1. redirect you away from cobalt and try to scam you.\n2. log all information about your requests, store it forever, and use it to track you.\n3. serve you malicious files (such as malware).\n4. force you to watch ads, or make you pay for downloading.\n\nafter this point, we can't protect you. please be mindful of what instances to use and always trust your gut. if anything feels off, come back to this page, reset the custom instance, and report it to us on github."
+    "safety.custom_instance.body": "custom instances can potentially pose privacy & safety risks.\n\nbad instances can:\n1. redirect you away from cobalt and try to scam you.\n2. log all information about your requests, store it forever, and use it to track you.\n3. serve you malicious files (such as malware).\n4. force you to watch ads, or make you pay for downloading.\n\nafter this point, we can't protect you. please be mindful of what instances to use and always trust your gut. if anything feels off, come back to this page, reset the custom instance, and report it to us on github.",
+
+    "processing.ongoing": "cobalt is currently processing media in this tab. going away will abort it. are you sure you want to do this?",
+    "processing.title.ongoing": "processing will be cancelled"
 }

web/src/lib/libav.ts

@@ -24,6 +24,13 @@ export default class LibAVWrapper {
         }
     }
 
+    async terminate() {
+        if (this.libav) {
+            const libav = await this.libav;
+            libav.terminate();
+        }
+    }
+
     async probe(blob: Blob) {
         if (!this.libav) throw new Error("LibAV wasn't initialized");
         const libav = await this.libav;
@@ -173,7 +180,7 @@ export default class LibAVWrapper {
                 await libav.unlink(outputName);
                 await libav.unlink('progress.txt');
                 await libav.unlinkreadaheadfile("input");
-            } catch {}
+            } catch { /* catch & ignore */ }
         }
     }
 

web/src/routes/remux/+page.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
     import mime from "mime";
     import LibAVWrapper from "$lib/libav";
-    import { browser } from "$app/environment";
-    import { beforeNavigate } from "$app/navigation";
+    import { beforeNavigate, goto } from "$app/navigation";
 
-    import { device } from "$lib/device";
     import { t } from "$lib/i18n/translations";
     import { createDialog } from "$lib/dialogs";
     import { downloadFile } from "$lib/download";
@@ -22,6 +20,8 @@
     let speed: number | undefined;
     let progress: string | undefined;
 
+    let wentAway = false;
+
     $: {
         if (totalDuration && processedDuration) {
             const percentage = Math.max(
@@ -136,10 +136,7 @@
             if (!render) {
                 return console.log("not a valid file");
             }
-
-            return await downloadFile({
-                file,
-            })
+            return await downloadFile({ file });
         } finally {
             processing = false;
             file = undefined;
@@ -148,23 +145,40 @@
         }
     };
 
-    const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
-        event.preventDefault();
-    };
-
     beforeNavigate((event) => {
-        if (processing) {
+        if (processing && !wentAway) {
             event.cancel();
-            //TODO: show a popup with an option to kill ongoing processing
+            const path = event.to?.route?.id;
+
+            if (path) {
+                return createDialog({
+                    id: "remux-ongoing",
+                    type: "small",
+                    icon: "warn-red",
+                    title: $t("dialog.processing.title.ongoing"),
+                    bodyText: $t("dialog.processing.ongoing"),
+                    buttons: [
+                        {
+                            text: $t("button.no"),
+                            main: false,
+                            action: () => {},
+                        },
+                        {
+                            text: $t("button.yes"),
+                            main: true,
+                            color: "red",
+                            action: async () => {
+                                await ff.terminate();
+                                wentAway = true;
+                                goto(path);
+                            },
+                        },
+                    ],
+                });
+            }
         }
     });
 
-    $: if (browser && processing) {
-        window.addEventListener("beforeunload", beforeUnloadHandler);
-    } else if (browser) {
-        window.removeEventListener("beforeunload", beforeUnloadHandler);
-    }
-
     $: if (file) {
         render();
     }