melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve segment bar colors and z-index layering

Browse Source
This commit is contained in:
mkelvers
2026-05-19 11:03:04 +02:00
parent 5d21f6f4de
commit 7800964ce5
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/player/skip/segments.ts
View File

@@ -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);