diff --git a/static/player/skip/index.ts b/static/player/skip/index.ts index fa0142b..b8a235a 100644 --- a/static/player/skip/index.ts +++ b/static/player/skip/index.ts @@ -1,34 +1,34 @@ -import { state } from '../state'; -import { displayTimeFromAbsolute, absoluteTimeFromDisplay } from '../timeline'; -import { showControls } from '../controls'; -import { saveProgress } from '../progress'; -import { safeLocalStorage } from '../storage'; +import { state } from "../state"; +import { displayTimeFromAbsolute, absoluteTimeFromDisplay } from "../timeline"; +import { showControls } from "../controls"; +import { saveProgress } from "../progress"; +import { safeLocalStorage } from "../storage"; // button label based on segment type -const skipLabel = (type: string): string => (type === 'ed' ? 'Skip outro' : 'Skip intro'); +const skipLabel = (type: string): string => (type === "ed" ? "Skip outro" : "Skip intro"); /** * Updates skip button visibility and auto-skip logic. * Called on timeupdate. Shows button when in active segment. */ export const updateSkipButton = (currentTime: number): void => { - const btn = state.container.querySelector('[data-skip]') as HTMLButtonElement | null; + const btn = state.container.querySelector("[data-skip]") as HTMLButtonElement | null; const displayTime = displayTimeFromAbsolute(currentTime); // find segment that contains current time (with delay buffer) - const segment = state.activeSegments.find(s => { + const segment = state.activeSegments.find((s) => { const delay = Math.min(1, Math.max(0.25, (s.end - s.start) * 0.02)); return displayTime >= s.start + delay && displayTime < s.end; }); if (!segment) { state.activeSkipSegment = null; - btn?.classList.add('hidden'); + btn?.classList.add("hidden"); return; } // auto-skip: jump to end if enabled - const autoSkip = safeLocalStorage.getItem('mal:autoskip-enabled') === 'true'; + const autoSkip = safeLocalStorage.getItem("mal:autoskip-enabled") === "true"; if (autoSkip && displayTime >= segment.start && displayTime < segment.end) { state.video.currentTime = absoluteTimeFromDisplay(segment.end + 0.01); void saveProgress(); @@ -40,7 +40,7 @@ export const updateSkipButton = (currentTime: number): void => { if (btn) { btn.textContent = skipLabel(segment.type); btn.title = skipLabel(segment.type); - btn.classList.remove('hidden'); + btn.classList.remove("hidden"); } }; @@ -48,21 +48,21 @@ export const updateSkipButton = (currentTime: number): void => { * Syncs autoskip checkbox with localStorage. */ export const updateAutoSkipButton = (): void => { - const btn = document.querySelector('[data-autoskip]') as HTMLInputElement | null; + const btn = document.querySelector("[data-autoskip]") as HTMLInputElement | null; if (!btn) return; - btn.checked = safeLocalStorage.getItem('mal:autoskip-enabled') === 'true'; + btn.checked = safeLocalStorage.getItem("mal:autoskip-enabled") === "true"; }; /** * Binds autoskip toggle change handler. */ export const setupSkip = (): void => { - document.addEventListener('change', e => { + document.addEventListener("change", (e) => { const target = e.target as HTMLElement; - if (target.hasAttribute('data-autoskip')) { + if (target.hasAttribute("data-autoskip")) { safeLocalStorage.setItem( - 'mal:autoskip-enabled', - (target as HTMLInputElement).checked ? 'true' : 'false' + "mal:autoskip-enabled", + (target as HTMLInputElement).checked ? "true" : "false", ); showControls(); } diff --git a/static/player/skip/segments.ts b/static/player/skip/segments.ts index fe38c31..b110d2e 100644 --- a/static/player/skip/segments.ts +++ b/static/player/skip/segments.ts @@ -1,4 +1,4 @@ -import { state } from '../state'; +import { state } from "../state"; // filter bounds for valid segments const MIN_SEGMENT_DURATION = 20; // at least 20s @@ -17,17 +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'; + 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 => { + state.activeSegments = state.parsedSegments.filter((s) => { const t = normalizeType(s.type); if (!t) return false; - const isOverride = (s.source || '').toLowerCase() === 'override'; + const isOverride = (s.source || "").toLowerCase() === "override"; const len = s.end - s.start; // duration filter @@ -39,11 +39,11 @@ export const resolveActiveSegments = (): void => { if (isOverride) return true; // intro: starts early, before 50% of video - if (t === 'op') { + if (t === "op") { return s.start <= MAX_INTRO_START && s.start <= bounds * 0.5; } // outro: starts in second half of video - if (t === 'ed') { + if (t === "ed") { return s.start >= bounds * MIN_OUTRO_START_RATIO; } return false; @@ -54,21 +54,21 @@ export const resolveActiveSegments = (): void => { * Renders segment markers on the timeline progress bar. */ export const renderSegments = (): void => { - const track = state.container.querySelector('[data-segments]') as HTMLElement | null; + const track = state.container.querySelector("[data-segments]") as HTMLElement | null; if (!track) return; - track.innerHTML = ''; + track.innerHTML = ""; 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'); + 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'; + 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'; + const t = (s.type || "").toLowerCase(); + bar.style.backgroundColor = t === "ed" ? "#60a5fa" : "#f5c542"; bar.style.left = `${(s.start / bounds) * 100}%`; bar.style.width = `${((s.end - s.start) / bounds) * 100}%`; track.appendChild(bar);