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

chore: format player episode nav and ui

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:29:14 +02:00
committed by Milas Holsting
parent df1e65f5c2
commit e500af6102
2 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
static/player/episodes/nav.ts
View File

@@ -1,12 +1,12 @@
import { state } from '../state'; import { state } from "../state";
import type { SkipSegment } from '../types'; import type { SkipSegment } from "../types";
import { resolveActiveSegments, renderSegments } from '../skip/segments'; import { resolveActiveSegments, renderSegments } from "../skip/segments";
import { updateSubtitleOptions } from '../subtitles'; import { updateSubtitleOptions } from "../subtitles";
import { updateQualityOptions } from '../quality'; import { updateQualityOptions } from "../quality";
import { updateModeButtons } from '../mode'; import { updateModeButtons } from "../mode";
import { updateOverlay, isAutoplayEnabled, switchEpisodeRange } from './ui'; import { updateOverlay, isAutoplayEnabled, switchEpisodeRange } from "./ui";
import { markEpisodeTransition } from '../progress'; import { markEpisodeTransition } from "../progress";
import { safeLocalStorage } from '../storage'; import { safeLocalStorage } from "../storage";
/** /**
* Handles video end: either marks complete or loads next episode. * Handles video end: either marks complete or loads next episode.
@@ -18,7 +18,7 @@ export const goToNextEpisode = async (): Promise<void> => {
// final episode: trigger completion flow // final episode: trigger completion flow
if (state.totalEpisodes > 0 && currentEp >= state.totalEpisodes) { if (state.totalEpisodes > 0 && currentEp >= state.totalEpisodes) {
import('./complete').then(m => m.completeAnime(currentEp)); import("./complete").then((m) => m.completeAnime(currentEp));
return; return;
} }
@@ -30,13 +30,13 @@ export const goToNextEpisode = async (): Promise<void> => {
try { try {
const res = await fetch( const res = await fetch(
`/api/watch/episode/${state.malID}/${nextEp}?mode=${encodeURIComponent(state.currentMode)}` `/api/watch/episode/${state.malID}/${nextEp}?mode=${encodeURIComponent(state.currentMode)}`,
); );
if (!res.ok) { if (!res.ok) {
// fallback: full page navigation // fallback: full page navigation
sessionStorage.setItem('mal:autoplay-next', 'true'); sessionStorage.setItem("mal:autoplay-next", "true");
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp)); url.searchParams.set("ep", String(nextEp));
window.location.href = url.toString(); window.location.href = url.toString();
return; return;
} }
@@ -47,21 +47,21 @@ export const goToNextEpisode = async (): Promise<void> => {
state.modeSources = data.mode_sources ?? {}; state.modeSources = data.mode_sources ?? {};
state.availableModes = data.available_modes ?? []; state.availableModes = data.available_modes ?? [];
const backendMode = typeof data.initial_mode === 'string' ? data.initial_mode : ''; const backendMode = typeof data.initial_mode === "string" ? data.initial_mode : "";
const fallback = state.modeSources[backendMode]?.token const fallback = state.modeSources[backendMode]?.token
? backendMode ? backendMode
: state.availableModes.find(m => state.modeSources[m]?.token); : state.availableModes.find((m) => state.modeSources[m]?.token);
if (!fallback) { if (!fallback) {
sessionStorage.setItem('mal:autoplay-next', 'true'); sessionStorage.setItem("mal:autoplay-next", "true");
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp)); url.searchParams.set("ep", String(nextEp));
window.location.href = url.toString(); window.location.href = url.toString();
return; return;
} }
state.currentEpisode = String(nextEp); state.currentEpisode = String(nextEp);
state.currentMode = fallback; state.currentMode = fallback;
if (data.mode_switched_from === 'dub' && fallback === 'sub') { if (data.mode_switched_from === "dub" && fallback === "sub") {
window.showToast?.({ window.showToast?.({
message: `Episode ${nextEp} is only available in sub, switched from dub.`, message: `Episode ${nextEp} is only available in sub, switched from dub.`,
}); });
@@ -72,8 +72,8 @@ export const goToNextEpisode = async (): Promise<void> => {
state.container.dataset.startTimeSeconds = String(state.startTimeSeconds); state.container.dataset.startTimeSeconds = String(state.startTimeSeconds);
// load new video (keep preferences) // load new video (keep preferences)
const preferredQuality = safeLocalStorage.getItem('mal:preferred-quality') || 'best'; const preferredQuality = safeLocalStorage.getItem("mal:preferred-quality") || "best";
state.video.src = `${state.streamURL}?mode=${encodeURIComponent(fallback)}&token=${encodeURIComponent(state.modeSources[fallback].token)}${preferredQuality !== 'best' ? `&quality=${encodeURIComponent(preferredQuality)}` : ''}`; state.video.src = `${state.streamURL}?mode=${encodeURIComponent(fallback)}&token=${encodeURIComponent(state.modeSources[fallback].token)}${preferredQuality !== "best" ? `&quality=${encodeURIComponent(preferredQuality)}` : ""}`;
state.video.load(); state.video.load();
if (!state.video.paused) { if (!state.video.paused) {
state.video.play().catch(() => undefined); state.video.play().catch(() => undefined);
@@ -88,7 +88,7 @@ export const goToNextEpisode = async (): Promise<void> => {
updateSubtitleOptions(); updateSubtitleOptions();
updateQualityOptions(); updateQualityOptions();
updateModeButtons(); updateModeButtons();
updateOverlay(state.currentEpisode, data.episode_title ?? ''); updateOverlay(state.currentEpisode, data.episode_title ?? "");
// update skip segments // update skip segments
if (data.segments?.length) { if (data.segments?.length) {
@@ -101,28 +101,28 @@ export const goToNextEpisode = async (): Promise<void> => {
// highlight new episode in list/grid // highlight new episode in list/grid
state.episodeList state.episodeList
?.querySelectorAll('[data-episode-id]') ?.querySelectorAll("[data-episode-id]")
.forEach(el => el.classList.remove('bg-accent/20')); .forEach((el) => el.classList.remove("bg-accent/20"));
const newListEl = state.episodeList?.querySelector(`[data-episode-id="${nextEp}"]`); const newListEl = state.episodeList?.querySelector(`[data-episode-id="${nextEp}"]`);
newListEl?.classList.add('bg-accent/20'); newListEl?.classList.add("bg-accent/20");
if (state.episodeGrid) { if (state.episodeGrid) {
state.episodeGrid.querySelectorAll('[data-episode-id]').forEach(el => { state.episodeGrid.querySelectorAll("[data-episode-id]").forEach((el) => {
el.classList.remove('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent'); el.classList.remove("bg-accent/20", "ring-2", "ring-accent", "text-accent");
}); });
switchEpisodeRange(Math.floor((nextEp - 1) / 100)); switchEpisodeRange(Math.floor((nextEp - 1) / 100));
const newGridEl = state.episodeGrid.querySelector(`[data-episode-id="${nextEp}"]`); const newGridEl = state.episodeGrid.querySelector(`[data-episode-id="${nextEp}"]`);
newGridEl?.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent'); newGridEl?.classList.add("bg-accent/20", "ring-2", "ring-accent", "text-accent");
} }
// update URL without reload // update URL without reload
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp)); url.searchParams.set("ep", String(nextEp));
history.pushState(null, '', url.toString()); history.pushState(null, "", url.toString());
} catch { } catch {
sessionStorage.setItem('mal:autoplay-next', 'true'); sessionStorage.setItem("mal:autoplay-next", "true");
const url = new URL(window.location.href); const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp)); url.searchParams.set("ep", String(nextEp));
window.location.href = url.toString(); window.location.href = url.toString();
} }
}; };

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

@@ -1,26 +1,26 @@
import { state } from '../state'; import { state } from "../state";
import { qs } from '../../q'; import { qs } from "../../q";
import { safeLocalStorage } from '../storage'; import { safeLocalStorage } from "../storage";
/** /**
* Syncs autoplay checkbox with localStorage on init. * Syncs autoplay checkbox with localStorage on init.
* Default is enabled (not 'false'). * Default is enabled (not 'false').
*/ */
export const setupAutoplayButton = (): void => { export const setupAutoplayButton = (): void => {
const btn = document.querySelector('[data-autoplay]') as HTMLInputElement | null; const btn = document.querySelector("[data-autoplay]") as HTMLInputElement | null;
if (!btn) return; if (!btn) return;
btn.checked = safeLocalStorage.getItem('mal:autoplay-enabled') !== 'false'; btn.checked = safeLocalStorage.getItem("mal:autoplay-enabled") !== "false";
}; };
export const isAutoplayEnabled = (): boolean => export const isAutoplayEnabled = (): boolean =>
safeLocalStorage.getItem('mal:autoplay-enabled') !== 'false'; 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 => { export const updateOverlay = (episode: string, title: string): void => {
if (!state.videoOverlay) return; if (!state.videoOverlay) return;
const p = state.videoOverlay.querySelector('p'); const p = state.videoOverlay.querySelector("p");
if (!p) return; if (!p) return;
p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`; p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`;
}; };
@@ -30,8 +30,8 @@ const getEpisodeEls = () => {
const grid = state.episodeGrid; const grid = state.episodeGrid;
const list = state.episodeList; const list = state.episodeList;
return { return {
gridEls: grid ? Array.from(grid.querySelectorAll('[data-episode-id]')) : [], gridEls: grid ? Array.from(grid.querySelectorAll("[data-episode-id]")) : [],
listEls: list ? Array.from(list.querySelectorAll('[data-episode-id]')) : [], listEls: list ? Array.from(list.querySelectorAll("[data-episode-id]")) : [],
}; };
}; };
@@ -42,17 +42,17 @@ const getEpisodeEls = () => {
export const updateEpisodeHighlight = (num: number): void => { export const updateEpisodeHighlight = (num: number): void => {
const { gridEls, listEls } = getEpisodeEls(); const { gridEls, listEls } = getEpisodeEls();
// clear old highlights // 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 // apply new highlight
const gridEl = state.episodeGrid?.querySelector(`[data-episode-id="${num}"]`); const gridEl = state.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
const listEl = state.episodeList?.querySelector(`[data-episode-id="${num}"]`); const listEl = state.episodeList?.querySelector(`[data-episode-id="${num}"]`);
gridEl?.classList.add('ring-2', 'ring-accent'); gridEl?.classList.add("ring-2", "ring-accent");
listEl?.classList.add('ring-2', 'ring-accent'); listEl?.classList.add("ring-2", "ring-accent");
// scroll into view // scroll into view
(gridEl ?? listEl)?.scrollIntoView({ behavior: 'smooth', block: 'center' }); (gridEl ?? listEl)?.scrollIntoView({ behavior: "smooth", block: "center" });
}; };
/** /**
@@ -60,23 +60,23 @@ export const updateEpisodeHighlight = (num: number): void => {
* Updates dropdown label and hides/shows episode cards. * Updates dropdown label and hides/shows episode cards.
*/ */
export const switchEpisodeRange = (idx: number): void => { export const switchEpisodeRange = (idx: number): void => {
const dropdown = qs<HTMLElement>('[data-episode-dropdown]'); const dropdown = qs<HTMLElement>("[data-episode-dropdown]");
if (!dropdown) return; if (!dropdown) return;
const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[]; const btns = Array.from(dropdown.querySelectorAll(".episode-range-btn")) as HTMLButtonElement[];
const target = btns[idx]; const target = btns[idx];
if (!target) return; if (!target) return;
const start = Number.parseInt(target.dataset.rangeStart ?? '1', 10); const start = Number.parseInt(target.dataset.rangeStart ?? "1", 10);
const end = Number.parseInt(target.dataset.rangeEnd ?? '100', 10); const end = Number.parseInt(target.dataset.rangeEnd ?? "100", 10);
// update label (e.g., "01-100") // update label (e.g., "01-100")
const label = dropdown.querySelector('[data-dropdown-label]') as HTMLElement | null; 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')}`; label.textContent = `${String(start).padStart(2, "0")}-${String(end).padStart(2, "0")}`;
// show/hide episodes in range // show/hide episodes in range
state.episodeGrid?.querySelectorAll('[data-episode-id]').forEach(el => { state.episodeGrid?.querySelectorAll("[data-episode-id]").forEach((el) => {
const n = Number.parseInt((el as HTMLElement).dataset.episodeId ?? '0', 10); const n = Number.parseInt((el as HTMLElement).dataset.episodeId ?? "0", 10);
el.classList.toggle('hidden', n < start || n > end); el.classList.toggle("hidden", n < start || n > end);
}); });
}; };