diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte index 35217cb7..7a50bdcf 100644 --- a/src/app/components/VideoCallContent.svelte +++ b/src/app/components/VideoCallContent.svelte @@ -12,7 +12,6 @@ currentVoiceSession, currentVoiceRoom, VideoCallLayout, - videoCallLayoutRevision, videoPrimaryTileKey, toggleVideoPrimaryTile, pubkeyFromLiveKitIdentity, @@ -42,29 +41,27 @@ $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h, ) - const showPanel = $derived( + const showVideoContent = $derived( isViewingCurrentCallRoom && (mobile ? layout === VideoCallLayout.Video : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video), ) - const tiles = $derived.by(() => { - // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes - $videoCallLayoutRevision + const videoTiles = $derived.by(() => { const session = $currentVoiceSession if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) { return [] } const room = session.room - const out: VideoTile[] = [] - const lp = room.localParticipant + const videoTiles: VideoTile[] = [] + const user = room.localParticipant if (session.cameraOn) { - const localPub = lp.getTrackPublication(Track.Source.Camera) - out.push({ - identity: lp.identity, + const localPub = user.getTrackPublication(Track.Source.Camera) + videoTiles.push({ + identity: user.identity, isLocal: true, trackSid: localPub?.trackSid ?? "local-camera", attachable: localPub?.track, @@ -73,9 +70,9 @@ } if (session.screenShareOn) { - const localPub = lp.getTrackPublication(Track.Source.ScreenShare) - out.push({ - identity: lp.identity, + const localPub = user.getTrackPublication(Track.Source.ScreenShare) + videoTiles.push({ + identity: user.identity, isLocal: true, trackSid: localPub?.trackSid ?? "local-screen", attachable: localPub?.track, @@ -86,7 +83,7 @@ for (const rp of room.remoteParticipants.values()) { const camPub = rp.getTrackPublication(Track.Source.Camera) if (camPub?.isSubscribed && camPub.track) { - out.push({ + videoTiles.push({ identity: rp.identity, isLocal: false, trackSid: camPub.trackSid, @@ -96,7 +93,7 @@ } const screenPub = rp.getTrackPublication(Track.Source.ScreenShare) if (screenPub?.isSubscribed && screenPub.track) { - out.push({ + videoTiles.push({ identity: rp.identity, isLocal: false, trackSid: screenPub.trackSid, @@ -106,7 +103,7 @@ } } - return out + return videoTiles }) /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */ @@ -115,29 +112,29 @@ const primaryTile = $derived.by(() => { const k = $videoPrimaryTileKey if (k === undefined) return undefined - return tiles.find(t => tileKey(t) === k) + return videoTiles.find(t => tileKey(t) === k) }) const secondaryTiles = $derived.by(() => { const p = primaryTile - if (p === undefined) return tiles + if (p === undefined) return videoTiles const pk = tileKey(p) - return tiles.filter(t => tileKey(t) !== pk) + return videoTiles.filter(t => tileKey(t) !== pk) }) const useSpotlightLayout = $derived(primaryTile !== undefined) - const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2) + const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2) $effect(() => { const k = $videoPrimaryTileKey if (k === undefined) return - if (!tiles.some(t => tileKey(t) === k)) { + if (!videoTiles.some(t => tileKey(t) === k)) { videoPrimaryTileKey.set(undefined) } }) $effect(() => { - for (const t of tiles) { + for (const t of videoTiles) { const pk = pubkeyFromLiveKitIdentity(t.identity) if (pk) loadProfile(pk) } @@ -149,7 +146,7 @@ return source === Track.Source.ScreenShare ? `${name} · screen` : name } - const showTileGrid = $derived(tiles.length > 0) + const showTileGrid = $derived(videoTiles.length > 0) const spotlightHandlerFor = (key: string) => () => { toggleVideoPrimaryTile(key) @@ -190,7 +187,7 @@ class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs"> {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""} - {#if tiles.length > 1} + {#if videoTiles.length > 1} {@const pinned = $videoPrimaryTileKey === tileKey(tile)}