From 239dd501aa4ea3e4867813cdcfc4621dd0a68715 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 21 Jun 2026 02:04:35 +0200
Subject: [PATCH] style: format static/player/controls.ts

---
 static/player/controls.ts | 77 ++++++++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/static/player/controls.ts b/static/player/controls.ts
index e36ba1f..69de90e 100644
--- a/static/player/controls.ts
+++ b/static/player/controls.ts
@@ -1,17 +1,17 @@
-import { state } from "./state";
 import { saveProgress } from "./progress";
+import { state } from "./state";
 import { safeLocalStorage } from "./storage";
 
 export const formatTime = (seconds: number): string => {
-  if (!Number.isFinite(seconds) || seconds < 0) return "00:00";
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return "00:00";
+  }
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
   return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 };
 
-/**
- * Shows the controls overlay and schedules auto-hide after 2s if playing.
- */
+/** Shows the controls overlay and schedules auto-hide after 2s if playing. */
 export const showControls = (): void => {
   state.elements.container.classList.add("show-controls");
   window.clearTimeout(state.timers.playerControlsTimeout);
@@ -24,7 +24,9 @@ export const showControls = (): void => {
 
 // seek relative to current position
 export const seekBy = (delta: number): void => {
-  if (state.elements.video.duration <= 0) return;
+  if (state.elements.video.duration <= 0) {
+    return;
+  }
   state.elements.video.currentTime = Math.max(
     0,
     Math.min(state.elements.video.duration, state.elements.video.currentTime + delta),
@@ -59,7 +61,9 @@ export const toggleMute = (): void => {
 export const setVolume = (value: number): void => {
   state.elements.video.volume = Math.max(0, Math.min(1, value));
   state.elements.video.muted = value === 0;
-  if (value > 0) state.playback.lastKnownVolume = value;
+  if (value > 0) {
+    state.playback.lastKnownVolume = value;
+  }
 };
 
 export const toggleFullscreen = (): void => {
@@ -78,40 +82,54 @@ const syncVolumeUI = (): void => {
     volumeRange.value = String(value);
     volumeRange.style.setProperty("--volume-percent", `${value}%`);
   }
-  if (volumeUnderline) volumeUnderline.style.height = `${value}%`;
+  if (volumeUnderline) {
+    volumeUnderline.style.height = `${value}%`;
+  }
   updateMuteIcons(state.elements.video.muted || state.elements.video.volume === 0);
 };
 
 const VOLUME_STORAGE_KEY = "player-volume";
 
 const parseStoredVolume = (raw: string | null): number | null => {
-  if (!raw) return null;
+  if (!raw) {
+    return null;
+  }
   const v = Number.parseFloat(raw);
-  if (!Number.isFinite(v)) return null;
-  if (v < 0 || v > 1) return null;
+  if (!Number.isFinite(v)) {
+    return null;
+  }
+  if (v < 0 || v > 1) {
+    return null;
+  }
   return v;
 };
 
 const applyStoredVolume = (): void => {
   const stored = parseStoredVolume(safeLocalStorage.getItem(VOLUME_STORAGE_KEY));
-  if (stored === null) return;
+  if (stored === null) {
+    return;
+  }
 
   state.elements.video.volume = stored;
   state.elements.video.muted = stored === 0;
-  if (stored > 0) state.playback.lastKnownVolume = stored;
+  if (stored > 0) {
+    state.playback.lastKnownVolume = stored;
+  }
 };
 
 let volumeSaveTimer: number | undefined;
 const schedulePersistVolume = (): void => {
   window.clearTimeout(volumeSaveTimer);
   volumeSaveTimer = window.setTimeout(() => {
-    if (!Number.isFinite(state.elements.video.volume)) return;
+    if (!Number.isFinite(state.elements.video.volume)) {
+      return;
+    }
     const clamped = Math.max(0, Math.min(1, state.elements.video.volume));
     safeLocalStorage.setItem(VOLUME_STORAGE_KEY, clamped.toFixed(3));
   }, 250);
 };
 
-interface Controls {
+type Controls = {
   playPause: HTMLButtonElement | null;
   muteBtn: HTMLButtonElement | null;
   volumePanel: HTMLElement | null;
@@ -127,12 +145,14 @@ interface Controls {
   skipSegmentBtn: HTMLButtonElement | null;
   subtitleText: HTMLElement | null;
   autoplayBtn: HTMLInputElement | null;
-}
+};
 
 let controlsCache: Controls | null = null;
 
 const getControls = (): Controls => {
-  if (controlsCache) return controlsCache;
+  if (controlsCache) {
+    return controlsCache;
+  }
   const c = state.elements.container;
   controlsCache = {
     playPause: c.querySelector("[data-play-pause]"),
@@ -166,10 +186,7 @@ const updateMuteIcons = (isMuted: boolean): void => {
   iconMuted?.classList.toggle("hidden", !isMuted);
 };
 
-/**
- * Binds click handlers to player control buttons.
- * Sets up video event listeners for icon sync.
- */
+/** Binds click handlers to player control buttons. Sets up video event listeners for icon sync. */
 export const setupControls = (): void => {
   applyStoredVolume();
 
@@ -209,8 +226,12 @@ export const setupControls = (): void => {
   volumeRange?.addEventListener("pointerdown", () => volumePanel?.classList.add("is-dragging"));
   window.addEventListener("pointerup", () => volumePanel?.classList.remove("is-dragging"));
 
-  backwardBtn?.addEventListener("click", () => seekBy(-10));
-  forwardBtn?.addEventListener("click", () => seekBy(10));
+  backwardBtn?.addEventListener("click", () => {
+    seekBy(-10);
+  });
+  forwardBtn?.addEventListener("click", () => {
+    seekBy(10);
+  });
 
   fullscreenBtn?.addEventListener("click", () => {
     toggleFullscreen();
@@ -219,16 +240,20 @@ export const setupControls = (): void => {
 
   // skip intro/outro button
   skipSegmentBtn?.addEventListener("click", () => {
-    if (!state.skip.activeSegment) return;
+    if (!state.skip.activeSegment) {
+      return;
+    }
     state.elements.video.currentTime = state.skip.activeSegment.end + 0.01;
     showControls();
   });
 
   // fullscreen change handler
   document.addEventListener("fullscreenchange", () => {
-    state.ui.isFullscreen = !!document.fullscreenElement;
+    state.ui.isFullscreen = Boolean(document.fullscreenElement);
     state.elements.container.classList.toggle("fullscreen", state.ui.isFullscreen);
-    if (state.ui.isFullscreen) showControls();
+    if (state.ui.isFullscreen) {
+      showControls();
+    }
   });
 
   // icon sync on state changes