sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat](trx-frontend-http): add inline audio player to recorder history

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Stan Grams
2026-04-04 20:17:25 +02:00
parent 9c4f93f951
commit 4fb9d3b2f9
2 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+43 -1
View File
@@ -5914,10 +5914,11 @@ function renderRecorderFiles() {
for (const f of page) {
const safeName = escapeMapHtml(f.name);
const encodedName = encodeURIComponent(f.name);
html += "<tr>"
html += '<tr data-name="' + safeName + '">'
+ "<td>" + safeName + "</td>"
+ "<td>" + recorderFormatSize(f.size) + "</td>"
+ '<td><div class="rec-file-actions">'
+ '<button class="rec-file-btn rec-play-btn" data-name="' + safeName + '" data-url="/api/recorder/download/' + encodedName + '" type="button" aria-expanded="false">Play</button>'
+ '<a class="rec-file-btn" href="/api/recorder/download/' + encodedName + '" download="' + safeName + '">Download</a>'
+ '<button class="rec-file-btn rec-delete-btn" data-name="' + safeName + '" type="button">Remove</button>'
+ "</div></td></tr>";
@@ -5925,6 +5926,47 @@ function renderRecorderFiles() {
html += "</tbody></table>";
el.innerHTML = html;
el.querySelectorAll(".rec-play-btn").forEach(function (btn) {
btn.addEventListener("click", function () {
const row = btn.closest("tr");
if (!row) return;
const next = row.nextElementSibling;
if (next && next.classList.contains("rec-player-row")) {
const audio = next.querySelector("audio");
if (audio) { try { audio.pause(); } catch (_) {} }
next.remove();
btn.setAttribute("aria-expanded", "false");
btn.textContent = "Play";
return;
}
// Close any other open player.
el.querySelectorAll(".rec-player-row").forEach(function (r) {
const a = r.querySelector("audio");
if (a) { try { a.pause(); } catch (_) {} }
r.remove();
});
el.querySelectorAll(".rec-play-btn").forEach(function (b) {
b.setAttribute("aria-expanded", "false");
b.textContent = "Play";
});
const playerRow = document.createElement("tr");
playerRow.className = "rec-player-row";
const cell = document.createElement("td");
cell.colSpan = 3;
const audio = document.createElement("audio");
audio.controls = true;
audio.preload = "metadata";
audio.src = btn.dataset.url;
audio.className = "rec-player-audio";
cell.appendChild(audio);
playerRow.appendChild(cell);
row.parentNode.insertBefore(playerRow, row.nextSibling);
btn.setAttribute("aria-expanded", "true");
btn.textContent = "Hide";
try { audio.play(); } catch (_) {}
});
});
el.querySelectorAll(".rec-delete-btn").forEach(function (btn) {
btn.addEventListener("click", async function () {
const name = btn.dataset.name;
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+12
View File
@@ -1279,6 +1279,18 @@ small { color: var(--text-muted); }
.recorder-table .rec-file-btn:active { background: color-mix(in srgb, var(--btn-bg) 55%, var(--accent-green)); border-color: var(--accent-green); box-shadow: none; transform: translateY(1px); }
.recorder-table .rec-file-btn.rec-delete-btn { color: var(--accent-red); border-color: var(--accent-red); }
.recorder-table .rec-file-btn.rec-delete-btn:hover { background: color-mix(in srgb, var(--btn-bg) 75%, var(--accent-red)); border-color: var(--accent-red); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-red) 18%, transparent); }
.recorder-table tr.rec-player-row > td {
padding: 0.4rem 0.6rem 0.6rem;
background: color-mix(in srgb, var(--btn-bg) 55%, transparent);
border-top: 0;
}
.recorder-table .rec-player-audio {
display: block;
width: 100%;
height: 2.1rem;
border-radius: 0.25rem;
outline: none;
}
.recorder-page-bar {
display: flex;
align-items: center;