Use observables for more of the media devices logic

src/livekit/MediaDevicesContext.tsx

@@ -16,7 +16,7 @@ import {
   useState,
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { startWith } from "rxjs";
+import { map, startWith } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -83,8 +83,11 @@ function useMediaDevice(
       ).pipe(startWith([])),
     [kind, requestPermissions],
   );
-  const availableRaw = useObservableEagerState(deviceObserver);
-  const available = useMemo(() => {
+  const available = useObservableEagerState(
+    useMemo(
+      () =>
+        deviceObserver.pipe(
+          map((availableRaw) => {
             // Sometimes browsers (particularly Firefox) can return multiple device
             // entries for the exact same device ID; using a map deduplicates them
             let available = new Map<string, DeviceLabel>(
@@ -112,7 +115,11 @@ function useMediaDevice(
             // entirely, because requesting a media stream from deviceId "" won't
             // automatically track the default device.
             return available;
-  }, [kind, availableRaw]);
+          }),
+        ),
+      [kind, deviceObserver],
+    ),
+  );
 
   const [preferredId, select] = useSetting(setting);
   const selectedId = useMemo(() => {
@@ -130,9 +137,17 @@ function useMediaDevice(
     }
     return undefined;
   }, [available, preferredId]);
-  const selectedGroupId = useMemo(
-    () => availableRaw.find((d) => d.deviceId === selectedId)?.groupId,
-    [availableRaw, selectedId],
+  const selectedGroupId = useObservableEagerState(
+    useMemo(
+      () =>
+        deviceObserver.pipe(
+          map(
+            (availableRaw) =>
+              availableRaw.find((d) => d.deviceId === selectedId)?.groupId,
+          ),
+        ),
+      [deviceObserver, selectedId],
+    ),
   );
 
   return useMemo(