RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: translations 

god this was hell
This commit is contained in:
Maya 2025-07-25 20:46:07 +03:00
parent ce6f1f723a
commit dff9c94ed5
No known key found for this signature in database
15 changed files with 333 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
messages/en.json
View File

@ -1,8 +1,153 @@
{
"$schema": "https://inlang.com/schema/inlang-message-format",
"upload": {},
"convert": {},
"settings": {},
"about": {},
"toasts": {}
"upload": {
"title": "The file converter you'll love.",
"subtitle": "All image, audio, and document processing is done on your device. Videos are converted on our lightning-fast servers. No file size limit, no ads, and completely open source.",
"supports_title": "VERT supports...",
"images": "Images",
"audio": "Audio",
"documents": "Documents",
"video": "Video",
"video_server_processing": "Video uploads to a server for processing by default, learn how to set it up locally [wiki_link]here[/wiki_link].",
"local_supported": "Local fully supported",
"status": "Status:",
"ready": "ready",
"not_ready": "not ready",
"supported_formats": "Supported formats:",
"tooltip": {
"partial_support": "This format can only be converted as {direction}.",
"direction_input": "input (from)",
"direction_output": "output (to)"
}
},
"convert": {
"panel": {
"convert_all": "Convert all",
"download_all": "Download all as .zip",
"remove_all": "Remove all files",
"set_all_to": "Set all to",
"na": "N/A"
},
"tooltips": {
"unknown_file": "Unknown file type",
"audio_file": "Audio file",
"video_file": "Video file",
"document_file": "Document file",
"image_file": "Image file",
"convert_file": "Convert this file",
"download_file": "Download this file"
},
"errors": {
"cant_convert": "We can't convert this file.",
"vertd_server": "what are you doing..? you're supposed to run the vertd server!",
"unsupported_format": "Only image, video, audio, and document files are supported",
"vertd_not_found": "Could not find the vertd instance to start video conversion. Are you sure the instance URL is set correctly?"
}
},
"settings": {
"title": "Settings",
"errors": {
"save_failed": "Failed to save settings!"
},
"appearance": {
"title": "Appearance",
"brightness_theme": "Brightness theme",
"brightness_description": "Want a sunny flash-bang, or a quiet lonely night?",
"light": "Light",
"dark": "Dark",
"effect_settings": "Effect settings",
"effect_description": "Would you like fancy effects, or a more static experience?",
"enable": "Enable",
"disable": "Disable"
},
"conversion": {
"title": "Conversion",
"filename_format": "File name format",
"filename_description": "This will determine the name of the file on download, <b>not including the file extension.</b> You can put these following templates in the format, which will be replaced with the relevant information: <b>%name%</b> for the original file name, <b>%extension%</b> for the original file extension, and <b>%date%</b> for a date string of when the file was converted.",
"placeholder": "VERT_%name%"
},
"vertd": {
"title": "Video conversion",
"status": "status:",
"loading": "loading...",
"available": "available, commit id {commitId}",
"unavailable": "unavailable (is the url right?)",
"description": "The <code>vertd</code> project is a server wrapper for FFmpeg. This allows you to convert videos through the convenience of VERT's web interface, while still being able to harness the power of your GPU to do it as quickly as possible.",
"hosting_info": "We host a public instance for your convenience, but it is quite easy to host your own on your PC or server if you know what you are doing. You can download the server binaries [vertd_link]here[/vertd_link] - the process of setting this up will become easier in the future, so stay tuned!",
"instance_url": "Instance URL",
"url_placeholder": "Example: http://localhost:24153",
"conversion_speed": "Conversion speed",
"speed_description": "This describes the tradeoff between speed and quality. Faster speeds will result in lower quality, but will get the job done quicker.",
"speeds": {
"very_slow": "Very Slow",
"slower": "Slower",
"slow": "Slow",
"medium": "Medium",
"fast": "Fast",
"ultra_fast": "Ultra Fast"
}
},
"privacy": {
"title": "Privacy",
"plausible_title": "Plausible analytics",
"plausible_description": "We use [plausible_link]Plausible[/plausible_link], a privacy-focused analytics tool, to gather completely anonymous statistics. All data is anonymized and aggregated, and no identifiable information is ever sent or stored. You can view the analytics [analytics_link]here[/analytics_link] and choose to opt out below.",
"opt_in": "Opt-in",
"opt_out": "Opt-out"
}
},
"about": {
"title": "About",
"why": {
"title": "Why VERT?",
"description": "<b>File converters have always disappointed us.</b> They're ugly, riddled with ads, and most importantly; slow. We decided to solve this problem once and for all by making an alternative that solves all those problems, and more.<br/><br/>All non-video files are converted completely on-device; this means that there's no delay between sending and receiving the files from a server, and we never get to snoop on the files you convert. Video files get uploaded to our lightning-fast RTX 4000 Ada server.<br/><br/>Your videos stay on there for an hour if you do not convert them. If you do convert the file, the video will stay on the server for an hour, or until it is downloaded. The file will then be deleted from our server."
},
"sponsors": {
"title": "Sponsors",
"description": "Want to support us? Contact a developer in the [discord_link]Discord[/discord_link] server, or send an email to",
"email_copied": "Email copied to clipboard!"
},
"resources": {
"title": "Resources",
"discord": "Discord",
"source": "Source",
"email": "Email"
},
"donate": {
"title": "Donate to VERT",
"description": "With your support, we can keep maintaining and improving VERT.",
"one_time": "One-time",
"monthly": "Monthly",
"custom": "Custom",
"pay_now": "Pay now",
"donate_amount": "Donate ${amount} USD",
"thank_you": "Thank you for your donation!",
"payment_failed": "Payment failed: {message}{period} You have not been charged.",
"donation_error": "An error occurred while processing your donation. Please try again later.",
"payment_error": "Error fetching payment details. Please try again later."
},
"credits": {
"title": "Credits",
"contact_team": "If you would like to contact the development team, please use the email found on the \"Resources\" card.",
"notable_contributors": "Notable contributors",
"notable_description": "We'd like to thank these people for their major contributions to VERT.",
"github_contributors": "GitHub contributors",
"github_description": "Big [jpegify_link]thanks[/jpegify_link] to all these people for helping out! [github_link]Want to help too?[/github_link]",
"no_contributors": "Seems like no one has contributed yet... [contribute_link]be the first to contribute![/contribute_link]",
"libraries": "Libraries",
"libraries_description": "A big thanks to FFmpeg (audio, video), ImageMagick (images) and Pandoc (documents) for maintaining such excellent libraries for so many years. VERT relies on them to provide you with your conversions.",
"roles": {
"lead_developer": "Lead developer; conversion backend, UI implementation",
"developer": "Developer; UI implementation",
"designer": "Designer; UX, branding, marketing",
"docker_ci": "Maintaining Docker & CI support",
"former_cofounder": "Former co-founder & designer"
}
},
"errors": {
"github_contributors": "Error fetching GitHub contributors"
}
},
"toasts": {
"hello": "world"
}
}

