From 9b44ed097419f0e794388648b43cc79fe563ee5f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 11 Aug 2025 22:59:25 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20disable=20Safari=20spe?=
 =?UTF-8?q?aker=20select=20for=20LiveKit=20compatibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disable speaker selection on prejoin screen for Safari based on LiveKit
documentation stating audio output selection isn't supported, though
this needs further verification.

Maintains consistency with audio tab behavior until Safari audio output
support can be confirmed. Feature remains available on other browsers
where support is verified.
---
 .../src/features/rooms/components/Join.tsx    | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index d6c63235..3258bb85 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -31,6 +31,7 @@ import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
 import { ToggleDevice } from './join/ToggleDevice'
 import { SelectDevice } from './join/SelectDevice'
 import { useResolveDefaultDeviceId } from '../livekit/hooks/useResolveDefaultDevice'
+import { isSafari } from '@/utils/livekit'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -601,17 +602,19 @@ export const Join = ({
                   onSubmit={saveAudioInputDeviceId}
                 />
               </div>
-              <div
-                className={css({
-                  width: '30%',
-                })}
-              >
-                <SelectDevice
-                  kind="audiooutput"
-                  id={audioOutputDeviceId}
-                  onSubmit={saveAudioOutputDeviceId}
-                />
-              </div>
+              {!isSafari() && (
+                <div
+                  className={css({
+                    width: '30%',
+                  })}
+                >
+                  <SelectDevice
+                    kind="audiooutput"
+                    id={audioOutputDeviceId}
+                    onSubmit={saveAudioOutputDeviceId}
+                  />
+                </div>
+              )}
               <div
                 className={css({
                   width: '30%',