Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-08-19 13:45:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add video tutorial to fed api setup

Browse source
This commit is contained in:
Pas 2025-02-24 13:07:35 -07:00
parent 198701b93c
commit af64857017
2 changed files with 62 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,3 @@
import { stat } from "fs";
import { useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
@ -67,6 +65,8 @@ export function FEDAPISetup() {
checkTokenStatus();
}, [febboxToken]);
const [showVideo, setShowVideo] = useState(false);
if (conf().ALLOW_FEBBOX_KEY) {
return (
<div className="mt-12">
@ -99,6 +99,34 @@ export function FEDAPISetup() {
<Trans i18nKey="settings.connections.febbox.description">
To get your UI token:
<br />
<div
onClick={() => setShowVideo(!showVideo)}
className="flex items-center justify-between p-1 px-2 my-2 w-fit border border-type-secondary rounded-lg cursor-pointer text-type-secondary hover:text-white transition-colors duration-200"
>
<span className="text-sm">
{showVideo
? "Hide Video Tutorial"
: "Show Video Tutorial"}
</span>
{showVideo ? (
<Icon icon={Icons.CHEVRON_UP} className="pl-1" />
) : (
<Icon icon={Icons.CHEVRON_DOWN} className="pl-1" />
)}
</div>
{showVideo && (
<>
<div className="relative pt-[56.25%] mt-2">
<iframe
src="https://player.vimeo.com/video/1059834885?h=c3ab398d42&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
className="absolute top-0 left-0 w-full h-full border border-type-secondary rounded-lg bg-black"
title="P-Stream FED API Setup Tutorial"
/>
</div>
<br />
</>
)}
1. Go to{" "}
<MwLink url="https://febbox.com">febbox.com</MwLink> and log
in with Google (use a fresh account!)

36
src/pages/parts/settings/ConnectionsPart.tsx
View file

@ -1,4 +1,4 @@
import { Dispatch, SetStateAction, useCallback } from "react";
import { Dispatch, SetStateAction, useCallback, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button";
@ -177,6 +177,8 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
const { t } = useTranslation();
const [showVideo, setShowVideo] = useState(false);
if (conf().ALLOW_FEBBOX_KEY) {
return (
<SettingsCard>
@ -208,9 +210,35 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
<Trans i18nKey="settings.connections.febbox.description">
To get your UI token:
<br />
1. Go to <MwLink url="https://febbox.com">
febbox.com
</MwLink>{" "}
<div
onClick={() => setShowVideo(!showVideo)}
className="flex items-center justify-between p-1 px-2 my-2 w-fit border border-type-secondary rounded-lg cursor-pointer text-type-secondary hover:text-white transition-colors duration-200"
>
<span className="text-sm">
{showVideo
? "Hide Video Tutorial"
: "Show Video Tutorial"}
</span>
{showVideo ? (
<Icon icon={Icons.CHEVRON_UP} className="pl-1" />
) : (
<Icon icon={Icons.CHEVRON_DOWN} className="pl-1" />
)}
</div>
{showVideo && (
<>
<div className="relative pt-[56.25%] mt-2">
<iframe
src="https://player.vimeo.com/video/1059834885?h=c3ab398d42&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
className="absolute top-0 left-0 w-full h-full border border-type-secondary rounded-lg bg-black"
title="P-Stream FED API Setup Tutorial"
/>
</div>
<br />
</>
)}
1. Go to <MwLink url="https://febbox.com">febbox.com</MwLink>{" "}
and log in with Google (use a fresh account!)
<br />
2. Open DevTools or inspect the page