diff --git a/eslint.config.js b/eslint.config.js index f2420e7..261be59 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,16 +1,16 @@ -import tseslint from "@typescript-eslint/eslint-plugin"; -import tsParser from "@typescript-eslint/parser"; -import prettier from "eslint-plugin-prettier"; -import eslintConfigPrettier from "eslint-config-prettier"; +import tseslint from '@typescript-eslint/eslint-plugin'; +import tsParser from '@typescript-eslint/parser'; +import prettier from 'eslint-plugin-prettier'; +import eslintConfigPrettier from 'eslint-config-prettier'; export default [ { - ignores: ["dist/**", "node_modules/**", "server", "*.js"], + ignores: ['dist/**', 'node_modules/**', 'server', '*.js'], }, { - files: ["**/*.ts"], + files: ['**/*.ts'], plugins: { - "@typescript-eslint": tseslint, + '@typescript-eslint': tseslint, prettier, }, languageOptions: { @@ -18,9 +18,12 @@ export default [ }, rules: { ...eslintConfigPrettier.rules, - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" }], - "prettier/prettier": "error", + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-unused-vars': [ + 'warn', + { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }, + ], + 'prettier/prettier': 'error', }, }, ]; diff --git a/static/player/episodes/thumbnails.ts b/static/player/episodes/thumbnails.ts index 4241663..990375d 100644 --- a/static/player/episodes/thumbnails.ts +++ b/static/player/episodes/thumbnails.ts @@ -1,5 +1,9 @@ import { state } from '../state'; +/** + * Fetches episode thumbnails and titles from API. + * Injects images into episode cards, replaces placeholder. + */ export const setupThumbnails = (): void => { fetch(`/api/watch/thumbnails/${state.malID}`) .then(res => res.json()) @@ -9,11 +13,13 @@ export const setupThumbnails = (): void => { const card = state.episodeList.querySelector(`[data-episode-id="${item.mal_id}"]`); if (!card) return; + // inject thumbnail image if (item.url) { const imgContainer = card.querySelector('.relative.aspect-video'); if (imgContainer) { let img = imgContainer.querySelector('img'); if (!img) { + // replace placeholder with actual image img = document.createElement('img'); img.className = 'h-full w-full object-cover transition-transform group-hover:scale-105'; @@ -28,6 +34,7 @@ export const setupThumbnails = (): void => { } } + // inject title text if (item.title) { const titleEl = card.querySelector('[data-episode-title]'); if (titleEl) titleEl.textContent = item.title; diff --git a/static/player/skip/index.ts b/static/player/skip/index.ts index 2972432..b83bcab 100644 --- a/static/player/skip/index.ts +++ b/static/player/skip/index.ts @@ -1,14 +1,19 @@ import { state } from '../state'; import { displayTimeFromAbsolute, absoluteTimeFromDisplay } from '../timeline'; import { showControls } from '../controls'; -import { resolveActiveSegments, renderSegments } from './segments'; +// button label based on segment type 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 displayTime = displayTimeFromAbsolute(currentTime); + // find segment that contains current time (with delay buffer) 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; @@ -20,12 +25,14 @@ export const updateSkipButton = (currentTime: number): void => { return; } + // auto-skip: jump to end if enabled const autoSkip = localStorage.getItem('mal:autoskip-enabled') === 'true'; if (autoSkip && displayTime >= segment.start && displayTime < segment.end) { state.video.currentTime = absoluteTimeFromDisplay(segment.end + 0.01); return; } + // show skip button state.activeSkipSegment = segment; if (btn) { btn.textContent = skipLabel(segment.type); @@ -34,11 +41,17 @@ export const updateSkipButton = (currentTime: number): void => { } }; +/** + * Syncs autoskip checkbox with localStorage. + */ export const updateAutoSkipButton = (): void => { const btn = document.querySelector('[data-autoskip]') as HTMLInputElement | null; btn && (btn.checked = localStorage.getItem('mal:autoskip-enabled') === 'true'); }; +/** + * Binds autoskip toggle change handler. + */ export const setupSkip = (): void => { document.addEventListener('change', e => { const target = e.target as HTMLElement; diff --git a/static/player/skip/segments.ts b/static/player/skip/segments.ts index 0ca3b27..7cb8d93 100644 --- a/static/player/skip/segments.ts +++ b/static/player/skip/segments.ts @@ -1,11 +1,15 @@ -import { SkipSegment } from '../types'; import { state } from '../state'; -const MIN_SEGMENT_DURATION = 20; -const MAX_SEGMENT_DURATION = 240; -const MAX_INTRO_START = 180; -const MIN_OUTRO_START_RATIO = 0.5; +// filter bounds for valid segments +const MIN_SEGMENT_DURATION = 20; // at least 20s +const MAX_SEGMENT_DURATION = 240; // at most 4 min +const MAX_INTRO_START = 180; // intro must start before 3min +const MIN_OUTRO_START_RATIO = 0.5; // outro must start at least 50% in +/** + * Filters parsed segments to only those within video bounds and sensible duration. + * Validates intro/outro positioning. + */ export const resolveActiveSegments = (): void => { const bounds = state.video.duration; if (bounds <= 0) { @@ -15,12 +19,16 @@ export const resolveActiveSegments = (): void => { state.activeSegments = state.parsedSegments.filter(s => { const len = s.end - s.start; + // duration filter if (len < MIN_SEGMENT_DURATION || len > MAX_SEGMENT_DURATION) return false; + // bounds check 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') { return s.start <= MAX_INTRO_START && s.start <= bounds * 0.5; } + // outro: starts in second half of video if (s.type === 'ed') { return s.start >= bounds * MIN_OUTRO_START_RATIO; } @@ -28,6 +36,9 @@ 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; if (!track) return; @@ -36,6 +47,7 @@ export const renderSegments = (): void => { const bounds = state.video.duration; if (bounds <= 0) return; + // create small white bars for each segment state.activeSegments.forEach(s => { const bar = document.createElement('div'); bar.className = 'absolute top-0 h-full bg-white/80';