>;
+}
+
function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
const { t } = useTranslation();
const add = useCallback(() => {
@@ -54,7 +59,7 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
{t("settings.connections.workers.label")}
-
+
Proxy documentation
@@ -125,7 +130,7 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
{t("settings.connections.server.label")}
-
+
Backend documentation
@@ -135,7 +140,7 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
{user.account && (
-
+
{t("settings.connections.server.migration.link")}
@@ -169,7 +174,75 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
);
}
-export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) {
+function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
FED API (Febbox) UI token
+
+
+ Bringing your own UI token allows you to get faster 4K streams. We
+ only have a limited number of tokens, so bringing your own helps
+ speed your streams when traffic is high.
+
+
+
+
+ setFebboxToken((s) => (s === null ? "" : null))}
+ enabled={febboxToken !== null}
+ />
+
+
+
+
+ To get your UI token:
+
+ 1. Go to febbox.com and
+ log in with Google
+
+ 2. Open DevTools or inspect the page
+
+ 3. Go to Application tab → Cookies
+
+ 4. Copy the "ui" cookie.
+
+ 5. Close the tab, but do NOT logout!
+
+
+
+ (This is not a sensitive login cookie or account token)
+
+
+ {t("settings.connections.febbox.tokenLabel", "Token")}
+
+ {
+ setFebboxToken(newToken);
+ }}
+ value={febboxToken ?? ""}
+ placeholder="eyABCdE..."
+ />
+
+ ) : null}
+
+ );
+}
+
+export function ConnectionsPart(
+ props: BackendEditProps & ProxyEditProps & FebboxTokenProps,
+) {
const { t } = useTranslation();
return (
@@ -184,6 +257,10 @@ export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) {
backendUrl={props.backendUrl}
setBackendUrl={props.setBackendUrl}
/>
+
);
diff --git a/src/stores/auth/index.ts b/src/stores/auth/index.ts
index 0a3c007a..6bf17383 100644
--- a/src/stores/auth/index.ts
+++ b/src/stores/auth/index.ts
@@ -22,6 +22,7 @@ interface AuthStore {
account: null | AccountWithToken;
backendUrl: null | string;
proxySet: null | string[];
+ febboxToken: null | string;
removeAccount(): void;
setAccount(acc: AccountWithToken): void;
updateDeviceName(deviceName: string): void;
@@ -29,6 +30,7 @@ interface AuthStore {
setAccountProfile(acc: Account["profile"]): void;
setBackendUrl(url: null | string): void;
setProxySet(urls: null | string[]): void;
+ setFebboxToken(token: null | string): void;
}
export const useAuthStore = create(
@@ -37,6 +39,7 @@ export const useAuthStore = create(
account: null,
backendUrl: null,
proxySet: null,
+ febboxToken: null,
setAccount(acc) {
set((s) => {
s.account = acc;
@@ -57,6 +60,20 @@ export const useAuthStore = create(
s.proxySet = urls;
});
},
+ setFebboxToken(token) {
+ set((s) => {
+ s.febboxToken = token;
+ });
+ try {
+ if (token === null) {
+ localStorage.removeItem("febbox_ui_token");
+ } else {
+ localStorage.setItem("febbox_ui_token", token);
+ }
+ } catch (e) {
+ console.warn("Failed to access localStorage:", e);
+ }
+ },
setAccountProfile(profile) {
set((s) => {
if (s.account) {
@@ -82,6 +99,28 @@ export const useAuthStore = create(
})),
{
name: "__MW::auth",
+ migrate: (persistedState: any) => {
+ // Migration from localStorage to Zustand store
+ if (!persistedState.febboxToken) {
+ try {
+ const storedToken = localStorage.getItem("febbox_ui_token");
+ if (storedToken) persistedState.febboxToken = storedToken;
+ } catch (e) {
+ console.warn("LocalStorage access failed during migration:", e);
+ }
+ }
+ return persistedState;
+ },
+ onRehydrateStorage: () => (state) => {
+ // After store rehydration
+ if (state?.febboxToken) {
+ try {
+ localStorage.setItem("febbox_ui_token", state.febboxToken);
+ } catch (e) {
+ console.warn("Failed to sync token to localStorage:", e);
+ }
+ }
+ },
},
),
);