web: move all strings to i18n & improve a11y

- omnibox is now fully usable with a screen reader
- back button is now interpreted as such
- subtext now accepts line breaks
This commit is contained in:
wukko 2024-07-03 23:54:44 +06:00
parent 70339b7ae9
commit 97d381e993
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
25 changed files with 282 additions and 90 deletions

View file

@ -0,0 +1,3 @@
{
"back": "go back"
}

View file

@ -1,3 +1,9 @@
{ {
"linkArea": "link input area" "linkArea": "link input area",
"clearInput": "clear input",
"download": "download",
"downloadThink": "processing the link...",
"downloadCheck": "verifying download...",
"downloadDone": "downloading done",
"downloadError": "downloading error"
} }

3
web/i18n/en/general.json Normal file
View file

@ -0,0 +1,3 @@
{
"cobalt": "cobalt"
}

View file

@ -4,5 +4,6 @@
"auto": "auto", "auto": "auto",
"audio": "audio", "audio": "audio",
"mute": "mute", "mute": "mute",
"inputPlaceholder": "paste the link here" "inputPlaceholder": "paste the link here",
"termsNote": "by continuing you agree to terms and ethics of use"
} }

82
web/i18n/en/settings.json Normal file
View file

@ -0,0 +1,82 @@
{
"page.appearance": "appearance",
"page.video": "video",
"page.audio": "audio",
"page.metadata": "metadata",
"section.general": "general",
"section.save": "save",
"theme": "theme",
"theme.auto": "auto",
"theme.light": "light",
"theme.dark": "dark",
"theme.description": "auto theme automatically switches between light and dark themes depending on your device's current theme.",
"video.quality": "preferred video quality",
"video.quality.max": "8k+",
"video.quality.2160": "4k",
"video.quality.1440": "1440p",
"video.quality.1080": "1080p",
"video.quality.720": "720p",
"video.quality.480": "480p",
"video.quality.360": "360p",
"video.quality.240": "240p",
"video.quality.144": "144p",
"video.quality.description": "if preferred video quality isn't available, closest best is picked instead.",
"video.youtube.codec": "preferred youtube video codec",
"video.youtube.codec.h264": "h264 (mp4)",
"video.youtube.codec.av1": "av1 (mp4)",
"video.youtube.codec.vp9": "vp9 (webm)",
"video.youtube.codec.description": "if preferred codec isnt available, next best is picked instead. \n\nh264: best support, average detail level. max quality is 1080p. \nav1: best quality, small file size, most detail. supports 8k & HDR. \nvp9: same quality as av1, but file is approximately two times bigger. supports 4k & HDR.",
"video.twitter.gif": "twitter/x",
"video.twitter.gif.title": "convert looping videos to GIF",
"video.twitter.gif.description": "GIF conversion is very inefficient, converted file may be obnoxiously big and low quality.",
"video.tiktok.h265": "tiktok",
"video.tiktok.h265.title": "prefer HEVC/H265 format",
"video.tiktok.h265.description": "allows 1080p video downloading at cost of compatibility.",
"audio.format": "preferred audio format",
"audio.format.best": "best",
"audio.format.mp3": "mp3",
"audio.format.ogg": "ogg",
"audio.format.wav": "wav",
"audio.format.opus": "opus",
"audio.format.description": "every format but \"best\" is converted, meaning that they're lossy. if preferred format matches best available audio, it won't be converted.",
"audio.youtube.dub": "youtube",
"audio.youtube.dub.title": "use browser language for dubbed videos",
"audio.youtube.dub.description": "works even if cobalt isn't translated to your language.",
"audio.tiktok.original": "tiktok",
"audio.tiktok.original.title": "use original sound",
"audio.tiktok.original.description": "downloads original sound used in the post without any additional changes by the post's author.",
"metadata.filename": "filename style",
"metadata.filename.classic": "classic",
"metadata.filename.basic": "basic",
"metadata.filename.pretty": "pretty",
"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.file": "file metadata",
"metadata.disable.title": "disable file metadata",
"metadata.disable.description": "title, artist, and other info will not be added to the file.",
"saving.method": "saving method",
"saving.ask.title": "ask how to save",
"saving.ask.description": "offer you several ways to save the file instead of opening it in a new tab.",
"accessibility": "accessibility",
"accessibility.transparency.title": "reduce visual transparency",
"accessibility.transparency.description": "reduces transparency of surfaces and disables blur effects.",
"accessibility.animations.title": "reduce animations",
"accessibility.animations.description": "replaces rapid animations with smooth transitions when possible.",
"language": "language",
"language.auto.title": "use default browser language",
"language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead."
}

