change label on button

src/livekit/MediaDevicesContext.tsx

@@ -322,43 +322,42 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
 };
 
 function useControlledOutput(): MediaDeviceHandle {
-  const { available, deviceForEarpiece: physicalDeviceForEarpiceMode } =
+  const { available } = useObservableEagerState(
-    useObservableEagerState(
+    useObservable(() => {
-      useObservable(() => {
+      const outputDeviceData$ = setAvailableOutputDevices$.pipe(
-        const outputDeviceData$ = setAvailableOutputDevices$.pipe(
+        startWith<OutputDevice[]>([]),
-          startWith<OutputDevice[]>([]),
+        map((devices) => {
-          map((devices) => {
+          const deviceForEarpiece = devices.find((d) => d.forEarpiece);
-            const deviceForEarpiece = devices.find((d) => d.forEarpiece);
+          const deviceMapTuple: [string, DeviceLabel][] = devices.map(
-            const deviceMapTuple: [string, DeviceLabel][] = devices.map(
+            ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
-              ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
+              let deviceLabel: DeviceLabel = { type: "name", name };
-                let deviceLabel: DeviceLabel = { type: "name", name };
+              // if (isExternalHeadset) // Do we want this?
-                // if (isExternalHeadset) // Do we want this?
+              if (isEarpiece) deviceLabel = { type: "earpiece" };
-                if (isEarpiece) deviceLabel = { type: "earpiece" };
+              if (isSpeaker) deviceLabel = { type: "default", name };
-                if (isSpeaker) deviceLabel = { type: "default", name };
+              return [id, deviceLabel];
-                return [id, deviceLabel];
+            },
-              },
+          );
-            );
+          return {
-            return {
+            devicesMap: new Map<string, DeviceLabel>(deviceMapTuple),
-              devicesMap: new Map<string, DeviceLabel>(deviceMapTuple),
+            deviceForEarpiece,
-              deviceForEarpiece,
+          };
-            };
+        }),
-          }),
+      );
-        );
 
-        return combineLatest([outputDeviceData$, iosDeviceMenu$]).pipe(
+      return combineLatest([outputDeviceData$, iosDeviceMenu$]).pipe(
-          map(([{ devicesMap, deviceForEarpiece }, iosShowEarpiece]) => {
+        map(([{ devicesMap, deviceForEarpiece }, iosShowEarpiece]) => {
-            let available = devicesMap;
+          let available = devicesMap;
-            if (iosShowEarpiece && !!deviceForEarpiece) {
+          if (iosShowEarpiece && !!deviceForEarpiece) {
-              available = new Map([
+            available = new Map([
-                ...devicesMap.entries(),
+              ...devicesMap.entries(),
-                [EARPIECE_CONFIG_ID, { type: "earpiece" }],
+              [EARPIECE_CONFIG_ID, { type: "earpiece" }],
-              ]);
+            ]);
-            }
+          }
-            return { available, deviceForEarpiece };
+          return { available, deviceForEarpiece };
-          }),
+        }),
-        );
+      );
-      }),
+    }),
-    );
+  );
   const [preferredId, setPreferredId] = useSetting(audioOutputSetting);
   useEffect(() => {
     setOutputDevice$.subscribe((id) => {

src/settings/SettingsModal.tsx

@@ -11,7 +11,7 @@ import { type MatrixClient } from "matrix-js-sdk";
 import { Button, Root as Form, Separator } from "@vector-im/compound-web";
 import { type Room as LivekitRoom } from "livekit-client";
 import { useObservableEagerState } from "observable-hooks";
-// import { logger } from "matrix-js-sdk/lib/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -128,12 +128,12 @@ export const SettingsModal: FC<Props> = ({
           {iosDeviceMenu && (
             <Button
               kind="secondary"
-              // onClick={(): void => {
+              onClick={(): void => {
-              //   logger.log("Open native device picker");
+                logger.log("Open native device picker");
-              //   // window.controls.showNativeOutputDevicePicker?.();
+                window.controls.showNativeOutputDevicePicker?.();
-              // }}
+              }}
             >
-              {t("settings.devices.change_device_button")}
+              Test
             </Button>
           )}
           <DeviceSelection