rename setOutputDevices-> setAvailableOutputDevices

src/controls.ts

@@ -11,7 +11,8 @@ export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
-  setOutputDevices(devices: OutputDevice[]): void;
+  setAvailableOutputDevices(devices: OutputDevice[]): void;
+  setOutputDevice(id: string): void;
   onOutputDeviceSelect?: (id: string) => void;
   setOutputEnabled(enabled: boolean): void;
 }
@@ -23,7 +24,8 @@ export interface OutputDevice {
 }
 
 export const setPipEnabled$ = new Subject<boolean>();
-export const setOutputDevices$ = new Subject<OutputDevice[]>();
+export const setAvailableOutputDevices$ = new Subject<OutputDevice[]>();
+export const setOutputDevice$ = new Subject<string>();
 export const setOutputEnabled$ = new Subject<boolean>();
 
 window.controls = {
@@ -38,10 +40,15 @@ window.controls = {
     if (!setPipEnabled$.observed) throw new Error("No call is running");
     setPipEnabled$.next(false);
   },
-  setOutputDevices(devices: OutputDevice[]): void {
-    if (!setOutputDevices$.observed)
+  setAvailableOutputDevices(devices: OutputDevice[]): void {
+    if (!setAvailableOutputDevices$.observed)
       throw new Error("Output controls are disabled");
-    setOutputDevices$.next(devices);
+    setAvailableOutputDevices$.next(devices);
+  },
+  setOutputDevice(id: string): void {
+    if (!setOutputDevice$.observed)
+      throw new Error("Output controls are disabled");
+    setOutputDevice$.next(id);
   },
   setOutputEnabled(enabled: boolean): void {
     if (!setOutputEnabled$.observed)

src/livekit/MediaDevicesContext.tsx

@@ -29,7 +29,11 @@ import {
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
   type Setting,
 } from "../settings/settings";
-import { type OutputDevice, setOutputDevices$ } from "../controls";
+import {
+  type OutputDevice,
+  setAvailableOutputDevices$,
+  setOutputDevice$,
+} from "../controls";
 import { useUrlParams } from "../UrlParams";
 
 export const EARPIECE_CONFIG_ID = "earpiece-id";
@@ -299,7 +303,7 @@ function useControlledOutput(): MediaDeviceHandle {
         startWith(alwaysShowIphoneEarpieceSetting.getValue()),
         map((v) => v || navigator.userAgent.includes("iPhone")),
       );
-      const outputDeviceData$ = setOutputDevices$.pipe(
+      const outputDeviceData$ = setAvailableOutputDevices$.pipe(
         startWith<OutputDevice[]>([]),
         map((devices) => {
           const physicalDeviceForEarpiceMode = devices.find(
@@ -316,15 +320,22 @@ function useControlledOutput(): MediaDeviceHandle {
 
       return combineLatest([outputDeviceData$, showEarpice$]).pipe(
         map(([{ devicesMap, physicalDeviceForEarpiceMode }, showEarpiece]) => {
-          if (showEarpiece && !!physicalDeviceForEarpiceMode)
-            devicesMap.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
-          return { available: devicesMap, physicalDeviceForEarpiceMode };
+          let available = devicesMap;
+          if (showEarpiece && !!physicalDeviceForEarpiceMode) {
+            available = new Map([
+              ...devicesMap.entries(),
+              [EARPIECE_CONFIG_ID, { type: "earpiece" }],
+            ]);
+          }
+          return { available, physicalDeviceForEarpiceMode };
         }),
       );
     }),
   );
-
   const [preferredId, setPreferredId] = useSetting(audioOutputSetting);
+  useEffect(() => {
+    setOutputDevice$.subscribe((id) => setPreferredId(id));
+  }, [setPreferredId]);
 
   const selectedId = useMemo(() => {
     if (available.size) {