View file

@ -0,0 +1,3 @@
{
"back": "назад"
}

View file

@ -1,3 +1,9 @@
{ {
"linkArea": "зона вставки ссылки" "linkArea": "зона вставки ссылки",
"clearInput": "clear input",
"download": "скачать",
"downloadThink": "обрабатываю ссылку...",
"downloadCheck": "проверяю загрузку...",
"downloadDone": "загрузка завершена!",
"downloadError": "ошибка загрузки"
} }

3
web/i18n/ru/general.json Normal file
View file

@ -0,0 +1,3 @@
{
"cobalt": "кобальт"
}

View file

@ -4,5 +4,6 @@
"auto": "авто", "auto": "авто",
"audio": "аудио", "audio": "аудио",
"mute": "без звука", "mute": "без звука",
"inputPlaceholder": "вставь ссылку сюда" "inputPlaceholder": "вставь ссылку сюда",
"termsNote": "продолжая, ты соглашаешься с условиями и этикой использования"
} }

View file

@ -1,9 +1,11 @@
<script> <script>
export let click; import { t } from "$lib/i18n/translations";
import IconX from '@tabler/icons-svelte/IconX.svelte'; import IconX from '@tabler/icons-svelte/IconX.svelte';
export let click;
</script> </script>
<button id="clear-button" on:click={click}> <button id="clear-button" on:click={click} aria-label={$t("a11y.save.clearInput")}>
<IconX color="var(--secondary)" size="16px"/> <IconX color="var(--secondary)" size="16px"/>
</button> </button>

View file

@ -1,46 +1,53 @@
<script lang="ts"> <script lang="ts">
import '@fontsource-variable/noto-sans-mono'; import "@fontsource-variable/noto-sans-mono";
import API from "$lib/api"; import API from "$lib/api";
import { device } from '$lib/device'; import { device } from "$lib/device";
import { t } from "$lib/i18n/translations";
export let url: string; export let url: string;
$: buttonText = '>>'; $: buttonText = ">>";
$: buttonAltText = $t('a11y.save.download');
$: isDisabled = false; $: isDisabled = false;
const changeDownloadButton = (state: string) => { const changeDownloadButton = (state: string) => {
isDisabled = true; isDisabled = true;
switch(state) { switch (state) {
case "think": case "think":
buttonText = '...'; buttonText = "...";
buttonAltText = $t('a11y.save.downloadThink');
break; break;
case "check": case "check":
buttonText = '..?'; buttonText = "..?";
buttonAltText = $t('a11y.save.downloadCheck');
break; break;
case "done": case "done":
buttonText = '>>>'; buttonText = ">>>";
buttonAltText = $t('a11y.save.downloadDone');
break; break;
case "error": case "error":
buttonText = '!!'; buttonText = "!!";
buttonAltText = $t('a11y.save.downloadError');
break; break;
} }
} };
const restoreDownloadButton = () => { const restoreDownloadButton = () => {
setTimeout(() => { setTimeout(() => {
buttonText = '>>'; buttonText = ">>";
isDisabled = false; isDisabled = false;
}, 2500) buttonAltText = $t('a11y.save.download');
} }, 2500);
};
const downloadFile = (url: string) => { const downloadFile = (url: string) => {
if (device.is.iOS) { if (device.is.iOS) {
return navigator?.share({ url }).catch(() => {}); return navigator?.share({ url }).catch(() => {});
} else { } else {
return window.open(url, '_blank'); return window.open(url, "_blank");
} }
} };
// alerts are temporary, we don't have an error popup yet >_< // alerts are temporary, we don't have an error popup yet >_<
export const download = async (link: string) => { export const download = async (link: string) => {
@ -52,7 +59,7 @@
changeDownloadButton("error"); changeDownloadButton("error");
restoreDownloadButton(); restoreDownloadButton();
return alert("couldn't access the api") return alert("couldn't access the api");
} }
if (response.status === "error" || response.status === "rate-limit") { if (response.status === "error" || response.status === "rate-limit") {
@ -89,7 +96,12 @@
}; };
</script> </script>
<button id="download-button" disabled={isDisabled} on:click={() => download(url)}> <button
id="download-button"
disabled={isDisabled}
on:click={() => download(url)}
aria-label={buttonAltText}
>
<span id="download-state">{buttonText}</span> <span id="download-state">{buttonText}</span>
</button> </button>
@ -120,7 +132,8 @@
#download-state { #download-state {
font-size: 24px; font-size: 24px;
font-family: "Noto Sans Mono Variable", "Noto Sans Mono", "IBM Plex Mono", monospace; font-family: "Noto Sans Mono Variable", "Noto Sans Mono",
"IBM Plex Mono", monospace;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;

