diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js index 58bddac..4e9cdfc 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js @@ -7435,6 +7435,7 @@ function configureRxStream(nextInfo) { rxAudioBtn.style.borderColor = "#00d17f"; rxAudioBtn.style.color = "#00d17f"; audioStatus.textContent = "RX"; + syncHeaderAudioBtn(); } function extractAudioFrameChannels(frame) { @@ -7597,6 +7598,7 @@ function startRxAudio() { opusDecoder = null; } nextPlayTime = 0; + syncHeaderAudioBtn(); }; audioWs.onerror = () => { @@ -7620,6 +7622,7 @@ function stopRxAudio() { rxAudioBtn.style.color = ""; audioStatus.textContent = "Off"; setAudioLevel(0); + syncHeaderAudioBtn(); } function startTxAudio() { @@ -7743,6 +7746,23 @@ async function stopTxAudio() { rxAudioBtn.addEventListener("click", startRxAudio); txAudioBtn.addEventListener("click", startTxAudio); +// Header play button mirrors the RX audio toggle. +const headerAudioToggle = document.getElementById("header-audio-toggle"); +const headerAudioIconPath = document.getElementById("header-audio-icon-path"); +const PLAY_ICON = "M5 3.5v9l7-4.5z"; +const STOP_ICON = "M4 3.5h8v9H4z"; +function syncHeaderAudioBtn() { + if (!headerAudioToggle) return; + headerAudioToggle.classList.toggle("audio-active", rxActive); + if (headerAudioIconPath) { + headerAudioIconPath.setAttribute("d", rxActive ? STOP_ICON : PLAY_ICON); + } + headerAudioToggle.title = rxActive ? "Stop audio" : "Play audio"; +} +if (headerAudioToggle) { + headerAudioToggle.addEventListener("click", startRxAudio); +} + const rxVolPct = document.getElementById("rx-vol-pct"); const txVolPct = document.getElementById("tx-vol-pct"); diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html index 1a23bfa..3f4fed0 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html @@ -58,6 +58,9 @@
+
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index cde976d..c2bc042 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1026,6 +1026,25 @@ small { color: var(--text-muted); } gap: 0.6rem; min-width: 0; } +.header-audio-btn { + width: 2rem; + height: 2rem; + min-height: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border-light); + border-radius: 6px; + background: var(--input-bg); + color: var(--text-muted); + cursor: pointer; + flex-shrink: 0; +} +.header-audio-btn.audio-active { + color: var(--accent-green); + border-color: var(--accent-green); +} .header-rig-switch { display: flex; align-items: center;