13
src/lib/components/functional/ConversionPanel.svelte
View File

@ -7,6 +7,7 @@
import ProgressBar from "../visual/ProgressBar.svelte";
import FormatDropdown from "./FormatDropdown.svelte";
import { categories } from "$lib/converters";
import { m } from "$lib/paraglide/messages";
const length = $derived(files.files.length);
const progress = $derived(files.files.filter((f) => f.result).length);
@ -27,7 +28,7 @@
disabled={!files.ready}
>
<RefreshCw size="24" />
<p>Convert all</p>
<p>{m["convert.panel.convert_all"]()}</p>
</button>
<button
class="btn {$effects
@ -37,7 +38,7 @@
onclick={() => files.downloadAll()}
>
<FolderArchiveIcon size="24" />
<p>Download all as .zip</p>
<p>{m["convert.panel.download_all"]()}</p>
</button>
{#if $isMobile}
<button
@ -48,10 +49,10 @@
onclick={() => (files.files = [])}
>
<Trash2Icon size="24" />
<p>Remove all files</p>
<p>{m["convert.panel.remove_all"]()}</p>
</button>
{:else}
<Tooltip text="Remove all files" position="right">
<Tooltip text={m["convert.panel.remove_all"]()} position="right">
<button
class="btn p-4 {$effects
? ''
@ -66,7 +67,7 @@
</div>
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
<div class="flex items-center gap-2">
<p class="whitespace-nowrap text-xl">Set all to</p>
<p class="whitespace-nowrap text-xl">{m["convert.panel.set_all_to"]()}</p>
{#if files.requiredConverters.length === 1}
<FormatDropdown
onselect={(r) =>
@ -79,7 +80,7 @@
{categories}
/>
{:else}
<Dropdown options={["N/A"]} disabled />
<Dropdown options={[m["convert.panel.na"]()]} disabled />
{/if}
</div>
</div>

57
src/lib/sections/about/Credits.svelte
View File

@ -2,6 +2,8 @@
import Panel from "$lib/components/visual/Panel.svelte";
import { HeartHandshakeIcon } from "lucide-svelte";
import { GITHUB_URL_VERT } from "$lib/consts";
import { m } from "$lib/paraglide/messages";
import { link } from "$lib/paraglide";
let { mainContribs, notableContribs, ghContribs } = $props();
</script>
@ -51,12 +53,11 @@
<div class="rounded-full bg-blue-300 p-2 inline-block mr-3 w-10 h-10">
<HeartHandshakeIcon color="black" />
</div>
Credits
{m["about.credits.title"]()}
</h2>
<p class="-mt-4 -mb-3 font-black text-lg">
If you would like to contact the development team, please use the email
found on the "Resources" card.
{m["about.credits.contact_team"]()}
</p>
<!-- Main contributors -->
@ -72,11 +73,12 @@
<!-- Notable contributors -->
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h2 class="text-base font-bold">Notable contributors</h2>
<h2 class="text-base font-bold">
{m["about.credits.notable_contributors"]()}
</h2>
<div class="flex flex-col gap-2">
<p class="text-base text-muted font-normal">
We'd like to thank these people for their major
contributions to VERT.
{m["about.credits.notable_description"]()}
</p>
<div class="flex flex-col gap-2">
{#each notableContribs as contrib}
@ -90,34 +92,24 @@
<!-- GitHub contributors -->
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h2 class="text-base font-bold">GitHub contributors</h2>
<h2 class="text-base font-bold">
{m["about.credits.github_contributors"]()}
</h2>
{#if ghContribs && ghContribs.length > 0}
<p class="text-base text-muted font-normal">
Big <a
class="text-black dynadark:text-white"
href="/jpegify">thanks</a
>
to all these people for helping out!
<a
class="text-blue-500 font-normal hover:underline"
href={GITHUB_URL_VERT}
target="_blank"
rel="noopener noreferrer"
>
Want to help too?
</a>
{@html link(
["jpegify_link", "github_link"],
m["about.credits.github_description"](),
["/jpegify", GITHUB_URL_VERT],
)}
</p>
{:else}
<p class="text-base text-muted font-normal italic">
Seems like no one has contributed yet...
<a
class="text-blue-500 font-normal hover:underline"
href={GITHUB_URL_VERT}
target="_blank"
rel="noopener noreferrer"
>
be the first to contribute!
</a>
{@html link(
"contribute_link",
m["about.credits.no_contributors"](),
GITHUB_URL_VERT,
)}
</p>
{/if}
</div>
@ -131,12 +123,9 @@
</div>
{/if}
<h2 class="mt-2 -mb-2">Libraries</h2>
<h2 class="mt-2 -mb-2">{m["about.credits.libraries"]()}</h2>
<p class="font-normal">
A big thanks to FFmpeg (audio, video), Imagemagick (images) and
Pandoc (documents) for maintaining such excellent libraries for
so many years. VERT relies on them to provide you with your
conversions.
{m["about.credits.libraries_description"]()}
</p>
</div>
</div></Panel

37
src/lib/sections/about/Donate.svelte
View File

@ -35,9 +35,10 @@
HeartIcon,
WalletIcon,
} from "lucide-svelte";
import { onMount, tick } from "svelte";
import { onMount } from "svelte";
import { Elements, PaymentElement } from "svelte-stripe";
import { quintOut } from "svelte/easing";
import { m } from "$lib/paraglide/messages";
let amount = $state(1);
let customAmount = $state("");
@ -68,7 +69,7 @@
paymentState = "prepay";
addToast(
"error",
"Error fetching payment details. Please try again later.",
m["about.donate.payment_error"](),
);
return;
}
@ -98,9 +99,13 @@
const submitResult = await elements.submit();
if (submitResult.error) {
const period = submitResult.error.message?.endsWith(".") ? "" : ".";
addToast(
"error",
`Payment failed: ${submitResult.error.message}${submitResult.error.message?.endsWith(".") ? "" : "."} You have not been charged.`,
m["about.donate.payment_failed"]({
message: submitResult.error.message || "",
period
}),
);
enablePay = true;
return;
@ -116,12 +121,16 @@
});
if (res.error) {
const period = res.error.message?.endsWith(".") ? "" : ".";
addToast(
"error",
`Payment failed: ${res.error.message}${res.error.message?.endsWith(".") ? "" : "."} You have not been charged.`,
m["about.donate.payment_failed"]({
message: res.error.message || "",
period
}),
);
} else {
addToast("success", "Thank you for your donation!");
addToast("success", m["about.donate.thank_you"]());
}
paymentState = "prepay";
@ -140,12 +149,12 @@
if (status) {
switch (status) {
case "succeeded":
addToast("success", "Thank you for your donation!");
addToast("success", m["about.donate.thank_you"]());
break;
default:
addToast(
"error",
"An error occurred while processing your donation. Please try again later.",
m["about.donate.donation_error"](),
);
}
@ -162,10 +171,10 @@
>
<HeartIcon color="black" />
</div>
Donate to VERT
{m["about.donate.title"]()}
</h2>
<p class="text-base font-normal">
With your support, we can keep maintaining and improving VERT.
{m["about.donate.description"]()}
</p>
</div>
@ -192,7 +201,7 @@
)}
>
<HandCoinsIcon size="24" class="inline-block mr-2" />
One-time
{m["about.donate.one_time"]()}
</button>
<button
@ -207,7 +216,7 @@
)}
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
{m["about.donate.monthly"]()}
</button>
</div>
<div class="grid grid-cols-4 gap-3 w-full">
@ -229,7 +238,7 @@
<div class="flex items-center justify-center">
<FancyInput
bind:value={customAmount}
placeholder="Custom"
placeholder={m["about.donate.custom"]()}
prefix="$"
type="number"
/>
@ -288,7 +297,7 @@
class="btn w-full h-12 bg-accent-red text-black rounded-full mt-4"
onclick={donate}
>
Donate ${amount.toFixed(2)} USD
{m["about.donate.donate_amount"]({ amount: amount.toFixed(2) })}
</button>
</div>
</div>
@ -304,7 +313,7 @@
class="row-start-1 col-start-1 flex justify-center items-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay now
{m["about.donate.pay_now"]()}
</div>
{/if}
</div>

