From a0e3e85467aa4b822b8400876be00f54fe794c8f Mon Sep 17 00:00:00 2001 From: Alois Date: Sat, 23 May 2026 21:43:11 +0200 Subject: [PATCH] (fix): call being getting initialised even on the login screen --- packages/call/src/components/sidebarBox.tsx | 4 +- packages/call/src/components/top.tsx | 4 +- packages/call/src/components/videoViewer.tsx | 4 +- packages/call/src/store.tsx | 108 +++++++++++-------- packages/call/src/views/main/focused.tsx | 4 +- packages/call/src/views/main/grid.tsx | 4 +- 6 files changed, 73 insertions(+), 55 deletions(-) diff --git a/packages/call/src/components/sidebarBox.tsx b/packages/call/src/components/sidebarBox.tsx index 6a850f0..ac715e9 100644 --- a/packages/call/src/components/sidebarBox.tsx +++ b/packages/call/src/components/sidebarBox.tsx @@ -1,5 +1,5 @@ import { Lock, LockOpen } from "lucide-react"; -import { openCallPage, useCall } from "../store"; +import { openCallPage, useCall, getRoom } from "../store"; import { Button, Card, @@ -78,7 +78,7 @@ function ConnectionBar() { } export function TinyPingGraph() { - const room = useCall((store) => store.room); + const room = getRoom(); const [mapData, setMapData] = useState>(() => new Map()); diff --git a/packages/call/src/components/top.tsx b/packages/call/src/components/top.tsx index 62e8bfc..610493a 100644 --- a/packages/call/src/components/top.tsx +++ b/packages/call/src/components/top.tsx @@ -1,5 +1,5 @@ import { useUser, type User } from "@tensamin/user/context"; -import { useCall } from "../store"; +import { useCall, getRoom } from "../store"; import { useEffect, useState } from "react"; import { useStorage } from "@tensamin/storage/context"; import { @@ -14,7 +14,7 @@ import { export default function TopBar() { const { get } = useUser(); const { load } = useStorage(); - const room = useCall((state) => state.room); + const room = getRoom(); const screenRef = useCall((state) => state.screenRef); const [portalContainer, setPortalContainer] = useState(); diff --git a/packages/call/src/components/videoViewer.tsx b/packages/call/src/components/videoViewer.tsx index 40cf6ac..1268b22 100644 --- a/packages/call/src/components/videoViewer.tsx +++ b/packages/call/src/components/videoViewer.tsx @@ -1,6 +1,6 @@ import { VideoTrack, useParticipantTracks } from "@livekit/components-react"; import { TrackPublication } from "livekit-client"; -import { useCall } from "../store"; +import { getRoom } from "../store"; import { cn } from "@tensamin/ui"; import { Loader2 } from "lucide-react"; @@ -17,7 +17,7 @@ export default function VideoViewer({ publication: TrackPublication; participantId: string; }) { - const room = useCall((state) => state.room); + const room = getRoom(); const tracks = useParticipantTracks([publication.source], { participantIdentity: participantId, room, diff --git a/packages/call/src/store.tsx b/packages/call/src/store.tsx index 3d63963..5b49603 100644 --- a/packages/call/src/store.tsx +++ b/packages/call/src/store.tsx @@ -101,27 +101,46 @@ type CallStore = { callIsPopout: boolean; layoutVersion: number; screenRef: React.RefObject | null; - room: Room; - keyProvider: ExternalE2EEKeyProvider; - e2eeWorker: Worker; runtime: Runtime | null; speakingParticipantIds: Set; micGated: boolean; }; -const keyProvider = new ExternalE2EEKeyProvider(); -const e2eeWorker = new Worker( - new URL("livekit-client/e2ee-worker", import.meta.url), -); -const room = new Room({ - dynacast: true, - adaptiveStream: true, - loggerName: "tensamin", - encryption: { - keyProvider, - worker: e2eeWorker, - }, -}); +let _keyProvider: ExternalE2EEKeyProvider | null = null; +let _e2eeWorker: Worker | null = null; +let _room: Room | null = null; + +function getKeyProvider(): ExternalE2EEKeyProvider { + if (!_keyProvider) { + _keyProvider = new ExternalE2EEKeyProvider(); + } + return _keyProvider; +} + +function getE2EEWorker(): Worker { + if (!_e2eeWorker) { + _e2eeWorker = new Worker( + new URL("livekit-client/e2ee-worker", import.meta.url), + ); + } + return _e2eeWorker; +} + +export function getRoom(): Room { + if (!_room) { + _room = new Room({ + dynacast: true, + adaptiveStream: true, + loggerName: "tensamin", + encryption: { + keyProvider: getKeyProvider(), + worker: getE2EEWorker(), + }, + }); + } + return _room; +} + const remoteAudioElements = new Map(); const SCREEN_SHARE_PREVIEW_MAX_WIDTH = 320; @@ -170,6 +189,7 @@ export function getParticipantId(identity: string | undefined): number | null { } function getAllParticipants(): Participant[] { + const room = getRoom(); return [...room.remoteParticipants.values(), room.localParticipant]; } @@ -187,7 +207,7 @@ function getTrackPublicationBySource( } function getRemoteParticipant(participantId: number) { - return [...room.remoteParticipants.values()].find( + return [...getRoom().remoteParticipants.values()].find( (participant) => getParticipantId(participant.identity) === participantId, ); } @@ -215,7 +235,7 @@ function syncRemoteParticipantTrackSubscriptions(participantId: number) { } function syncAllRemoteTrackSubscriptions() { - for (const participant of room.remoteParticipants.values()) { + for (const participant of getRoom().remoteParticipants.values()) { const participantId = getParticipantId(participant.identity); if (participantId != null) { @@ -256,7 +276,7 @@ function hasParticipant(participantId: number) { function getLocalScreenShareTrack(): MediaStreamTrack | null { const track = getTrackPublicationBySource( - room.localParticipant, + getRoom().localParticipant, Track.Source.ScreenShare, )?.track; @@ -275,7 +295,7 @@ async function updateLocalParticipantAttributes( screenSharePreviewLength: attributes.screenSharePreview?.length ?? 0, }); - await room.localParticipant.setAttributes(attributes).catch((error) => { + await getRoom().localParticipant.setAttributes(attributes).catch((error) => { log(1, "call", "red", "Failed to update local participant attributes", { attributes: Object.keys(attributes), error, @@ -487,7 +507,7 @@ function requireRuntime(runtime: Runtime | null): Runtime { } export function getRoomMetadata() { - const roomMetadata = room.metadata; + const roomMetadata = getRoom().metadata; try { const data = JSON.parse(roomMetadata || '{"admins": []}'); return data as { admins: number[] }; @@ -498,7 +518,8 @@ export function getRoomMetadata() { // Sync local participant flags and screen-share derived state for the active call UI. export function syncParticipantState() { - const { room, screenShareSession } = useCall.getState(); + const { screenShareSession } = useCall.getState(); + const room = getRoom(); useCall.setState({ micEnabled: room.localParticipant.isMicrophoneEnabled, @@ -721,7 +742,7 @@ let screenShareController: ReturnType< function getScreenShareController() { if (!screenShareController) { screenShareController = createScreenShareController({ - room, + room: getRoom(), getState: () => ({ screenShareSession: useCall.getState().screenShareSession, }), @@ -733,7 +754,7 @@ function getScreenShareController() { ); }, getLocalParticipantId: () => - getParticipantId(room.localParticipant.identity), + getParticipantId(getRoom().localParticipant.identity), startWatching: startWatchingStream, stopWatching: stopWatchingStream, syncParticipantState, @@ -758,7 +779,7 @@ export async function connect(callId: string) { callSecret: useCall.getState().callSecret, }); - await room + await getRoom() .connect("wss://call.tensamin.net", token, { autoSubscribe: false, }) @@ -774,7 +795,7 @@ export async function connect(callId: string) { syncAllRemoteTrackSubscriptions(); - await room.localParticipant.setMicrophoneEnabled(true).catch((error) => { + await getRoom().localParticipant.setMicrophoneEnabled(true).catch((error) => { log(1, "call", "red", "Failed to enable microphone", error); toast("error", "Failed to enable microphone."); throw error; @@ -819,12 +840,12 @@ export async function disconnect() { micGated: false, }); - room.remoteParticipants.forEach((participant) => { + getRoom().remoteParticipants.forEach((participant) => { participant.setVolume(1); }); try { - await room.disconnect(); + await getRoom().disconnect(); } catch (error) { log(1, "call", "red", "Failed to disconnect from room", error); } finally { @@ -867,8 +888,8 @@ export async function joinCall( callSecret, ); - await keyProvider.setKey(decryptedSecret); - await room.setE2EEEnabled(true); + await getKeyProvider().setKey(decryptedSecret); + await getRoom().setE2EEEnabled(true); useCall.setState({ callSecret: decryptedSecret }); } catch (err) { log(1, "call", "red", "Failed getting call secret", err); @@ -878,8 +899,8 @@ export async function joinCall( } else { const random = crypto.randomUUID(); - await keyProvider.setKey(random); - await room.setE2EEEnabled(true); + await getKeyProvider().setKey(random); + await getRoom().setE2EEEnabled(true); useCall.setState({ callSecret: random }); } @@ -898,11 +919,11 @@ export async function joinCall( export async function toggleDeaf() { const nextDeaf = !useCall.getState().deaf; - room.remoteParticipants.forEach((participant) => { + getRoom().remoteParticipants.forEach((participant) => { participant.setVolume(nextDeaf ? 0 : 1); }); - if (nextDeaf && room.localParticipant.isMicrophoneEnabled) { + if (nextDeaf && getRoom().localParticipant.isMicrophoneEnabled) { await toggleMute(); } @@ -922,7 +943,7 @@ export async function toggleMute() { await toggleDeaf(); } - await room.localParticipant.setMicrophoneEnabled(!micEnabled); + await getRoom().localParticipant.setMicrophoneEnabled(!micEnabled); syncParticipantState(); } @@ -986,7 +1007,7 @@ export function resetCallState() { async function ensureNoiseFilter( noiseFilter: DeepFilterNoiseFilterProcessor, ): Promise { - const microphoneTrack = room.localParticipant.getTrackPublication( + const microphoneTrack = getRoom().localParticipant.getTrackPublication( Track.Source.Microphone, )?.track; @@ -1001,7 +1022,7 @@ async function ensureNoiseFilter( log(1, "call", "red", "Failed to enable noise filter", err); }); - const participantId = getParticipantId(room.localParticipant.identity); + const participantId = getParticipantId(getRoom().localParticipant.identity); if (participantId != null) { const processedTrack = microphoneTrack.mediaStreamTrack; getSpeakingDetector().addTrack( @@ -1021,8 +1042,8 @@ export const useCall = create(() => ({ livekitToken: null, currentCallData: null, deaf: false, - micEnabled: room.localParticipant.isMicrophoneEnabled, - screenShareEnabled: room.localParticipant.isScreenShareEnabled, + micEnabled: false, + screenShareEnabled: false, screenShareSession: null, focusedParticipantId: null, focusedParticipantType: null, @@ -1030,15 +1051,11 @@ export const useCall = create(() => ({ watchedStreamParticipantIds: [], pendingWatchedParticipantIds: [], activeScreenShareParticipantIds: [], - isEncrypted: - room.localParticipant.isE2EEEnabled && room.localParticipant.isEncrypted, + isEncrypted: false, callIsFullscreen: false, callIsPopout: false, layoutVersion: 0, screenRef: null, - room, - keyProvider, - e2eeWorker, runtime: null, speakingParticipantIds: new Set(), micGated: false, @@ -1384,6 +1401,7 @@ export function useInitializeCall() { syncParticipantState(); }; + const room = getRoom(); room.on(RoomEvent.Connected, onConnected); room.on(RoomEvent.Reconnected, onConnected); room.on(RoomEvent.Disconnected, onDisconnected); @@ -1424,7 +1442,7 @@ export function useInitializeCall() { clearRemoteAudio(); listenersRegistered.current = false; room.disconnect(); - e2eeWorker.terminate(); + if (_e2eeWorker) _e2eeWorker.terminate(); }; }, [noiseFilter, load]); diff --git a/packages/call/src/views/main/focused.tsx b/packages/call/src/views/main/focused.tsx index 78d1740..f8239c5 100644 --- a/packages/call/src/views/main/focused.tsx +++ b/packages/call/src/views/main/focused.tsx @@ -1,13 +1,13 @@ import { RoomEvent } from "livekit-client"; import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; -import { useCall } from "../../store"; +import { useCall, getRoom } from "../../store"; import Base from "../../components/modals/base"; const SECONDARY_ROW_HEIGHT_PX = 180; const STACK_GAP_PX = 12; export default function View() { - const room = useCall((state) => state.room); + const room = getRoom(); const layoutVersion = useCall((state) => state.layoutVersion); const usersInFocusedViewHidden = useCall( diff --git a/packages/call/src/views/main/grid.tsx b/packages/call/src/views/main/grid.tsx index 833d7b5..956842d 100644 --- a/packages/call/src/views/main/grid.tsx +++ b/packages/call/src/views/main/grid.tsx @@ -1,6 +1,6 @@ import { RoomEvent } from "livekit-client"; import { useEffect, useMemo, useRef, useState } from "react"; -import { useCall } from "../../store"; +import { useCall, getRoom } from "../../store"; import Base from "../../components/modals/base"; const TILE_ASPECT_RATIO = 16 / 9; @@ -82,7 +82,7 @@ function calculateOptimalGridLayout( } export default function View() { - const room = useCall((state) => state.room); + const room = getRoom(); const layoutVersion = useCall((state) => state.layoutVersion); const activeScreenShareParticipantIds = useCall( (state) => state.activeScreenShareParticipantIds,