Make timeline legend jump between events

index.html

@@ -62,6 +62,7 @@
     .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 { cursor: pointer; }
     .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; }
@@ -161,7 +162,7 @@
       <canvas id="timeline"></canvas>
     </div>
     <div class="hours" id="hours"></div>
-    <div class="legend"><span class="rec">Recorded</span><span class="highlight">Highlight</span><span class="system">System highlight</span><span class="gap">No recording</span></div>
+    <div class="legend"><span class="rec" data-jump="recorded">Recorded</span><span class="highlight" data-jump="highlight">Highlight</span><span class="system" data-jump="system">System highlight</span><span class="gap" data-jump="gap">No recording</span></div>
   </div>
 
   <section class="highlights">
@@ -275,8 +276,39 @@
   }
 
   function archiveTime() {
-    return activeClip ? activeClip.start + initialOffset + (video.currentTime || 0) : null;
+    return activeClip ? activeClip.start + initialOffset + (video.currentTime || 0) : focus;
   }
+  function jumpToNext(kind) {
+    const now = archiveTime();
+    if (kind === "recorded") {
+      const clip = clips.find(item => item.start > now + 1) || clips[0];
+      if (clip) { focus = clip.start; playClip(clip, 0); }
+      return;
+    }
+    const items = kind === "system" ? systemHighlights : highlights;
+    if (kind === "highlight" || kind === "system") {
+      const item = items.find(entry => entry.start > now + 1) || items[0];
+      if (!item) return;
+      const clip = clips.find(entry => item.start >= entry.start && item.start < entry.start + entry.duration)
+        || clips.find(entry => entry.start >= item.start);
+      if (clip) { focus = clip.start; playClip(clip, Math.max(0, item.start - clip.start)); }
+      return;
+    }
+    const gaps = [];
+    if (clips.length && clips[0].start > 0) gaps.push({start: 0, end: clips[0].start});
+    clips.forEach((clip, index) => {
+      const end = clip.start + clip.duration;
+      const next = clips[index + 1];
+      if (next && next.start > end) gaps.push({start: end, end: next.start});
+    });
+    const gap = gaps.find(item => item.start > now + 1) || gaps[0];
+    if (gap) {
+      video.pause(); activeClip = null; focus = gap.start;
+      document.querySelector("#clock").textContent = timeOfDay(gap.start);
+      drawTimeline();
+    }
+  }
+  document.querySelectorAll(".legend [data-jump]").forEach(item => item.addEventListener("click", () => jumpToNext(item.dataset.jump)));
   function setMark(which) {
     const value = archiveTime();
     if (value === null) return;