oiwmiodev/recorder-player
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show highlights on timeline

Browse Source
This commit is contained in:
human insan
2026-08-27 23:08:20 +01:00
parent f00ae278cd
commit 807447e815
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -2
View File
@@ -69,6 +69,7 @@
.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; }
.legend .highlight::before { background: #ffd43b; }
.highlights { margin-top: 18px; background: var(--surface); border-radius: 8px; padding: 14px 16px; }
.highlights h2 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.highlight-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -164,7 +165,7 @@
<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 class="legend"><span class="rec">Recorded</span><span class="highlight">Highlight</span><span class="gap">No recording</span></div>
</div>
<section class="highlights">
@@ -201,6 +202,7 @@
let initialOffset = 0;
let zoom = 1;
let focus = 43200;
let highlights = [];
let highlightStart = null;
let highlightEnd = null;
let encodingWasRunning = false;
@@ -291,7 +293,9 @@
}
async function loadHighlights() {
const response = await fetch("/api/highlights");
const items = (await response.json()).filter(item => item.date === dateSelect.value);
highlights = (await response.json()).filter(item => item.date === dateSelect.value);
const items = highlights;
drawTimeline();
const list = document.querySelector("#highlight-list");
list.replaceChildren();
if (!items.length) {
@@ -393,6 +397,12 @@
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);
});
ctx.fillStyle = "#ffd43b";
highlights.forEach(item => {
const l = (item.start - winStart) / winSize * w;
const r = (item.end - 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++) {