require env config for fedapi stuff

src/pages/onboarding/Onboarding.tsx

@@ -25,17 +25,19 @@ 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);
 
+  if (conf().ALLOW_FEBBOX_KEY) {
     return (
       <div className="mt-12">
         <SettingsCard>
@@ -46,8 +48,8 @@ export function OptionalDropdown() {
               </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!
+                  Bring your own Febbox account to get the best streaming with
+                  4K quality, Dolby Atmos, and the best (fastest) load times!
                 </Trans>
               </p>
             </div>
@@ -103,7 +105,9 @@ export function OptionalDropdown() {
         </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 />
+                {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!
+                    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>
   );

src/pages/parts/settings/ConnectionsPart.tsx

@@ -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,7 +177,7 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
 
 function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
   const { t } = useTranslation();
-
+  if (conf().ALLOW_FEBBOX_KEY) {
     return (
       <SettingsCard>
         <div className="flex justify-between items-center gap-4">
@@ -207,8 +208,10 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
                 <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!)
+                  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 />
@@ -219,7 +222,9 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
                   5. Close the tab, but do NOT logout!
                 </Trans>
               </p>
-            <p className="text-type-danger mt-2">(Do not share this token!)</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" />
@@ -238,6 +243,7 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
         ) : null}
       </SettingsCard>
     );
+  }
 }
 
 export function ConnectionsPart(

src/pages/parts/settings/SetupPart.tsx

@@ -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",
+      ...(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}>
+          {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")}>

src/setup/config.ts

@@ -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",
   };
 }