web: stylize the file receiver, move text to i18n, update remux page

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>