pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
update onboarding
+78
-65
+8
-1
src/assets/locales/en.json
+8
-1
src/assets/locales/en.json
···
629
629
"cancel": "Cancel",
630
630
"confirm": "Use default setup",
631
631
"description": "The default setup does not have the best streams. You'll be missing out on the best sources!",
632
+
"tip": "It's recommended to set up the extension and/or FED API!",
632
633
"title": "Are you sure?"
633
634
},
634
635
"extension": {
···
712
713
"extension": {
713
714
"action": "Install extension",
714
715
"description": "Install browser extension and gain access to additional sources! Remember to enable it for this site.",
715
-
"quality": "Best quality + More Sources",
716
+
"quality": "Best quality + More sources",
716
717
"title": "Browser extension"
718
+
},
719
+
"desktopapp": {
720
+
"action": "Install Desktop app",
721
+
"description": "Install desktop app and gain access to additional sources! Simple and easy to use!",
722
+
"quality": "Best quality + Even more sources",
723
+
"title": "P-Stream Desktop app"
717
724
},
718
725
"proxy": {
719
726
"action": "Setup proxy",
+70
-64
src/pages/onboarding/Onboarding.tsx
+70
-64
src/pages/onboarding/Onboarding.tsx
···
1
-
import classNames from "classnames";
2
1
import { Trans, useTranslation } from "react-i18next";
3
2
3
+
import { isExtensionActiveCached } from "@/backend/extension/messaging";
4
4
import { Button } from "@/components/buttons/Button";
5
5
import { Icon, Icons } from "@/components/Icon";
6
6
import { Stepper } from "@/components/layout/Stepper";
···
55
55
const { t } = useTranslation();
56
56
const noProxies = getProxyUrls().length === 0;
57
57
58
-
const isSafari =
59
-
typeof navigator !== "undefined" &&
60
-
/Safari/.test(navigator.userAgent) &&
61
-
!/Chrome/.test(navigator.userAgent) &&
62
-
!/Edg/.test(navigator.userAgent);
58
+
const isFebboxSetup = usePreferencesStore((s) => s.febboxKey) !== "";
63
59
64
60
return (
65
61
<MinimalPageLayout>
···
69
65
<Heading1 className="!mt-0 !mb-4 !text-2xl">
70
66
{t("onboarding.defaultConfirm.title")}
71
67
</Heading1>
72
-
<Paragraph className="!mt-1 !mb-12">
68
+
<Paragraph className="!mt-1 !mb-0">
73
69
{t("onboarding.defaultConfirm.description")}
70
+
</Paragraph>
71
+
<Paragraph className="!mt-1 !mb-8">
72
+
{t("onboarding.defaultConfirm.tip")}
74
73
</Paragraph>
75
74
<div className="flex flex-col-reverse gap-3 md:flex-row md:justify-between">
75
+
<Button
76
+
theme={
77
+
isFebboxSetup || isExtensionActiveCached() ? "purple" : "danger"
78
+
}
79
+
onClick={() => completeAndRedirect()}
80
+
>
81
+
{t("onboarding.defaultConfirm.confirm")}
82
+
</Button>
76
83
<Button theme="secondary" onClick={skipModal.hide}>
77
84
{t("onboarding.defaultConfirm.cancel")}
78
-
</Button>
79
-
<Button theme="purple" onClick={() => completeAndRedirect()}>
80
-
{t("onboarding.defaultConfirm.confirm")}
81
85
</Button>
82
86
</div>
83
87
</ModalCard>
···
177
181
</Paragraph>
178
182
179
183
{/* Desktop Cards */}
180
-
<div className="hidden md:flex w-full flex-col md:flex-row gap-3 pb-6">
184
+
<div className="hidden md:flex w-full flex-row gap-3 pb-6">
185
+
<Card
186
+
onClick={() =>
187
+
window.open(
188
+
"https://github.com/p-stream/p-stream-desktop/releases",
189
+
"_blank",
190
+
)
191
+
}
192
+
className="w-1/3"
193
+
>
194
+
<CardContent
195
+
colorClass="!text-onboarding-best"
196
+
title={t("onboarding.start.options.desktopapp.title")}
197
+
subtitle={t("onboarding.start.options.desktopapp.quality")}
198
+
description={t("onboarding.start.options.desktopapp.description")}
199
+
>
200
+
<Link className="!text-onboarding-best">
201
+
{t("onboarding.start.options.desktopapp.action")}
202
+
</Link>
203
+
</CardContent>
204
+
</Card>
205
+
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
206
+
<VerticalLine className="items-end" />
207
+
<span className="text-xs uppercase font-bold">
208
+
{t("onboarding.start.options.or")}
209
+
</span>
210
+
<VerticalLine />
211
+
</div>
181
212
<Card
182
213
onClick={() => navigate("/onboarding/extension")}
183
-
className={classNames(
184
-
conf().HIDE_PROXY_ONBOARDING ? "md:w-1/2" : "md:w-1/3",
185
-
)}
214
+
className="w-1/3"
186
215
>
187
216
<CardContent
188
-
colorClass="!text-onboarding-best"
217
+
colorClass="!text-onboarding-good"
189
218
title={t("onboarding.start.options.extension.title")}
190
219
subtitle={t("onboarding.start.options.extension.quality")}
191
220
description={t("onboarding.start.options.extension.description")}
192
221
>
193
-
<Link className="!text-onboarding-best">
222
+
<Link className="!text-onboarding-good">
194
223
{t("onboarding.start.options.extension.action")}
195
224
</Link>
196
225
</CardContent>
197
226
</Card>
198
-
{conf().HIDE_PROXY_ONBOARDING ? null : (
199
-
<>
200
-
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
201
-
<VerticalLine className="items-end" />
202
-
<span className="text-xs uppercase font-bold">
203
-
{t("onboarding.start.options.or")}
204
-
</span>
205
-
<VerticalLine />
206
-
</div>
207
-
<Card
208
-
onClick={() => navigate("/onboarding/proxy")}
209
-
className="md:w-1/3"
210
-
>
211
-
<CardContent
212
-
colorClass="!text-onboarding-good"
213
-
title={t("onboarding.start.options.proxy.title")}
214
-
subtitle={t("onboarding.start.options.proxy.quality")}
215
-
description={t("onboarding.start.options.proxy.description")}
216
-
>
217
-
<Link>{t("onboarding.start.options.proxy.action")}</Link>
218
-
</CardContent>
219
-
</Card>
220
-
</>
221
-
)}
222
227
{noProxies ? null : (
223
228
<>
224
229
<div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
···
230
235
</div>
231
236
<Card
232
237
onClick={
233
-
isSafari
234
-
? () => completeAndRedirect() // Skip modal on Safari
235
-
: skipModal.show // Show modal on other browsers
238
+
isFebboxSetup && isExtensionActiveCached()
239
+
? () => completeAndRedirect()
240
+
: skipModal.show
236
241
}
237
-
className={classNames(
238
-
conf().HIDE_PROXY_ONBOARDING ? "md:w-1/2" : "md:w-1/3",
239
-
)}
242
+
className="w-1/3"
240
243
>
241
244
<CardContent
242
245
colorClass="!text-onboarding-bad"
···
252
255
</div>
253
256
254
257
{/* Mobile Cards */}
255
-
<div className="md:hidden flex w-full flex-col md:flex-row gap-3 pb-6">
258
+
<div className="md:hidden flex w-full flex-col gap-3 pb-6">
259
+
{/* <Card
260
+
onClick={() =>
261
+
window.open(
262
+
"https://github.com/p-stream/p-stream-desktop/releases",
263
+
"_blank",
264
+
)
265
+
}
266
+
className="w-full"
267
+
>
268
+
<MiniCardContent
269
+
colorClass="!text-onboarding-best"
270
+
title={t("onboarding.start.options.desktopapp.title")}
271
+
subtitle={t("onboarding.start.options.desktopapp.quality")}
272
+
description={t("onboarding.start.options.desktopapp.description")}
273
+
/>
274
+
</Card> */}
256
275
<Card
257
276
onClick={() => navigate("/onboarding/extension")}
258
277
className="md:w-1/3 md:h-full"
259
278
>
260
279
<MiniCardContent
261
-
colorClass="!text-onboarding-best"
280
+
colorClass="!text-onboarding-good"
262
281
title={t("onboarding.start.options.extension.title")}
263
282
subtitle={t("onboarding.start.options.extension.quality")}
264
283
description={t("onboarding.start.options.extension.description")}
265
284
/>
266
285
</Card>
267
-
{conf().HIDE_PROXY_ONBOARDING ? null : (
268
-
<Card
269
-
onClick={() => navigate("/onboarding/proxy")}
270
-
className="md:w-1/3"
271
-
>
272
-
<MiniCardContent
273
-
colorClass="!text-onboarding-good"
274
-
title={t("onboarding.start.options.proxy.title")}
275
-
subtitle={t("onboarding.start.options.proxy.quality")}
276
-
description={t("onboarding.start.options.proxy.description")}
277
-
/>
278
-
</Card>
279
-
)}
280
286
{noProxies ? null : (
281
287
<Card
282
288
onClick={
283
-
isSafari
284
-
? () => completeAndRedirect() // Skip modal on Safari
285
-
: skipModal.show // Show modal on other browsers
289
+
isFebboxSetup && isExtensionActiveCached()
290
+
? () => completeAndRedirect()
291
+
: skipModal.show
286
292
}
287
293
className="md:w-1/3"
288
294
>