style: format static/player/episodes/ui.ts

static/player/episodes/ui.ts

@@ -1,27 +1,28 @@
-import { state } from "../state";
 import { qs } from "../../q";
+import { state } from "../state";
 import { safeLocalStorage } from "../storage";
 
-/**
+/** Syncs autoplay checkbox with localStorage on init. Default is enabled (not 'false'). */
- * Syncs autoplay checkbox with localStorage on init.
- * Default is enabled (not 'false').
- */
 export const setupAutoplayButton = (): void => {
   const btn = document.querySelector("[data-autoplay]") as HTMLInputElement | null;
-  if (!btn) return;
+  if (!btn) {
+    return;
+  }
   btn.checked = safeLocalStorage.getItem("mal:autoplay-enabled") !== "false";
 };
 
 export const isAutoplayEnabled = (): boolean =>
   safeLocalStorage.getItem("mal:autoplay-enabled") !== "false";
 
-/**
+/** Updates video overlay text (shown briefly on episode change). */
- * Updates video overlay text (shown briefly on episode change).
- */
 export const updateOverlay = (episode: string, title: string): void => {
-  if (!state.elements.videoOverlay) return;
+  if (!state.elements.videoOverlay) {
+    return;
+  }
   const p = state.elements.videoOverlay.querySelector("p");
-  if (!p) return;
+  if (!p) {
+    return;
+  }
   p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`;
 };
 
@@ -30,21 +31,18 @@ const getEpisodeEls = () => {
   const grid = state.elements.episodeGrid;
   const list = state.elements.episodeList;
   return {
-    gridEls: grid ? Array.from(grid.querySelectorAll("[data-episode-id]")) : [],
+    gridEls: grid ? [...grid.querySelectorAll("[data-episode-id]")] : [],
-    listEls: list ? Array.from(list.querySelectorAll("[data-episode-id]")) : [],
+    listEls: list ? [...list.querySelectorAll("[data-episode-id]")] : [],
   };
 };
 
-/**
+/** Highlights current episode in grid and list. Scrolls to episode into view. */
- * Highlights current episode in grid and list.
- * Scrolls to episode into view.
- */
 export const updateEpisodeHighlight = (num: number): void => {
   const { gridEls, listEls } = getEpisodeEls();
   // clear old highlights
-  [...gridEls, ...listEls].forEach((el) =>
+  [...gridEls, ...listEls].forEach((el) => {
-    el.classList.remove("ring-2", "ring-accent", "bg-accent/20", "text-accent"),
+    el.classList.remove("ring-2", "ring-accent", "bg-accent/20", "text-accent");
-  );
+  });
 
   // apply new highlight
   const gridEl = state.elements.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
@@ -55,24 +53,26 @@ export const updateEpisodeHighlight = (num: number): void => {
   (gridEl ?? listEl)?.scrollIntoView({ behavior: "smooth", block: "center" });
 };
 
-/**
+/** Switches visible episode range in grid. Updates dropdown label and hides/shows episode cards. */
- * Switches visible episode range in grid.
- * Updates dropdown label and hides/shows episode cards.
- */
 export const switchEpisodeRange = (idx: number): void => {
   const dropdown = qs<HTMLElement>("[data-episode-dropdown]");
-  if (!dropdown) return;
+  if (!dropdown) {
-  const btns = Array.from(dropdown.querySelectorAll(".episode-range-btn")) as HTMLButtonElement[];
+    return;
+  }
+  const btns = [...dropdown.querySelectorAll(".episode-range-btn")] as HTMLButtonElement[];
   const target = btns[idx];
-  if (!target) return;
+  if (!target) {
+    return;
+  }
 
   const start = Number.parseInt(target.dataset.rangeStart ?? "1", 10);
   const end = Number.parseInt(target.dataset.rangeEnd ?? "100", 10);
 
   // update label (e.g., "01-100")
   const label = dropdown.querySelector("[data-dropdown-label]") as HTMLElement | null;
-  if (label)
+  if (label) {
     label.textContent = `${String(start).padStart(2, "0")}-${String(end).padStart(2, "0")}`;
+  }
 
   // show/hide episodes in range
   state.elements.episodeGrid?.querySelectorAll("[data-episode-id]").forEach((el) => {