fix(call): fullscreen video layout — auto-fit, centre last row, self-view toggle, camera + screenshare coexist

Four related issues with the in-call video grid landed in one PR because
each one was a slice of the same per-participant layout pipeline:

1. **Tiles overflowed in fullscreen.**  The grid used
   `grid-auto-rows: min-content` and capped each tile via `max-height:
   100%`, but `100%` of an overflowing parent is itself the overflowing
   height, so the trailing rows scrolled off-screen.  Added a
   `fullscreen` class on `.video-grid` that switches to
   `grid-template-rows: repeat(var(--number-of-rows), 1fr)` with
   `overflow: hidden` and per-tile `align/justify-self: center`, so every
   tile fits the available space while preserving the 16/9 aspect
   ratio.

2. **Odd-numbered trailing rows were left-aligned.**  Added a computed
   `lastRowTiles` count and emit a `grid-column-start: <offset+1>` style
   on the first tile of an incomplete trailing row.  Subsequent tiles
   flow naturally; no per-row wrapper or `:has(...)` selector required.

3. **Self-view couldn't be hidden.**  Added `selfViewVisible` /
   `toggleSelfViewVisible` on the UI store (persisted across sessions)
   and a desktop-only "Hide my video / Show my video" button in
   `MainCallControls.vue`.  When off, the local camera tile is dropped
   from `allParticipants` — the user remains in the call and is still
   heard, the local screenshare tile (when present) is still shown so
   the user can verify what they're broadcasting.

4. **Screenshare overrode the user's camera tile on both sides of the
   call.**  Three connected changes:
   - `mediaDevicesStore.turnOnScreenShare` no longer removes the camera
     track from `stream`.  The screenshare is captured into its own
     `screenShareStream` ref and sent to peers via a new
     `webrtcStore.addScreenShareTrack` (a `peer.addTrack(track,
     dedicatedStream)` instead of a `replaceTrack` swap), so the
     receiving side fires a fresh `peer.on('track')` event with a
     distinct stream id.
   - `webrtcStore.ts` peer.on('track') handler used to wipe the per-peer
     `streams` array on every new stream (`streams = [stream]`), which
     silently dropped the camera tile the moment a screenshare track
     arrived.  Now appends a new stream entry and updates in place when
     extra tracks land on an existing stream.  Tracks that end clear
     their stream from the array.
   - `useVideoLayout.allParticipants` splits both the local user and
     each remote peer into separate camera-tile / screenshare-tile
     entries (`streamKind: 'camera' | 'screenshare'`).  Remote
     screenshares are identified as streams with video tracks but no
     audio tracks — the camera stream always carries the mic track.
   - Cleaned up the old `savedVideoTrack` swap-back bookkeeping in
     `toggleVideo` / `resetMediaDevices` — superfluous now that camera
     and screenshare run on independent streams.

Composite `did:streamKind` participant keys replace bare DIDs in
`focusOnVideo` / focused-layout, so the focus model handles the
camera-vs-screenshare split too.  Bare DIDs from older persisted state
still match (first tile for that user, which is the camera tile).

Author: HexaField

app/src/components/call/composables/useVideoLayout.ts

