From e5117b962c14906211194daa9b42caf434dcb0bd Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 21 Nov 2024 12:51:22 -0500
Subject: [PATCH] Enable audio output support on Firefox

---
 src/livekit/MediaDevicesContext.tsx | 18 +++---------------
 src/settings/SettingsModal.tsx      | 11 ++++-------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx
index d405eec0..334eb2ec 100644
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/src/livekit/MediaDevicesContext.tsx
@@ -26,7 +26,6 @@ import {
   videoInput as videoInputSetting,
   Setting,
 } from "../settings/settings";
-import { isFirefox } from "../Platform";
 
 export interface MediaDevice {
   available: MediaDeviceInfo[];
@@ -61,7 +60,6 @@ function useMediaDevice(
   kind: MediaDeviceKind,
   setting: Setting<string | undefined>,
   usingNames: boolean,
-  alwaysDefault: boolean = false,
 ): MediaDevice {
   // Make sure we don't needlessly reset to a device observer without names,
   // once permissions are already given
@@ -89,7 +87,7 @@ function useMediaDevice(
 
   return useMemo(() => {
     let selectedId: string | undefined = undefined;
-    if (!alwaysDefault && available) {
+    if (available) {
       // If the preferred device is available, use it. Or if every available
       // device ID is falsy, the browser is probably just being paranoid about
       // fingerprinting and we should still try using the preferred device.
@@ -112,7 +110,7 @@ function useMediaDevice(
       selectedId,
       select,
     };
-  }, [available, preferredId, select, alwaysDefault]);
+  }, [available, preferredId, select]);
 }
 
 const deviceStub: MediaDevice = {
@@ -139,15 +137,6 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
   const usingNames = numCallersUsingNames > 0;
 
-  // Setting the audio device to something other than 'undefined' breaks echo-cancellation
-  // and even can introduce multiple different output devices for one call.
-  const alwaysUseDefaultAudio = isFirefox();
-
-  // On FF we dont need to query the names
-  // (call enumerateDevices + create meadia stream to trigger permissions)
-  // for ouput devices because the selector wont be shown on FF.
-  const useOutputNames = usingNames && !isFirefox();
-
   const audioInput = useMediaDevice(
     "audioinput",
     audioInputSetting,
@@ -156,8 +145,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   const audioOutput = useMediaDevice(
     "audiooutput",
     audioOutputSetting,
-    useOutputNames,
-    alwaysUseDefaultAudio,
+    usingNames,
   );
   const videoInput = useMediaDevice(
     "videoinput",
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 78afc2c5..79545f1d 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -29,7 +29,6 @@ import {
   useOptInAnalytics,
   soundEffectVolumeSetting,
 } from "./settings";
-import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
@@ -96,12 +95,10 @@ export const SettingsModal: FC<Props> = ({
             devices={devices.audioInput}
             caption={t("common.microphone")}
           />
-          {!isFirefox() && (
-            <DeviceSelection
-              devices={devices.audioOutput}
-              caption={t("settings.speaker_device_selection_label")}
-            />
-          )}
+          <DeviceSelection
+            devices={devices.audioOutput}
+            caption={t("settings.speaker_device_selection_label")}
+          />
           <div className={styles.volumeSlider}>
             <label>{t("settings.audio_tab.effect_volume_label")}</label>
             <p>{t("settings.audio_tab.effect_volume_description")}</p>