Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-05 06:59:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update onboarding explainers

Browse source
This commit is contained in:
Pas 2025-05-21 13:00:10 -06:00
parent 80577cb0e4
commit 4ad4114125
3 changed files with 112 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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</0> 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:",

3
src/components/overlays/Modal.tsx
View file

@ -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",
)}
>
<div className="transition-transform duration-300 overflow-y-scroll max-h-[90dvh] scrollbar-none">

134
src/pages/onboarding/Onboarding.tsx
View file

@ -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 (
<div className="mt-12">
<div className="mt-6">
<SettingsCard>
<div className="flex justify-between items-center gap-4">
<div className="my-3">
@ -174,6 +180,15 @@ export function FEDAPISetup() {
}
}
function Item(props: { title: string; children: React.ReactNode }) {
return (
<>
<p className="text-white mb-2 font-medium">{props.title}</p>
<div className="text-type-text">{props.children}</div>
</>
);
}
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"
>
<div>
<p>
{t("onboarding.start.moreInfo.explainer.intro")}
<br />
<br />
<strong>{t("onboarding.start.moreInfo.explainer.options")}</strong>
<br />
<strong>
{t("onboarding.start.moreInfo.explainer.extension")}
</strong>
<br />
{t("onboarding.start.moreInfo.explainer.extensionDescription")}
<br />
<br />
<strong>{t("onboarding.start.moreInfo.explainer.proxy")}</strong>
<br />
{t("onboarding.start.moreInfo.explainer.proxyDescription")}
<br />
<br />
<strong>{t("onboarding.start.moreInfo.explainer.default")}</strong>
<br />
{t("onboarding.start.moreInfo.explainer.defaultDescription")}
<br />
<br />
<Trans
i18nKey="onboarding.start.moreInfo.explainer.intro"
className="pb-4"
/>
<div className="flex flex-col gap-4 md:flex-row py-8">
<div className="md:w-1/2">
<Heading3 className="font-normal">
<Trans i18nKey="onboarding.start.moreInfo.recommended.title" />
</Heading3>
<Trans i18nKey="onboarding.start.moreInfo.recommended.subtitle" />
<div className="space-y-4 pt-8 bg-mediaCard-hoverAccent/10 rounded-xl p-10 mt-6 mr-2 min-w-[20rem]">
<Item
title={t("onboarding.start.moreInfo.recommended.desktop.title")}
>
<Trans i18nKey="onboarding.start.moreInfo.recommended.desktop.description" />
</Item>
<Item
title={t("onboarding.start.moreInfo.recommended.iOS.title")}
>
<Trans i18nKey="onboarding.start.moreInfo.recommended.iOS.description" />
</Item>
<Item
title={t("onboarding.start.moreInfo.recommended.android.title")}
>
<Trans i18nKey="onboarding.start.moreInfo.recommended.android.description" />
</Item>
</div>
</div>
<div className="inline md:hidden">
<Divider />
</div>
<div>
<Ol
items={[
<Item
title={t("onboarding.start.moreInfo.explainer.extension")}
>
{t(
"onboarding.start.moreInfo.explainer.extensionDescription",
)}
</Item>,
<Item title={t("onboarding.start.moreInfo.explainer.proxy")}>
{t("onboarding.start.moreInfo.explainer.proxyDescription")}
</Item>,
<Item title={t("onboarding.start.moreInfo.explainer.default")}>
{t("onboarding.start.moreInfo.explainer.defaultDescription")}
</Item>,
].filter(Boolean)}
/>
{conf().ALLOW_FEBBOX_KEY && (
<>
<strong>
{t("onboarding.start.moreInfo.explainer.fedapi.fedapi")}
</strong>
<br />
{t(
"onboarding.start.moreInfo.explainer.fedapi.fedapiDescription",
)}
<br />
<br />
</>
<div className="pt-12 pl-[3.2rem]">
<Item
title={t("onboarding.start.moreInfo.explainer.fedapi.fedapi")}
>
{t(
"onboarding.start.moreInfo.explainer.fedapi.fedapiDescription",
)}
</Item>
</div>
)}
<Trans i18nKey="onboarding.start.moreInfo.explainer.outro">
<a
href="https://discord.com/invite/7z6znYgrTG"
target="_blank"
rel="noopener noreferrer"
className="text-type-link"
/>
</Trans>
</p>
</div>
</div>
<div>
<Trans i18nKey="onboarding.start.moreInfo.explainer.outro">
<a
href="https://discord.com/invite/7z6znYgrTG"
target="_blank"
rel="noopener noreferrer"
className="text-type-link"
/>
</Trans>
</div>
</FancyModal>
<BiggerCenterContainer>
@ -282,7 +322,7 @@ export function OnboardingPage() {
<div className="hidden md:flex w-full flex-col md:flex-row gap-3 pb-6">
<Card
onClick={() => navigate("/onboarding/extension")}
className="md:w-1/3 md:h-full"
className="md:w-1/3"
>
<CardContent
colorClass="!text-onboarding-best"