From 591903cab35dfe1e746d388dc3f16487ef545d42 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Thu, 3 Oct 2024 09:33:44 -0700
Subject: [PATCH] make suggested improvements per @wukko

---
 web/src/lib/remux.ts                       | 49 ++++++++++++++++++
 web/src/routes/settings/debug/+page.svelte | 59 ++++++++++++++++------
 2 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 web/src/lib/remux.ts

diff --git a/web/src/lib/remux.ts b/web/src/lib/remux.ts
new file mode 100644
index 00000000..81e8e74e
--- /dev/null
+++ b/web/src/lib/remux.ts
@@ -0,0 +1,49 @@
+import mime from "mime";
+import LibAVWrapper from "$lib/libav";
+
+let speed;
+let processedDuration;
+
+const ff = new LibAVWrapper(progress => {
+    if (progress.out_time_sec) {
+        processedDuration = progress.out_time_sec;
+    }
+
+    if (progress.speed) {
+        speed = progress.speed;
+    }
+});
+
+ff.init();
+
+export const silentRemux = async (file: File) => {
+    if (file instanceof File && !file.type) {
+        file = new File([file], file.name, {
+            type: mime.getType(file.name) ?? undefined,
+        });
+    }
+
+    const render = await ff
+        .render({
+            blob: file,
+            args: ["-c", "copy", "-map", "0"],
+        })
+        .catch((e) => {
+            console.error("uh-oh! render error");
+            console.error(e);
+        });
+
+    if (!render) {
+        return console.log("not a valid file");
+    }
+
+    const filenameParts = file.name.split(".");
+    const filenameExt = filenameParts.pop();
+
+    const filename = `${filenameParts.join(".")} (remux).${filenameExt}`;
+
+    return new File([render], filename, {
+        type: render.type
+    })
+
+}
\ No newline at end of file
diff --git a/web/src/routes/settings/debug/+page.svelte b/web/src/routes/settings/debug/+page.svelte
index 5dc0d32f..33efd2d7 100644
--- a/web/src/routes/settings/debug/+page.svelte
+++ b/web/src/routes/settings/debug/+page.svelte
@@ -2,7 +2,7 @@
     import { onMount } from "svelte";
     import { goto } from "$app/navigation";
 
-    import ActionButton from "$components/buttons/ActionButton.svelte";
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
 
     import { t } from "$lib/i18n/translations";
     import { copyURL } from "$lib/download";
@@ -40,24 +40,27 @@
 {#if $settings.advanced.debug}
     <div id="debug-page">
         {#each sections as { title, data }, i}
-            <h3>{title}:</h3>
+            <div id="debug-section-title">
+                <h3>{title}</h3>
+
+                <button
+                    id="debug-section-copy-button"
+                    aria-label={lastCopiedSection === i
+                        ? $t("button.copied")
+                        : $t("button.copy")}
+                    on:click={() => {
+                        clearTimeout(lastCopiedSectionResetTimeout);
+                        lastCopiedSection = i;
+                        copyURL(JSON.stringify(data, null, 2));
+                    }}
+                >
+                    <CopyIcon regularIcon check={lastCopiedSection === i} />
+                </button>
+            </div>
 
             <div class="json-block subtext">
                 {JSON.stringify(data, null, 2)}
             </div>
-
-            <ActionButton
-                id="copy-button"
-                click={() => {
-                    clearTimeout(lastCopiedSectionResetTimeout);
-                    lastCopiedSection = i;
-                    copyURL(JSON.stringify(data, null, 2));
-                }}
-            >
-                {lastCopiedSection === i
-                    ? $t("button.copied")
-                    : $t("button.copy")}
-            </ActionButton>
         {/each}
     </div>
 {/if}
@@ -70,6 +73,32 @@
         gap: var(--padding);
     }
 
+    #debug-section-title {
+        display: flex;
+        flex-direction: start;
+        align-items: center;
+        gap: 0.4rem;
+    }
+
+    #debug-section-copy-button {
+        background: transparent;
+        padding: 2px;
+        box-shadow: none;
+        border-radius: 5px;
+        transition: opacity 0.2s;
+        opacity: 0.7;
+    }
+
+    #debug-section-copy-button :global(.copy-animation) {
+        width: 17px;
+        height: 17px;
+    }
+
+    #debug-section-copy-button :global(.copy-animation *) {
+        width: 17px;
+        height: 17px;
+    }
+
     .json-block {
         display: flex;
         flex-direction: column;