Brummel
17aa5d7200
This commit enables serving audio files via HTTP Range requests. This is crucial for allowing HTML5 audio players to seek to specific positions within an audio file without re-downloading the entire file. The changes include: - Modifying `handle_audio` in `server/src/routes/web.rs` to parse `Range` headers. - Implementing `serve_range` to handle partial content responses. - Adding a `parse_range` helper function. - Updating tests to verify range request functionality. - Adding `ACCEPT_RANGES: bytes` header to indicate support for range requests. - Storing recording duration in a sidecar file for faster UI rendering. - Enhancing the HTML template to support a custom audio player with seeking.
251 lines
9.1 KiB
HTML
251 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Doctate — Aufnahmen Fall {{ case_id_short }}</title>
|
|
<style>
|
|
body { font-family: sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; }
|
|
header { display: flex; justify-content: space-between; align-items: center; }
|
|
header form { margin: 0; }
|
|
.breadcrumb { display: flex; gap: 0.8em; flex-wrap: wrap; }
|
|
.breadcrumb a { color: #4a90e2; text-decoration: none; }
|
|
.breadcrumb a:hover { text-decoration: underline; }
|
|
.meta { color: #999; font-family: monospace; font-size: 0.8em; margin: 0 0 1em; }
|
|
.recording { margin: 1em 0; padding: 0.7em; border: 1px solid #ddd; border-radius: 4px; }
|
|
.recording.failed-row { background: #fff7f7; border-left: 3px solid #e24a4a; }
|
|
.recording-head { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
|
|
.rec-time { font-family: monospace; font-size: 0.95em; min-width: 11em; color: #333; }
|
|
.filename { font-family: monospace; font-size: 0.8em; color: #999; }
|
|
.transcript { margin: 0.6em 0 0; padding: 0.6em; background: #f6f6f6; border-radius: 4px; white-space: pre-wrap; font-family: serif; }
|
|
.pending { color: #888; font-style: italic; margin-top: 0.5em; }
|
|
.failed { color: #b00; font-weight: bold; margin-top: 0.5em; }
|
|
|
|
.player { display: inline-flex; align-items: center; gap: 0.5em; flex: 1; min-width: 20em; }
|
|
.player .play {
|
|
position: relative;
|
|
width: 2em; height: 2em;
|
|
border: 1px solid #bbb; border-radius: 50%;
|
|
background: #fff; cursor: pointer; padding: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.player .play:hover { background: #f0f0f0; }
|
|
/* Play triangle — pseudo-element via border-trick, font-independent. */
|
|
.player .play::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 0; height: 0;
|
|
border-style: solid;
|
|
border-width: 7px 0 7px 10px;
|
|
border-color: transparent transparent transparent #333;
|
|
transform: translate(-35%, -50%);
|
|
}
|
|
/* Pause — two bars via ::before (reused) + ::after. */
|
|
.player .play.is-pause::before {
|
|
width: 3px; height: 12px;
|
|
border: none;
|
|
background: #333;
|
|
transform: translate(-5px, -50%);
|
|
}
|
|
.player .play.is-pause::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 3px; height: 12px;
|
|
background: #333;
|
|
transform: translate(2px, -50%);
|
|
}
|
|
.player .seek { flex: 1; cursor: pointer; }
|
|
.player .time { font-family: monospace; font-size: 0.85em; color: #555; min-width: 5.5em; text-align: right; }
|
|
|
|
.header-right { display: flex; align-items: center; gap: 0.8em; }
|
|
.admin-toggle { font-size: 0.85em; color: #666; display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; user-select: none; }
|
|
html.admin-view-off .admin-only { display: none !important; }
|
|
</style>
|
|
<script>
|
|
try {
|
|
if (localStorage.getItem('admin-view') === 'off') {
|
|
document.documentElement.classList.add('admin-view-off');
|
|
}
|
|
} catch (_) {}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="breadcrumb">
|
|
<a href="/web/cases">← Fälle</a>
|
|
{% match oneliner %}
|
|
{% when Some with (t) %}
|
|
<a href="/web/cases/{{ case_id }}">← {{ t }}</a>
|
|
{% when None %}
|
|
<a href="/web/cases/{{ case_id }}">← Fall</a>
|
|
{% endmatch %}
|
|
</div>
|
|
<div class="header-right">
|
|
{% if is_admin %}<label class="admin-toggle"><input type="checkbox" id="admin-view-toggle"> Admin view</label>{% endif %}
|
|
<form method="post" action="/web/logout"><button type="submit">Logout</button></form>
|
|
</div>
|
|
</header>
|
|
<h1>Aufnahmen</h1>
|
|
{% if is_admin %}<div class="meta admin-only">{{ case_id }}</div>{% endif %}
|
|
|
|
<h2>Aufnahmen ({{ recordings.len() }})</h2>
|
|
{% for rec in recordings %}
|
|
<div class="recording{% if rec.failed %} failed-row{% endif %}">
|
|
<div class="recording-head">
|
|
<time class="rec-time" datetime="{{ rec.recorded_at_iso }}">{{ rec.recorded_at_iso }}</time>
|
|
<div class="player" data-src="/web/audio/{{ slug }}/{{ case_id }}/{{ rec.filename }}"{% match rec.duration_seconds %}{% when Some with (d) %} data-duration="{{ d }}"{% when None %}{% endmatch %}>
|
|
<button type="button" class="play" aria-label="Abspielen"></button>
|
|
<input type="range" class="seek" min="0" max="1000" value="0" step="1" aria-label="Position">
|
|
<span class="time">0:00 / 0:00</span>
|
|
</div>
|
|
{% if is_admin %}<span class="filename admin-only">{{ rec.filename }}</span>{% endif %}
|
|
</div>
|
|
{% if rec.failed %}
|
|
<div class="failed">Transkription fehlgeschlagen — .failed-Suffix entfernen zum Erneut-Versuchen.</div>
|
|
{% else %}
|
|
{% match rec.transcript %}
|
|
{% when Some with (t) %}
|
|
{% if t.is_empty() %}
|
|
<div class="pending">(stille Aufnahme)</div>
|
|
{% else %}
|
|
<div class="transcript">{{ t }}</div>
|
|
{% endif %}
|
|
{% when None %}
|
|
{% if transcribe_busy %}
|
|
<div class="pending">Transkription läuft…</div>
|
|
{% else %}
|
|
<div class="pending">Transkription ausstehend.</div>
|
|
{% endif %}
|
|
{% endmatch %}
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
<script>
|
|
(() => {
|
|
const cb = document.getElementById('admin-view-toggle');
|
|
if (cb) {
|
|
cb.checked = !document.documentElement.classList.contains('admin-view-off');
|
|
cb.addEventListener('change', () => {
|
|
const on = cb.checked;
|
|
try { localStorage.setItem('admin-view', on ? 'on' : 'off'); } catch (_) {}
|
|
document.documentElement.classList.toggle('admin-view-off', !on);
|
|
});
|
|
}
|
|
|
|
// Render the timestamp in the browser's local timezone. Server renders UTC
|
|
// (RFC3339) into `datetime=""`; JS formats it for display.
|
|
const timeFmt = new Intl.DateTimeFormat('de-DE', {
|
|
day: '2-digit', month: '2-digit', year: 'numeric',
|
|
hour: '2-digit', minute: '2-digit',
|
|
});
|
|
document.querySelectorAll('.rec-time[datetime]').forEach(el => {
|
|
const iso = el.getAttribute('datetime');
|
|
if (!iso) return;
|
|
const d = new Date(iso);
|
|
if (isNaN(d.getTime())) return;
|
|
el.textContent = timeFmt.format(d);
|
|
});
|
|
|
|
const fmtDur = s => {
|
|
if (!isFinite(s) || s < 0) return '0:00';
|
|
const m = Math.floor(s / 60);
|
|
const sec = Math.floor(s % 60);
|
|
return `${m}:${sec.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
document.querySelectorAll('.player').forEach(p => {
|
|
const src = p.dataset.src;
|
|
const btn = p.querySelector('.play');
|
|
const seek = p.querySelector('.seek');
|
|
const timeEl = p.querySelector('.time');
|
|
const initialDuration = parseFloat(p.dataset.duration);
|
|
let audio = null;
|
|
let seeking = false;
|
|
// Pending seek expressed as a fraction of the full length (0..1). Used
|
|
// whenever we can't immediately apply `audio.currentTime` (metadata not
|
|
// yet loaded, or duration unknown at drop time). Cleared in `seeked`,
|
|
// so render() doesn't overwrite the slider with a stale currentTime
|
|
// reading between "set" and "applied".
|
|
let pendingSeek = null;
|
|
let duration = isFinite(initialDuration) ? initialDuration : 0;
|
|
|
|
const render = () => {
|
|
const cur = audio ? audio.currentTime : 0;
|
|
const displayTime = pendingSeek !== null ? pendingSeek * duration : cur;
|
|
timeEl.textContent = `${fmtDur(displayTime)} / ${fmtDur(duration)}`;
|
|
if (!seeking && pendingSeek === null) {
|
|
seek.value = duration > 0 ? Math.round((cur / duration) * 1000) : 0;
|
|
}
|
|
};
|
|
render();
|
|
|
|
const tryApplyPendingSeek = () => {
|
|
if (!audio || pendingSeek === null) return;
|
|
if (audio.readyState >= 1 && isFinite(audio.duration) && audio.duration > 0) {
|
|
audio.currentTime = pendingSeek * audio.duration;
|
|
// Keep pendingSeek set until `seeked` fires — the browser needs a
|
|
// moment to commit the seek, and any timeupdate in between would
|
|
// otherwise read the old currentTime.
|
|
}
|
|
};
|
|
|
|
const ensureAudio = () => {
|
|
if (audio) return audio;
|
|
audio = new Audio(src);
|
|
audio.preload = 'metadata';
|
|
audio.addEventListener('loadedmetadata', () => {
|
|
if (isFinite(audio.duration) && audio.duration > 0) duration = audio.duration;
|
|
tryApplyPendingSeek();
|
|
render();
|
|
});
|
|
audio.addEventListener('timeupdate', render);
|
|
audio.addEventListener('seeked', () => {
|
|
pendingSeek = null;
|
|
render();
|
|
});
|
|
audio.addEventListener('ended', () => {
|
|
btn.classList.remove('is-pause');
|
|
btn.setAttribute('aria-label', 'Abspielen');
|
|
audio.currentTime = 0;
|
|
render();
|
|
});
|
|
return audio;
|
|
};
|
|
|
|
btn.addEventListener('click', () => {
|
|
const a = ensureAudio();
|
|
if (a.paused) {
|
|
a.play();
|
|
btn.classList.add('is-pause');
|
|
btn.setAttribute('aria-label', 'Pause');
|
|
} else {
|
|
a.pause();
|
|
btn.classList.remove('is-pause');
|
|
btn.setAttribute('aria-label', 'Abspielen');
|
|
}
|
|
});
|
|
|
|
seek.addEventListener('input', () => {
|
|
seeking = true;
|
|
if (duration <= 0) return;
|
|
// Live time-label update while dragging (no audio change yet).
|
|
const preview = (parseFloat(seek.value) / 1000) * duration;
|
|
timeEl.textContent = `${fmtDur(preview)} / ${fmtDur(duration)}`;
|
|
});
|
|
seek.addEventListener('change', () => {
|
|
seeking = false;
|
|
const fraction = parseFloat(seek.value) / 1000;
|
|
// Ensure audio exists even if duration is still unknown — this kicks
|
|
// off metadata loading, so loadedmetadata will apply the pending seek.
|
|
ensureAudio();
|
|
pendingSeek = fraction;
|
|
tryApplyPendingSeek();
|
|
render();
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|