Add flags to optimize EC device handling

docs/controls.md

@@ -12,7 +12,7 @@ A few aspects of Element Call's interface can be controlled through a global API
 
 These functions must be used in conjunction with the `controlledOutput` URL parameter in order to have any effect.
 
-- `controls.setAvailableOutputDevices(devices: { id: string, name: string, forEarpiece?: boolean }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on ios only.
+- `controls.setAvailableOutputDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isBluetooth?, boolean;}[]): void` Sets the list of available audio outputs. `forEarpiece` is used on ios only.
   It flags the device that should be used if the user selects earpiece mode. This should be the main stereo loudspeaker of the device.
 - `controls.onOutputDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
 - `controls.setOutputDevice(id: string): void` Sets the selected audio device in EC menu. This should be used if the os decides to automatically switch to bluetooth.

src/controls.ts

@@ -22,6 +22,9 @@ export interface OutputDevice {
   id: string;
   name: string;
   forEarpiece?: boolean;
+  isEarpiece?: boolean;
+  isSpeaker?: boolean;
+  isBluetooth?: boolean;
 }
 
 export const setPipEnabled$ = new Subject<boolean>();

src/livekit/MediaDevicesContext.tsx

@@ -327,10 +327,17 @@ function useControlledOutput(): MediaDeviceHandle {
           startWith<OutputDevice[]>([]),
           map((devices) => {
             const deviceForEarpiece = devices.find((d) => d.forEarpiece);
+            const deviceMapTuple: [string, DeviceLabel][] = devices.map(
+              ({ id, name, isEarpiece, isSpeaker /*,isBluetooth*/ }) => {
+                let deviceLabel: DeviceLabel = { type: "name", name };
+                // if (isBluetooth) // Do we want this?
+                if (isEarpiece) deviceLabel = { type: "earpiece" };
+                if (isSpeaker) deviceLabel = { type: "default", name };
+                return [id, deviceLabel];
+              },
+            );
             return {
-              devicesMap: new Map<string, DeviceLabel>(
-                devices.map(({ id, name }) => [id, { type: "name", name }]),
-              ),
+              devicesMap: new Map<string, DeviceLabel>(deviceMapTuple),
               deviceForEarpiece,
             };
           }),