9
src/lib/sections/about/Resources.svelte
View File

@ -8,6 +8,7 @@
MailIcon,
MessageCircleMoreIcon,
} from "lucide-svelte";
import { m } from "$lib/paraglide/messages";
</script>
<Panel class="flex flex-col gap-4 p-6">
@ -17,7 +18,7 @@
>
<LinkIcon color="black" />
</div>
Resources
{m["about.resources.title"]()}
</h2>
<div class="flex gap-3">
<a
@ -29,7 +30,7 @@
: '!scale-100'} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord
{m["about.resources.discord"]()}
</a>
<a
href={GITHUB_URL_VERT}
@ -40,7 +41,7 @@
: '!scale-100'} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source
{m["about.resources.source"]()}
</a>
<a
href="mailto:{CONTACT_EMAIL}"
@ -51,7 +52,7 @@
: '!scale-100'} flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<MailIcon size="24" class="inline-block mr-2" />
Email
{m["about.resources.email"]()}
</a>
</div>
</Panel>

16
src/lib/sections/about/Sponsors.svelte
View File

@ -5,6 +5,8 @@
import { DISCORD_URL } from "$lib/consts";
import { error } from "$lib/logger";
import { addToast } from "$lib/store/ToastProvider";
import { m } from "$lib/paraglide/messages";
import { link } from "$lib/paraglide";
let copied = false;
let timeoutId: number | undefined;
@ -13,7 +15,7 @@
try {
navigator.clipboard.writeText("hello@vert.sh");
copied = true;
addToast("success", "Email copied to clipboard!");
addToast("success", m["about.sponsors.email_copied"]());
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => (copied = false), 2000);
@ -30,7 +32,7 @@
>
<PiggyBankIcon color="black" />
</div>
Sponsors
{m["about.sponsors.title"]()}
</h2>
<div class="mt-2 [&>*]:font-normal h-full flex justify-between flex-col">
<div class="flex gap-3 justify-center text-lg">
@ -43,11 +45,11 @@
</a>
</div>
<p class="text-muted">
Want to support us? Contact a developer in the <a
href={DISCORD_URL}
target="_blank">Discord</a
>
server, or send an email to
{@html link(
"discord_link",
m["about.sponsors.description"](),
DISCORD_URL,
)}
<span class="inline-block mx-[2px] relative top-[2px]">
<button
id="email"

