From af428bc9647aac4e995ac7ac532d01b925c042b1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 13 Aug 2024 14:17:10 +0600
Subject: [PATCH] web: stylize the file receiver, move text to i18n, update
 remux page

---
 web/i18n/en/receiver.json                     |   5 +
 web/i18n/en/remux.json                        |   3 +
 web/src/components/misc/FileReceiver.svelte   | 114 ++++++++++++++++++
 web/src/components/misc/OpenFileButton.svelte |  29 -----
 web/src/lib/i18n/translations.ts              |   1 +
 web/src/routes/remux/+page.svelte             |  40 +++++-
 6 files changed, 160 insertions(+), 32 deletions(-)
 create mode 100644 web/i18n/en/receiver.json
 create mode 100644 web/i18n/en/remux.json
 create mode 100644 web/src/components/misc/FileReceiver.svelte
 delete mode 100644 web/src/components/misc/OpenFileButton.svelte

diff --git a/web/i18n/en/receiver.json b/web/i18n/en/receiver.json
new file mode 100644
index 00000000..567e569f
--- /dev/null
+++ b/web/i18n/en/receiver.json
@@ -0,0 +1,5 @@
+{
+    "title": "drag or select a file",
+    "title.drop": "drop the file here!",
+    "accept": "supported formats: {{ formats }}."
+}
diff --git a/web/i18n/en/remux.json b/web/i18n/en/remux.json
new file mode 100644
index 00000000..e2afbcc9
--- /dev/null
+++ b/web/i18n/en/remux.json
@@ -0,0 +1,3 @@
+{
+    "description": "remuxing media files is fast, lossless, and often fixes compatibility issues with old software. files are processed on-device and never get uploaded anywhere."
+}
diff --git a/web/src/components/misc/FileReceiver.svelte b/web/src/components/misc/FileReceiver.svelte
new file mode 100644
index 00000000..7310afa7
--- /dev/null
+++ b/web/src/components/misc/FileReceiver.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+    import IconFileUpload from "@tabler/icons-svelte/IconFileUpload.svelte";
+
+    export let file: File;
+    export let draggedOver = false;
+    export let acceptTypes: string[];
+    export let acceptExtensions: string[];
+
+    const openFile = async () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = acceptTypes.join(",");
+
+        fileInput.click();
+
+        fileInput.onchange = async (e: Event) => {
+            const target = e.target as HTMLInputElement;
+
+            if (target.files?.length === 1) {
+                file = target.files[0];
+                return file;
+            }
+        };
+    };
+</script>
+
+<div class="open-file-container" class:dragged-over={draggedOver}>
+    <Meowbalt emotion="question" />
+
+    <button class="open-file-button" on:click={() => openFile()}>
+        <div class="open-file-icon">
+            <IconFileUpload />
+        </div>
+
+        <div class="open-file-text">
+            <div class="open-title">
+                {#if draggedOver}
+                    {$t("receiver.title.drop")}
+                {:else}
+                    {$t("receiver.title")}
+                {/if}
+            </div>
+            <div class="subtext accept-list">
+                {$t("receiver.accept", {
+                    formats: acceptExtensions.join(", ")
+                })}
+            </div>
+        </div>
+    </button>
+</div>
+
+<style>
+    .open-file-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .open-file-button {
+        flex-direction: column;
+        padding: 36px;
+        border-radius: 24px;
+        box-shadow: none;
+        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%236E6E6E60' stroke-width='5' stroke-dasharray='10%2c20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+
+        transition: box-shadow 0.2s;
+    }
+
+    .open-file-container :global(.meowbalt) {
+        clip-path: inset(0px 0px 16px 0px);
+        margin-bottom: -16px;
+
+        transition: clip-path 0.2s, margin-bottom 0.2s;
+    }
+
+    .dragged-over .open-file-button {
+        box-shadow:
+            0 0 0 2px var(--button-hover-transparent) inset,
+            0 0 50px 10px var(--button-hover);
+    }
+
+    .dragged-over :global(.meowbalt) {
+        clip-path: inset(0px 0px 9px 0px);
+        margin-bottom: -9px;
+    }
+
+    .open-file-icon {
+        display: flex;
+    }
+
+    .open-file-icon :global(svg) {
+        width: 52px;
+        height: 52px;
+        stroke-width: 1.5px;
+    }
+
+    .open-file-text {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .open-title {
+        font-size: 18px;
+    }
+
+    .accept-list {
+        max-width: 250px;
+        font-size: 14px;
+    }
+</style>
diff --git a/web/src/components/misc/OpenFileButton.svelte b/web/src/components/misc/OpenFileButton.svelte
deleted file mode 100644
index f7421876..00000000
--- a/web/src/components/misc/OpenFileButton.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    export let file: File;
-    export let draggedOver = false;
-
-    const openFile = async () => {
-        const fileInput = document.createElement("input");
-        fileInput.type = "file";
-        fileInput.accept = "video/*,audio/*";
-
-        fileInput.click();
-
-        fileInput.onchange = async (e: Event) => {
-            const target = e.target as HTMLInputElement;
-
-            if (target.files?.length === 1) {
-                file = target.files[0];
-                return file;
-            }
-        };
-    };
-</script>
-
-<button on:click={() => openFile()}>
-    {#if draggedOver}
-        drop the file!
-    {:else}
-        open the file
-    {/if}
-</button>
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 9bdefaa7..21ed9abf 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -24,6 +24,7 @@ for (const [path, loader] of Object.entries(locFiles)) {
 const defaultLocale = 'en';
 const config: Config<{
     value?: string;
+    formats?: string;
 }> = {
     fallbackLocale: defaultLocale,
     translations: Object.keys(parsedLocfiles).reduce((obj, lang) => {
diff --git a/web/src/routes/remux/+page.svelte b/web/src/routes/remux/+page.svelte
index 7c570ff1..ccef6ac2 100644
--- a/web/src/routes/remux/+page.svelte
+++ b/web/src/routes/remux/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import LibAVWrapper from "$lib/libav";
     import { openURL } from "$lib/download";
+    import { t } from "$lib/i18n/translations";
 
     import DragDropArea from "$components/misc/DragDropArea.svelte";
-    import OpenFileButton from "$components/misc/OpenFileButton.svelte";
+    import OpenFileButton from "$components/misc/FileReceiver.svelte";
 
     let draggedOver = false;
     let file: File;
@@ -20,7 +21,7 @@
         if (render) {
             openURL(URL.createObjectURL(render));
         } else {
-            console.log("not a valid file")
+            console.log("not a valid file");
         }
     };
 
@@ -30,7 +31,25 @@
 </script>
 
 <DragDropArea id="remux-container" bind:draggedOver bind:file>
-    <OpenFileButton bind:draggedOver bind:file />
+    <div id="remux-inner">
+        <OpenFileButton
+            bind:draggedOver
+            bind:file
+            acceptTypes={["video/*", "audio/*"]}
+            acceptExtensions={[
+                "mp4",
+                "webm",
+                "mp3",
+                "ogg",
+                "opus",
+                "wav",
+                "m4a",
+            ]}
+        />
+        <div class="subtext remux-description">
+            {$t("remux.description")}
+        </div>
+    </div>
 </DragDropArea>
 
 <style>
@@ -40,4 +59,19 @@
         align-items: center;
         width: 100%;
     }
+
+    #remux-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        max-width: 450px;
+        text-align: center;
+        gap: 32px;
+    }
+
+    .remux-description {
+        font-size: 14px;
+        line-height: 1.5;
+    }
 </style>