melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mkelvers
2026-06-21 02:04:39 +02:00
committed by Milas Holsting
parent ffc08ccb9c
commit 9054f43a11
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/player/episodes/ui.ts
View File

@@ -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]")) : [],
listEls: list ? Array.from(list.querySelectorAll("[data-episode-id]")) : [],
gridEls: grid ? [...grid.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) =>
el.classList.remove("ring-2", "ring-accent", "bg-accent/20", "text-accent"),
);
[...gridEls, ...listEls].forEach((el) => {
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;
const btns = Array.from(dropdown.querySelectorAll(".episode-range-btn")) as HTMLButtonElement[];
if (!dropdown) {
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) => {