move region selector part to fedapi setup parts!

This commit is contained in:
Pas 2025-09-25 11:41:48 -06:00
parent c20645ef4f
commit a498fdde87
5 changed files with 41 additions and 59 deletions

View file

@ -3,7 +3,6 @@ import { Heading1, Paragraph } from "@/components/utils/Text";
import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
import { M3U8TestPart } from "@/pages/parts/admin/M3U8TestPart";
import { RegionSelectorPart } from "@/pages/parts/admin/RegionSelectorPart";
import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
@ -22,7 +21,6 @@ export function AdminPage() {
<WorkerTestPart />
<TMDBTestPart />
<M3U8TestPart />
<RegionSelectorPart />
<EmbedOrderPart />
</ThinContainer>
</SubPageLayout>

View file

@ -44,6 +44,7 @@ import { conf } from "@/setup/config";
import { usePreferencesStore } from "@/stores/preferences";
import { getProxyUrls } from "@/utils/proxyUrls";
import { RegionSelectorPart } from "../parts/settings/RegionSelectorPart";
import {
Status,
testFebboxKey,
@ -189,11 +190,8 @@ export function FEDAPISetup() {
<p className="text-white font-bold mb-3">
{t("fedapi.setup.tokenLabel")}
</p>
<div className="flex items-center w-full">
<StatusCircle
type={statusMap[status]}
className="mx-2 mr-4"
/>
<div className="flex items-center w-full gap-4">
<StatusCircle type={statusMap[status]} className="mx-2" />
<AuthInputBox
onChange={(newToken) => {
setFebboxKey(newToken);
@ -203,6 +201,7 @@ export function FEDAPISetup() {
passwordToggleable
className="flex-grow"
/>
<RegionSelectorPart />
</div>
{status === "error" && (
<p className="text-type-danger mt-4">

View file

@ -1,50 +0,0 @@
import { Dropdown } from "@/components/form/Dropdown";
import { Box } from "@/components/layout/Box";
import { Heading2 } from "@/components/utils/Text";
import { Region, useRegionStore } from "@/utils/detectRegion";
export function RegionSelectorPart() {
const { region, setRegion } = useRegionStore();
const regionOptions = [
{ id: "dallas", name: "Dallas, TX" },
{ id: "portland", name: "Portland, OR" },
{ id: "new-york", name: "New York, NY" },
{ id: "paris", name: "Paris, France" },
{ id: "hong-kong", name: "Hong Kong" },
{ id: "kansas", name: "Kansas City, MO" },
{ id: "sydney", name: "Sydney, Australia" },
{ id: "singapore", name: "Singapore" },
{ id: "mumbai", name: "Mumbai, India" },
];
return (
<>
<Heading2 className="mb-8 mt-12">Region Selector</Heading2>
<Box>
<div className="flex items-center">
<div className="flex-1">
<p className="max-w-[20rem] font-medium">
Manually select your preferred region for FED API. This will
override automatic region detection.
</p>
</div>
<Dropdown
options={regionOptions}
selectedItem={{
id: region || "new-york",
name:
regionOptions.find((r) => r.id === region)?.name ||
"Unknown (New York, NY)",
}}
setSelectedItem={(item) => setRegion(item.id as Region, true)}
direction="up"
/>
</div>
<p className="max-w-[30rem] text-type-danger">
Use with caution. Changing the region will reset your token!
</p>
</Box>
</>
);
}

View file

@ -30,6 +30,8 @@ import { conf } from "@/setup/config";
import { useAuthStore } from "@/stores/auth";
import { usePreferencesStore } from "@/stores/preferences";
import { RegionSelectorPart } from "./RegionSelectorPart";
interface ProxyEditProps {
proxyUrls: string[] | null;
setProxyUrls: Dispatch<SetStateAction<string[] | null>>;
@ -349,8 +351,8 @@ function FebboxKeyEdit({ febboxKey, setFebboxKey }: FebboxKeyProps) {
<p className="text-white font-bold">
{t("settings.connections.febbox.tokenLabel", "Token")}
</p>
<div className="flex items-center w-full">
<StatusCircle type={statusMap[status]} className="mx-2 mr-4" />
<div className="flex items-center w-full gap-4">
<StatusCircle type={statusMap[status]} className="mx-2" />
<AuthInputBox
onChange={(newToken) => {
setFebboxKey(newToken);
@ -360,6 +362,7 @@ function FebboxKeyEdit({ febboxKey, setFebboxKey }: FebboxKeyProps) {
passwordToggleable
className="flex-grow"
/>
<RegionSelectorPart />
</div>
{status === "error" && (
<p className="text-type-danger mt-4">

View file

@ -0,0 +1,32 @@
import { Dropdown } from "@/components/form/Dropdown";
import { Region, useRegionStore } from "@/utils/detectRegion";
export function RegionSelectorPart() {
const { region, setRegion } = useRegionStore();
const regionOptions = [
{ id: "dallas", name: "Dallas, TX" },
{ id: "portland", name: "Portland, OR" },
{ id: "new-york", name: "New York, NY" },
{ id: "paris", name: "Paris, France" },
{ id: "hong-kong", name: "Hong Kong" },
{ id: "kansas", name: "Kansas City, MO" },
{ id: "sydney", name: "Sydney, Australia" },
{ id: "singapore", name: "Singapore" },
{ id: "mumbai", name: "Mumbai, India" },
];
return (
<Dropdown
options={regionOptions}
selectedItem={{
id: region || "new-york",
name:
regionOptions.find((r) => r.id === region)?.name ||
"Unknown (New York, NY)",
}}
setSelectedItem={(item) => setRegion(item.id as Region, true)}
direction="up"
/>
);
}