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

feat: add comments and cleanup unused imports across codebase

Browse Source
This commit is contained in:
mkelvers
2026-05-10 20:00:04 +02:00
parent b152e246ff
commit e48d95cb4e
68 changed files with 560 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/player/episodes/complete.ts
View File

@@ -1,6 +1,11 @@
import DOMPurify from 'dompurify';
import { state } from '../state';
/**
* Marks anime as completed when final episode finishes.
* Calls completion API, updates dropdown UI, adds to watchlist.
* Retries up to 2 times on failure.
*/
export const completeAnime = async (episodeNumber: number): Promise<void> => {
if (state.completionSent || !state.malID || !episodeNumber) return;
state.completionSent = true;
@@ -15,6 +20,7 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
if (!res.ok) {
state.completionSent = false;
// retry
if (state.completionAttempts < 2) {
state.completionAttempts++;
setTimeout(() => completeAnime(episodeNumber), 1000);
@@ -22,6 +28,7 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
return;
}
// update dropdown trigger text
const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null;
if (trigger) {
trigger.textContent = 'Completed ';
@@ -31,6 +38,7 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
trigger.appendChild(caret);
}
// add to watchlist with 'completed' status
const dropdown = document.getElementById('watch-status-dropdown');
if (dropdown) {
const payload = {
@@ -51,6 +59,7 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
})
.then(async res => {
if (!res.ok) return;
// replace dropdown with HTMX response
const html = await res.text();
const wrapper = document.createElement('span');
wrapper.id = 'watch-status-dropdown';

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

@@ -1,22 +1,27 @@
import { state } from '../state';
import { SkipSegment } from '../types';
import { displayTimeFromAbsolute } from '../timeline';
import { resolveActiveSegments, renderSegments } from '../skip/segments';
import { updateSubtitleOptions } from '../subtitles';
import { updateQualityOptions } from '../quality';
import { updateModeButtons } from '../mode';
import { updateOverlay, isAutoplayEnabled, updateEpisodeHighlight, switchEpisodeRange } from './ui';
import { updateOverlay, isAutoplayEnabled, switchEpisodeRange } from './ui';
import { markEpisodeTransition } from '../progress';
/**
* Handles video end: either marks complete or loads next episode.
* Fetches episode data from API, updates player state and URL.
*/
export const goToNextEpisode = async (): Promise<void> => {
const currentEp = Number.parseInt(state.currentEpisode, 10);
if (!currentEp) return;
// final episode: trigger completion flow
if (state.totalEpisodes > 0 && currentEp >= state.totalEpisodes) {
import('./complete').then(m => m.completeAnime(currentEp));
return;
}
// skip if autoplay disabled
if (!isAutoplayEnabled()) return;
const nextEp = currentEp + 1;
@@ -25,6 +30,7 @@ export const goToNextEpisode = async (): Promise<void> => {
try {
const res = await fetch(`/api/watch/episode/${state.malID}/${nextEp}`);
if (!res.ok) {
// fallback: full page navigation
sessionStorage.setItem('mal:autoplay-next', 'true');
const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp));
@@ -34,6 +40,7 @@ export const goToNextEpisode = async (): Promise<void> => {
const data = await res.json();
// update state with new episode data
state.modeSources = data.mode_sources ?? {};
state.availableModes = data.available_modes ?? [];
@@ -46,6 +53,7 @@ export const goToNextEpisode = async (): Promise<void> => {
return;
}
// load new video
state.video.src = `${state.streamURL}?mode=${encodeURIComponent(fallback)}&token=${encodeURIComponent(state.modeSources[fallback].token)}`;
state.video.load();
if (!state.video.paused) state.video.play().catch(() => {});
@@ -56,11 +64,13 @@ export const goToNextEpisode = async (): Promise<void> => {
state.completionAttempts = 0;
state.activeSubtitles = [];
// update UI
updateSubtitleOptions();
updateQualityOptions();
updateModeButtons();
updateOverlay(state.currentEpisode, data.episode_title ?? '');
// update skip segments
if (data.segments?.length) {
state.parsedSegments = data.segments
.map((s: SkipSegment) => ({ ...s, start: Number(s.start) || 0, end: Number(s.end) || 0 }))
@@ -69,6 +79,7 @@ export const goToNextEpisode = async (): Promise<void> => {
renderSegments();
}
// highlight new episode in list/grid
state.episodeList
?.querySelectorAll('[data-episode-id]')
.forEach(el => el.classList.remove('bg-accent/20'));
@@ -84,6 +95,7 @@ export const goToNextEpisode = async (): Promise<void> => {
newGridEl?.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent');
}
// update URL without reload
const url = new URL(window.location.href);
url.searchParams.set('ep', String(nextEp));
history.pushState(null, '', url.toString());

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

@@ -1,8 +1,9 @@
import { state } from '../state';
import { updateSubtitleOptions } from '../subtitles';
import { updateQualityOptions } from '../quality';
import { updateModeButtons } from '../mode';
/**
* 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;
@@ -12,12 +13,16 @@ export const setupAutoplayButton = (): void => {
export const isAutoplayEnabled = (): boolean =>
localStorage.getItem('mal:autoplay-enabled') !== 'false';
/**
* Updates video overlay text (shown briefly on episode change).
*/
export const updateOverlay = (episode: string, title: string): void => {
if (!state.videoOverlay) return;
const p = state.videoOverlay.querySelector('p');
p && (p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`);
};
// helper: get all episode elements from grid and list
const getEpisodeEls = () => {
const grid = state.episodeGrid;
const list = state.episodeList;
@@ -27,19 +32,30 @@ const getEpisodeEls = () => {
};
};
/**
* 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')
);
// apply new highlight
const gridEl = state.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
const listEl = state.episodeList?.querySelector(`[data-episode-id="${num}"]`);
gridEl?.classList.add('ring-2', 'ring-accent');
listEl?.classList.add('ring-2', 'ring-accent');
// scroll into view
(gridEl ?? listEl)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
};
/**
* Switches visible episode range in grid.
* Updates dropdown label and hides/shows episode cards.
*/
export const switchEpisodeRange = (idx: number): void => {
const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null;
if (!dropdown) return;
@@ -50,10 +66,12 @@ export const switchEpisodeRange = (idx: number): void => {
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)
label.textContent = `${String(start).padStart(2, '0')}-${String(end).padStart(2, '0')}`;
// show/hide episodes in range
state.episodeGrid?.querySelectorAll('[data-episode-id]').forEach(el => {
const n = Number.parseInt((el as HTMLElement).dataset.episodeId ?? '0', 10);
el.classList.toggle('hidden', n < start || n > end);