18
src/lib/sections/about/Why.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { MessageCircleQuestionIcon } from "lucide-svelte";
import { m } from "$lib/paraglide/messages";
</script>
<Panel class="flex flex-col gap-3 p-6">
@ -10,22 +11,9 @@
>
<MessageCircleQuestionIcon color="black" />
</div>
Why VERT?
{m["about.why.title"]()}
</h2>
<p class="text-lg font-normal">
<b>File converters have always disappointed us.</b> They're ugly,
riddled with ads, and most importantly; slow. We decided to solve this
problem once and for all by making an alternative that solves all those
problems, and more.<br />
<br />
All non-video files are converted completely on-device; this means that there's
no delay between sending and receiving the files from a server, and we never
get to snoop on the files you convert.
<br />
<br />
Video files get uploaded to our lightning-fast RTX 4000 Ada server. Your
videos stay on there for an hour if you do not convert them. If you do convert
the file, the video will stay on the server for an hour, or until it is downloaded.
The file will then be deleted from our server.
{@html m["about.why.description"]()}
</p>
</Panel>

20
src/lib/sections/settings/Appearance.svelte
View File

@ -14,6 +14,7 @@
SunIcon,
} from "lucide-svelte";
import { onMount, onDestroy } from "svelte";
import { m } from "$lib/paraglide/messages";
let lightElement: HTMLButtonElement;
let darkElement: HTMLButtonElement;
@ -70,14 +71,14 @@
class="inline-block -mt-1 mr-2 bg-accent-purple p-2 rounded-full"
color="black"
/>
Appearance
{m["settings.appearance.title"]()}
</h2>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-base font-bold">Brightness theme</p>
<p class="text-base font-bold">{m["settings.appearance.brightness_theme"]()}</p>
<p class="text-sm text-muted font-normal italic">
Want a sunny flash-bang, or a quiet lonely night?
{m["settings.appearance.brightness_description"]()}
</p>
</div>
<div class="flex flex-col gap-3 w-full">
@ -88,7 +89,7 @@
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<SunIcon size="24" class="inline-block mr-2" />
Light
{m["settings.appearance.light"]()}
</button>
<button
@ -97,17 +98,16 @@
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black flex items-center justify-center"
>
<MoonIcon size="24" class="inline-block mr-2" />
Dark
{m["settings.appearance.dark"]()}
</button>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-base font-bold">Effect settings</p>
<p class="text-base font-bold">{m["settings.appearance.effect_settings"]()}</p>
<p class="text-sm text-muted font-normal italic">
Would you like fancy effects, or a more static
experience?
{m["settings.appearance.effect_description"]()}
</p>
</div>
<div class="flex flex-col gap-3 w-full">
@ -118,7 +118,7 @@
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
Enable
{m["settings.appearance.enable"]()}
</button>
<button
@ -127,7 +127,7 @@
class="btn {$effects ? "" : "!scale-100"} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />
Disable
{m["settings.appearance.disable"]()}
</button>
</div>
</div>

