From 4ad4114125a365ae81fb09d2eaacbc4407113be4 Mon Sep 17 00:00:00 2001 From: Pas <74743263+Pasithea0@users.noreply.github.com> Date: Wed, 21 May 2025 13:00:10 -0600 Subject: [PATCH] update onboarding explainers --- src/assets/locales/en.json | 30 +++++-- src/components/overlays/Modal.tsx | 3 +- src/pages/onboarding/Onboarding.tsx | 134 ++++++++++++++++++---------- 3 files changed, 112 insertions(+), 55 deletions(-) diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index ab50f917..2f63dd67 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -392,17 +392,33 @@ "explainer": { "intro": "P-Stream doesn't host videos. It relies on third-party websites for content, so you need to choose how it connects to those sites.", "options": "Your Options:", - "extension": "1. Extension (Recommended)", + "extension": "1. Extension", "extensionDescription": "The extension gives you access to the most sources. It acts as a local proxy and can handle sites that need special cookies or headers to load.", "proxy": "2. Proxy", "proxyDescription": "The proxy scrapes media from other websites. It bypasses browser restrictions (like CORS) to allow scraping.", "default": "3. Default Setup", "defaultDescription": "Uses P-Stream's built-in proxy. It's the easiest option but might be slower due to shared bandwidth.", "fedapi": { - "fedapi": "Optional FED API (Febbox) UI token", - "fedapiDescription": "Bringing your own Febbox account allows you to unlock FED API, our best source with 4K quality, Dolby Atmos, the most content, and the best (fastest) load times. This the highly recommended!" + "fedapi": "Additional: FED API (Private) token", + "fedapiDescription": "Bring your own FREE Febbox account to gain access to FED API (Private), the best source with 4K quality, Dolby Atmos, skip intro and the fastest load times! Highly recommended option!" }, "outro": "If you have more questions on how this works, feel free to ask on the <0>P-Stream Discord server!" + }, + "recommended": { + "title": "Not sure what to choose?", + "subtitle": "Recommended Configurations:", + "desktop": { + "title": "Desktop:", + "description": "Extension + FED API (Private)" + }, + "iOS": { + "title": "iOS:", + "description": "Custom proxy + FED API (Private)" + }, + "android": { + "title": "Android:", + "description": "Extension + FED API (Private)" + } } }, "options": { @@ -412,13 +428,13 @@ }, "extension": { "action": "Install extension", - "description": "Install browser extension and gain access to the best sources, but remember to enable it for this site.", + "description": "Install browser extension and gain access to additional sources! Remember to enable it for this site.", "quality": "Best quality + More Sources", "title": "Browser extension" }, "proxy": { "action": "Setup proxy", - "description": "Setup a free proxy in just 5 minutes and gain access to great sources...", + "description": "Setup a free proxy in just 5 minutes! Improves loading reliability!", "quality": "Good quality", "title": "Custom proxy" } @@ -916,8 +932,8 @@ }, "fedapi": { "onboarding": { - "title": "Optional: FED API (Febbox) token", - "description": "Bring your own Febbox account to get the best streaming with 4K quality, Dolby Atmos, skip intro and the best (fastest) load times!" + "title": "FED API (Private) token", + "description": "Bring your own FREE Febbox account to gain access to FED API (Private), the best source with 4K quality, Dolby Atmos, skip intro and the fastest load times! Highly recommended option!" }, "setup": { "title": "To get your UI token:", diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx index 9fa406c6..cec5f000 100644 --- a/src/components/overlays/Modal.tsx +++ b/src/components/overlays/Modal.tsx @@ -50,7 +50,7 @@ export function FancyModal(props: { id: string; children?: ReactNode; title?: string; - size?: "md" | "xl"; + size?: "md" | "lg" | "xl"; oneTime?: boolean; }) { const modal = useModal(props.id); @@ -82,6 +82,7 @@ export function FancyModal(props: { "group -m-[0.705em] rounded-3xl bg-background-main transition-colors duration-300 focus:relative focus:z-10", "w-full mx-4 p-6 bg-mediaCard-hoverBackground bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg", props.size === "md" ? "max-w-md" : "max-w-2xl", + props.size === "xl" ? "max-w-7xl" : "max-w-2xl", )} >
diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index 32055281..67fe58a0 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -21,7 +21,13 @@ import { import { MwLink } from "@/components/text/Link"; import { AuthInputBox } from "@/components/text-inputs/AuthInputBox"; import { Divider } from "@/components/utils/Divider"; -import { Heading1, Heading2, Paragraph } from "@/components/utils/Text"; +import { Ol } from "@/components/utils/Ol"; +import { + Heading1, + Heading2, + Heading3, + Paragraph, +} from "@/components/utils/Text"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; import { useNavigateOnboarding, @@ -73,7 +79,7 @@ export function FEDAPISetup() { if (conf().ALLOW_FEBBOX_KEY) { return ( -
+
@@ -174,6 +180,15 @@ export function FEDAPISetup() { } } +function Item(props: { title: string; children: React.ReactNode }) { + return ( + <> +

{props.title}

+
{props.children}
+ + ); +} + export function OnboardingPage() { const navigate = useNavigateOnboarding(); const skipModal = useModal("skip"); @@ -214,52 +229,77 @@ export function OnboardingPage() { title={t("onboarding.start.moreInfo.title")} size="xl" > -
-

- {t("onboarding.start.moreInfo.explainer.intro")} -
-
- {t("onboarding.start.moreInfo.explainer.options")} -
- - {t("onboarding.start.moreInfo.explainer.extension")} - -
- {t("onboarding.start.moreInfo.explainer.extensionDescription")} -
-
- {t("onboarding.start.moreInfo.explainer.proxy")} -
- {t("onboarding.start.moreInfo.explainer.proxyDescription")} -
-
- {t("onboarding.start.moreInfo.explainer.default")} -
- {t("onboarding.start.moreInfo.explainer.defaultDescription")} -
-
+ +

+
+ + + + +
+ + + + + + + + + +
+
+
+ +
+
+
    + {t( + "onboarding.start.moreInfo.explainer.extensionDescription", + )} + , + + {t("onboarding.start.moreInfo.explainer.proxyDescription")} + , + + {t("onboarding.start.moreInfo.explainer.defaultDescription")} + , + ].filter(Boolean)} + /> {conf().ALLOW_FEBBOX_KEY && ( - <> - - {t("onboarding.start.moreInfo.explainer.fedapi.fedapi")} - -
    - {t( - "onboarding.start.moreInfo.explainer.fedapi.fedapiDescription", - )} -
    -
    - +
    + + {t( + "onboarding.start.moreInfo.explainer.fedapi.fedapiDescription", + )} + +
    )} - - - -

    +
+
+ @@ -282,7 +322,7 @@ export function OnboardingPage() {
navigate("/onboarding/extension")} - className="md:w-1/3 md:h-full" + className="md:w-1/3" >