web/settings/metadata: basic filename preview component

web/i18n/en/settings.json

@@ -65,6 +65,9 @@
     "metadata.filename.nerdy": "nerdy",
     "metadata.filename.description": "filename style using which cobalt files will be downloaded. this description is temporary as there's no dynamic preview component yet.",
 
+    "metadata.filename.preview.video": "Video Title",
+    "metadata.filename.preview.audio": "Audio Title - Audio Author",
+
     "metadata.file": "file metadata",
     "metadata.disable.title": "disable file metadata",
     "metadata.disable.description": "title, artist, and other info will not be added to the file.",

web/src/components/settings/FilenamePreview.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import settings from "$lib/state/settings";
+    import { t } from "$lib/i18n/translations";
+
+    let videoFilePreview: string;
+    let audioFilePreview: string;
+
+    const videoTitle = $t("settings.metadata.filename.preview.video");
+    const audioTitle = $t("settings.metadata.filename.preview.audio");
+
+    const infoBase = ["youtube", "dQw4w9WgXcQ"];
+
+    const fullResolution = {
+        "2160": "3840x2160",
+        "1440": "2560x1440",
+        "1080": "1920x1080",
+        "720": "1280x720",
+        "480": "854x480",
+        "360": "640x360",
+        "240": "426x240",
+        "144": "256x144",
+    };
+
+    let { downloadMode, youtubeVideoCodec, audioFormat, videoQuality } =
+        $settings.save;
+
+    let youtubeVideoExt = youtubeVideoCodec === "vp9" ? "webm" : "mp4";
+
+    audioFormat = audioFormat !== "best" ? audioFormat : "opus";
+    videoQuality = videoQuality !== "max" ? videoQuality : "2160";
+
+    if (youtubeVideoCodec === "h264" && Number(videoQuality) > 1080) {
+        videoQuality = "1080";
+    }
+
+    let classicTags = infoBase.concat([
+        fullResolution[videoQuality],
+        youtubeVideoCodec,
+    ]);
+
+    let basicTags = [`${videoQuality}p`, youtubeVideoCodec];
+
+    if (downloadMode === "mute") {
+        classicTags.push("mute");
+        basicTags.push("mute");
+    }
+
+    $: switch ($settings.save.filenameStyle) {
+        case "classic":
+            videoFilePreview = classicTags.join("_");
+            audioFilePreview = "youtube_dQw4w9WgXcQ_audio";
+            break;
+        case "basic":
+            videoFilePreview = `${videoTitle} (${basicTags.join(", ")})`;
+            audioFilePreview = audioTitle;
+            break;
+        case "pretty":
+            videoFilePreview = `${videoTitle} (${[...basicTags, infoBase[0]].join(", ")})`;
+            audioFilePreview = `${audioTitle} (${infoBase[0]})`;
+            break;
+        case "nerdy":
+            videoFilePreview = `${videoTitle} (${basicTags.concat(infoBase).join(", ")})`;
+            audioFilePreview = `${audioTitle} (${infoBase.join(", ")})`;
+            break;
+    }
+</script>
+
+<div id="filename-preview">
+    <div id="filename-preview-video">
+        {videoFilePreview}.{youtubeVideoExt}
+    </div>
+    <div id="filename-preview-audio">
+        {audioFilePreview}.{audioFormat}
+    </div>
+</div>
+
+<style>
+    #filename-preview {
+        font-size: 14px;
+        font-weight: 500;
+        padding: 0 var(--padding);
+    }
+</style>

web/src/routes/settings/save/metadata/+page.svelte

@@ -7,6 +7,7 @@
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import FilenamePreview from "$components/settings/FilenamePreview.svelte";
 </script>
 
 <SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>
@@ -24,6 +25,7 @@
             </SettingsButton>
         {/each}
     </Switcher>
+    <FilenamePreview />
 </SettingsCategory>
 
 <SettingsCategory