mirror of
https://github.com/p-stream/p-stream.git
synced 2026-03-11 17:55:33 +00:00
update onboarding
This commit is contained in:
Pas
parent
c178fdf48e
commit
ab743b4278
2 changed files with 78 additions and 65 deletions
|
|
@ -629,6 +629,7 @@
|
|||
"cancel": "Cancel",
|
||||
"confirm": "Use default setup",
|
||||
"description": "The default setup does not have the best streams. You'll be missing out on the best sources!",
|
||||
"tip": "It's recommended to set up the extension and/or FED API!",
|
||||
"title": "Are you sure?"
|
||||
},
|
||||
"extension": {
|
||||
|
|
@ -712,9 +713,15 @@
|
|||
"extension": {
|
||||
"action": "Install extension",
|
||||
"description": "Install browser extension and gain access to additional sources! Remember to enable it for this site.",
|
||||
"quality": "Best quality + More Sources",
|
||||
"quality": "Best quality + More sources",
|
||||
"title": "Browser extension"
|
||||
},
|
||||
"desktopapp": {
|
||||
"action": "Install Desktop app",
|
||||
"description": "Install desktop app and gain access to additional sources! Simple and easy to use!",
|
||||
"quality": "Best quality + Even more sources",
|
||||
"title": "P-Stream Desktop app"
|
||||
},
|
||||
"proxy": {
|
||||
"action": "Setup proxy",
|
||||
"description": "Setup a free proxy in just 5 minutes! Improves loading reliability!",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import classNames from "classnames";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
import { isExtensionActiveCached } from "@/backend/extension/messaging";
|
||||
import { Button } from "@/components/buttons/Button";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { Stepper } from "@/components/layout/Stepper";
|
||||
|
|
@ -55,11 +55,7 @@ export function OnboardingPage() {
|
|||
const { t } = useTranslation();
|
||||
const noProxies = getProxyUrls().length === 0;
|
||||
|
||||
const isSafari =
|
||||
typeof navigator !== "undefined" &&
|
||||
/Safari/.test(navigator.userAgent) &&
|
||||
!/Chrome/.test(navigator.userAgent) &&
|
||||
!/Edg/.test(navigator.userAgent);
|
||||
const isFebboxSetup = usePreferencesStore((s) => s.febboxKey) !== "";
|
||||
|
||||
return (
|
||||
<MinimalPageLayout>
|
||||
|
|
@ -69,16 +65,24 @@ export function OnboardingPage() {
|
|||
<Heading1 className="!mt-0 !mb-4 !text-2xl">
|
||||
{t("onboarding.defaultConfirm.title")}
|
||||
</Heading1>
|
||||
<Paragraph className="!mt-1 !mb-12">
|
||||
<Paragraph className="!mt-1 !mb-0">
|
||||
{t("onboarding.defaultConfirm.description")}
|
||||
</Paragraph>
|
||||
<Paragraph className="!mt-1 !mb-8">
|
||||
{t("onboarding.defaultConfirm.tip")}
|
||||
</Paragraph>
|
||||
<div className="flex flex-col-reverse gap-3 md:flex-row md:justify-between">
|
||||
<Button
|
||||
theme={
|
||||
isFebboxSetup || isExtensionActiveCached() ? "purple" : "danger"
|
||||
}
|
||||
onClick={() => completeAndRedirect()}
|
||||
>
|
||||
{t("onboarding.defaultConfirm.confirm")}
|
||||
</Button>
|
||||
<Button theme="secondary" onClick={skipModal.hide}>
|
||||
{t("onboarding.defaultConfirm.cancel")}
|
||||
</Button>
|
||||
<Button theme="purple" onClick={() => completeAndRedirect()}>
|
||||
{t("onboarding.defaultConfirm.confirm")}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalCard>
|
||||
</Modal>
|
||||
|
|
@ -177,48 +181,49 @@ export function OnboardingPage() {
|
|||
</Paragraph>
|
||||
|
||||
{/* Desktop Cards */}
|
||||
<div className="hidden md:flex w-full flex-col md:flex-row gap-3 pb-6">
|
||||
<div className="hidden md:flex w-full flex-row gap-3 pb-6">
|
||||
<Card
|
||||
onClick={() => navigate("/onboarding/extension")}
|
||||
className={classNames(
|
||||
conf().HIDE_PROXY_ONBOARDING ? "md:w-1/2" : "md:w-1/3",
|
||||
)}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://github.com/p-stream/p-stream-desktop/releases",
|
||||
"_blank",
|
||||
)
|
||||
}
|
||||
className="w-1/3"
|
||||
>
|
||||
<CardContent
|
||||
colorClass="!text-onboarding-best"
|
||||
title={t("onboarding.start.options.desktopapp.title")}
|
||||
subtitle={t("onboarding.start.options.desktopapp.quality")}
|
||||
description={t("onboarding.start.options.desktopapp.description")}
|
||||
>
|
||||
<Link className="!text-onboarding-best">
|
||||
{t("onboarding.start.options.desktopapp.action")}
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
|
||||
<VerticalLine className="items-end" />
|
||||
<span className="text-xs uppercase font-bold">
|
||||
{t("onboarding.start.options.or")}
|
||||
</span>
|
||||
<VerticalLine />
|
||||
</div>
|
||||
<Card
|
||||
onClick={() => navigate("/onboarding/extension")}
|
||||
className="w-1/3"
|
||||
>
|
||||
<CardContent
|
||||
colorClass="!text-onboarding-good"
|
||||
title={t("onboarding.start.options.extension.title")}
|
||||
subtitle={t("onboarding.start.options.extension.quality")}
|
||||
description={t("onboarding.start.options.extension.description")}
|
||||
>
|
||||
<Link className="!text-onboarding-best">
|
||||
<Link className="!text-onboarding-good">
|
||||
{t("onboarding.start.options.extension.action")}
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{conf().HIDE_PROXY_ONBOARDING ? null : (
|
||||
<>
|
||||
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
|
||||
<VerticalLine className="items-end" />
|
||||
<span className="text-xs uppercase font-bold">
|
||||
{t("onboarding.start.options.or")}
|
||||
</span>
|
||||
<VerticalLine />
|
||||
</div>
|
||||
<Card
|
||||
onClick={() => navigate("/onboarding/proxy")}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
<CardContent
|
||||
colorClass="!text-onboarding-good"
|
||||
title={t("onboarding.start.options.proxy.title")}
|
||||
subtitle={t("onboarding.start.options.proxy.quality")}
|
||||
description={t("onboarding.start.options.proxy.description")}
|
||||
>
|
||||
<Link>{t("onboarding.start.options.proxy.action")}</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
{noProxies ? null : (
|
||||
<>
|
||||
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
|
||||
|
|
@ -230,13 +235,11 @@ export function OnboardingPage() {
|
|||
</div>
|
||||
<Card
|
||||
onClick={
|
||||
isSafari
|
||||
? () => completeAndRedirect() // Skip modal on Safari
|
||||
: skipModal.show // Show modal on other browsers
|
||||
isFebboxSetup && isExtensionActiveCached()
|
||||
? () => completeAndRedirect()
|
||||
: skipModal.show
|
||||
}
|
||||
className={classNames(
|
||||
conf().HIDE_PROXY_ONBOARDING ? "md:w-1/2" : "md:w-1/3",
|
||||
)}
|
||||
className="w-1/3"
|
||||
>
|
||||
<CardContent
|
||||
colorClass="!text-onboarding-bad"
|
||||
|
|
@ -252,37 +255,40 @@ export function OnboardingPage() {
|
|||
</div>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<div className="md:hidden flex w-full flex-col md:flex-row gap-3 pb-6">
|
||||
<div className="md:hidden flex w-full flex-col gap-3 pb-6">
|
||||
{/* <Card
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://github.com/p-stream/p-stream-desktop/releases",
|
||||
"_blank",
|
||||
)
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
<MiniCardContent
|
||||
colorClass="!text-onboarding-best"
|
||||
title={t("onboarding.start.options.desktopapp.title")}
|
||||
subtitle={t("onboarding.start.options.desktopapp.quality")}
|
||||
description={t("onboarding.start.options.desktopapp.description")}
|
||||
/>
|
||||
</Card> */}
|
||||
<Card
|
||||
onClick={() => navigate("/onboarding/extension")}
|
||||
className="md:w-1/3 md:h-full"
|
||||
>
|
||||
<MiniCardContent
|
||||
colorClass="!text-onboarding-best"
|
||||
colorClass="!text-onboarding-good"
|
||||
title={t("onboarding.start.options.extension.title")}
|
||||
subtitle={t("onboarding.start.options.extension.quality")}
|
||||
description={t("onboarding.start.options.extension.description")}
|
||||
/>
|
||||
</Card>
|
||||
{conf().HIDE_PROXY_ONBOARDING ? null : (
|
||||
<Card
|
||||
onClick={() => navigate("/onboarding/proxy")}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
<MiniCardContent
|
||||
colorClass="!text-onboarding-good"
|
||||
title={t("onboarding.start.options.proxy.title")}
|
||||
subtitle={t("onboarding.start.options.proxy.quality")}
|
||||
description={t("onboarding.start.options.proxy.description")}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
{noProxies ? null : (
|
||||
<Card
|
||||
onClick={
|
||||
isSafari
|
||||
? () => completeAndRedirect() // Skip modal on Safari
|
||||
: skipModal.show // Show modal on other browsers
|
||||
isFebboxSetup && isExtensionActiveCached()
|
||||
? () => completeAndRedirect()
|
||||
: skipModal.show
|
||||
}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue