Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-07-15 18:49:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

better hooks for media context

Browse Source 
Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo K
2025-06-11 17:35:17 +02:00
parent aa092c2195
commit 84ff12e4de
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/livekit/MediaDevicesContext.tsx
View File

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