From 7481006dbe01e1a4233078ec20ac98c76f0ebc67 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Wed, 29 Apr 2026 23:37:50 +0200
Subject: [PATCH] chore(bs): filter out whipEnabled on server selection

---
 .../src/app/(ui)/(protected)/stream/page.tsx  | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/(ui)/(protected)/stream/page.tsx b/apps/web/src/app/(ui)/(protected)/stream/page.tsx
index 42da839..a6ce4d8 100644
--- a/apps/web/src/app/(ui)/(protected)/stream/page.tsx
+++ b/apps/web/src/app/(ui)/(protected)/stream/page.tsx
@@ -34,10 +34,10 @@ import type { MediaMTXRegion } from '@/lib/utils/mediamtx/regions';
 
 export default function Page() {
   const serverOptions = getMediamtxClientRegionOptions();
+  const whipEnabledServerOptions = serverOptions.filter((server) => server.whipEnabled);
+  const defaultRegion = whipEnabledServerOptions[0]?.value ?? 'hq';
   const [selectedChannel, setSelectedChannel] = useState('');
-  const [selectedRegion, setSelectedRegion] = useState<MediaMTXRegion>(
-    serverOptions[0]?.value ?? 'hq'
-  );
+  const [selectedRegion, setSelectedRegion] = useState<MediaMTXRegion>(defaultRegion);
   const { channels, isLoading: isLoadingChannels } = useOwnedChannels();
   const ownedChannels = channels.map(({ channel }) => channel);
   const {
@@ -67,12 +67,14 @@ export default function Page() {
   });
 
   const hasChannels = ownedChannels.length > 0;
-  const hasServerOptions = serverOptions.length > 0;
+  const selectedServer = whipEnabledServerOptions.find((server) => server.value === selectedRegion);
+  const hasWhipEnabledServerOptions = whipEnabledServerOptions.length > 0;
   const canStartPublishing =
     !isSessionActive &&
     !isPreviewingSource &&
     Boolean(selectedChannel) &&
     Boolean(streamKey) &&
+    Boolean(selectedServer?.whipEnabled) &&
     !isLoadingStreamKey;
   const channelPlaceholder = isLoadingChannels ? 'Loading channels...' : 'Select a channel';
   const primaryIssue = issue ?? browserWarning;
@@ -269,18 +271,14 @@ export default function Page() {
               <Select
                 value={selectedRegion}
                 onValueChange={(value) => setSelectedRegion(value as MediaMTXRegion)}
-                disabled={isSessionActive || !hasServerOptions}
+                disabled={isSessionActive || !hasWhipEnabledServerOptions}
               >
                 <SelectTrigger className="w-44">
                   <SelectValue placeholder="Select server" />
                 </SelectTrigger>
                 <SelectContent>
-                  {serverOptions.map((server) => (
-                    <SelectItem
-                      key={server.value}
-                      value={server.value}
-                      disabled={!server.whipEnabled}
-                    >
+                  {whipEnabledServerOptions.map((server) => (
+                    <SelectItem key={server.value} value={server.value}>
                       {server.label} {server.emoji}
                     </SelectItem>
                   ))}