mats/gibbz
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

icons
Build and Publish / Metadata (push) Successful in 1s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 27s
Details

Browse Source
This commit is contained in:
mats committed 2026-09-22 14:24:14 +02:00
1 parent ec02a6ddaf
commit aab7931142
3 files changed
+286 -90
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+48 -39
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>gibbz voice — POC</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
@@ -28,7 +29,7 @@
<body>
<!-- mobile top bar: hamburger opens the channel drawer, shows live status -->
<header id="mobile-topbar">
<button id="btn-menu" title="Channels">&#9776;</button>
<button id="btn-menu" title="Channels"><span class="material-symbols-outlined">menu</span></button>
<img id="mobile-logo" src="/icons/icon.svg" alt="" width="24" height="24" />
<span id="mobile-title">gibbz voice</span>
<span class="status-row" id="mobile-status-row">
@@ -46,12 +47,12 @@
gibbz voice <span class="poc-tag">POC</span>
</header>
<div class="channel-group-label">Text channels</div>
<div class="channel text" data-mx-room="gibbz-general">#
<div class="channel text" data-mx-room="gibbz-general"><span class="material-symbols-outlined channel-icon">tag</span>
general <span class="hint">matrix</span></div>
<div class="channel-group-label">Voice channels</div>
<div class="channel voice" data-room="general">&#128266; General <span class="count" data-room-count="general"></span></div>
<div class="channel voice" data-room="gaming">&#128266; Gaming <span class="count" data-room-count="gaming"></span></div>
<div class="channel voice" data-room="lounge">&#128266; Lounge <span class="count" data-room-count="lounge"></span></div>
<div class="channel voice" data-room="general"><span class="material-symbols-outlined channel-icon">volume_up</span> General <span class="count" data-room-count="general"></span></div>
<div class="channel voice" data-room="gaming"><span class="material-symbols-outlined channel-icon">volume_up</span> Gaming <span class="count" data-room-count="gaming"></span></div>
<div class="channel voice" data-room="lounge"><span class="material-symbols-outlined channel-icon">volume_up</span> Lounge <span class="count" data-room-count="lounge"></span></div>
<footer id="user-panel">
<div class="me">
@@ -65,42 +66,62 @@
</div>
</div>
<div class="user-buttons">
<button id="btn-mic" class="ctl" title="Toggle mic (M)">&#127908;</button>
<button id="btn-deafen" class="ctl" title="Toggle deafen (D)">&#128064;</button>
<button id="btn-share" class="ctl" title="Share your screen (S)">&#128421;&#65039;</button>
<button id="btn-settings" class="ctl" title="Voice &amp; ICE settings">&#9881;&#65039;</button>
<button id="btn-help" class="ctl" title="How to use gibbz voice">&#10067;</button>
<button id="btn-mic" class="ctl" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
<button id="btn-deafen" class="ctl" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
<button id="btn-share" class="ctl" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
<button id="btn-settings" class="ctl" title="Voice &amp; ICE settings"><span class="material-symbols-outlined">settings</span></button>
<button id="btn-help" class="ctl" title="How to use gibbz voice"><span class="material-symbols-outlined">help</span></button>
</div>
</footer>
</aside>
<!-- main stage -->
<!-- main content area -->
<main id="main">
<div id="stage">
<div id="screens"></div>
<div id="stage-empty">
<div class="big-icon">&#128421;&#65039;</div>
<h2>No active screen shares</h2>
<p>When someone shares their screen, it will appear here. Click the screen button below or press <b>S</b> to share.</p>
<!-- voice stage and spatial audio view -->
<div id="voice-view">
<div id="stage">
<div id="screens"></div>
<div id="stage-empty">
<div class="big-icon"><span class="material-symbols-outlined">present_to_all</span></div>
<h2>No active screen shares</h2>
<p>When someone shares their screen, it will appear here. Click the screen button below or press <b>S</b> to share.</p>
</div>
</div>
<div id="spatial-wrap">
<div class="spatial-label">
<span>SPATIAL AUDIO</span>
<span class="hint">drag your avatar to move; drag peers for local positioning &bull; scroll to zoom</span>
<button id="btn-spatial-fit" class="spatial-action-btn" title="Fit all users in view"><span class="material-symbols-outlined">fit_screen</span> Fit View</button>
</div>
<div id="spatial"></div>
</div>
</div>
<div id="spatial-wrap">
<div class="spatial-label">
<span>SPATIAL AUDIO</span>
<span class="hint">drag your avatar to move; drag peers for local positioning &bull; scroll to zoom</span>
<button id="btn-spatial-fit" class="spatial-action-btn" title="Fit all users in view">&#x26F6; Fit View</button>
<!-- matrix text chat view -->
<div id="mx-panel" class="hidden">
<div class="mx-header">
<div class="mx-header-info">
<span class="material-symbols-outlined channel-icon">tag</span>
<span class="mx-header-title">general</span>
<span class="poc-tag">matrix · experimental</span>
</div>
<button id="mx-close" class="ghost" title="Back to Voice Stage"><span class="material-symbols-outlined">close</span></button>
</div>
<div id="mx-messages"></div>
<div class="mx-composer">
<textarea id="mx-input" rows="1" placeholder="Message #general (Enter to send)"></textarea>
<button id="mx-send">Send</button>
</div>
<div id="spatial"></div>
</div>
</main>
</div>
<!-- mobile bottom bar: always-reachable call controls, mirror the sidebar's -->
<div id="mobile-controls">
<button class="ctl mirror-mic" title="Toggle mic (M)">&#127908;</button>
<button class="ctl mirror-deafen" title="Toggle deafen (D)">&#128064;</button>
<button class="ctl mirror-share" title="Share your screen (S)">&#128421;&#65039;</button>
<button class="ctl mirror-mic" title="Toggle mic (M)"><span class="material-symbols-outlined">mic</span></button>
<button class="ctl mirror-deafen" title="Toggle deafen (D)"><span class="material-symbols-outlined">headphones</span></button>
<button class="ctl mirror-share" title="Share your screen (S)"><span class="material-symbols-outlined">present_to_all</span></button>
</div>
<!-- settings modal -->
@@ -138,7 +159,7 @@
<li>Click a <b>voice channel</b> in the sidebar to join it — click another to switch.</li>
<li><b>Mic</b>, <b>Deafen</b> and <b>Share screen</b> are the buttons bottom-left, or press <b>M</b> / <b>D</b> / <b>S</b>.</li>
<li>On the <b>spatial audio</b> map, drag your dot around — you hear people relative to where they stand.</li>
<li>Screen shares show up at the top of the main area; pop one into its own window with <b>&#10726;</b>.</li>
<li>Screen shares show up at the top of the main area; pop one into its own window with <span class="material-symbols-outlined inline-icon">open_in_new</span>.</li>
</ul>
<div class="modal-actions">
@@ -148,18 +169,6 @@
</div>
</div>
<div id="mx-panel" class="hidden">
<div class="mx-header">
<span>#general <span class="poc-tag">matrix · experimental</span></span>
<button id="mx-close" class="ghost" title="Close">&times;</button>
</div>
<div id="mx-messages"></div>
<div class="mx-composer">
<textarea id="mx-input" rows="1" placeholder="Message #general (Enter to send)"></textarea>
<button id="mx-send">Send</button>
</div>
</div>
<div id="reconnect-banner" class="hidden" role="alert">
<div class="reconnect-spinner"></div>
<span id="reconnect-text">Connection lost</span>