View file

@ -1,9 +1,11 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations";
export let sectionTitle: string; export let sectionTitle: string;
</script> </script>
<section id="settings-section"> <section id="settings-section">
<div id="settings-section-title">{sectionTitle}</div> <div id="settings-section-title">{$t(`settings.section.${sectionTitle}`)}</div>
<div id="settings-section-categories"> <div id="settings-section-categories">
<slot></slot> <slot></slot>
</div> </div>

View file

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
import { t } from "$lib/i18n/translations";
import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte"; import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
export let tabName: string; export let tabName: string;
@ -20,7 +22,7 @@
<div class="tab-icon" style="background: var(--{iconColor})"> <div class="tab-icon" style="background: var(--{iconColor})">
<slot></slot> <slot></slot>
</div> </div>
<span>{tabName}</span> <span>{$t(`settings.page.${tabName}`)}</span>
</div> </div>
<div class="settings-tab-chevron"> <div class="settings-tab-chevron">
<IconChevronRight /> <IconChevronRight />

View file

@ -13,6 +13,7 @@
align-items: center; align-items: center;
padding: calc(var(--padding) * 2 - 2px); padding: calc(var(--padding) * 2 - 2px);
} }
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
#cobalt-logo { #cobalt-logo {
display: none; display: none;

View file

@ -46,6 +46,27 @@ export const config: Config = {
await import(`$i18n/en/a11y/meowbalt.json`) await import(`$i18n/en/a11y/meowbalt.json`)
).default, ).default,
}, },
{
locale: 'en',
key: 'settings',
loader: async () => (
await import(`$i18n/en/settings.json`)
).default,
},
{
locale: 'en',
key: 'general',
loader: async () => (
await import(`$i18n/en/general.json`)
).default,
},
{
locale: 'en',
key: 'a11y.general',
loader: async () => (
await import(`$i18n/en/a11y/general.json`)
).default,
},
{ {
locale: 'ru', locale: 'ru',
@ -82,6 +103,20 @@ export const config: Config = {
await import(`$i18n/ru/a11y/meowbalt.json`) await import(`$i18n/ru/a11y/meowbalt.json`)
).default, ).default,
}, },
{
locale: 'ru',
key: 'general',
loader: async () => (
await import(`$i18n/ru/general.json`)
).default,
},
{
locale: 'ru',
key: 'a11y.general',
loader: async () => (
await import(`$i18n/ru/a11y/general.json`)
).default,
},
], ],
}; };

View file

@ -297,5 +297,6 @@
color: var(--gray); color: var(--gray);
line-height: 1.4; line-height: 1.4;
padding: 0 var(--padding); padding: 0 var(--padding);
white-space: pre-line;
} }
</style> </style>

View file

