2288c1ae07
Tauri backend: - register_signal: persistent _signal connection, presence registration - place_call: send DirectCallOffer by fingerprint - answer_call: accept/reject incoming calls - get_signal_status: poll signal state Frontend: - Mode toggle: "Room" vs "Direct Call" - Register button → registers on relay signal channel - Incoming call panel with Accept/Reject - Fingerprint input + Call button - Auto-connect to media room on CallSetup event Also merges feat/android-voip-client into desktop branch: - Federation fixes, time-based dedup, FEC stale blocks - Direct calling protocol types - ACL + SAS verification Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
214 lines
9.0 KiB
HTML
214 lines
9.0 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>
|
|
<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>
|
|
<!-- Mode toggle -->
|
|
<div class="mode-toggle" style="display:flex;gap:8px;margin-bottom:8px;">
|
|
<button id="mode-room" class="mode-btn active" style="flex:1">Room</button>
|
|
<button id="mode-direct" class="mode-btn" style="flex:1">Direct Call</button>
|
|
</div>
|
|
|
|
<!-- Room mode (default) -->
|
|
<div id="room-mode">
|
|
<button id="connect-btn" class="primary">Connect</button>
|
|
</div>
|
|
|
|
<!-- Direct call mode -->
|
|
<div id="direct-mode" class="hidden">
|
|
<button id="register-btn" class="primary" style="background:#2196F3">Register on Relay</button>
|
|
<div id="direct-registered" class="hidden" style="margin-top:12px">
|
|
<p style="color:var(--green);font-size:13px">✅ Registered — waiting for calls</p>
|
|
<div id="incoming-call-panel" class="hidden" style="background:#1B5E20;padding:12px;border-radius:8px;margin:8px 0">
|
|
<p style="font-weight:bold;margin:0 0 4px 0">Incoming Call</p>
|
|
<p id="incoming-caller" style="font-size:12px;opacity:0.8;margin:0 0 8px 0">From: unknown</p>
|
|
<div style="display:flex;gap:8px">
|
|
<button id="accept-call-btn" style="flex:1;background:var(--green);color:white;border:none;padding:8px;border-radius:6px;cursor:pointer">Accept</button>
|
|
<button id="reject-call-btn" style="flex:1;background:var(--red);color:white;border:none;padding:8px;border-radius:6px;cursor:pointer">Reject</button>
|
|
</div>
|
|
</div>
|
|
<label style="margin-top:8px">Call by fingerprint
|
|
<input id="target-fp" type="text" placeholder="xxxx:xxxx:xxxx:..." />
|
|
</label>
|
|
<button id="call-btn" class="primary" style="margin-top:8px">Call</button>
|
|
<p id="call-status-text" style="color:var(--yellow);font-size:13px;margin-top:4px"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<div class="quality-control">
|
|
<div class="quality-header">
|
|
<span class="setting-label">QUALITY</span>
|
|
<span id="s-quality-label" class="quality-label">Auto</span>
|
|
</div>
|
|
<input id="s-quality" type="range" min="0" max="7" step="1" value="3" class="quality-slider" />
|
|
<div class="quality-ticks">
|
|
<span>64k</span>
|
|
<span>48k</span>
|
|
<span>32k</span>
|
|
<span>Auto</span>
|
|
<span>24k</span>
|
|
<span>6k</span>
|
|
<span>C2</span>
|
|
<span>1.2k</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<!-- Key changed warning dialog -->
|
|
<div id="key-warning" class="hidden">
|
|
<div class="settings-card key-warning-card">
|
|
<div class="key-warning-icon">⚠</div>
|
|
<h2>Server Key Changed</h2>
|
|
<p class="key-warning-text">The relay's identity has changed since you last connected. This usually happens when the server was restarted, but could also indicate a security issue.</p>
|
|
<div class="key-warning-fps">
|
|
<div class="key-fp-row">
|
|
<span class="key-fp-label">Previously known</span>
|
|
<code id="kw-old-fp" class="key-fp"></code>
|
|
</div>
|
|
<div class="key-fp-row">
|
|
<span class="key-fp-label">New key</span>
|
|
<code id="kw-new-fp" class="key-fp"></code>
|
|
</div>
|
|
</div>
|
|
<div class="key-warning-actions">
|
|
<button id="kw-accept" class="primary">Accept New Key</button>
|
|
<button id="kw-cancel" class="secondary-btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|