mirror of
https://github.com/p-stream/p-stream.git
synced 2026-03-11 17:55:33 +00:00
require env config for fedapi stuff
This commit is contained in:
Pas
parent
d4df22e5b8
commit
8fe32c68ce
4 changed files with 153 additions and 129 deletions
|
|
@ -25,85 +25,89 @@ import {
|
|||
MiniCardContent,
|
||||
} from "@/pages/onboarding/utils";
|
||||
import { PageTitle } from "@/pages/parts/util/PageTitle";
|
||||
import { conf } from "@/setup/config";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { getProxyUrls } from "@/utils/proxyUrls";
|
||||
|
||||
import { PopupModal } from "../parts/home/PopupModal";
|
||||
|
||||
export function OptionalDropdown() {
|
||||
export function FEDAPISetup() {
|
||||
const { t } = useTranslation();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const febboxToken = useAuthStore((s) => s.febboxToken);
|
||||
const setFebboxToken = useAuthStore((s) => s.setFebboxToken);
|
||||
|
||||
return (
|
||||
<div className="mt-12">
|
||||
<SettingsCard>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="my-3">
|
||||
<p className="text-white font-bold mb-3">
|
||||
Optional: FED API (Febbox) token
|
||||
</p>
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
Bring your own Febbox account to get the best streaming with 4K
|
||||
quality, Dolby Atmos, and the best (fastest) load times!
|
||||
</Trans>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Toggle
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
enabled={isExpanded}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
|
||||
if (conf().ALLOW_FEBBOX_KEY) {
|
||||
return (
|
||||
<div className="mt-12">
|
||||
<SettingsCard>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="my-3">
|
||||
<p className="text-white font-bold mb-3">
|
||||
Optional: FED API (Febbox) token
|
||||
</p>
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
To get your UI token:
|
||||
<br />
|
||||
1. Go to <MwLink to="https://febbox.com">
|
||||
febbox.com
|
||||
</MwLink>{" "}
|
||||
and log in with Google (use a fresh account!)
|
||||
<br />
|
||||
2. Open DevTools or inspect the page
|
||||
<br />
|
||||
3. Go to Application tab → Cookies
|
||||
<br />
|
||||
4. Copy the "ui" cookie.
|
||||
<br />
|
||||
5. Close the tab, but do NOT logout!
|
||||
Bring your own Febbox account to get the best streaming with
|
||||
4K quality, Dolby Atmos, and the best (fastest) load times!
|
||||
</Trans>
|
||||
</p>
|
||||
<p className="text-type-danger mt-2">
|
||||
(Do not share this token!)
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Toggle
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
enabled={isExpanded}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.connections.febbox.tokenLabel", "Token")}
|
||||
</p>
|
||||
<AuthInputBox
|
||||
onChange={(newToken) => {
|
||||
setFebboxToken(newToken);
|
||||
}}
|
||||
value={febboxToken ?? ""}
|
||||
placeholder="eyABCdE..."
|
||||
passwordToggleable
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</SettingsCard>
|
||||
</div>
|
||||
);
|
||||
<div className="my-3">
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
To get your UI token:
|
||||
<br />
|
||||
1. Go to <MwLink to="https://febbox.com">
|
||||
febbox.com
|
||||
</MwLink>{" "}
|
||||
and log in with Google (use a fresh account!)
|
||||
<br />
|
||||
2. Open DevTools or inspect the page
|
||||
<br />
|
||||
3. Go to Application tab → Cookies
|
||||
<br />
|
||||
4. Copy the "ui" cookie.
|
||||
<br />
|
||||
5. Close the tab, but do NOT logout!
|
||||
</Trans>
|
||||
</p>
|
||||
<p className="text-type-danger mt-2">
|
||||
(Do not share this token!)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.connections.febbox.tokenLabel", "Token")}
|
||||
</p>
|
||||
<AuthInputBox
|
||||
onChange={(newToken) => {
|
||||
setFebboxToken(newToken);
|
||||
}}
|
||||
value={febboxToken ?? ""}
|
||||
placeholder="eyABCdE..."
|
||||
passwordToggleable
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</SettingsCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function OnboardingPage() {
|
||||
const navigate = useNavigateOnboarding();
|
||||
const skipModal = useModal("skip");
|
||||
|
|
@ -177,13 +181,18 @@ export function OnboardingPage() {
|
|||
might be slower due to shared bandwidth.
|
||||
<br />
|
||||
<br />
|
||||
<strong>Optional FED API (Febbox) UI token</strong>
|
||||
<br />
|
||||
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!
|
||||
<br />
|
||||
<br />
|
||||
{conf().ALLOW_FEBBOX_KEY && (
|
||||
<>
|
||||
<strong>Optional FED API (Febbox) UI token</strong>
|
||||
<br />
|
||||
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!
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
If you have more questions on how this works, feel free to ask
|
||||
on the{" "}
|
||||
<a
|
||||
|
|
@ -327,7 +336,7 @@ export function OnboardingPage() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<OptionalDropdown />
|
||||
<FEDAPISetup />
|
||||
</BiggerCenterContainer>
|
||||
</MinimalPageLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
|
|||
import { Divider } from "@/components/utils/Divider";
|
||||
import { Heading1 } from "@/components/utils/Text";
|
||||
import { SetupPart } from "@/pages/parts/settings/SetupPart";
|
||||
import { conf } from "@/setup/config";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
|
||||
interface ProxyEditProps {
|
||||
|
|
@ -176,68 +177,73 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
|
|||
|
||||
function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<SettingsCard>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="my-3">
|
||||
<p className="text-white font-bold mb-3">
|
||||
Optional: FED API (Febbox) token
|
||||
</p>
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
Bring your own Febbox account to get the best streaming with 4K
|
||||
quality, Dolby Atmos, and the best (fastest) load times!
|
||||
</Trans>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Toggle
|
||||
onClick={() => setFebboxToken((s) => (s === null ? "" : null))}
|
||||
enabled={febboxToken !== null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{febboxToken !== null ? (
|
||||
<>
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
|
||||
if (conf().ALLOW_FEBBOX_KEY) {
|
||||
return (
|
||||
<SettingsCard>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="my-3">
|
||||
<p className="text-white font-bold mb-3">
|
||||
Optional: FED API (Febbox) token
|
||||
</p>
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
To get your UI token:
|
||||
<br />
|
||||
1. Go to <MwLink to="https://febbox.com">febbox.com</MwLink> and
|
||||
log in with Google (use a fresh account!)
|
||||
<br />
|
||||
2. Open DevTools or inspect the page
|
||||
<br />
|
||||
3. Go to Application tab → Cookies
|
||||
<br />
|
||||
4. Copy the "ui" cookie.
|
||||
<br />
|
||||
5. Close the tab, but do NOT logout!
|
||||
Bring your own Febbox account to get the best streaming with 4K
|
||||
quality, Dolby Atmos, and the best (fastest) load times!
|
||||
</Trans>
|
||||
</p>
|
||||
<p className="text-type-danger mt-2">(Do not share this token!)</p>
|
||||
</div>
|
||||
<div>
|
||||
<Toggle
|
||||
onClick={() => setFebboxToken((s) => (s === null ? "" : null))}
|
||||
enabled={febboxToken !== null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{febboxToken !== null ? (
|
||||
<>
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.connections.febbox.tokenLabel", "Token")}
|
||||
</p>
|
||||
<AuthInputBox
|
||||
onChange={(newToken) => {
|
||||
setFebboxToken(newToken);
|
||||
}}
|
||||
value={febboxToken ?? ""}
|
||||
placeholder="eyABCdE..."
|
||||
passwordToggleable
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</SettingsCard>
|
||||
);
|
||||
<div className="my-3">
|
||||
<p className="max-w-[30rem] font-medium">
|
||||
<Trans i18nKey="settings.connections.febbox.description">
|
||||
To get your UI token:
|
||||
<br />
|
||||
1. Go to <MwLink to="https://febbox.com">
|
||||
febbox.com
|
||||
</MwLink>{" "}
|
||||
and log in with Google (use a fresh account!)
|
||||
<br />
|
||||
2. Open DevTools or inspect the page
|
||||
<br />
|
||||
3. Go to Application tab → Cookies
|
||||
<br />
|
||||
4. Copy the "ui" cookie.
|
||||
<br />
|
||||
5. Close the tab, but do NOT logout!
|
||||
</Trans>
|
||||
</p>
|
||||
<p className="text-type-danger mt-2">
|
||||
(Do not share this token!)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Divider marginClass="my-6 px-8 box-content -mx-8" />
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.connections.febbox.tokenLabel", "Token")}
|
||||
</p>
|
||||
<AuthInputBox
|
||||
onChange={(newToken) => {
|
||||
setFebboxToken(newToken);
|
||||
}}
|
||||
value={febboxToken ?? ""}
|
||||
placeholder="eyABCdE..."
|
||||
passwordToggleable
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</SettingsCard>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function ConnectionsPart(
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
StatusCircleProps,
|
||||
} from "@/components/player/internals/StatusCircle";
|
||||
import { Heading3 } from "@/components/utils/Text";
|
||||
import { conf } from "@/setup/config";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
|
||||
const testUrl = "https://postman-echo.com/get";
|
||||
|
|
@ -26,7 +27,7 @@ type SetupData = {
|
|||
extension: Status;
|
||||
proxy: Status;
|
||||
defaultProxy: Status;
|
||||
febboxTokenTest: Status;
|
||||
febboxTokenTest?: Status;
|
||||
};
|
||||
|
||||
function testProxy(url: string) {
|
||||
|
|
@ -100,7 +101,9 @@ function useIsSetup() {
|
|||
extension: extensionStatus,
|
||||
proxy: proxyStatus,
|
||||
defaultProxy: "success",
|
||||
febboxTokenTest: febboxTokenStatus,
|
||||
...(conf().ALLOW_FEBBOX_KEY && {
|
||||
febboxTokenTest: febboxTokenStatus,
|
||||
}),
|
||||
};
|
||||
}, [proxyUrls, febboxToken]);
|
||||
|
||||
|
|
@ -243,9 +246,11 @@ export function SetupPart() {
|
|||
>
|
||||
{t("settings.connections.setup.items.default")}
|
||||
</SetupCheckList>
|
||||
<SetupCheckList status={setupStates.febboxTokenTest}>
|
||||
Febbox UI token
|
||||
</SetupCheckList>
|
||||
{conf().ALLOW_FEBBOX_KEY && (
|
||||
<SetupCheckList status={setupStates.febboxTokenTest || "unset"}>
|
||||
Febbox UI token
|
||||
</SetupCheckList>
|
||||
)}
|
||||
</div>
|
||||
<div className="md:mt-5">
|
||||
<Button theme="purple" onClick={() => navigate("/onboarding")}>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ interface Config {
|
|||
ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string;
|
||||
ONBOARDING_PROXY_INSTALL_LINK: string;
|
||||
ALLOW_AUTOPLAY: boolean;
|
||||
ALLOW_FEBBOX_KEY: boolean;
|
||||
}
|
||||
|
||||
export interface RuntimeConfig {
|
||||
|
|
@ -44,6 +45,7 @@ export interface RuntimeConfig {
|
|||
ONBOARDING_CHROME_EXTENSION_INSTALL_LINK: string | null;
|
||||
ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string | null;
|
||||
ONBOARDING_PROXY_INSTALL_LINK: string | null;
|
||||
ALLOW_FEBBOX_KEY: boolean;
|
||||
}
|
||||
|
||||
const env: Record<keyof Config, undefined | string> = {
|
||||
|
|
@ -67,6 +69,7 @@ const env: Record<keyof Config, undefined | string> = {
|
|||
CDN_REPLACEMENTS: import.meta.env.VITE_CDN_REPLACEMENTS,
|
||||
HAS_ONBOARDING: import.meta.env.VITE_HAS_ONBOARDING,
|
||||
ALLOW_AUTOPLAY: import.meta.env.VITE_ALLOW_AUTOPLAY,
|
||||
ALLOW_FEBBOX_KEY: import.meta.env.VITE_ALLOW_FEBBOX_KEY,
|
||||
};
|
||||
|
||||
function coerceUndefined(value: string | null | undefined): string | undefined {
|
||||
|
|
@ -127,5 +130,6 @@ export function conf(): RuntimeConfig {
|
|||
.filter((s) => s.length > 0),
|
||||
)
|
||||
.filter((v) => v.length === 2), // The format is <beforeA>:<afterA>,<beforeB>:<afterB>
|
||||
ALLOW_FEBBOX_KEY: getKey("ALLOW_FEBBOX_KEY", "false") === "true",
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue