From 7800964ce574a23a39398bd1f1c782c7ab241ecb Mon Sep 17 00:00:00 2001 From: mkelvers Date: Tue, 19 May 2026 11:03:04 +0200 Subject: [PATCH] fix: improve segment bar colors and z-index layering --- static/player/skip/segments.ts | 21 +++++++++++++++++---- templates/components/video_player.gohtml | 6 +++--- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/static/player/skip/segments.ts b/static/player/skip/segments.ts index 7cb8d93..7606d7f 100644 --- a/static/player/skip/segments.ts +++ b/static/player/skip/segments.ts @@ -17,7 +17,17 @@ export const resolveActiveSegments = (): void => { return; } + const normalizeType = (t: string): 'op' | 'ed' | null => { + const v = (t || '').toLowerCase(); + if (v === 'op' || v === 'opening' || v === 'intro') return 'op'; + if (v === 'ed' || v === 'ending' || v === 'outro') return 'ed'; + return null; + }; + state.activeSegments = state.parsedSegments.filter(s => { + const t = normalizeType(s.type); + if (!t) return false; + const len = s.end - s.start; // duration filter if (len < MIN_SEGMENT_DURATION || len > MAX_SEGMENT_DURATION) return false; @@ -25,11 +35,11 @@ export const resolveActiveSegments = (): void => { if (s.start < 0 || s.end <= s.start || s.end > bounds + 1) return false; // intro: starts early, before 50% of video - if (s.type === 'op') { + if (t === 'op') { return s.start <= MAX_INTRO_START && s.start <= bounds * 0.5; } // outro: starts in second half of video - if (s.type === 'ed') { + if (t === 'ed') { return s.start >= bounds * MIN_OUTRO_START_RATIO; } return false; @@ -47,10 +57,13 @@ export const renderSegments = (): void => { const bounds = state.video.duration; if (bounds <= 0) return; - // create small white bars for each segment + // create clearly visible colored bars for each segment state.activeSegments.forEach(s => { const bar = document.createElement('div'); - bar.className = 'absolute top-0 h-full bg-white/80'; + // use distinct colors so segments are readable over buffered/progress fills + bar.className = 'absolute top-0 h-full opacity-95'; + // single color for OP/ED, rendered above buffered/progress fills + bar.classList.add('bg-amber-300/90'); bar.style.left = `${(s.start / bounds) * 100}%`; bar.style.width = `${((s.end - s.start) / bounds) * 100}%`; track.appendChild(bar); diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml index cd95dcf..b05a3ab 100644 --- a/templates/components/video_player.gohtml +++ b/templates/components/video_player.gohtml @@ -128,14 +128,14 @@
-
+
-
+
0:00 - +