Room Features, Performance & UI Polish

[obrucheoghene]

Room Features, Performance & UI Polish

Summary

This PR covers a broad set of improvements across the Mitsi web client spanning January–March 2026: adaptive video quality management, a suite of new room moderation and collaboration features, virtual background support, reliability fixes, and a UI/UX polish pass.

---

What's Changed

Adaptive Video Quality & Performance

• Viewport quality management — adjusts consumer preferred layers based on visibility and speaking state, reducing bandwidth for off-screen participants
• Connection quality manager — monitors per-peer network quality and dynamically downgrades/upgrades video stream quality
• Performance monitor — debug overlay exposing FPS, bandwidth, and connection quality metrics
• Metrics exposure — load-testing hooks added for stress testing the media pipeline
• Consumer preferred layers — client now explicitly sets spatial/temporal layers on consume
• Heartbeat interval fix — corrected HEARTBEAT_INTERVAL to 30 000 ms for stable keep-alive behaviour

Room Moderation & Collaboration

• Waiting room — hosts can admit or reject participants before they enter the room
• Room locking — hosts can lock/unlock the room to prevent new joiners
• Participant spotlight / pin — pin any participant to the main view
• Mute all / lower all hands — host bulk-action controls in the participants panel
• Co-host role toggle — promote/demote participants to co-host from the participants panel
• Recording controls — start/stop recording via CautionModal and the Record component

Messaging

• Direct messaging (DM) — threaded DM panel with per-peer conversation management
• Emoji picker — inline emoji selector in the chat input

Virtual Background

• Blur & image backgrounds — MediaPipe-powered segmentation with configurable blur intensity and custom background images
• Tab-freeze fix — replaced requestAnimationFrame-only loop with a visibilitychange + setInterval fallback so the pipeline keeps running at ~30 fps when the tab is hidden

Audio

• Noise suppression toggle — per-session noise suppression opt-in in settings
• Audio level indicator — real-time audio level bar rendered on peer tiles
• Device change listener — automatically updates available media devices when peripherals are plugged/unplugged

Reliability Fixes

• Callback always fires on error (handleMessage / RoomProvider) — previously a thrown error would leave the media server waiting for an acknowledgement indefinitely; now callback({ status: 'error' }) is always called in the catch path

UI/UX Polish

• Frosted-glass control bar pill — buttons grouped in a bg-black/50 backdrop-blur-md border border-white/10 rounded-2xl container
• Labelled control buttons — "Mute / Unmute", "Stop / Start", "Share", "Leave" text labels below each icon
• Header backdrop — bg-black/20 backdrop-blur-sm applied to the room header; room ID shown in the centre
• Gradient name bar — bg-linear-to-t from-black/70 overlay replacing bare text on tiles
• Speaking glow — active-speaker border now includes shadow-[0_0_16px_rgba(59,130,246,0.4)]
• Larger avatars — no-camera avatar enlarged to w-16 h-16 with participant name shown below

---

Test Plan

• Join a room as host and as guest; verify waiting room admission flow
• Lock the room and confirm new joiners are blocked
• Pin / spotlight a participant and verify layout change
• Use "Mute all" and "Lower all hands" as host
• Toggle noise suppression in settings; confirm no audio regression
• Enable blur background — verify person is isolated and background is blurred
• Enable image background — verify custom image renders correctly
• Switch to another tab for 10+ seconds; return and confirm background pipeline is still active
• Send and receive a direct message; open emoji picker
• Start and stop a recording as host
• Simulate poor network and confirm video quality degrades gracefully
• Verify control bar labels and frosted-glass pill render correctly at desktop and mobile widths
• Verify room ID appears in header centre

---

🤖 Generated with Claude Code