@ -1,10 +1,12 @@
<script> <script>
import { t } from "$lib/i18n/translations";
import Omnibox from "$components/save/Omnibox.svelte"; import Omnibox from "$components/save/Omnibox.svelte";
import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte"; import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
</script> </script>
<svelte:head> <svelte:head>
<title>cobalt</title> <title>{$t("general.cobalt")}</title>
</svelte:head> </svelte:head>
<div id="cobalt-save-container" class="center-column-container"> <div id="cobalt-save-container" class="center-column-container">
@ -13,7 +15,7 @@
<Omnibox /> <Omnibox />
</main> </main>
<div id="terms-note"> <div id="terms-note">
by continuing you agree to terms and ethics of use {$t("save.termsNote")}
</div> </div>
</div> </div>

View file

@ -1,10 +1,12 @@
<script> <script>
import { t } from "$lib/i18n/translations";
import Placeholder from "$components/misc/Placeholder.svelte"; import Placeholder from "$components/misc/Placeholder.svelte";
</script> </script>
<svelte:head> <svelte:head>
<title> <title>
cobalt: about {$t("general.cobalt")}: {$t("tabs.about")}
</title> </title>
</svelte:head> </svelte:head>

View file

@ -1,10 +1,12 @@
<script> <script>
import { t } from "$lib/i18n/translations";
import Placeholder from "$components/misc/Placeholder.svelte"; import Placeholder from "$components/misc/Placeholder.svelte";
</script> </script>
<svelte:head> <svelte:head>
<title> <title>
cobalt: donate {$t("general.cobalt")}: {$t("tabs.donate")}
</title> </title>
</svelte:head> </svelte:head>

