style: apply prettier/eslint quote consistency and add missing comments

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',
     },
   },
 ];

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;

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;

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';