From 2a85f45e6963871f0990499bc6de0d8d2bd4b0bc Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 15 Sep 2025 17:51:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20prevent=20displaying?=
 =?UTF-8?q?=20audio=20output=20selector=20to=20Safari=20users?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide audio output selector component for Safari browsers due to lack
of native support for audio output device selection APIs. This
prevents user confusion and improves browser compatibility.
---
 .../controls/Device/AudioDevicesControl.tsx   | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
index ca6e9548..6132bbc0 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
@@ -15,6 +15,7 @@ import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
 import Source = Track.Source
+import { isSafari } from '@/utils/livekit'
 
 type AudioDevicesControlProps = Omit<
   UseTrackToggleProps<Source.Microphone>,
@@ -111,19 +112,21 @@ export const AudioDevicesControl = ({
                   onSubmit={saveAudioInputDeviceId}
                 />
               </div>
-              <div
-                style={{
-                  flex: '1 1 0',
-                  minWidth: 0,
-                }}
-              >
-                <SelectDevice
-                  context="room"
-                  kind="audiooutput"
-                  id={audioOutputDeviceId}
-                  onSubmit={saveAudioOutputDeviceId}
-                />
-              </div>
+              {!isSafari() && (
+                <div
+                  style={{
+                    flex: '1 1 0',
+                    minWidth: 0,
+                  }}
+                >
+                  <SelectDevice
+                    context="room"
+                    kind="audiooutput"
+                    id={audioOutputDeviceId}
+                    onSubmit={saveAudioOutputDeviceId}
+                  />
+                </div>
+              )}
               <SettingsButton
                 settingTab={SettingsDialogExtendedKey.AUDIO}
                 onPress={close}