manawenuz/wz-phone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): voice drawer replaces full-screen call UI

Browse Source 
Discord-style bottom drawer for voice instead of navigating away:

- "Join Voice" hides the FAB, slides up a persistent bottom bar
- Drawer shows: room name, timer, P2P/Relay badge, level meter
- Controls: mic, speaker, end call — all in the drawer
- Direct call info (identicon, name, P2P badge) shown inline
- Lobby stays visible above the drawer at all times
- Stats line shows codec/packet/FEC info
- Leave voice = drawer slides away, FAB returns

Removed: full-screen call-screen, back button, old participant
list, old mic/speaker/hangup buttons. All voice interaction
happens in the 15% bottom drawer while the lobby stays live.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Siavash Sameni
2026-04-14 18:47:40 +04:00
parent a058a83c91
commit 25471c694f
3 changed files with 189 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
desktop/index.html
View File

@@ -65,47 +65,40 @@
<button id="reject-call-btn" class="btn-reject">Reject</button>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════
IN-CALL — voice active (room or direct)
═══════════════════════════════════════════════════════ -->
<div id="call-screen" class="hidden">
<div class="call-header">
<div class="call-header-row">
<button id="back-to-lobby-btn" class="icon-btn small" title="Back to lobby">&#x2190;</button>
<div id="room-name" class="room-name"></div>
<button id="settings-btn-call" class="icon-btn small" title="Settings">&#9881;</button>
<!-- ═════ Voice Drawer (bottom bar, stays on lobby) ═════ -->
<div id="voice-drawer" class="voice-drawer hidden">
<div class="voice-drawer-bar" id="voice-drawer-bar">
<div class="vd-info">
<span id="vd-status" class="vd-status-dot"></span>
<span id="vd-room" class="vd-room">general</span>
<span id="vd-timer" class="vd-timer">0:00</span>
<span id="vd-badge" class="vd-badge hidden"></span>
</div>
<div class="vd-level">
<div id="vd-level-bar" class="vd-level-fill"></div>
</div>
<div class="vd-controls">
<button id="vd-mic-btn" class="vd-btn" title="Mic (m)">
<span id="vd-mic-icon">&#x1F3A4;</span>
</button>
<button id="vd-spk-btn" class="vd-btn" title="Speaker (s)">
<span id="vd-spk-icon">&#x1F50A;</span>
</button>
<button id="vd-end-btn" class="vd-btn vd-end" title="Leave voice (q)">
<span>&#x26D4;</span>
</button>
</div>
</div>
<div class="call-meta">
<span id="call-status" class="status-dot"></span>
<span id="call-timer" class="call-timer">0:00</span>
<!-- Direct call info (shown during P2P calls) -->
<div id="vd-direct-info" class="vd-direct-info hidden">
<span id="vd-dc-identicon" class="vd-dc-identicon"></span>
<div class="vd-dc-details">
<div id="vd-dc-name" class="vd-dc-name">Unknown</div>
<div id="vd-dc-badge" class="vd-dc-badge">Connecting...</div>
</div>
</div>
<div id="vd-stats" class="vd-stats"></div>
</div>
<div class="level-meter">
<div id="level-bar" class="level-bar-fill"></div>
</div>
<!-- Direct-call phone layout -->
<div id="direct-call-view" class="direct-call-view hidden">
<div id="dc-identicon" class="dc-identicon"></div>
<div id="dc-name" class="dc-name">Unknown</div>
<div id="dc-fp" class="dc-fp"></div>
<div id="dc-badge" class="dc-badge">Connecting...</div>
</div>
<!-- Room participants -->
<div id="participants" class="participants"></div>
<div class="controls">
<button id="mic-btn" class="control-btn" title="Toggle Mic (m)">
<span class="icon" id="mic-icon">Mic</span>
</button>
<button id="hangup-btn" class="control-btn hangup" title="Hang Up (q)">
<span class="icon">End</span>
</button>
<button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
<span class="icon" id="spk-icon">Spk</span>
</button>
</div>
<div id="stats" class="stats"></div>
</div>
<!-- ═══════════════════════════════════════════════════════