18
src/lib/sections/settings/Conversion.svelte
View File

@ -3,6 +3,7 @@
import Panel from "$lib/components/visual/Panel.svelte";
import { RefreshCwIcon } from "lucide-svelte";
import type { ISettings } from "./index.svelte";
import { m } from "$lib/paraglide/messages";
const { settings }: { settings: ISettings } = $props();
</script>
@ -15,25 +16,14 @@
class="inline-block -mt-1 mr-2 bg-accent p-2 rounded-full"
color="black"
/>
Conversion
{m["settings.conversion.title"]()}
</h2>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-base font-bold">File name format</p>
<p class="text-base font-bold">{m["settings.conversion.filename_format"]()}</p>
<p class="text-sm text-muted font-normal">
This will determine the name of the file on download, <span
class="font-bold italic"
>not including the file extension.</span
>
You can put these following templates in the format, which
will be replaced with the relevant information:
<span class="font-bold">%name%</span>
for the original file name,
<span class="font-bold">%extension%</span>
for the original file extension, and
<span class="font-bold">%date%</span>
for a date string of when the file was converted.
{@html m["settings.conversion.filename_description"]()}
</p>
</div>
<FancyTextInput

33
src/lib/sections/settings/Privacy.svelte
View File

@ -3,6 +3,8 @@
import { ChartColumnIcon, PauseIcon, PlayIcon } from "lucide-svelte";
import type { ISettings } from "./index.svelte";
import { effects } from "$lib/store/index.svelte";
import { m } from "$lib/paraglide/messages";
import { link } from "$lib/paraglide";
const { settings }: { settings: ISettings } = $props();
</script>
@ -15,26 +17,23 @@
class="inline-block -mt-1 mr-2 bg-accent-blue p-2 rounded-full"
color="black"
/>
Privacy
{m["settings.privacy.title"]()}
</h2>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-base font-bold">Plausible analytics</p>
<p class="text-base font-bold">
{m["settings.privacy.plausible_title"]()}
</p>
<p class="text-sm text-muted font-normal">
We use <a
href="https://plausible.io/privacy-focused-web-analytics"
target="_blank"
rel="noopener noreferrer">Plausible</a
>, a privacy-focused analytics tool, to gather
completely anonymous statistics. All data is anonymized
and aggregated, and no identifiable information is ever
sent or stored. You can view the analytics
<a
href="https://ats.vert.sh/vert.sh"
target="_blank"
rel="noopener noreferrer">here</a
> and choose to opt out below.
{@html link(
["plausible_link", "analytics_link"],
m["settings.privacy.plausible_description"](),
[
"https://plausible.io/privacy-focused-web-analytics",
"https://ats.vert.sh/vert.sh",
],
)}
</p>
</div>
<div class="flex flex-col gap-3 w-full">
@ -48,7 +47,7 @@
: ''} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
Opt-in
{m["settings.privacy.opt_in"]()}
</button>
<button
@ -60,7 +59,7 @@
: 'selected'} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />
Opt-out
{m["settings.privacy.opt_out"]()}
</button>
</div>
</div>

