mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-29 15:16:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

localize connectionsPart

Browse source
This commit is contained in:
mrjvs 2023-11-26 20:54:58 +01:00
parent 63c509891e
commit 1161ecaca3
2 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/assets/locales/en.json
View file

@ -107,7 +107,20 @@
"title": "Captions"
},
"connections": {
"title": "Connections"
"title": "Connections",
"workers": {
"label": "Use custom proxy workers",
"description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.",
"urlLabel": "Worker URLs",
"emptyState": "No workers yet, add one below",
"urlPlaceholder": "https://",
"addButton": "Add new worker"
},
"server": {
"label": "Custom server",
"description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.",
"urlLabel": "Custom server URL"
}
}
},
"faq": {

37
src/pages/parts/settings/ConnectionsPart.tsx
View file

@ -1,4 +1,5 @@
import { Dispatch, SetStateAction, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button";
import { Toggle } from "@/components/buttons/Toggle";
@ -19,6 +20,7 @@ interface BackendEditProps {
}
function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
const { t } = useTranslation();
const add = useCallback(() => {
setProxyUrls((s) => [...(s ?? []), ""]);
}, [setProxyUrls]);
@ -46,10 +48,11 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
<SettingsCard>
<div className="flex justify-between items-center gap-4">
<div className="my-3">
<p className="text-white font-bold mb-3">Use custom proxy workers</p>
<p className="text-white font-bold mb-3">
{t("settings.connections.workers.label")}
</p>
<p className="max-w-[20rem] font-medium">
To make the application function, all traffic is routed through
proxies. Enable this if you want to bring your own workers.
{t("settings.connections.workers.description")}
</p>
</div>
<div>
@ -62,11 +65,13 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
{proxyUrls !== null ? (
<>
<Divider marginClass="my-6 px-8 box-content -mx-8" />
<p className="text-white font-bold mb-3">Worker URLs</p>
<p className="text-white font-bold mb-3">
{t("settings.connections.workers.urlLabel")}
</p>
<div className="my-6 space-y-2 max-w-md">
{(proxyUrls?.length ?? 0) === 0 ? (
<p>No workers yet, add one below</p>
<p>{t("settings.connections.workers.emptyState")}</p>
) : null}
{(proxyUrls ?? []).map((v, i) => (
<div
@ -78,7 +83,10 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
<AuthInputBox
value={v}
onChange={(val) => changeItem(i, val)}
placeholder="https://"
placeholder={
t("settings.connections.workers.urlPlaceholder") ??
undefined
}
/>
<button
type="button"
@ -92,7 +100,7 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
</div>
<Button theme="purple" onClick={add}>
Add new worker
{t("settings.connections.workers.addButton")}
</Button>
</>
) : null}
@ -101,14 +109,16 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
}
function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
const { t } = useTranslation();
return (
<SettingsCard>
<div className="flex justify-between items-center gap-4">
<div className="my-3">
<p className="text-white font-bold mb-3">Custom server</p>
<p className="text-white font-bold mb-3">
{t("settings.connections.workers.label")}
</p>
<p className="max-w-[20rem] font-medium">
To make the application function, all traffic is routed through
proxies. Enable this if you want to bring your own workers.
{t("settings.connections.workers.description")}
</p>
</div>
<div>
@ -121,7 +131,9 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
{backendUrl !== null ? (
<>
<Divider marginClass="my-6 px-8 box-content -mx-8" />
<p className="text-white font-bold mb-3">Custom server URL</p>
<p className="text-white font-bold mb-3">
{t("settings.connections.workers.urlLabel")}
</p>
<AuthInputBox onChange={setBackendUrl} value={backendUrl ?? ""} />
</>
) : null}
@ -130,9 +142,10 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
}
export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) {
const { t } = useTranslation();
return (
<div>
<Heading1 border>Connections</Heading1>
<Heading1 border>{t("settings.connections.title")}</Heading1>
<div className="space-y-6">
<ProxyEdit
proxyUrls={props.proxyUrls}