85c2146760
Adds a Quality dropdown (Auto / Opus 24k / Opus 6k / Codec2 3.2k / Codec2 1.2k) to both the connect screen and settings panel. The selected profile is passed through to the engine which configures the encoder and decoder accordingly. The desktop engine recv path now auto-switches the decoder codec when incoming packets use a different codec than expected, enabling cross-codec interop between clients on different quality settings. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
162 lines
6.2 KiB
HTML
162 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>WarzonePhone</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Connect screen -->
|
|
<div id="connect-screen">
|
|
<h1>WarzonePhone</h1>
|
|
<p class="subtitle">Encrypted Voice</p>
|
|
<div class="form">
|
|
<label>Relay
|
|
<button id="relay-selected" class="relay-selected" type="button">
|
|
<span id="relay-dot" class="dot"></span>
|
|
<span id="relay-label">Select relay...</span>
|
|
<span class="arrow">⚙</span>
|
|
</button>
|
|
</label>
|
|
<label>Room
|
|
<input id="room" type="text" value="android" />
|
|
</label>
|
|
<label>Alias
|
|
<input id="alias" type="text" placeholder="your name" />
|
|
</label>
|
|
<label>Quality
|
|
<select id="quality">
|
|
<option value="auto">Auto</option>
|
|
<option value="good">Opus 24k</option>
|
|
<option value="degraded">Opus 6k</option>
|
|
<option value="codec2-3200">Codec2 3.2k</option>
|
|
<option value="catastrophic">Codec2 1.2k</option>
|
|
</select>
|
|
</label>
|
|
<div class="form-row">
|
|
<label class="checkbox">
|
|
<input id="os-aec" type="checkbox" checked />
|
|
OS Echo Cancel
|
|
</label>
|
|
<button id="settings-btn-home" class="icon-btn" title="Settings (Cmd+,)">⚙</button>
|
|
</div>
|
|
<button id="connect-btn" class="primary">Connect</button>
|
|
<p id="connect-error" class="error"></p>
|
|
</div>
|
|
<div class="identity-info">
|
|
<span id="my-identicon"></span>
|
|
<span id="my-fingerprint" class="fp-display"></span>
|
|
</div>
|
|
<div class="recent-rooms" id="recent-rooms"></div>
|
|
</div>
|
|
|
|
<!-- In-call screen -->
|
|
<div id="call-screen" class="hidden">
|
|
<div class="call-header">
|
|
<div class="call-header-row">
|
|
<div id="room-name" class="room-name"></div>
|
|
<button id="settings-btn-call" class="icon-btn small" title="Settings (Cmd+,)">⚙</button>
|
|
</div>
|
|
<div class="call-meta">
|
|
<span id="call-status" class="status-dot"></span>
|
|
<span id="call-timer" class="call-timer">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="level-meter">
|
|
<div id="level-bar" class="level-bar-fill"></div>
|
|
</div>
|
|
<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>
|
|
|
|
<!-- Settings panel -->
|
|
<div id="settings-panel" class="hidden">
|
|
<div class="settings-card">
|
|
<div class="settings-header">
|
|
<h2>Settings</h2>
|
|
<button id="settings-close" class="icon-btn">×</button>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Connection</h3>
|
|
<label>Default Room
|
|
<input id="s-room" type="text" />
|
|
</label>
|
|
<label>Alias
|
|
<input id="s-alias" type="text" />
|
|
</label>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Audio</h3>
|
|
<label>Quality
|
|
<select id="s-quality">
|
|
<option value="auto">Auto (adaptive)</option>
|
|
<option value="good">Good — Opus 24kbps</option>
|
|
<option value="degraded">Degraded — Opus 6kbps</option>
|
|
<option value="codec2-3200">Codec2 3200bps</option>
|
|
<option value="catastrophic">Catastrophic — Codec2 1200bps</option>
|
|
</select>
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-os-aec" type="checkbox" />
|
|
OS Echo Cancellation (macOS VoiceProcessingIO)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input id="s-agc" type="checkbox" checked />
|
|
Automatic Gain Control
|
|
</label>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Identity</h3>
|
|
<div class="setting-row">
|
|
<span class="setting-label">Fingerprint</span>
|
|
<span id="s-fingerprint" class="fp-display-large"></span>
|
|
</div>
|
|
<div class="setting-row">
|
|
<span class="setting-label">Identity file</span>
|
|
<span class="fp-display">~/.wzp/identity</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Recent Rooms</h3>
|
|
<div id="s-recent-rooms" class="recent-rooms-list"></div>
|
|
<button id="s-clear-recent" class="secondary-btn">Clear History</button>
|
|
</div>
|
|
<button id="settings-save" class="primary">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manage Relays dialog -->
|
|
<div id="relay-dialog" class="hidden">
|
|
<div class="settings-card relay-dialog-card">
|
|
<div class="settings-header">
|
|
<h2>Manage Relays</h2>
|
|
<button id="relay-dialog-close" class="icon-btn">×</button>
|
|
</div>
|
|
<div id="relay-dialog-list" class="relay-dialog-list"></div>
|
|
<div class="relay-add-row">
|
|
<div class="relay-add-inputs">
|
|
<input id="relay-add-name" type="text" placeholder="Name" />
|
|
<input id="relay-add-addr" type="text" placeholder="host:port" />
|
|
</div>
|
|
<button id="relay-add-btn" class="primary">Add Relay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|