diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 9329ec0e..77ac5aab 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -97,7 +97,8 @@ "login": "Login", "pagetitle": "{{title}} - movie-web", "register": "Register", - "settings": "Settings" + "settings": "Settings", + "onboarding": "Setup" } }, "home": { @@ -429,5 +430,64 @@ } }, "unsaved": "You have unsaved changes" + }, + "onboarding": { + "start": { + "title": "Let's get you setup with movie-web", + "explainer": "To get the best streams possible. You will need to choose which streaming method you want to use.", + "options": { + "proxy": { + "quality": "Good quality", + "title": "Custom proxy", + "description": "Setup a proxy in just 5 minutes and gain access to great sources.", + "action": "Setup proxy" + }, + "extension": { + "quality": "Best quality", + "title": "Browser extension", + "description": "Install browser extension and gain access to the best sources.", + "action": "Install extension" + }, + "default": { + "text": "I don't want good quality streams,<0 /> <1>use the default setup" + } + } + }, + "proxy": { + "title": "Let's make a new proxy", + "explainer": "With the proxy method, you can get great quality streams by making a self-service proxy.", + "link": "Learn how to make a proxy", + "input": { + "label": "Proxy URL", + "placeholder": "https://", + "errorInvalidUrl": "Not a valid URL", + "errorConnection": "Could not connect to proxy", + "errorNotProxy": "Expected a proxy but got a website" + }, + "back": "Go back", + "submit": "Submit proxy" + }, + "extension": { + "title": "Let's start with an extension", + "explainer": "Using the browser extension, you can get the best streams we have to offer. With just a simple install.", + "link": "Install extension", + "back": "Go back", + "status": { + "loading": "Waiting on extension", + "disallowed": "Extension disabled for this page", + "failed": "Failed to request status", + "outdated": "Extension version too old", + "noperms": "Extension does not have sufficient permissions", + "success": "Extension is working as expected!" + }, + "submitCheck": "Check for extension", + "submitFinal": "Continue" + }, + "defaultConfirm": { + "title": "Are you sure?", + "description": "The default setup does not have the best streams and can be unbearably slow.", + "cancel": "Cancel", + "confirm": "Use default setup" + } } } diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index 01e4631b..0d1e5a06 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -1,4 +1,5 @@ import classNames from "classnames"; +import { Trans, useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { Button } from "@/components/buttons/Button"; @@ -23,20 +24,23 @@ export function OnboardingPage() { const navigate = useNavigate(); const skipModal = useModal("skip"); const { completeAndRedirect } = useRedirectBack(); + const { t } = useTranslation(); return ( - + - Lorem ipsum - Lorem ipsum Lorem ipsum Lorem ipsum + + {t("onboarding.defaultConfirm.title")} + + {t("onboarding.defaultConfirm.description")} @@ -44,22 +48,21 @@ export function OnboardingPage() { - Let's get you set up with movie-web + {t("onboarding.start.title")} - To get the best streams possible, you will need to choose which - streaming method you want to use. + {t("onboarding.start.explainer")}
navigate("/onboarding/proxy")}> - Set up proxy + {t("onboarding.start.options.proxy.action")}
@@ -70,24 +73,24 @@ export function OnboardingPage() { navigate("/onboarding/extension")}> - Install extension + {t("onboarding.start.options.extension.action")}

- I don't want good quality,
- - use the default setup - + +
+ +

diff --git a/src/pages/onboarding/OnboardingExtension.tsx b/src/pages/onboarding/OnboardingExtension.tsx index b2e98c83..ce699884 100644 --- a/src/pages/onboarding/OnboardingExtension.tsx +++ b/src/pages/onboarding/OnboardingExtension.tsx @@ -1,4 +1,5 @@ import { ReactNode } from "react"; +import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useAsyncFn, useInterval } from "react-use"; @@ -36,20 +37,26 @@ export function ExtensionStatus(props: { status: ExtensionStatus; loading: boolean; }) { + const { t } = useTranslation(); + let content: ReactNode = null; if (props.loading || props.status === "unknown") content = ( <> -

waiting on extension

+

{t("onboarding.extension.status.loading")}

); if (props.status === "disallowed") - content =

Extension disabled for this page

; - else if (props.status === "failed") content =

Failed to request status

; - else if (props.status === "outdated") content =

Extension too old

; - else if (props.status === "noperms") content =

No permissions to act

; - else if (props.status === "success") content =

Extension is working!

; + content =

{t("onboarding.extension.status.disallowed")}

; + else if (props.status === "failed") + content =

{t("onboarding.extension.status.failed")}

; + else if (props.status === "outdated") + content =

{t("onboarding.extension.status.outdated")}

; + else if (props.status === "noperms") + content =

{t("onboarding.extension.status.noperms")}

; + else if (props.status === "success") + content =

{t("onboarding.extension.status.success")}

; return (
@@ -60,6 +67,7 @@ export function ExtensionStatus(props: { } export function OnboardingExtensionPage() { + const { t } = useTranslation(); const navigate = useNavigate(); const { completeAndRedirect } = useRedirectBack(); @@ -75,27 +83,30 @@ export function OnboardingExtensionPage() { return ( - + - Let's start with an extension + {t("onboarding.extension.title")} - Using the browser extension, you can get the best streams we have to - offer. With just a simple install. + {t("onboarding.extension.explainer")} - Install extension + {t("onboarding.extension.link")}
diff --git a/src/pages/onboarding/OnboardingProxy.tsx b/src/pages/onboarding/OnboardingProxy.tsx index be001de6..24595568 100644 --- a/src/pages/onboarding/OnboardingProxy.tsx +++ b/src/pages/onboarding/OnboardingProxy.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useAsyncFn } from "react-use"; @@ -19,52 +20,55 @@ import { useAuthStore } from "@/stores/auth"; const testUrl = "https://postman-echo.com/get"; export function OnboardingProxyPage() { + const { t } = useTranslation(); const navigate = useNavigate(); const { completeAndRedirect } = useRedirectBack(); const [url, setUrl] = useState(""); const setProxySet = useAuthStore((s) => s.setProxySet); const [{ loading, error }, test] = useAsyncFn(async () => { - if (!url.startsWith("http")) throw new Error("Not a valid URL"); + if (!url.startsWith("http")) + throw new Error("onboarding.proxy.input.errorInvalidUrl"); try { const res = await singularProxiedFetch(url, testUrl, {}); - if (res.url !== testUrl) throw new Error("Not a proxy"); + if (res.url !== testUrl) + throw new Error("onboarding.proxy.input.errorNotProxy"); setProxySet([url]); completeAndRedirect(); } catch (e) { - throw new Error("Could not connect to proxy"); + throw new Error("onboarding.proxy.input.errorConnection"); } }, [url, completeAndRedirect, setProxySet]); return ( - + - Let's setup a custom proxy + {t("onboarding.proxy.title")} - Using a custom proxy, you can get great quality streams! + {t("onboarding.proxy.explainer")} - Learn how to make a custom proxy + {t("onboarding.proxy.link")}
- {error ? {error.message} : null} + {error ? {t(error.message)} : null}