[feat](trx-frontend-http): replace header REC button with Recorder tab page
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -254,7 +254,8 @@ function applyAuthRestrictions() {
|
||||
"settings-clear-ft2-history",
|
||||
"settings-clear-wspr-history",
|
||||
"settings-clear-sat-history",
|
||||
"header-rec-btn"
|
||||
"recorder-start-btn",
|
||||
"recorder-stop-btn"
|
||||
];
|
||||
pluginToggleBtns.forEach(id => {
|
||||
const btn = document.getElementById(id);
|
||||
@@ -4300,12 +4301,13 @@ if (spectrumBwSweetBtn) {
|
||||
}
|
||||
|
||||
// --- Tab navigation ---
|
||||
const TAB_ORDER = ["main", "bookmarks", "digital-modes", "map", "statistics", "settings", "about"];
|
||||
const TAB_ORDER = ["main", "bookmarks", "digital-modes", "map", "statistics", "recorder", "settings", "about"];
|
||||
const TAB_PATHS = {
|
||||
main: "/",
|
||||
bookmarks: "/bookmarks",
|
||||
"digital-modes": "/digital-modes",
|
||||
map: "/map",
|
||||
recorder: "/recorder",
|
||||
settings: "/settings",
|
||||
about: "/about",
|
||||
};
|
||||
@@ -4353,6 +4355,9 @@ function navigateToTab(name, options = {}) {
|
||||
if (name === "statistics") {
|
||||
scheduleStatsRender();
|
||||
}
|
||||
if (name === "recorder") {
|
||||
refreshRecorderStatus();
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector(".tab-bar").addEventListener("click", (e) => {
|
||||
@@ -8857,31 +8862,100 @@ if (headerAudioToggle) {
|
||||
headerAudioToggle.addEventListener("click", startRxAudio);
|
||||
}
|
||||
|
||||
// ── Recorder button ────────────────────────────────────────────────────────
|
||||
const headerRecBtn = document.getElementById("header-rec-btn");
|
||||
// ── Recorder page ──────────────────────────────────────────────────────────
|
||||
let recorderActive = false;
|
||||
function syncRecorderBtn() {
|
||||
if (!headerRecBtn) return;
|
||||
headerRecBtn.classList.toggle("rec-active", recorderActive);
|
||||
const recorderStartBtn = document.getElementById("recorder-start-btn");
|
||||
const recorderStopBtn = document.getElementById("recorder-stop-btn");
|
||||
const recorderStatusInd = document.getElementById("recorder-status-indicator");
|
||||
|
||||
function syncRecorderUi() {
|
||||
if (recorderStartBtn) recorderStartBtn.disabled = recorderActive;
|
||||
if (recorderStopBtn) recorderStopBtn.disabled = !recorderActive;
|
||||
if (recorderStatusInd) {
|
||||
recorderStatusInd.textContent = recorderActive ? "Recording" : "";
|
||||
recorderStatusInd.classList.toggle("rec-active", recorderActive);
|
||||
}
|
||||
// Sync the tab icon indicator.
|
||||
const tabBtn = document.querySelector('.tab[data-tab="recorder"]');
|
||||
if (tabBtn) tabBtn.classList.toggle("rec-active", recorderActive);
|
||||
}
|
||||
if (headerRecBtn) {
|
||||
headerRecBtn.addEventListener("click", async () => {
|
||||
|
||||
if (recorderStartBtn) {
|
||||
recorderStartBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
if (recorderActive) {
|
||||
await postPath("/api/recorder/stop");
|
||||
} else {
|
||||
await postPath("/api/recorder/start");
|
||||
}
|
||||
await postPath("/api/recorder/start");
|
||||
} catch (e) {
|
||||
console.error("Recorder toggle failed", e);
|
||||
console.error("Recorder start failed", e);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (recorderStopBtn) {
|
||||
recorderStopBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
await postPath("/api/recorder/stop");
|
||||
} catch (e) {
|
||||
console.error("Recorder stop failed", e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window._syncRecorderState = function (enabled) {
|
||||
recorderActive = enabled;
|
||||
syncRecorderBtn();
|
||||
syncRecorderUi();
|
||||
};
|
||||
|
||||
async function refreshRecorderStatus() {
|
||||
try {
|
||||
const [statusResp, filesResp] = await Promise.all([
|
||||
fetch("/api/recorder/status"),
|
||||
fetch("/api/recorder/files"),
|
||||
]);
|
||||
if (statusResp.ok) {
|
||||
const active = await statusResp.json();
|
||||
renderRecorderActive(active);
|
||||
}
|
||||
if (filesResp.ok) {
|
||||
const files = await filesResp.json();
|
||||
renderRecorderFiles(files);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Recorder status fetch failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderRecorderActive(list) {
|
||||
const el = document.getElementById("recorder-active-list");
|
||||
if (!el) return;
|
||||
if (!list.length) {
|
||||
el.innerHTML = '<p class="recorder-empty">No active recordings.</p>';
|
||||
return;
|
||||
}
|
||||
let html = '<table class="recorder-table"><thead><tr><th>Rig</th><th>VChan</th><th>File</th><th>Started</th></tr></thead><tbody>';
|
||||
for (const r of list) {
|
||||
const started = new Date(r.started_at * 1000).toLocaleTimeString();
|
||||
const fname = r.path.split("/").pop();
|
||||
html += `<tr><td>${escapeMapHtml(r.rig_id)}</td><td>${r.vchan_id ? escapeMapHtml(r.vchan_id) : "-"}</td><td>${escapeMapHtml(fname)}</td><td>${started}</td></tr>`;
|
||||
}
|
||||
html += "</tbody></table>";
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
function renderRecorderFiles(list) {
|
||||
const el = document.getElementById("recorder-files-list");
|
||||
if (!el) return;
|
||||
if (!list.length) {
|
||||
el.innerHTML = '<p class="recorder-empty">No recorded files.</p>';
|
||||
return;
|
||||
}
|
||||
let html = '<table class="recorder-table"><thead><tr><th>File</th><th>Size</th></tr></thead><tbody>';
|
||||
for (const f of list) {
|
||||
const size = f.size < 1048576 ? (f.size / 1024).toFixed(1) + " KB" : (f.size / 1048576).toFixed(1) + " MB";
|
||||
html += `<tr><td>${escapeMapHtml(f.name)}</td><td>${size}</td></tr>`;
|
||||
}
|
||||
html += "</tbody></table>";
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
const rxVolPct = document.getElementById("rx-vol-pct");
|
||||
const txVolPct = document.getElementById("tx-vol-pct");
|
||||
|
||||
@@ -10513,14 +10587,14 @@ function createBookmarkChip(bm, colorMap, options = {}) {
|
||||
`<svg class='bm-icon-svg' viewBox='0 0 8 12' width='8' height='12' aria-hidden='true'>` +
|
||||
"<path d='M0,0 h8 v10 l-4,2 l-4,-2 Z'/>" +
|
||||
`</svg>` +
|
||||
`<span class="spectrum-bookmark-freq">${esc(freqStr)}</span>` +
|
||||
`<span class="spectrum-bookmark-freq">${escapeMapHtml(freqStr)}</span>` +
|
||||
`</span>` +
|
||||
`<span class="spectrum-bookmark-name">${esc(bm.name)}</span>`
|
||||
`<span class="spectrum-bookmark-name">${escapeMapHtml(bm.name)}</span>`
|
||||
)
|
||||
: (
|
||||
"<svg class='bm-icon-svg' viewBox='0 0 8 12' width='8' height='12' aria-hidden='true'>" +
|
||||
"<path d='M0,0 h8 v10 l-4,2 l-4,-2 Z'/>" +
|
||||
"</svg>\u00a0<span class='spectrum-bookmark-name'>" + esc(bm.name) + "</span>"
|
||||
"</svg>\u00a0<span class='spectrum-bookmark-name'>" + escapeMapHtml(bm.name) + "</span>"
|
||||
);
|
||||
span.innerHTML =
|
||||
labelHtml;
|
||||
|
||||
@@ -51,6 +51,9 @@
|
||||
<svg class="tab-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 14h12"/><rect x="3" y="8" width="2" height="6" rx="0.4" fill="currentColor" stroke="none" opacity="0.6"/><rect x="7" y="5" width="2" height="9" rx="0.4" fill="currentColor" stroke="none" opacity="0.75"/><rect x="11" y="2" width="2" height="12" rx="0.4" fill="currentColor" stroke="none" opacity="0.9"/></svg>
|
||||
<span class="tab-label">Statistics</span>
|
||||
</button>
|
||||
<button class="tab" data-tab="recorder">
|
||||
<svg class="tab-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="2.5" fill="currentColor" stroke="none"/></svg>
|
||||
<span class="tab-label">Recorder</span>
|
||||
<button class="tab" data-tab="settings">
|
||||
<svg class="tab-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.8 3.1a2.6 2.6 0 0 0-2.2 3.9L3.4 11.2a1.2 1.2 0 1 0 1.7 1.7l4.2-4.2a2.6 2.6 0 0 0 3.9-2.2l-1.8.6-1.2-1.2z"/><path d="M10.2 5.8 12 4"/></svg>
|
||||
<span class="tab-label">Settings</span>
|
||||
@@ -65,7 +68,6 @@
|
||||
<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>
|
||||
@@ -1059,6 +1061,26 @@
|
||||
<div id="map-weak-signal-summary-list" class="map-qso-summary-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="tab-recorder" class="tab-panel" style="display:none;">
|
||||
<h2 class="section-heading">Recorder</h2>
|
||||
<div class="recorder-controls-bar">
|
||||
<button id="recorder-start-btn" class="recorder-action-btn" type="button">Start recording</button>
|
||||
<button id="recorder-stop-btn" class="recorder-action-btn recorder-stop" type="button" disabled>Stop recording</button>
|
||||
<span id="recorder-status-indicator" class="recorder-status-indicator"></span>
|
||||
</div>
|
||||
<section class="recorder-section">
|
||||
<h3 class="recorder-section-heading">Active recordings</h3>
|
||||
<div id="recorder-active-list" class="recorder-list">
|
||||
<p class="recorder-empty">No active recordings.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="recorder-section">
|
||||
<h3 class="recorder-section-heading">Recorded files</h3>
|
||||
<div id="recorder-files-list" class="recorder-list">
|
||||
<p class="recorder-empty">No recorded files.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="tab-settings" class="tab-panel" style="display:none;">
|
||||
<div class="sub-tab-bar">
|
||||
<button class="sub-tab active" data-subtab="settings-scheduler">Scheduler</button>
|
||||
|
||||
@@ -1142,31 +1142,68 @@ 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;
|
||||
/* ── Recorder page ──────────────────────────────────────────────────────── */
|
||||
.recorder-controls-bar {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.recorder-action-btn {
|
||||
padding: 0.45rem 1rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-muted);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
.header-rec-btn.rec-active {
|
||||
.recorder-action-btn:hover:not(:disabled) { border-color: var(--accent-green); color: var(--accent-green); }
|
||||
.recorder-action-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
.recorder-action-btn.recorder-stop:not(:disabled) { border-color: #ff3b30; color: #ff3b30; }
|
||||
.recorder-action-btn.recorder-stop:hover:not(:disabled) { background: rgba(255,59,48,0.1); }
|
||||
.recorder-status-indicator {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.recorder-status-indicator.rec-active {
|
||||
color: #ff3b30;
|
||||
border-color: #ff3b30;
|
||||
background: rgba(255, 59, 48, 0.12);
|
||||
font-weight: 600;
|
||||
animation: rec-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes rec-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
.tab.rec-active .tab-icon { color: #ff3b30; }
|
||||
.recorder-section { margin-bottom: 1.5rem; }
|
||||
.recorder-section-heading {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.recorder-list { font-size: 0.82rem; }
|
||||
.recorder-empty { color: var(--text-muted); font-style: italic; margin: 0; }
|
||||
.recorder-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.recorder-table th,
|
||||
.recorder-table td {
|
||||
padding: 0.35rem 0.6rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.recorder-table th {
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.header-rig-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user