View file

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
import { t } from "$lib/i18n/translations";
import SettingsTab from "$components/settings/SettingsTab.svelte"; import SettingsTab from "$components/settings/SettingsTab.svelte";
import SettingsSection from "$components/settings/SettingsSection.svelte"; import SettingsSection from "$components/settings/SettingsSection.svelte";
@ -16,7 +18,7 @@
$: currentPageTitle = $page.url.pathname.split("/").at(-1); $: currentPageTitle = $page.url.pathname.split("/").at(-1);
$: stringPageTitle = $: stringPageTitle =
currentPageTitle !== "settings" ? `/ ${currentPageTitle}` : ""; currentPageTitle !== "settings" ? ` / ${$t(`settings.page.${currentPageTitle}`)}` : "";
$: isMobile = screenWidth <= 750; $: isMobile = screenWidth <= 750;
$: isHome = $page.url.pathname === `/settings`; $: isHome = $page.url.pathname === `/settings`;
@ -24,7 +26,7 @@
<svelte:head> <svelte:head>
<title> <title>
cobalt: settings {stringPageTitle} {$t("general.cobalt")}: {$t("tabs.settings")}{stringPageTitle}
</title> </title>
</svelte:head> </svelte:head>
@ -35,19 +37,26 @@
<div id="settings-header" class:back-visible={!isHome && isMobile}> <div id="settings-header" class:back-visible={!isHome && isMobile}>
{#if isMobile} {#if isMobile}
{#if !isHome} {#if !isHome}
<a class="back-button" href="/settings"> <a
class="back-button"
href="/settings"
role="button"
aria-label={$t("a11y.general.back")}
>
<IconChevronLeft /> <IconChevronLeft />
</a> </a>
{/if} {/if}
<h3 id="settings-page-title" aria-level="1"> <h3 id="settings-page-title" aria-level="1">
settings {$t("tabs.settings")}
{#if !isHome} {#if !isHome}
<span class="title-slash"> / </span> <span class="title-slash"> / </span>
{currentPageTitle} {$t(`settings.page.${currentPageTitle}`)}
{/if} {/if}
</h3> </h3>
{:else} {:else}
<h2 id="settings-page-title" aria-level="1">settings</h2> <h2 id="settings-page-title" aria-level="1">
{$t("tabs.settings")}
</h2>
{/if} {/if}
</div> </div>
<nav id="settings-navigation" class:visible-mobile={isMobile && isHome}> <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>

View file

@ -1,44 +1,54 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations";
import { themeOptions } from "$lib/types/settings";
import SettingsCategory from "$components/settings/SettingsCategory.svelte"; import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte"; import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte"; import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte"; import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { themeOptions } from "$lib/types/settings";
import LanguageDropdown from "$components/settings/LanguageDropdown.svelte"; import LanguageDropdown from "$components/settings/LanguageDropdown.svelte";
</script> </script>
<SettingsCategory title="theme"> <SettingsCategory
title={$t("settings.theme")}
description={$t("settings.theme.description")}
>
<Switcher big={true}> <Switcher big={true}>
{#each themeOptions as value} {#each themeOptions as value}
<SettingsButton settingContext="appearance" settingId="theme" settingValue={value}> <SettingsButton
{value} settingContext="appearance"
settingId="theme"
settingValue={value}
>
{$t(`settings.theme.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="accessibility"> <SettingsCategory title={$t("settings.accessibility")}>
<SettingsToggle <SettingsToggle
settingContext="accessibility" settingContext="accessibility"
settingId="reduceTransparency" settingId="reduceTransparency"
title="reduce visual transparency" title={$t("settings.accessibility.transparency.title")}
description="disables blur effects and reduces transparency of surfaces." description={$t("settings.accessibility.transparency.description")}
/> />
<SettingsToggle <SettingsToggle
settingContext="accessibility" settingContext="accessibility"
settingId="reduceAnimations" settingId="reduceAnimations"
title="reduce animations" title={$t("settings.accessibility.animations.title")}
description="replaces rapid animations with smooth transitions." description={$t("settings.accessibility.animations.description")}
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="language"> <SettingsCategory title={$t("settings.language")}>
<LanguageDropdown /> <LanguageDropdown />
<SettingsToggle <SettingsToggle
settingContext="appearance" settingContext="appearance"
settingId="autoLanguage" settingId="autoLanguage"
title="use default browser language" title={$t("settings.language.auto.title")}
description="automatically picks the best language for you. if preferred browser language isn't available, english is used instead." description={$t("settings.language.auto.description")}
/> />
</SettingsCategory> </SettingsCategory>

View file

@ -1,42 +1,42 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations";
import { audioFormatOptions } from "$lib/types/settings";
import SettingsCategory from "$components/settings/SettingsCategory.svelte"; import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte"; import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte"; import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte"; import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { audioFormatOptions } from "$lib/types/settings";
const audioDescription = `cobalt converts every format but "best", therefore all formats but "best" will be lossy.`;
</script> </script>
<SettingsCategory <SettingsCategory
title="preferred audio format" title={$t("settings.audio.format")}
description="{audioDescription}" description={$t("settings.audio.format.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each audioFormatOptions as value} {#each audioFormatOptions as value}
<SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}> <SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}>
{value} {$t(`settings.audio.format.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="youtube"> <SettingsCategory title={$t("settings.audio.youtube.dub")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="youtubeDubBrowserLang" settingId="youtubeDubBrowserLang"
title="use browser language for dubbed videos" title={$t("settings.audio.youtube.dub.title")}
description="works even if cobalt ui isn't translated to your language." description={$t("settings.audio.youtube.dub.description")}
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="tiktok"> <SettingsCategory title={$t("settings.audio.tiktok.original")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="tiktokFullAudio" settingId="tiktokFullAudio"
title="use original sound" title={$t("settings.audio.tiktok.original.title")}
description="downloads original sound used in the post without any additional changes by the post's author." description={$t("settings.audio.tiktok.original.description")}
/> />
</SettingsCategory> </SettingsCategory>

View file

@ -1,40 +1,42 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations";
import { filenameStyleOptions } from "$lib/types/settings";
import SettingsCategory from "$components/settings/SettingsCategory.svelte"; import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte"; import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte"; import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte"; import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { filenameStyleOptions } from "$lib/types/settings";
</script> </script>
<SettingsCategory <SettingsCategory
title="filename style" title={$t("settings.metadata.filename")}
description="very cool description for every style. bla bla bla." description={$t("settings.metadata.filename.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each filenameStyleOptions as value} {#each filenameStyleOptions as value}
<SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}> <SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}>
{value} {$t(`settings.metadata.filename.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="file metadata"> <SettingsCategory title={$t("settings.metadata.file")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="disableMetadata" settingId="disableMetadata"
title="disable file metadata" title={$t("settings.metadata.disable.title")}
description="cobalt won't add title, artist, and other info to the file." description={$t("settings.metadata.disable.description")}
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="saving method"> <SettingsCategory title={$t("settings.saving.method")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="downloadPopup" settingId="downloadPopup"
title="ask how to save" title={$t("settings.saving.ask.title")}
description="cobalt will offer you several ways to save the file instead of opening it in a new tab." description={$t("settings.saving.ask.description")}
/> />
</SettingsCategory> </SettingsCategory>

View file

@ -1,24 +1,23 @@
<script lang="ts"> <script lang="ts">
import SettingsCategory from "$components/settings/SettingsCategory.svelte"; import { t } from "$lib/i18n/translations";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { videoQualityOptions } from "$lib/types/settings"; import { videoQualityOptions } from "$lib/types/settings";
import { youtubeVideoCodecOptions } from "$lib/types/settings"; import { youtubeVideoCodecOptions } from "$lib/types/settings";
const videoDescription = `if preferred quality isnt available, closest one is picked instead.`; import SettingsCategory from "$components/settings/SettingsCategory.svelte";
const codecDescription = `if preferred codec isnt available, next best is picked instead.`; import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
</script> </script>
<SettingsCategory <SettingsCategory
title="preferred video quality" title={$t("settings.video.quality")}
description="{videoDescription}" description={$t("settings.video.quality.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each videoQualityOptions as value} {#each videoQualityOptions as value}
<SettingsButton settingContext="save" settingId="videoQuality" settingValue={value}> <SettingsButton settingContext="save" settingId="videoQuality" settingValue={value}>
{value} {$t(`settings.video.quality.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
@ -26,33 +25,33 @@
</SettingsCategory> </SettingsCategory>
<SettingsCategory <SettingsCategory
title="preferred youtube codec" title={$t("settings.video.youtube.codec")}
description="{codecDescription}" description={$t("settings.video.youtube.codec.description")}
> >
<Switcher big={true}> <Switcher big={true}>
{#each youtubeVideoCodecOptions as value} {#each youtubeVideoCodecOptions as value}
<SettingsButton settingContext="save" settingId="youtubeVideoCodec" settingValue={value}> <SettingsButton settingContext="save" settingId="youtubeVideoCodec" settingValue={value}>
{value} {$t(`settings.video.youtube.codec.${value}`)}
</SettingsButton> </SettingsButton>
{/each} {/each}
</Switcher> </Switcher>
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="twitter"> <SettingsCategory title={$t("settings.video.twitter.gif")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="twitterGif" settingId="twitterGif"
title="convert looping videos to GIF" title={$t("settings.video.twitter.gif.title")}
description="GIF conversion is very lossy, end result may be low quality." description={$t("settings.video.twitter.gif.description")}
/> />
</SettingsCategory> </SettingsCategory>
<SettingsCategory title="tiktok"> <SettingsCategory title={$t("settings.video.tiktok.h265")}>
<SettingsToggle <SettingsToggle
settingContext="save" settingContext="save"
settingId="tiktokH265" settingId="tiktokH265"
title="prefer HEVC/H265 format" title={$t("settings.video.tiktok.h265.title")}
description="allows 1080p video downloading at cost of compatibility." description={$t("settings.video.tiktok.h265.description")}
/> />
</SettingsCategory> </SettingsCategory>

View file

@ -1,10 +1,12 @@
<script> <script>
import { t } from "$lib/i18n/translations";
import Placeholder from "$components/misc/Placeholder.svelte"; import Placeholder from "$components/misc/Placeholder.svelte";
</script> </script>
<svelte:head> <svelte:head>
<title> <title>
cobalt: updates {$t("general.cobalt")}: {$t("tabs.donate")}
</title> </title>
</svelte:head> </svelte:head>