feat(ui): full-screen video stage with PiP local preview
Some checks failed
Mirror to GitHub / mirror (push) Failing after 28s
Build Release Binaries / build-amd64 (push) Failing after 3m5s

Move video out of the voice drawer into a fixed-position stage that
covers the lobby above the drawer. Remote canvas fills the stage with
object-fit: contain; local preview is a 200x112 PiP in the bottom-right.
Placeholder shows "Waiting for remote video" with a frame counter until
the first frame arrives. Counter logs first remote frame to console for
debugging.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Siavash Sameni
2026-05-25 17:53:10 +04:00
parent 1329abbeba
commit cbc3a8d37e
3 changed files with 61 additions and 16 deletions

View File

@@ -105,11 +105,16 @@
</div>
</div>
<div id="vd-stats" class="vd-stats"></div>
<!-- Video strip: remote (canvas) + local preview (video element) -->
<div id="vd-video-strip" class="vd-video-strip hidden">
<canvas id="vd-remote-video" class="vd-video-tile" width="320" height="180"></canvas>
<video id="vd-local-video" class="vd-video-tile" autoplay muted playsinline></video>
</div>
<!-- ═════ Video stage — full-screen overlay above drawer ═════ -->
<div id="vd-video-strip" class="vd-video-stage hidden">
<canvas id="vd-remote-video" class="vd-remote-stage" width="1280" height="720"></canvas>
<div id="vd-remote-placeholder" class="vd-remote-placeholder">
<div class="vd-placeholder-text">Waiting for remote video…</div>
<div id="vd-remote-counter" class="vd-placeholder-sub">0 frames received</div>
</div>
<video id="vd-local-video" class="vd-local-pip" autoplay muted playsinline></video>
</div>
</div>