[feat](trx-rs): add client-side Opus audio recorder
Record Opus audio streams to OGG files on the client. Includes manual start/stop via HTTP API, scheduler-driven auto-recording per schedule entry, and a header REC button in the web UI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -253,7 +253,8 @@ function applyAuthRestrictions() {
|
||||
"settings-clear-ft4-history",
|
||||
"settings-clear-ft2-history",
|
||||
"settings-clear-wspr-history",
|
||||
"settings-clear-sat-history"
|
||||
"settings-clear-sat-history",
|
||||
"header-rec-btn"
|
||||
];
|
||||
pluginToggleBtns.forEach(id => {
|
||||
const btn = document.getElementById(id);
|
||||
@@ -3305,6 +3306,10 @@ function render(update) {
|
||||
for (const [key, entry] of Object.entries(_decoderToggles)) {
|
||||
syncDecoderToggle(entry, !!update[key], entry.label);
|
||||
}
|
||||
// Recorder state sync.
|
||||
if (typeof update.recorder_enabled === "boolean" && window._syncRecorderState) {
|
||||
window._syncRecorderState(update.recorder_enabled);
|
||||
}
|
||||
if (window.updateSatLiveState) window.updateSatLiveState(update);
|
||||
const cwAutoEl = document.getElementById("cw-auto");
|
||||
const cwWpmEl = document.getElementById("cw-wpm");
|
||||
@@ -8852,6 +8857,31 @@ if (headerAudioToggle) {
|
||||
headerAudioToggle.addEventListener("click", startRxAudio);
|
||||
}
|
||||
|
||||
// ── Recorder button ────────────────────────────────────────────────────────
|
||||
const headerRecBtn = document.getElementById("header-rec-btn");
|
||||
let recorderActive = false;
|
||||
function syncRecorderBtn() {
|
||||
if (!headerRecBtn) return;
|
||||
headerRecBtn.classList.toggle("rec-active", recorderActive);
|
||||
}
|
||||
if (headerRecBtn) {
|
||||
headerRecBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
if (recorderActive) {
|
||||
await postPath("/api/recorder/stop");
|
||||
} else {
|
||||
await postPath("/api/recorder/start");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Recorder toggle failed", e);
|
||||
}
|
||||
});
|
||||
}
|
||||
window._syncRecorderState = function (enabled) {
|
||||
recorderActive = enabled;
|
||||
syncRecorderBtn();
|
||||
};
|
||||
|
||||
const rxVolPct = document.getElementById("rx-vol-pct");
|
||||
const txVolPct = document.getElementById("tx-vol-pct");
|
||||
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
<button id="header-audio-toggle" class="header-bar-btn header-audio-btn" aria-label="Toggle audio playback" title="Toggle audio playback">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5 3v10l8-5z"/></svg>
|
||||
</button>
|
||||
<button id="header-rec-btn" class="header-bar-btn header-rec-btn" type="button" aria-label="Toggle recording" title="Toggle recording">REC</button>
|
||||
<div class="header-rig-switch">
|
||||
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
|
||||
</div>
|
||||
@@ -1152,6 +1153,10 @@
|
||||
<label class="bm-label">Interleave (min, optional)
|
||||
<input type="number" id="scheduler-ts-entry-interleave" class="status-input" min="1" max="60" placeholder="default" />
|
||||
</label>
|
||||
<label class="bm-label" style="flex-direction:row;align-items:center;gap:0.5rem;">
|
||||
<input type="checkbox" id="scheduler-ts-entry-record" />
|
||||
Record audio
|
||||
</label>
|
||||
</div>
|
||||
<div class="bm-form-actions">
|
||||
<button type="submit" class="bm-save-btn">Save</button>
|
||||
@@ -1163,7 +1168,7 @@
|
||||
<summary>Entry details</summary>
|
||||
<table class="sch-ts-table">
|
||||
<thead>
|
||||
<tr><th>Start</th><th>End</th><th>Center freq</th><th>Primary bookmark</th><th>Extra channels</th><th>Label</th><th>Interleave (min)</th><th></th></tr>
|
||||
<tr><th>Start</th><th>End</th><th>Center freq</th><th>Primary bookmark</th><th>Extra channels</th><th>Label</th><th>Interleave (min)</th><th>REC</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody id="scheduler-ts-tbody"></tbody>
|
||||
</table>
|
||||
|
||||
@@ -502,6 +502,9 @@
|
||||
if (ilEl) ilEl.value = entry && entry.interleave_min ? entry.interleave_min : "";
|
||||
if (centerHzEl) centerHzEl.value = entry && entry.center_hz ? entry.center_hz : "";
|
||||
|
||||
const recordEl = document.getElementById("scheduler-ts-entry-record");
|
||||
if (recordEl) recordEl.checked = !!(entry && entry.record);
|
||||
|
||||
pendingExtraBmIds = entry && Array.isArray(entry.bookmark_ids) ? entry.bookmark_ids.slice() : [];
|
||||
renderExtraBmList();
|
||||
|
||||
@@ -550,6 +553,9 @@
|
||||
}
|
||||
if (!currentConfig.entries) currentConfig.entries = [];
|
||||
|
||||
const recordCb = document.getElementById("scheduler-ts-entry-record");
|
||||
const entryRecord = recordCb ? recordCb.checked : false;
|
||||
|
||||
const entryData = {
|
||||
start_min: startMin,
|
||||
end_min: endMin,
|
||||
@@ -558,6 +564,7 @@
|
||||
interleave_min: entryInterleave,
|
||||
center_hz: centerHz,
|
||||
bookmark_ids: extraBmIds,
|
||||
record: entryRecord,
|
||||
};
|
||||
|
||||
if (schEntryEditIdx !== null) {
|
||||
@@ -696,6 +703,7 @@
|
||||
'<td>' + extraCell + '</td>' +
|
||||
'<td>' + escHtml(entry.label || "") + '</td>' +
|
||||
'<td>' + il + '</td>' +
|
||||
'<td>' + (entry.record ? 'Yes' : '') + '</td>' +
|
||||
'<td>' +
|
||||
'<button class="sch-write sch-edit-btn" data-idx="' + idx + '" type="button">Edit</button>' +
|
||||
'<button class="sch-write sch-remove-btn" data-idx="' + idx + '" type="button">Remove</button>' +
|
||||
|
||||
@@ -1142,6 +1142,31 @@ small { color: var(--text-muted); }
|
||||
color: #00d17f;
|
||||
border-color: #00d17f;
|
||||
}
|
||||
.header-bar-btn.header-rec-btn {
|
||||
height: 2rem;
|
||||
min-height: 0;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.header-rec-btn.rec-active {
|
||||
color: #ff3b30;
|
||||
border-color: #ff3b30;
|
||||
background: rgba(255, 59, 48, 0.12);
|
||||
animation: rec-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes rec-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
.header-rig-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user