71
src/lib/sections/settings/Vertd.svelte
View File

@ -6,6 +6,8 @@
import clsx from "clsx";
import Dropdown from "$lib/components/functional/Dropdown.svelte";
import { vertdLoaded } from "$lib/store/index.svelte";
import { m } from "$lib/paraglide/messages";
import { link } from "$lib/paraglide";
let vertdCommit = $state<string | null>(null);
let abortController: AbortController | null = null;
@ -55,7 +57,7 @@
class="inline-block -mt-1 mr-2 bg-accent-red p-2 rounded-full overflow-visible"
color="black"
/>
Video conversion
{m["settings.vertd.title"]()}
</h2>
<p
class={clsx("text-sm font-normal", {
@ -64,90 +66,79 @@
"!text-muted": vertdCommit === "loading",
})}
>
status: {vertdCommit
{m["settings.vertd.status"]()} {vertdCommit
? vertdCommit === "loading"
? "loading..."
: `available, commit id ${vertdCommit}`
: "unavailable (is the url right?)"}
? m["settings.vertd.loading"]()
: m["settings.vertd.available"]({ commitId: vertdCommit })
: m["settings.vertd.unavailable"]()}
</p>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<p class="text-sm text-muted font-normal">
The <code>vertd</code> project is a server wrapper for FFmpeg.
This allows you to convert videos through the convenience of
VERT's web interface, while still being able to harness the power
of your GPU to do it as quickly as possible.
{@html m["settings.vertd.description"]()}
</p>
<p class="text-sm text-muted font-normal">
We host a public instance for your convenience, but it is
quite easy to host your own on your PC or server if you know
what you are doing. You can download the server binaries <a
href={GITHUB_URL_VERTD}
target="_blank">here</a
> - the process of setting this up will become easier in the
future, so stay tuned!
{@html link("vertd_link", m["settings.vertd.hosting_info"](), GITHUB_URL_VERTD)}
</p>
<div class="flex flex-col gap-2">
<p class="text-base font-bold">Instance URL</p>
<p class="text-base font-bold">{m["settings.vertd.instance_url"]()}</p>
<input
type="text"
placeholder="Example: http://localhost:24153"
placeholder={m["settings.vertd.url_placeholder"]()}
bind:value={settings.vertdURL}
/>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-base font-bold">Conversion speed</p>
<p class="text-base font-bold">{m["settings.vertd.conversion_speed"]()}</p>
<p class="text-sm text-muted font-normal">
This describes the tradeoff between speed and
quality. Faster speeds will result in lower quality,
but will get the job done quicker.
{m["settings.vertd.speed_description"]()}
</p>
</div>
<Dropdown
options={[
"Very Slow",
"Slower",
"Slow",
"Medium",
"Fast",
"Ultra Fast",
m["settings.vertd.speeds.very_slow"](),
m["settings.vertd.speeds.slower"](),
m["settings.vertd.speeds.slow"](),
m["settings.vertd.speeds.medium"](),
m["settings.vertd.speeds.fast"](),
m["settings.vertd.speeds.ultra_fast"](),
]}
settingsStyle
selected={(() => {
switch (settings.vertdSpeed) {
case "verySlow":
return "Very Slow";
return m["settings.vertd.speeds.very_slow"]();
case "slower":
return "Slower";
return m["settings.vertd.speeds.slower"]();
case "slow":
return "Slow";
return m["settings.vertd.speeds.slow"]();
case "medium":
return "Medium";
return m["settings.vertd.speeds.medium"]();
case "fast":
return "Fast";
return m["settings.vertd.speeds.fast"]();
case "ultraFast":
return "Ultra Fast";
return m["settings.vertd.speeds.ultra_fast"]();
}
})()}
onselect={(selected) => {
switch (selected) {
case "Very Slow":
case m["settings.vertd.speeds.very_slow"]():
settings.vertdSpeed = "verySlow";
break;
case "Slower":
case m["settings.vertd.speeds.slower"]():
settings.vertdSpeed = "slower";
break;
case "Slow":
case m["settings.vertd.speeds.slow"]():
settings.vertdSpeed = "slow";
break;
case "Medium":
case m["settings.vertd.speeds.medium"]():
settings.vertdSpeed = "medium";
break;
case "Fast":
case m["settings.vertd.speeds.fast"]():
settings.vertdSpeed = "fast";
break;
case "Ultra Fast":
case m["settings.vertd.speeds.ultra_fast"]():
settings.vertdSpeed = "ultraFast";
break;
}

46
src/routes/+page.svelte
View File

@ -5,6 +5,8 @@
import { vertdLoaded } from "$lib/store/index.svelte";
import clsx from "clsx";
import { AudioLines, BookText, Check, Film, Image } from "lucide-svelte";
import { m } from "$lib/paraglide/messages";
import { link } from "$lib/paraglide";
const getSupportedFormats = (name: string) =>
converters
@ -20,6 +22,7 @@
ready: boolean;
formats: string;
icon: typeof Image;
title: string;
};
} = $derived({
Images: {
@ -28,16 +31,19 @@
false,
formats: getSupportedFormats("imagemagick"),
icon: Image,
title: m["upload.images"](),
},
Audio: {
ready: converters.find((c) => c.name === "ffmpeg")?.ready || false,
formats: getSupportedFormats("ffmpeg"),
icon: AudioLines,
title: m["upload.audio"](),
},
Documents: {
ready: converters.find((c) => c.name === "pandoc")?.ready || false,
formats: getSupportedFormats("pandoc"),
icon: BookText,
title: m["upload.documents"](),
},
Video: {
ready:
@ -45,6 +51,7 @@
(false && $vertdLoaded),
formats: getSupportedFormats("vertd"),
icon: Film,
title: m["upload.video"](),
},
});
@ -58,9 +65,10 @@
);
if (formatInfo) {
return `This format can only be converted as ${
formatInfo.fromSupported ? "input (from)" : "output (to)"
}.`;
const direction = formatInfo.fromSupported
? m["upload.tooltip.direction_input"]()
: m["upload.tooltip.direction_output"]();
return m["upload.tooltip.partial_support"]({ direction });
}
return "";
};
@ -75,14 +83,12 @@
<h1
class="text-4xl px-12 md:p-0 md:text-6xl flex-wrap tracking-tight leading-tight md:leading-[72px] mb-4 md:mb-6"
>
The file converter you'll love.
{m["upload.title"]()}
</h1>
<p
class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-muted dynadark:text-muted"
>
All image, audio, and document processing is done on your
device. Videos are converted on our lightning-fast servers.
No file size limit, no ads, and completely open source.
{m["upload.subtitle"]()}
</p>
</div>
<div class="flex-grow w-full h-72">
@ -94,7 +100,7 @@
<hr />
<div class="mt-10 md:mt-16">
<h2 class="text-center text-4xl">VERT supports...</h2>
<h2 class="text-center text-4xl">{m["upload.supports_title"]()}</h2>
<div class="flex gap-4 mt-8 md:flex-row flex-col">
{#each Object.entries(status) as [key, s]}
@ -111,31 +117,33 @@
>
<Icon size="20" />
</div>
<span>{key}</span>
<span>{s.title}</span>
</div>
<div class="file-category-card-content flex-grow gap-4">
{#if key === "Video"}
<p>
Video uploads to a server for processing by
default, learn how to set it up locally <a
target="_blank"
href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
>here</a
>.
{@html link(
"wiki_link",
m["upload.video_server_processing"](),
"https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT",
)}
</p>
{:else}
<p class="flex tems-center justify-center gap-2">
<Check size="20" /> Local fully supported
<Check size="20" />
{m["upload.local_supported"]()}
</p>
{/if}
<p>
<b>Status: </b>
{s.ready ? "ready" : "not ready"}
<b>{m["upload.status"]()}</b>
{s.ready
? m["upload.ready"]()
: m["upload.not_ready"]()}
</p>
<div>
<span class="flex flex-wrap justify-center">
<b>Supported formats:&nbsp;</b>
<b>{m["upload.supported_formats"]()}&nbsp;</b>
{#each s.formats.split(", ") as format, index}
{@const isPartial = format.endsWith("*")}
{@const formatName = isPartial

15
src/routes/about/+page.svelte
View File

@ -12,6 +12,7 @@
import { addToast } from "$lib/store/ToastProvider";
import { dev } from "$app/environment";
import { page } from "$app/state";
import { m } from "$lib/paraglide/messages";
// import { dev } from "$app/environment";
// import { page } from "$app/state";
@ -34,19 +35,19 @@
{
name: "nullptr",
github: "https://github.com/not-nullptr",
role: "Lead developer; conversion backend, UI implementation",
role: m["about.credits.roles.lead_developer"](),
avatar: avatarNullptr,
},
{
name: "JovannMC",
github: "https://github.com/JovannMC",
role: "Developer; UI implementation",
role: m["about.credits.roles.developer"](),
avatar: avatarJovannMC,
},
{
name: "Liam",
github: "https://x.com/z2rMC",
role: "Designer; UX, branding, marketing",
role: m["about.credits.roles.designer"](),
avatar: avatarLiam,
},
];
@ -55,13 +56,13 @@
{
name: "azurejelly",
github: "https://github.com/azurejelly",
role: "Maintaining Docker & CI support",
role: m["about.credits.roles.docker_ci"](),
avatar: avatarAzurejelly,
},
{
name: "Realmy",
github: "https://github.com/RealmyTheMan",
role: "Former co-founder & designer",
role: m["about.credits.roles.former_cofounder"](),
avatar: avatarRealmy,
},
];
@ -80,7 +81,7 @@
try {
const response = await fetch(`${GITHUB_API_URL}/contributors`);
if (!response.ok) {
addToast("error", "Error fetching GitHub contributors");
addToast("error", m["about.errors.github_contributors"]());
throw new Error(`HTTP error, status: ${response.status}`);
}
const allContribs = await response.json();
@ -135,7 +136,7 @@
<div class="flex flex-col h-full items-center">
<h1 class="hidden md:block text-[40px] tracking-tight leading-[72px] mb-6">
<InfoIcon size="40" class="inline-block -mt-2 mr-2" />
About
{m["about.title"]()}
</h1>
<div

30
src/routes/convert/+page.svelte
View File

@ -28,6 +28,7 @@
XIcon,
} from "lucide-svelte";
import { onMount } from "svelte";
import { m } from "$lib/paraglide/messages";
onMount(() => {
// depending on format, select right category and format
@ -120,23 +121,23 @@
<Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
<div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
{#if !converters.length}
<Tooltip text="Unknown file type" position="bottom">
<Tooltip text={m["convert.tooltips.unknown_file"]()} position="bottom">
<FileQuestionIcon size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isAudio}
<Tooltip text="Audio file" position="bottom">
<Tooltip text={m["convert.tooltips.audio_file"]()} position="bottom">
<AudioLines size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isVideo}
<Tooltip text="Video file" position="bottom">
<Tooltip text={m["convert.tooltips.video_file"]()} position="bottom">
<FilmIcon size="24" class="flex-shrink-0" />
</Tooltip>
{:else if isDocument}
<Tooltip text="Document file" position="bottom">
<Tooltip text={m["convert.tooltips.document_file"]()} position="bottom">
<BookText size="24" class="flex-shrink-0" />
</Tooltip>
{:else}
<Tooltip text="Image file" position="bottom">
<Tooltip text={m["convert.tooltips.image_file"]()} position="bottom">
<ImageIcon size="24" class="flex-shrink-0" />
</Tooltip>
{/if}
@ -172,11 +173,10 @@
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">
We can't convert this file.
{m["convert.errors.cant_convert"]()}
</p>
<p class="font-normal">
what are you doing..? you're supposed to run the vertd
server!
{m["convert.errors.vertd_server"]()}
</p>
</div>
{:else}
@ -184,11 +184,10 @@
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">
We can't convert this file.
{m["convert.errors.cant_convert"]()}
</p>
<p class="font-normal">
Only image, video, audio, and document files are
supported
{m["convert.errors.unsupported_format"]()}
</p>
</div>
{/if}
@ -196,10 +195,9 @@
<div
class="h-full flex flex-col text-center justify-center text-failure"
>
<p class="font-body font-bold">We can't convert this file.</p>
<p class="font-body font-bold">{m["convert.errors.cant_convert"]()}</p>
<p class="font-normal">
Could not find the vertd instance to start video conversion.
Are you sure the instance URL is set correctly?
{m["convert.errors.vertd_not_found"]()}
</p>
</div>
{:else}
@ -251,7 +249,7 @@
onselect={(option) => handleSelect(option, file)}
/>
<div class="w-full flex items-center justify-between">
<Tooltip text="Convert this file" position="bottom">
<Tooltip text={m["convert.tooltips.convert_file"]()} position="bottom">
<button
class="btn {$effects
? ''
@ -269,7 +267,7 @@
</button>
</Tooltip>
<Tooltip
text="Download this file"
text={m["convert.tooltips.download_file"]()}
position="bottom"
>
<button

5
src/routes/settings/+page.svelte
View File

@ -6,6 +6,7 @@
import { PUB_PLAUSIBLE_URL } from "$env/static/public";
import { SettingsIcon } from "lucide-svelte";
import { onMount } from "svelte";
import { m } from "$lib/paraglide/messages";
let settings = $state(Settings.Settings.instance.settings);
@ -31,7 +32,7 @@
log(["settings"], "saving settings");
} catch (error) {
log(["settings", "error"], `failed to save settings: ${error}`);
addToast("error", "Failed to save settings!");
addToast("error", m["settings.errors.save_failed"]());
}
});
@ -51,7 +52,7 @@
<div class="flex flex-col h-full items-center">
<h1 class="hidden md:block text-[40px] tracking-tight leading-[72px] mb-6">
<SettingsIcon size="40" class="inline-block -mt-2 mr-2" />
Settings
{m["settings.title"]()}
</h1>
<div