mirror of
https://github.com/imputnet/cobalt.git
synced 2025-02-09 15:08:17 +00:00
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:
parent
70339b7ae9
commit
97d381e993
web
i18n
en
ru
src
components
save/buttons
settings
sidebar
lib/i18n
routes
3
web/i18n/en/a11y/general.json
Normal file
3
web/i18n/en/a11y/general.json
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"back": "go back"
|
||||||
|
}
|
|
@ -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
3
web/i18n/en/general.json
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"cobalt": "cobalt"
|
||||||
|
}
|
|
@ -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
82
web/i18n/en/settings.json
Normal 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 isn’t 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."
|
||||||
|
}
|
3
web/i18n/ru/a11y/general.json
Normal file
3
web/i18n/ru/a11y/general.json
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"back": "назад"
|
||||||
|
}
|
|
@ -1,3 +1,9 @@
|
||||||
{
|
{
|
||||||
"linkArea": "зона вставки ссылки"
|
"linkArea": "зона вставки ссылки",
|
||||||
|
"clearInput": "clear input",
|
||||||
|
"download": "скачать",
|
||||||
|
"downloadThink": "обрабатываю ссылку...",
|
||||||
|
"downloadCheck": "проверяю загрузку...",
|
||||||
|
"downloadDone": "загрузка завершена!",
|
||||||
|
"downloadError": "ошибка загрузки"
|
||||||
}
|
}
|
||||||
|
|
3
web/i18n/ru/general.json
Normal file
3
web/i18n/ru/general.json
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"cobalt": "кобальт"
|
||||||
|
}
|
|
@ -4,5 +4,6 @@
|
||||||
"auto": "авто",
|
"auto": "авто",
|
||||||
"audio": "аудио",
|
"audio": "аудио",
|
||||||
"mute": "без звука",
|
"mute": "без звука",
|
||||||
"inputPlaceholder": "вставь ссылку сюда"
|
"inputPlaceholder": "вставь ссылку сюда",
|
||||||
|
"termsNote": "продолжая, ты соглашаешься с условиями и этикой использования"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 isn’t available, closest one is picked instead.`;
|
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
|
||||||
const codecDescription = `if preferred codec isn’t 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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue