126 lines
4.6 KiB
HTML
126 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>gibbz voice — POC</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="https://otel.k6n.net/static/otel-rum.js"></script>
|
|
<script>
|
|
window.rum = window.OtelRUM ? OtelRUM.init({
|
|
serviceName: "gibbz",
|
|
baseUrl: "https://otel.k6n.net",
|
|
release: window.__APP_RELEASE__ || "dev",
|
|
environment: "production"
|
|
}) : null;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- server rail -->
|
|
<nav id="rail">
|
|
<div class="rail-icon home" title="gibbz voice">G</div>
|
|
<div class="rail-sep"></div>
|
|
<div class="rail-icon" title="POC server">VP</div>
|
|
</nav>
|
|
|
|
<!-- channel sidebar -->
|
|
<aside id="sidebar">
|
|
<header id="server-name">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">#
|
|
general <span class="hint">matrix</span></div>
|
|
<div class="channel-group-label">Voice channels</div>
|
|
<div class="channel voice" data-room="general">🔊 General <span class="count" data-room-count="general"></span></div>
|
|
<div class="channel voice" data-room="gaming">🔊 Gaming <span class="count" data-room-count="gaming"></span></div>
|
|
<div class="channel voice" data-room="lounge">🔊 Lounge <span class="count" data-room-count="lounge"></span></div>
|
|
|
|
<footer id="user-panel">
|
|
<div class="me">
|
|
<div class="avatar" id="me-avatar">?</div>
|
|
<div class="me-meta">
|
|
<input id="nick" maxlength="24" spellcheck="false" title="Click to edit nickname" />
|
|
<div class="status-row" id="status-row" title="Not connected">
|
|
<span class="status-indicator" id="status-dot"></span>
|
|
<span id="voice-status">Disconnected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-buttons">
|
|
<button id="btn-mic" class="ctl" title="Toggle mic (M)">🎤</button>
|
|
<button id="btn-deafen" class="ctl" title="Toggle deafen (D)">👀</button>
|
|
<button id="btn-share" class="ctl" title="Share your screen (S)">🖥️</button>
|
|
<button id="btn-settings" class="ctl" title="Voice & ICE settings">⚙️</button>
|
|
</div>
|
|
</footer>
|
|
</aside>
|
|
|
|
<!-- main stage -->
|
|
<main id="main">
|
|
<div id="stage">
|
|
<div id="screens"></div>
|
|
<div id="stage-empty">
|
|
<div class="big-icon">🖥️</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 <b>your</b> avatar — others hear you shift; you hear them relative to position</span>
|
|
</div>
|
|
<canvas id="spatial"></canvas>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- settings modal -->
|
|
<div id="modal-backdrop" class="hidden">
|
|
<div id="settings-modal" role="dialog" aria-modal="true">
|
|
<h2>Voice & ICE settings</h2>
|
|
<p class="hint">Overrides the server-provided ICE configuration (stored in <code>localStorage</code>, applied on next join).</p>
|
|
<label class="toggle-row">
|
|
<input type="checkbox" id="override-enabled" />
|
|
<span>Use custom STUN/TURN (JSON below)</span>
|
|
</label>
|
|
<textarea id="ice-json" rows="12" spellcheck="false"></textarea>
|
|
<div class="modal-actions">
|
|
<button id="ice-reset" class="ghost">Reset to server defaults</button>
|
|
<span class="spacer"></span>
|
|
<button id="ice-cancel" class="ghost">Cancel</button>
|
|
<button id="ice-save">Save</button>
|
|
</div>
|
|
<h3>Server defaults</h3>
|
|
<pre id="ice-server-default" class="hint"></pre>
|
|
</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">×</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>
|
|
<div class="reconnect-actions">
|
|
<button id="reconnect-retry">Retry now</button>
|
|
<button id="reconnect-dismiss" class="ghost">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toasts"></div>
|
|
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|