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

refactor: use css variable for player segment color

Browse Source
This commit is contained in:
mkelvers
2026-06-12 11:38:03 +02:00
parent ab9d585a1f
commit c509144b30
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,14 +61,12 @@ export const renderSegments = (): void => {
const bounds = state.video.duration;
if (bounds <= 0) return;
// create clearly visible colored bars for each segment
state.activeSegments.forEach((s) => {
const bar = document.createElement("div");
// use distinct colors so segments are readable over buffered/progress fills
bar.className = "absolute top-0 h-full opacity-95";
// distinct colors for OP/ED, rendered above buffered/progress fills
const t = (s.type || "").toLowerCase();
bar.style.backgroundColor = t === "ed" ? "#60a5fa" : "#f5c542";
bar.className = "absolute opacity-95";
bar.style.backgroundColor = "var(--player-segment)";
bar.style.top = "-1px";
bar.style.height = "calc(100% + 2px)";
bar.style.left = `${(s.start / bounds) * 100}%`;
bar.style.width = `${((s.end - s.start) / bounds) * 100}%`;
track.appendChild(bar);