@@ -10,15 +10,32 @@ import {
 import { storeToRefs } from 'pinia';
 import { computed, watch } from 'vue';
 
+export type Participant = {
+  isMe: boolean;
+  did: string;
+  inCall: boolean;
+  stream: MediaStream | undefined;
+  streamReady: boolean;
+  audioState: MediaState;
+  videoState: MediaState;
+  screenShareState: MediaState;
+  warning: MediaPlayerWarning;
+  // Distinguishes a camera tile from a screenshare tile so a single user
+  // can be rendered as two participants when they're sharing their screen
+  // alongside their webcam.
+  streamKind: 'camera' | 'screenshare';
+};
+
 export function useVideoLayout() {
   const appStore = useAppStore();
   const mediaDeviceStore = useMediaDevicesStore();
   const uiStore = useUiStore();
   const webrtcStore = useWebrtcStore();
 
   const { me } = storeToRefs(appStore);
-  const { stream, mediaSettings, mediaPermissions } = storeToRefs(mediaDeviceStore);
-  const { callWindowWidth, callWindowOpen, selectedVideoLayout, focusedVideoId } = storeToRefs(uiStore);
+  const { stream, screenShareStream, mediaSettings, mediaPermissions } = storeToRefs(mediaDeviceStore);
+  const { callWindowWidth, callWindowOpen, selectedVideoLayout, focusedVideoId, selfViewVisible } =
+    storeToRefs(uiStore);
   const { inCall, peerConnections, disconnectedAgents } = storeToRefs(webrtcStore);
 
   const videoLayoutOptions: VideoLayoutOption[] = [
@@ -37,41 +54,112 @@ export function useVideoLayout() {
     if (microphone && microphone.requested && !microphone.granted) warning = 'mic-disabled';
     else if (videoEnabled && camera && camera.requested && !camera.granted) warning = 'camera-disabled';
 
-    const myAgent = {
-      isMe: true,
-      did: me.value.did,
-      inCall: inCall.value,
-      stream: stream.value || undefined,
-      streamReady: true,
-      audioState: (audioEnabled ? 'on' : 'off') as MediaState,
-      videoState: (videoEnabled ? 'on' : 'off') as MediaState,
-      screenShareState: (screenShareEnabled ? 'on' : 'off') as MediaState,
-      warning,
-    };
-
-    const otherAgents = peers.value.map((peer) => ({
-      isMe: false,
-      did: peer.did,
-      inCall: true,
-      stream: peer.streams?.[0] || undefined,
-      streamReady: peer.streamReady,
-      audioState: peer.audioState,
-      videoState: peer.videoState,
-      screenShareState: peer.screenShareState,
-      warning: '' as MediaPlayerWarning,
-    }));
-
-    return [myAgent, ...otherAgents];
+    const myParticipants: Participant[] = [];
+
+    // Local camera tile.  Hidden when the user toggles self-view off so they
+    // can focus on the other participants while still being in the call.
+    if (selfViewVisible.value) {
+      myParticipants.push({
+        isMe: true,
+        did: me.value.did,
+        inCall: inCall.value,
+        stream: stream.value || undefined,
+        streamReady: true,
+        audioState: (audioEnabled ? 'on' : 'off') as MediaState,
+        videoState: (videoEnabled ? 'on' : 'off') as MediaState,
+        // Camera tile never shows the screenshare badge — when both are on
+        // we emit a separate screenshare tile below.
+        screenShareState: 'off' as MediaState,
+        warning,
+        streamKind: 'camera',
+      });
+    }
+
+    // Local screenshare tile.  Emitted as its own participant so the camera
+    // and screenshare can be rendered side-by-side instead of one replacing
+    // the other.  Always shown to the local user (even when self-view is
+    // off) because hiding your own screenshare would make it impossible to
+    // verify what you're broadcasting.
+    if (screenShareEnabled && screenShareStream.value) {
+      myParticipants.push({
+        isMe: true,
+        did: me.value.did,
+        inCall: inCall.value,
+        stream: screenShareStream.value,
+        streamReady: true,
+        audioState: 'off' as MediaState,
+        videoState: 'off' as MediaState,
+        screenShareState: 'on' as MediaState,
+        warning: '' as MediaPlayerWarning,
+        streamKind: 'screenshare',
+      });
+    }
+
+    const otherAgents: Participant[] = peers.value.flatMap((peer) => {
+      const streams = peer.streams ?? [];
+
+      // Treat a stream as a screenshare when it carries video without audio.
+      // The camera stream always has at least one audio track (mic), so this
+      // distinguishes the two without needing extra signalling.  Falls back
+      // to the legacy single-stream rendering when only one stream exists.
+      const cameraStream = streams.find((s) => s.getAudioTracks().length > 0) ?? streams[0];
+      const screenShareStreams = streams.filter(
+        (s) => s !== cameraStream && s.getVideoTracks().length > 0,
+      );
+
+      const cameraEntry: Participant = {
+        isMe: false,
+        did: peer.did,
+        inCall: true,
+        stream: cameraStream || undefined,
+        streamReady: peer.streamReady,
+        audioState: peer.audioState,
+        videoState: peer.videoState,
+        screenShareState: screenShareStreams.length > 0 ? 'off' : peer.screenShareState,
+        warning: '' as MediaPlayerWarning,
+        streamKind: 'camera',
+      };
+
+      const screenShareEntries: Participant[] = screenShareStreams.map((screenStream) => ({
+        isMe: false,
+        did: peer.did,
+        inCall: true,
+        stream: screenStream,
+        streamReady: peer.streamReady,
+        audioState: 'off' as MediaState,
+        videoState: 'off' as MediaState,
+        screenShareState: 'on' as MediaState,
+        warning: '' as MediaPlayerWarning,
+        streamKind: 'screenshare',
+      }));
+
+      return [cameraEntry, ...screenShareEntries];
+    });
+
+    return [...myParticipants, ...otherAgents];
   });
 
+  // Participants may now share a `did` (a camera tile + a screenshare tile
+  // for the same user), so the focus key is the composite `did:streamKind`.
+  // Plain DIDs from older state still match — they fall through to the
+  // first tile we find for that user, which is the camera tile.
+  function participantKey(p: Participant): string {
+    return `${p.did}:${p.streamKind}`;
+  }
+
+  function matchesFocus(p: Participant, focusedId: string): boolean {
+    if (!focusedId) return false;
+    return participantKey(p) === focusedId || p.did === focusedId;
+  }
+
   const focusedParticipant = computed(() => {
     const focusedId = focusedVideoId.value || me.value.did;
-    return allParticipants.value.find((p) => p.did === focusedId) || allParticipants.value[0];
+    return allParticipants.value.find((p) => matchesFocus(p, focusedId)) || allParticipants.value[0];
   });
 
   const unfocusedParticipants = computed(() => {
     const focusedId = focusedVideoId.value || me.value.did;
-    return allParticipants.value.filter((p) => p.did !== focusedId);
+    return allParticipants.value.filter((p) => !matchesFocus(p, focusedId));
   });
 
   const numberOfColumns = computed(() => {
@@ -88,9 +176,11 @@ export function useVideoLayout() {
     uiStore.setVideoLayout(layout);
   }
 
-  function focusOnVideo(did: string) {
+  function focusOnVideo(key: string) {
     if (!inCall.value) return;
-    uiStore.setFocusedVideoId(did);
+    // `key` is either a participant key (`did:streamKind`) or a bare DID
+    // from older callers; both are honoured by `matchesFocus` above.
+    uiStore.setFocusedVideoId(key);
     if (selectedVideoLayout.value.label !== 'Focused') {
       uiStore.setVideoLayout(videoLayoutOptions[2]);
     }
@@ -133,5 +223,6 @@ export function useVideoLayout() {
     selectVideoLayout,
     focusOnVideo,
     closeFocusedVideoLayout,
+    participantKey,
   };
 }

app/src/components/call/controls/MainCallControls.vue

@@ -71,6 +71,22 @@
       </j-button>
     </j-tooltip>
 
+    <j-tooltip
+      v-if="!isMobile && inCall"
+      placement="top"
+      :title="selfViewVisible ? 'Hide my video' : 'Show my video'"
+    >
+      <j-button
+        :variant="selfViewVisible ? '' : 'primary'"
+        @click="uiStore.toggleSelfViewVisible"
+        square
+        circle
+        :size="isMobile ? 'md' : 'lg'"
+      >
+        <j-icon :name="selfViewVisible ? 'eye-slash' : 'eye'" :size="isMobile ? 'sm' : 'md'" />
+      </j-button>
+    </j-tooltip>
+
     <j-popover v-if="!isMobile" ref="videoLayoutPopover" placement="top">
       <j-tooltip slot="trigger" placement="top" title="Video layout options">
         <j-button variant="transparent" square circle :disabled="!inCall" :size="isMobile ? 'md' : 'lg'">
@@ -153,7 +169,7 @@ const modalStore = useModalStore();
 const aiStore = useAiStore();
 
 const { me } = storeToRefs(appStore);
-const { callWindowFullscreen, isMobile, isLandscapeMobile } = storeToRefs(uiStore);
+const { callWindowFullscreen, isMobile, isLandscapeMobile, selfViewVisible } = storeToRefs(uiStore);
 const { mediaSettings, availableDevices } = storeToRefs(mediaDeviceStore);
 const { transcriptionEnabled } = storeToRefs(aiStore);
 const { inCall, hasCopiedLink } = storeToRefs(webrtcStore);