From 84ff12e4defb4113ef3dbc3753f159cfb36460a3 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 11 Jun 2025 17:35:17 +0200
Subject: [PATCH] better hooks for media context

Signed-off-by: Timo K <toger5@hotmail.de>
---
 src/livekit/MediaDevicesContext.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx
index c836f82b..04526f4f 100644
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/src/livekit/MediaDevicesContext.tsx
@@ -18,7 +18,11 @@ import {
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
 import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import {
+  useObservable,
+  useObservableEagerState,
+  useSubscription,
+} from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
 
@@ -135,7 +139,7 @@ function useMediaDeviceHandle(
   // useMediaDevices provides no way to request device names.
   // Tragically, the only way to get device names out of LiveKit is to specify a
   // kind, which then results in multiple permissions requests.
-  const deviceObserver$ = useMemo(
+  const deviceObserver$ = useObservable(
     () =>
       createMediaDeviceObserver(
         kind,
@@ -153,8 +157,9 @@ function useMediaDeviceHandle(
       ),
     [kind, requestPermissions],
   );
+
   const available = useObservableEagerState(
-    useMemo(
+    useObservable(
       () =>
         deviceObserver$.pipe(
           map((availableRaw) => {
@@ -197,7 +202,7 @@ function useMediaDeviceHandle(
   const selectedId = useSelectedId(available, preferredId);
 
   const selectedGroupId = useObservableEagerState(
-    useMemo(
+    useObservable(
       () =>
         deviceObserver$.pipe(
           map(
@@ -360,13 +365,12 @@ function useControlledOutput(): MediaDeviceHandle {
       );
     }),
   );
+
   const [preferredId, setPreferredId] = useSetting(audioOutputSetting);
-  useEffect(() => {
-    const subscription = outputDevice$.subscribe((id) => {
-      if (id) setPreferredId(id);
-    });
-    return (): void => subscription.unsubscribe();
-  }, [setPreferredId]);
+
+  useSubscription(outputDevice$, (id) => {
+    if (id) setPreferredId(id);
+  });
 
   const selectedId = useSelectedId(available, preferredId);