diff --git a/src/matrix-utils.ts b/src/matrix-utils.ts index c93580b1..7e31c3e6 100644 --- a/src/matrix-utils.ts +++ b/src/matrix-utils.ts @@ -19,9 +19,13 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory"; import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store"; import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store"; import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store"; -import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix"; +import { + createClient, + ICreateClientOpts, + Preset, + Visibility, +} from "matrix-js-sdk/src/matrix"; import { ClientEvent } from "matrix-js-sdk/src/client"; -import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials"; import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync"; import { logger } from "matrix-js-sdk/src/logger"; import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring"; diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 602ca5e5..49342c42 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useEffect, useMemo, useRef, FC, ReactNode } from "react"; +import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react"; import useMeasure from "react-use-measure"; import { ResizeObserver } from "@juggle/resize-observer"; import { usePreviewTracks } from "@livekit/components-react"; @@ -68,8 +68,8 @@ export const VideoPreview: FC = ({ deviceId: devices.audioInput.selectedId, }; - const tracks = usePreviewTracks( - { + const localTrackOptions = useMemo( + () => ({ // The only reason we request audio here is to get the audio permission // request over with at the same time. But changing the audio settings // shouldn't cause this hook to recreate the track, which is why we @@ -80,13 +80,21 @@ export const VideoPreview: FC = ({ video: muteStates.video.enabled && { deviceId: devices.videoInput.selectedId, }, - }, - (error) => { + }), + [devices.videoInput.selectedId, muteStates.video.enabled], + ); + + const onError = useCallback( + (error: Error) => { logger.error("Error while creating preview Tracks:", error); muteStates.audio.setEnabled?.(false); muteStates.video.setEnabled?.(false); }, + [muteStates.audio, muteStates.video], ); + + const tracks = usePreviewTracks(localTrackOptions, onError); + const videoTrack = useMemo( () => tracks?.find((t) => t.kind === Track.Kind.Video) as