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 22:52:20 +01:00
parent dc6856da9a
commit 0bfea476da
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
@@ -65,6 +65,7 @@
.legend span::before { content: ""; display: block; width: 14px; height: 6px; border-radius: 2px; } .legend span::before { content: ""; display: block; width: 14px; height: 6px; border-radius: 2px; }
.legend .rec::before { background: var(--accent); } .legend .rec::before { background: var(--accent); }
.legend .gap::before { background: #2a2a2a; border: 1px solid #444; } .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 { margin-top: 18px; background: var(--surface); border-radius: 8px; padding: 14px 16px; }
.highlights h2 { font-size: 14px; font-weight: 500; margin-bottom: 10px; } .highlights h2 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.highlight-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .highlight-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -159,7 +160,7 @@
<canvas id="timeline"></canvas> <canvas id="timeline"></canvas>
</div> </div>
<div class="hours" id="hours"></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> </div>
<section class="highlights"> <section class="highlights">
@@ -196,6 +197,7 @@
let initialOffset = 0; let initialOffset = 0;
let zoom = 1; let zoom = 1;
let focus = 43200; let focus = 43200;
let highlights = [];
let highlightStart = null; let highlightStart = null;
let highlightEnd = null; let highlightEnd = null;
let encodingWasRunning = false; let encodingWasRunning = false;
@@ -286,7 +288,9 @@
} }
async function loadHighlights() { async function loadHighlights() {
const response = await fetch("/api/highlights"); 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"); const list = document.querySelector("#highlight-list");
list.replaceChildren(); list.replaceChildren();
if (!items.length) { if (!items.length) {
@@ -388,6 +392,12 @@
const r = ((i + 1) * 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); 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 // hour lines
ctx.strokeStyle = "rgba(255,255,255,.08)"; ctx.strokeStyle = "rgba(255,255,255,.08)";
for (let h = Math.ceil(winStart / 3600); h < winEnd / 3600; h++) { for (let h = Math.ceil(winStart / 3600); h < winEnd / 3600; h++) {