387 lines
19 KiB
HTML
387 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>C41 Archive</title>
|
|
<style>
|
|
:root { color-scheme: dark; --bg: #0f0f0f; --surface: #272727; --hover: #3d3d3d; --text: #f1f1f1; --dim: #aaa; --accent: #3ea6ff; --red: #ff4e45; }
|
|
* { box-sizing: border-box; margin: 0; }
|
|
body { font-family: "Roboto", "Arial", sans-serif; background: var(--bg); color: var(--text); }
|
|
.page { max-width: 900px; margin: 0 auto; padding: 16px; }
|
|
|
|
/* header */
|
|
.header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; }
|
|
.header h1 { font-size: 18px; font-weight: 500; }
|
|
.header select { background: var(--surface); color: var(--text); border: none; padding: 6px 10px; border-radius: 3px; font-size: 14px; cursor: pointer; }
|
|
|
|
/* player wrapper */
|
|
.player-wrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; }
|
|
.player-wrap video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; }
|
|
|
|
/* big center play */
|
|
.big-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; background: rgba(0,0,0,.6); border-radius: 12px; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
|
|
.player-wrap.paused .big-play { opacity: 1; }
|
|
.big-play svg { width: 28px; height: 28px; }
|
|
|
|
/* bottom gradient */
|
|
.controls-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 30px 12px 10px; }
|
|
|
|
/* scrub bar */
|
|
.scrub { position: relative; height: 4px; background: rgba(255,255,255,.2); cursor: pointer; margin-bottom: 8px; border-radius: 2px; transition: height .1s; }
|
|
.scrub:hover { height: 6px; }
|
|
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 2px; pointer-events: none; }
|
|
.scrub-hover { position: absolute; top: -28px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; padding: 3px 7px; border-radius: 3px; pointer-events: none; white-space: nowrap; display: none; }
|
|
.scrub:hover .scrub-hover { display: block; }
|
|
|
|
/* control row */
|
|
.ctrl-row { display: flex; align-items: center; gap: 8px; }
|
|
.ctrl-row button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
|
|
.ctrl-row button:hover { background: rgba(255,255,255,.15); }
|
|
.ctrl-row svg { width: 22px; height: 22px; fill: currentColor; }
|
|
.time-label { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; margin-left: 4px; user-select: none; }
|
|
.spacer { flex: 1; }
|
|
.vol-wrap { display: flex; align-items: center; gap: 4px; }
|
|
.vol-wrap input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; }
|
|
.vol-wrap:hover input, .vol-wrap input:focus { width: 70px; opacity: 1; }
|
|
|
|
/* timeline below player */
|
|
.timeline-section { margin-top: 16px; }
|
|
.timeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
.timeline-header h2 { font-size: 14px; font-weight: 500; color: var(--dim); }
|
|
.zoom-btns { display: flex; gap: 4px; }
|
|
.zoom-btns button { background: var(--surface); border: none; color: var(--text); padding: 4px 10px; border-radius: 3px; font-size: 12px; cursor: pointer; }
|
|
.zoom-btns button:hover { background: var(--hover); }
|
|
.timeline-canvas { position: relative; }
|
|
.timeline-canvas canvas { display: block; width: 100%; height: 56px; border-radius: 6px; cursor: pointer; }
|
|
.hours { display: flex; justify-content: space-between; margin-top: 4px; color: var(--dim); font-size: 10px; user-select: none; }
|
|
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--dim); }
|
|
.legend span { display: flex; align-items: center; gap: 5px; }
|
|
.legend span::before { content: ""; display: block; width: 14px; height: 6px; border-radius: 2px; }
|
|
.legend .rec::before { background: var(--accent); }
|
|
.legend .gap::before { background: #2a2a2a; border: 1px solid #444; }
|
|
|
|
/* encoding panel */
|
|
.encode-panel { margin-top: 16px; background: var(--surface); border-radius: 8px; overflow: hidden; }
|
|
.encode-toggle { width: 100%; background: none; border: none; color: var(--text); padding: 12px 16px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; }
|
|
.encode-toggle:hover { background: var(--hover); }
|
|
.encode-toggle svg { width: 16px; height: 16px; fill: var(--dim); transition: transform .2s; }
|
|
.encode-toggle.open svg { transform: rotate(90deg); }
|
|
.encode-body { display: none; padding: 0 16px 14px; }
|
|
.encode-body.show { display: flex; align-items: center; gap: 12px; }
|
|
.encode-body button { background: var(--accent); color: #000; border: none; padding: 7px 16px; border-radius: 3px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
|
|
.encode-body button:hover { background: #65b8ff; }
|
|
.encode-body button:disabled { background: #555; color: #999; cursor: default; }
|
|
.encode-body progress { flex: 1; height: 4px; accent-color: var(--accent); }
|
|
.encode-body .enc-status { font-size: 12px; color: var(--dim); min-width: 180px; text-align: right; }
|
|
|
|
@media (max-width: 600px) {
|
|
.page { padding: 8px; }
|
|
.ctrl-row svg { width: 18px; height: 18px; }
|
|
.hours span:nth-child(even) { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="header">
|
|
<h1>C41 Archive</h1>
|
|
<select id="date"></select>
|
|
</div>
|
|
|
|
<div class="player-wrap paused" id="player-wrap">
|
|
<video id="video" playsinline></video>
|
|
<div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
|
|
<div class="controls-bar">
|
|
<div class="scrub" id="scrub">
|
|
<div class="scrub-fill" id="scrub-fill"></div>
|
|
<div class="scrub-hover" id="scrub-hover">00:00</div>
|
|
</div>
|
|
<div class="ctrl-row">
|
|
<button id="btn-play" aria-label="Play">
|
|
<svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
|
<svg id="icon-pause" viewBox="0 0 24 24" style="display:none"><path d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>
|
|
</button>
|
|
<button id="btn-back" aria-label="Back 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="10" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
|
|
<button id="btn-fwd" aria-label="Forward 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/><text x="14" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
|
|
<div class="vol-wrap">
|
|
<button id="btn-vol" aria-label="Volume">
|
|
<svg id="icon-vol-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8.3v7.4a4.5 4.5 0 0 0 2.5-3.7zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1A9 9 0 0 0 14 3.2z"/></svg>
|
|
<svg id="icon-vol-off" viewBox="0 0 24 24" style="display:none"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8.3v7.4a4.5 4.5 0 0 0 2.5-3.7z"/></svg>
|
|
</button>
|
|
<input id="volume" type="range" min="0" max="1" step=".01" value=".8">
|
|
</div>
|
|
<span class="time-label"><span id="time-cur">0:00</span> / <span id="time-dur">0:00</span></span>
|
|
<span class="spacer"></span>
|
|
<span class="time-label" id="clock" style="color:var(--accent);font-weight:500;">--:--:--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-section">
|
|
<div class="timeline-header">
|
|
<h2>24h Timeline</h2>
|
|
<div class="zoom-btns">
|
|
<button id="zoom-out">-</button>
|
|
<button id="zoom-in">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-canvas">
|
|
<canvas id="timeline"></canvas>
|
|
</div>
|
|
<div class="hours" id="hours"></div>
|
|
<div class="legend"><span class="rec">Recorded</span><span class="gap">No recording</span></div>
|
|
</div>
|
|
|
|
<div class="encode-panel">
|
|
<button class="encode-toggle" id="encode-toggle"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>Encoding</button>
|
|
<div class="encode-body" id="encode-body">
|
|
<button id="encode-btn">Start</button>
|
|
<progress id="encode-progress" value="0" max="1"></progress>
|
|
<span class="enc-status" id="encode-status">Ready</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const video = document.querySelector("#video");
|
|
const wrap = document.querySelector("#player-wrap");
|
|
const dateSelect = document.querySelector("#date");
|
|
const timeline = document.querySelector("#timeline");
|
|
const scrub = document.querySelector("#scrub");
|
|
const scrubFill = document.querySelector("#scrub-fill");
|
|
const scrubHover = document.querySelector("#scrub-hover");
|
|
let clips = [];
|
|
let activeClip = null;
|
|
let initialOffset = 0;
|
|
let zoom = 1;
|
|
let focus = 43200;
|
|
let encodingWasRunning = false;
|
|
|
|
// encoding
|
|
const encToggle = document.querySelector("#encode-toggle");
|
|
encToggle.addEventListener("click", () => {
|
|
encToggle.classList.toggle("open");
|
|
document.querySelector("#encode-body").classList.toggle("show");
|
|
});
|
|
async function updateEncodeStatus() {
|
|
const r = await fetch("/api/encode/status");
|
|
const d = await r.json();
|
|
const btn = document.querySelector("#encode-btn");
|
|
const prog = document.querySelector("#encode-progress");
|
|
btn.disabled = d.running;
|
|
btn.textContent = d.running ? "Encoding..." : "Start";
|
|
prog.max = d.total || 1;
|
|
prog.value = d.completed + d.skipped + d.failed;
|
|
document.querySelector("#encode-status").textContent = d.running
|
|
? `${d.completed}/${d.total} ${d.skipped} skip ${d.failed} err`
|
|
: d.total ? `${d.completed} done ${d.skipped} skip ${d.failed} err` : "Ready";
|
|
if (encodingWasRunning && !d.running) loadDate(dateSelect.value);
|
|
encodingWasRunning = d.running;
|
|
if (d.running) setTimeout(updateEncodeStatus, 1000);
|
|
}
|
|
document.querySelector("#encode-btn").addEventListener("click", async () => {
|
|
await fetch("/api/encode", {method: "POST"});
|
|
updateEncodeStatus();
|
|
});
|
|
|
|
// play / pause
|
|
function setPlaying(p) {
|
|
wrap.classList.toggle("paused", !p);
|
|
document.querySelector("#icon-play").style.display = p ? "none" : "";
|
|
document.querySelector("#icon-pause").style.display = p ? "" : "none";
|
|
}
|
|
document.querySelector("#btn-play").addEventListener("click", () => {
|
|
if (!activeClip) return;
|
|
video.paused ? video.play() : video.pause();
|
|
});
|
|
wrap.addEventListener("click", e => {
|
|
if (e.target.closest(".controls-bar")) return;
|
|
if (!activeClip) return;
|
|
video.paused ? video.play() : video.pause();
|
|
});
|
|
video.addEventListener("play", () => setPlaying(true));
|
|
video.addEventListener("pause", () => setPlaying(false));
|
|
|
|
// volume
|
|
const volInput = document.querySelector("#volume");
|
|
volInput.addEventListener("input", () => { video.volume = +volInput.value; updateVolIcon(); });
|
|
document.querySelector("#btn-vol").addEventListener("click", () => {
|
|
video.muted = !video.muted;
|
|
updateVolIcon();
|
|
});
|
|
function updateVolIcon() {
|
|
const on = !video.muted && video.volume > 0;
|
|
document.querySelector("#icon-vol-on").style.display = on ? "" : "none";
|
|
document.querySelector("#icon-vol-off").style.display = on ? "none" : "";
|
|
}
|
|
video.volume = .8;
|
|
|
|
// time format
|
|
function fmt(s) {
|
|
s = Math.max(0, Math.floor(s));
|
|
const h = Math.floor(s / 3600), m = Math.floor(s % 3600 / 60), sec = s % 60;
|
|
return h ? `${h}:${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}` : `${m}:${String(sec).padStart(2,"0")}`;
|
|
}
|
|
function timeOfDay(s) {
|
|
s = Math.max(0, Math.floor(s));
|
|
return [s/3600, s%3600/60, s%60].map(v => String(Math.floor(v)).padStart(2,"0")).join(":");
|
|
}
|
|
|
|
// scrub bar
|
|
function updateScrub() {
|
|
if (!activeClip || !video.duration) { scrubFill.style.width = "0%"; return; }
|
|
scrubFill.style.width = (video.currentTime / video.duration * 100) + "%";
|
|
}
|
|
scrub.addEventListener("click", e => {
|
|
if (!activeClip || !video.duration) return;
|
|
video.currentTime = (e.offsetX / scrub.clientWidth) * video.duration;
|
|
});
|
|
scrub.addEventListener("mousemove", e => {
|
|
if (!activeClip || !video.duration) return;
|
|
const t = (e.offsetX / scrub.clientWidth) * video.duration;
|
|
scrubHover.textContent = fmt(t);
|
|
scrubHover.style.left = e.offsetX + "px";
|
|
});
|
|
|
|
// seek buttons
|
|
function seekBy(sec) {
|
|
if (!activeClip) return;
|
|
const cur = activeClip.start + initialOffset + video.currentTime;
|
|
const target = cur + sec;
|
|
let clip = clips.find(c => target >= c.start && target < c.start + c.duration);
|
|
if (!clip) {
|
|
clip = sec > 0
|
|
? clips.find(c => c.start >= target)
|
|
: [...clips].reverse().find(c => c.start + c.duration <= target);
|
|
if (!clip) clip = sec > 0 ? clips[clips.length - 1] : clips[0];
|
|
}
|
|
let offset = target - clip.start;
|
|
if (target < clip.start) offset = 0;
|
|
if (target >= clip.start + clip.duration) offset = clip.duration - 0.1;
|
|
if (clip !== activeClip) return playClip(clip, Math.max(0, offset));
|
|
video.currentTime = Math.max(0, Math.min(video.duration || clip.duration, offset));
|
|
}
|
|
document.querySelector("#btn-back").addEventListener("click", () => seekBy(-10));
|
|
document.querySelector("#btn-fwd").addEventListener("click", () => seekBy(10));
|
|
|
|
// timeline
|
|
function drawTimeline() {
|
|
const ratio = devicePixelRatio || 1;
|
|
const w = timeline.clientWidth;
|
|
timeline.width = w * ratio;
|
|
timeline.height = 56 * ratio;
|
|
const ctx = timeline.getContext("2d");
|
|
ctx.scale(ratio, ratio);
|
|
ctx.fillStyle = "#1a1a1a";
|
|
ctx.fillRect(0, 0, w, 56);
|
|
const winSize = 86400 / zoom;
|
|
const winStart = Math.max(0, Math.min(86400 - winSize, focus - winSize / 2));
|
|
const winEnd = winStart + winSize;
|
|
// recorded blocks
|
|
ctx.fillStyle = "#3ea6ff";
|
|
const rec = new Uint8Array(1440);
|
|
clips.forEach(c => {
|
|
const a = Math.floor(c.start / 60), b = Math.min(1439, Math.floor((c.start + c.duration - .001) / 60));
|
|
for (let i = a; i <= b; i++) rec[i] = 1;
|
|
});
|
|
rec.forEach((v, i) => {
|
|
if (!v) return;
|
|
const l = (i * 60 - winStart) / winSize * w;
|
|
const r = ((i + 1) * 60 - winStart) / winSize * w;
|
|
if (r > 0 && l < w) ctx.fillRect(Math.max(0, l), 0, Math.min(w, r) - Math.max(0, l), 56);
|
|
});
|
|
// hour lines
|
|
ctx.strokeStyle = "rgba(255,255,255,.08)";
|
|
for (let h = Math.ceil(winStart / 3600); h < winEnd / 3600; h++) {
|
|
const x = (h * 3600 - winStart) / winSize * w;
|
|
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, 56); ctx.stroke();
|
|
}
|
|
// playhead
|
|
if (activeClip) {
|
|
const cur = activeClip.start + initialOffset + (video.currentTime || 0);
|
|
const x = (cur - winStart) / winSize * w;
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillRect(x - 1.5, 0, 3, 56);
|
|
}
|
|
// labels
|
|
const step = zoom >= 8 ? 1 : zoom >= 2 ? 2 : 4;
|
|
const first = Math.ceil(winStart / 3600 / step) * step;
|
|
document.querySelector("#hours").innerHTML = Array.from({length: 25}, (_, i) => first + i * step)
|
|
.filter(h => h <= winEnd / 3600).map(h => `<span>${timeOfDay(h * 3600)}</span>`).join("");
|
|
}
|
|
|
|
timeline.addEventListener("click", e => {
|
|
const winSize = 86400 / zoom;
|
|
const winStart = Math.max(0, Math.min(86400 - winSize, focus - winSize / 2));
|
|
const sec = winStart + e.offsetX / timeline.clientWidth * winSize;
|
|
focus = sec;
|
|
const clip = clips.find(c => sec >= c.start && sec < c.start + c.duration)
|
|
|| clips.find(c => c.start >= sec) || clips[clips.length - 1];
|
|
if (clip) playClip(clip, Math.max(0, Math.min(clip.duration - .1, sec - clip.start)));
|
|
});
|
|
timeline.addEventListener("mousemove", e => {
|
|
const winSize = 86400 / zoom;
|
|
const winStart = Math.max(0, Math.min(86400 - winSize, focus - winSize / 2));
|
|
timeline.title = timeOfDay(winStart + e.offsetX / timeline.clientWidth * winSize);
|
|
});
|
|
document.querySelector("#zoom-in").addEventListener("click", () => { zoom = Math.min(24, zoom * 2); drawTimeline(); });
|
|
document.querySelector("#zoom-out").addEventListener("click", () => { zoom = Math.max(1, zoom / 2); drawTimeline(); });
|
|
|
|
// load date
|
|
async function loadDate(date) {
|
|
video.pause(); video.removeAttribute("src"); activeClip = null; setPlaying(false);
|
|
const r = await fetch(`/api/recordings?date=${encodeURIComponent(date)}`);
|
|
const d = await r.json();
|
|
clips = d.recordings;
|
|
dateSelect.innerHTML = d.dates.map(day => `<option value="${day}">${day.slice(0,4)}-${day.slice(4,6)}-${day.slice(6)}</option>`).join("");
|
|
dateSelect.value = date || d.dates[0];
|
|
document.querySelector("#clock").textContent = "--:--:--";
|
|
document.querySelector("#time-cur").textContent = "0:00";
|
|
document.querySelector("#time-dur").textContent = "0:00";
|
|
scrubFill.style.width = "0%";
|
|
drawTimeline();
|
|
if (!date && d.dates[0]) loadDate(d.dates[0]);
|
|
}
|
|
|
|
function playClip(clip, offset = 0) {
|
|
activeClip = clip;
|
|
initialOffset = offset;
|
|
document.querySelector("#clock").textContent = timeOfDay(clip.start + offset);
|
|
video.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`;
|
|
video.play().catch(() => {});
|
|
drawTimeline();
|
|
}
|
|
|
|
video.addEventListener("timeupdate", () => {
|
|
if (!activeClip) return;
|
|
document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
|
|
document.querySelector("#time-cur").textContent = fmt(video.currentTime);
|
|
updateScrub();
|
|
drawTimeline();
|
|
});
|
|
video.addEventListener("loadedmetadata", () => {
|
|
document.querySelector("#time-dur").textContent = fmt(video.duration);
|
|
if (initialOffset > 0 && video.currentTime < initialOffset) video.currentTime = initialOffset;
|
|
});
|
|
video.addEventListener("ended", () => {
|
|
const i = clips.indexOf(activeClip);
|
|
if (i >= 0 && clips[i + 1]) playClip(clips[i + 1]);
|
|
});
|
|
// keyboard
|
|
document.addEventListener("keydown", e => {
|
|
if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
|
|
if (e.code === "ArrowLeft") { e.preventDefault(); seekBy(-10); }
|
|
else if (e.code === "ArrowRight") { e.preventDefault(); seekBy(10); }
|
|
else if (e.code === "Space") { e.preventDefault(); if (activeClip) video.paused ? video.play() : video.pause(); }
|
|
else if (e.code === "KeyM") { video.muted = !video.muted; updateVolIcon(); }
|
|
});
|
|
|
|
dateSelect.addEventListener("change", () => loadDate(dateSelect.value));
|
|
addEventListener("resize", drawTimeline);
|
|
loadDate("").catch(() => {});
|
|
updateEncodeStatus();
|
|
</script>
|
|
</body>
|
|
</html>
|