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

chore: format player mode and state

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:28:56 +02:00
committed by Milas Holsting
parent 4c2c54229b
commit 1c4ade5e6c
2 changed files with 89 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
static/player/mode.ts
View File

@@ -1,16 +1,16 @@
import { state } from './state'; import { state } from "./state";
import { displayTimeFromAbsolute } from './timeline'; import { displayTimeFromAbsolute } from "./timeline";
import { showControls } from './controls'; import { showControls } from "./controls";
import { updateSubtitleOptions } from './subtitles'; import { updateSubtitleOptions } from "./subtitles";
import { updateQualityOptions } from './quality'; import { updateQualityOptions } from "./quality";
import { safeLocalStorage } from './storage'; import { safeLocalStorage } from "./storage";
// builds stream URL with mode, token, and optional quality param // builds stream URL with mode, token, and optional quality param
const streamUrlForMode = (mode: string, quality?: string): string => { const streamUrlForMode = (mode: string, quality?: string): string => {
const src = state.modeSources[mode]; const src = state.modeSources[mode];
if (!src?.token) return ''; if (!src?.token) return "";
let url = `${state.streamURL}?mode=${encodeURIComponent(mode)}&token=${encodeURIComponent(src.token)}`; let url = `${state.streamURL}?mode=${encodeURIComponent(mode)}&token=${encodeURIComponent(src.token)}`;
if (quality && quality !== 'best') url += `&quality=${encodeURIComponent(quality)}`; if (quality && quality !== "best") url += `&quality=${encodeURIComponent(quality)}`;
return url; return url;
}; };
@@ -34,9 +34,9 @@ const loadVideo = (url: string): void => {
export const switchMode = (mode: string): void => { export const switchMode = (mode: string): void => {
if (!state.availableModes.includes(mode) || mode === state.currentMode) return; if (!state.availableModes.includes(mode) || mode === state.currentMode) return;
state.currentMode = mode; state.currentMode = mode;
safeLocalStorage.setItem('player-audio-mode', mode); safeLocalStorage.setItem("player-audio-mode", mode);
const qualitySelect = state.container.querySelector( const qualitySelect = state.container.querySelector(
'[data-quality-select]' "[data-quality-select]",
) as HTMLSelectElement | null; ) as HTMLSelectElement | null;
loadVideo(streamUrlForMode(mode, qualitySelect?.value)); loadVideo(streamUrlForMode(mode, qualitySelect?.value));
updateSubtitleOptions(); updateSubtitleOptions();
@@ -49,24 +49,24 @@ export const switchMode = (mode: string): void => {
* Disables unavailable modes. * Disables unavailable modes.
*/ */
export const updateModeButtons = (): void => { export const updateModeButtons = (): void => {
const dub = state.container.querySelector('[data-mode-dub]') as HTMLButtonElement | null; const dub = state.container.querySelector("[data-mode-dub]") as HTMLButtonElement | null;
const sub = state.container.querySelector('[data-mode-sub]') as HTMLButtonElement | null; const sub = state.container.querySelector("[data-mode-sub]") as HTMLButtonElement | null;
const m = state.currentMode; const m = state.currentMode;
dub?.classList.toggle('text-accent', m === 'dub'); dub?.classList.toggle("text-accent", m === "dub");
dub?.classList.toggle('text-foreground', m !== 'dub'); dub?.classList.toggle("text-foreground", m !== "dub");
dub?.classList.toggle('opacity-50', !state.availableModes.includes('dub')); dub?.classList.toggle("opacity-50", !state.availableModes.includes("dub"));
dub?.classList.toggle('cursor-not-allowed', !state.availableModes.includes('dub')); dub?.classList.toggle("cursor-not-allowed", !state.availableModes.includes("dub"));
if (dub) { if (dub) {
dub.disabled = !state.availableModes.includes('dub'); dub.disabled = !state.availableModes.includes("dub");
} }
sub?.classList.toggle('text-accent', m === 'sub'); sub?.classList.toggle("text-accent", m === "sub");
sub?.classList.toggle('text-foreground', m !== 'sub'); sub?.classList.toggle("text-foreground", m !== "sub");
sub?.classList.toggle('opacity-50', !state.availableModes.includes('sub')); sub?.classList.toggle("opacity-50", !state.availableModes.includes("sub"));
sub?.classList.toggle('cursor-not-allowed', !state.availableModes.includes('sub')); sub?.classList.toggle("cursor-not-allowed", !state.availableModes.includes("sub"));
if (sub) { if (sub) {
sub.disabled = !state.availableModes.includes('sub'); sub.disabled = !state.availableModes.includes("sub");
} }
}; };
@@ -74,27 +74,27 @@ export const updateModeButtons = (): void => {
* Binds click handlers for mode buttons and autoplay toggle. * Binds click handlers for mode buttons and autoplay toggle.
*/ */
export const setupMode = (): void => { export const setupMode = (): void => {
const dub = state.container.querySelector('[data-mode-dub]') as HTMLButtonElement | null; const dub = state.container.querySelector("[data-mode-dub]") as HTMLButtonElement | null;
const sub = state.container.querySelector('[data-mode-sub]') as HTMLButtonElement | null; const sub = state.container.querySelector("[data-mode-sub]") as HTMLButtonElement | null;
dub?.addEventListener('click', () => { dub?.addEventListener("click", () => {
if (state.availableModes.includes('dub')) { if (state.availableModes.includes("dub")) {
switchMode('dub'); switchMode("dub");
showControls(); showControls();
} }
}); });
sub?.addEventListener('click', () => { sub?.addEventListener("click", () => {
if (state.availableModes.includes('sub')) { if (state.availableModes.includes("sub")) {
switchMode('sub'); switchMode("sub");
showControls(); showControls();
} }
}); });
const autoplayBtn = document.querySelector('[data-autoplay]') as HTMLInputElement | null; const autoplayBtn = document.querySelector("[data-autoplay]") as HTMLInputElement | null;
autoplayBtn?.addEventListener('change', e => { autoplayBtn?.addEventListener("change", (e) => {
safeLocalStorage.setItem( safeLocalStorage.setItem(
'mal:autoplay-enabled', "mal:autoplay-enabled",
(e.target as HTMLInputElement).checked ? 'true' : 'false' (e.target as HTMLInputElement).checked ? "true" : "false",
); );
showControls(); showControls();
}); });

110
static/player/state.ts
View File

@@ -1,6 +1,6 @@
import type { ModeSource, SkipSegment, SubtitleCue, SubtitleTrack, ActiveSegment } from './types'; import type { ModeSource, SkipSegment, SubtitleCue, SubtitleTrack, ActiveSegment } from "./types";
import { q, qs, dataset } from '../q'; import { q, qs, dataset } from "../q";
import { safeLocalStorage } from './storage'; import { safeLocalStorage } from "./storage";
export interface PlayerState { export interface PlayerState {
container: HTMLElement; container: HTMLElement;
@@ -44,22 +44,22 @@ export interface PlayerState {
} }
const createInitialState = (): PlayerState => ({ const createInitialState = (): PlayerState => ({
container: document.createElement('div'), container: document.createElement("div"),
video: document.createElement('video'), video: document.createElement("video"),
progress: document.createElement('div'), progress: document.createElement("div"),
scrubber: document.createElement('div'), scrubber: document.createElement("div"),
buffered: document.createElement('div'), buffered: document.createElement("div"),
timeDisplay: document.createElement('div'), timeDisplay: document.createElement("div"),
durationDisplay: document.createElement('div'), durationDisplay: document.createElement("div"),
modeSources: {}, modeSources: {},
availableModes: [], availableModes: [],
currentMode: 'dub', currentMode: "dub",
modeSwitchedFrom: '', modeSwitchedFrom: "",
currentEpisode: '1', currentEpisode: "1",
totalEpisodes: 0, totalEpisodes: 0,
malID: 0, malID: 0,
streamURL: '/watch/proxy/stream', streamURL: "/watch/proxy/stream",
initialStreamToken: '', initialStreamToken: "",
startTimeSeconds: 0, startTimeSeconds: 0,
shouldAutoPlay: false, shouldAutoPlay: false,
parsedSegments: [], parsedSegments: [],
@@ -76,7 +76,7 @@ const createInitialState = (): PlayerState => ({
transitionEpisode: null, transitionEpisode: null,
completionSent: false, completionSent: false,
completionAttempts: 0, completionAttempts: 0,
lastSavedProgress: { episode: '1', seconds: -1 }, lastSavedProgress: { episode: "1", seconds: -1 },
episodeGrid: null, episodeGrid: null,
episodeList: null, episodeList: null,
previewPopover: null, previewPopover: null,
@@ -98,7 +98,7 @@ interface RequiredPlayerElements {
const findElement = <T extends Element>( const findElement = <T extends Element>(
container: HTMLElement, container: HTMLElement,
selector: string, selector: string,
elementType: new () => T elementType: new () => T,
): T | null => { ): T | null => {
const element = container.querySelector(selector); const element = container.querySelector(selector);
if (element instanceof elementType) return element; if (element instanceof elementType) return element;
@@ -106,12 +106,12 @@ const findElement = <T extends Element>(
}; };
const requiredPlayerElements = (container: HTMLElement): RequiredPlayerElements | null => { const requiredPlayerElements = (container: HTMLElement): RequiredPlayerElements | null => {
const video = findElement(container, 'video', HTMLVideoElement); const video = findElement(container, "video", HTMLVideoElement);
const progress = findElement(container, '[data-progress]', HTMLElement); const progress = findElement(container, "[data-progress]", HTMLElement);
const scrubber = findElement(container, '[data-scrubber]', HTMLElement); const scrubber = findElement(container, "[data-scrubber]", HTMLElement);
const buffered = findElement(container, '[data-buffered]', HTMLElement); const buffered = findElement(container, "[data-buffered]", HTMLElement);
const timeDisplay = findElement(container, '[data-time]', HTMLElement); const timeDisplay = findElement(container, "[data-time]", HTMLElement);
const durationDisplay = findElement(container, '[data-duration]', HTMLElement); const durationDisplay = findElement(container, "[data-duration]", HTMLElement);
if (!video || !progress || !scrubber || !buffered || !timeDisplay || !durationDisplay) { if (!video || !progress || !scrubber || !buffered || !timeDisplay || !durationDisplay) {
return null; return null;
@@ -136,43 +136,43 @@ export const initState = (c: HTMLElement): boolean => {
state.buffered = elements.buffered; state.buffered = elements.buffered;
state.timeDisplay = elements.timeDisplay; state.timeDisplay = elements.timeDisplay;
state.durationDisplay = elements.durationDisplay; state.durationDisplay = elements.durationDisplay;
state.previewPopover = q<HTMLElement>(c, '[data-preview-popover]'); state.previewPopover = q<HTMLElement>(c, "[data-preview-popover]");
state.previewTime = q<HTMLElement>(c, '[data-preview-time]'); state.previewTime = q<HTMLElement>(c, "[data-preview-time]");
state.videoOverlay = q<HTMLElement>(c, '[data-video-overlay]'); state.videoOverlay = q<HTMLElement>(c, "[data-video-overlay]");
// data attributes from server // data attributes from server
state.malID = Number.parseInt(dataset(c, 'malId'), 10); state.malID = Number.parseInt(dataset(c, "malId"), 10);
state.currentEpisode = dataset(c, 'currentEpisode') || '1'; state.currentEpisode = dataset(c, "currentEpisode") || "1";
state.totalEpisodes = Number.parseInt(dataset(c, 'totalEpisodes'), 10); state.totalEpisodes = Number.parseInt(dataset(c, "totalEpisodes"), 10);
state.streamURL = dataset(c, 'streamUrl') || '/watch/proxy/stream'; state.streamURL = dataset(c, "streamUrl") || "/watch/proxy/stream";
state.initialStreamToken = dataset(c, 'streamToken') || ''; state.initialStreamToken = dataset(c, "streamToken") || "";
state.startTimeSeconds = Number.parseFloat(dataset(c, 'startTimeSeconds') || '0') || 0; state.startTimeSeconds = Number.parseFloat(dataset(c, "startTimeSeconds") || "0") || 0;
// from session: previous page set this when autoplay triggered // from session: previous page set this when autoplay triggered
state.shouldAutoPlay = sessionStorage.getItem('mal:autoplay-next') === 'true'; state.shouldAutoPlay = sessionStorage.getItem("mal:autoplay-next") === "true";
sessionStorage.removeItem('mal:autoplay-next'); sessionStorage.removeItem("mal:autoplay-next");
// global elements (not inside player container) // global elements (not inside player container)
state.episodeGrid = qs<HTMLElement>('[data-episode-grid]'); state.episodeGrid = qs<HTMLElement>("[data-episode-grid]");
state.episodeList = qs<HTMLElement>('[data-episode-list]'); state.episodeList = qs<HTMLElement>("[data-episode-list]");
const safeJsonUnknown = (raw: string | undefined): unknown => { const safeJsonUnknown = (raw: string | undefined): unknown => {
try { try {
return JSON.parse(raw ?? ''); return JSON.parse(raw ?? "");
} catch { } catch {
return null; return null;
} }
}; };
const isRecord = (v: unknown): v is Record<string, unknown> => const isRecord = (v: unknown): v is Record<string, unknown> =>
typeof v === 'object' && v !== null && !Array.isArray(v); typeof v === "object" && v !== null && !Array.isArray(v);
const isStringArray = (v: unknown): v is string[] => const isStringArray = (v: unknown): v is string[] =>
Array.isArray(v) && v.every(item => typeof item === 'string'); Array.isArray(v) && v.every((item) => typeof item === "string");
const isSubtitleItemArray = (v: unknown): v is { lang: string; token: string }[] => const isSubtitleItemArray = (v: unknown): v is { lang: string; token: string }[] =>
Array.isArray(v) && Array.isArray(v) &&
v.every( v.every(
item => isRecord(item) && typeof item.lang === 'string' && typeof item.token === 'string' (item) => isRecord(item) && typeof item.lang === "string" && typeof item.token === "string",
); );
const parseModeSources = (v: unknown): Record<string, ModeSource> => { const parseModeSources = (v: unknown): Record<string, ModeSource> => {
@@ -180,7 +180,7 @@ export const initState = (c: HTMLElement): boolean => {
const out: Record<string, ModeSource> = {}; const out: Record<string, ModeSource> = {};
for (const [key, value] of Object.entries(v)) { for (const [key, value] of Object.entries(v)) {
if (!isRecord(value)) continue; if (!isRecord(value)) continue;
if (typeof value.token !== 'string' || value.token === '') continue; if (typeof value.token !== "string" || value.token === "") continue;
if (!isSubtitleItemArray(value.subtitles)) continue; if (!isSubtitleItemArray(value.subtitles)) continue;
const qualities = value.qualities; const qualities = value.qualities;
out[key] = { out[key] = {
@@ -199,10 +199,10 @@ export const initState = (c: HTMLElement): boolean => {
const out: SkipSegment[] = []; const out: SkipSegment[] = [];
for (const item of v) { for (const item of v) {
if (!isRecord(item)) continue; if (!isRecord(item)) continue;
const type = typeof item.type === 'string' ? item.type : ''; const type = typeof item.type === "string" ? item.type : "";
const start = typeof item.start === 'number' ? item.start : Number(item.start); const start = typeof item.start === "number" ? item.start : Number(item.start);
const end = typeof item.end === 'number' ? item.end : Number(item.end); const end = typeof item.end === "number" ? item.end : Number(item.end);
const source = typeof item.source === 'string' ? item.source : undefined; const source = typeof item.source === "string" ? item.source : undefined;
if (!type || !Number.isFinite(start) || !Number.isFinite(end)) continue; if (!type || !Number.isFinite(start) || !Number.isFinite(end)) continue;
out.push({ type, start, end, source }); out.push({ type, start, end, source });
} }
@@ -210,25 +210,25 @@ export const initState = (c: HTMLElement): boolean => {
}; };
// mode sources = { sub: { token, subtitles, qualities }, dub: { ... } } // mode sources = { sub: { token, subtitles, qualities }, dub: { ... } }
state.modeSources = parseModeSources(safeJsonUnknown(dataset(c, 'modeSources'))); state.modeSources = parseModeSources(safeJsonUnknown(dataset(c, "modeSources")));
state.availableModes = parseAvailableModes(safeJsonUnknown(dataset(c, 'availableModes'))); state.availableModes = parseAvailableModes(safeJsonUnknown(dataset(c, "availableModes")));
// resolve initial mode: localStorage > backend default > first available > 'dub' // resolve initial mode: localStorage > backend default > first available > 'dub'
const backendInitialMode = dataset(c, 'initialMode') || 'dub'; const backendInitialMode = dataset(c, "initialMode") || "dub";
state.modeSwitchedFrom = dataset(c, 'modeSwitchedFrom') || ''; state.modeSwitchedFrom = dataset(c, "modeSwitchedFrom") || "";
const storedMode = safeLocalStorage.getItem('player-audio-mode'); const storedMode = safeLocalStorage.getItem("player-audio-mode");
const initialMode = const initialMode =
storedMode && state.availableModes.includes(storedMode) ? storedMode : backendInitialMode; storedMode && state.availableModes.includes(storedMode) ? storedMode : backendInitialMode;
const fallbackMode = Object.keys(state.modeSources).find(m => state.modeSources[m]?.token); const fallbackMode = Object.keys(state.modeSources).find((m) => state.modeSources[m]?.token);
state.currentMode = state.modeSources[initialMode]?.token state.currentMode = state.modeSources[initialMode]?.token
? initialMode ? initialMode
: (fallbackMode ?? state.availableModes[0] ?? 'dub'); : (fallbackMode ?? state.availableModes[0] ?? "dub");
// parse skip segments from data attribute // parse skip segments from data attribute
const segments = parseSegments(safeJsonUnknown(dataset(c, 'segments'))); const segments = parseSegments(safeJsonUnknown(dataset(c, "segments")));
state.parsedSegments = segments state.parsedSegments = segments
.map(s => ({ ...s, start: Number(s.start) || 0, end: Number(s.end) || 0 })) .map((s) => ({ ...s, start: Number(s.start) || 0, end: Number(s.end) || 0 }))
.filter(s => s.end > s.start); .filter((s) => s.end > s.start);
return true; return true;
}; };