From ed32db3a107a859c1747b4dcf181b76de329c598 Mon Sep 17 00:00:00 2001 From: mkelvers Date: Sun, 10 May 2026 18:34:42 +0200 Subject: [PATCH] feat: extract episode navigation and completion handling --- static/player/episodes/complete.ts | 67 ++++++++++++++++++++ static/player/episodes/nav.ts | 95 ++++++++++++++++++++++++++++ static/player/episodes/thumbnails.ts | 35 ++++++++++ static/player/episodes/ui.ts | 57 +++++++++++++++++ 4 files changed, 254 insertions(+) create mode 100644 static/player/episodes/complete.ts create mode 100644 static/player/episodes/nav.ts create mode 100644 static/player/episodes/thumbnails.ts create mode 100644 static/player/episodes/ui.ts diff --git a/static/player/episodes/complete.ts b/static/player/episodes/complete.ts new file mode 100644 index 0000000..c4057a0 --- /dev/null +++ b/static/player/episodes/complete.ts @@ -0,0 +1,67 @@ +import DOMPurify from 'dompurify' +import { state } from '../state' + +export const completeAnime = async (episodeNumber: number): Promise => { + if (state.completionSent || !state.malID || !episodeNumber) return + state.completionSent = true + + try { + const res = await fetch('/api/watch-complete', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + keepalive: true, + body: JSON.stringify({ mal_id: state.malID, episode: episodeNumber }), + }) + + if (!res.ok) { + state.completionSent = false + if (state.completionAttempts < 2) { + state.completionAttempts++ + setTimeout(() => completeAnime(episodeNumber), 1000) + } + return + } + + const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null + if (trigger) { + trigger.textContent = 'Completed ' + const caret = document.createElement('span') + caret.className = 'text-xs' + caret.textContent = '▾' + trigger.appendChild(caret) + } + + const dropdown = document.getElementById('watch-status-dropdown') + if (dropdown) { + const payload = { + anime_id: String(state.malID), + anime_title: state.container.dataset.animeTitle ?? '', + anime_title_english: state.container.dataset.animeTitleEnglish ?? '', + anime_title_japanese: state.container.dataset.animeTitleJapanese ?? '', + anime_image: state.container.dataset.animeImage ?? '', + status: 'completed', + airing: state.container.dataset.animeAiring === 'true', + } + + fetch('/api/watchlist', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'HX-Request': 'true' }, + body: `anime_id=${encodeURIComponent(payload.anime_id)}&anime_title=${encodeURIComponent(payload.anime_title)}&anime_title_english=${encodeURIComponent(payload.anime_title_english)}&anime_title_japanese=${encodeURIComponent(payload.anime_title_japanese)}&anime_image=${encodeURIComponent(payload.anime_image)}&status=${encodeURIComponent(payload.status)}&airing=${encodeURIComponent(String(payload.airing))}`, + credentials: 'same-origin', + }).then(async res => { + if (!res.ok) return + const html = await res.text() + const wrapper = document.createElement('span') + wrapper.id = 'watch-status-dropdown' + wrapper.innerHTML = DOMPurify.sanitize(html) + dropdown.replaceWith(wrapper) + }).catch(() => {}) + } + } catch { + state.completionSent = false + if (state.completionAttempts < 2) { + state.completionAttempts++ + setTimeout(() => completeAnime(episodeNumber), 1000) + } + } +} diff --git a/static/player/episodes/nav.ts b/static/player/episodes/nav.ts new file mode 100644 index 0000000..ce1d225 --- /dev/null +++ b/static/player/episodes/nav.ts @@ -0,0 +1,95 @@ +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 { markEpisodeTransition } from '../progress' + +export const goToNextEpisode = async (): Promise => { + const currentEp = Number.parseInt(state.currentEpisode, 10) + if (!currentEp) return + + if (state.totalEpisodes > 0 && currentEp >= state.totalEpisodes) { + import('./complete').then(m => m.completeAnime(currentEp)) + return + } + + if (!isAutoplayEnabled()) return + + const nextEp = currentEp + 1 + markEpisodeTransition(nextEp) + + try { + const res = await fetch(`/api/watch/episode/${state.malID}/${nextEp}`) + if (!res.ok) { + sessionStorage.setItem('mal:autoplay-next', 'true') + const url = new URL(window.location.href) + url.searchParams.set('ep', String(nextEp)) + window.location.href = url.toString() + return + } + + const data = await res.json() + + state.modeSources = data.mode_sources ?? {} + state.availableModes = data.available_modes ?? [] + + const fallback = state.availableModes.find(m => state.modeSources[m]?.token) + if (!fallback) { + sessionStorage.setItem('mal:autoplay-next', 'true') + const url = new URL(window.location.href) + url.searchParams.set('ep', String(nextEp)) + window.location.href = url.toString() + return + } + + 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(() => {}) + + state.currentEpisode = String(nextEp) + state.pendingSeekTime = null + state.completionSent = false + state.completionAttempts = 0 + state.activeSubtitles = [] + + updateSubtitleOptions() + updateQualityOptions() + updateModeButtons() + updateOverlay(state.currentEpisode, data.episode_title ?? '') + + if (data.segments?.length) { + state.parsedSegments = data.segments + .map((s: SkipSegment) => ({ ...s, start: Number(s.start) || 0, end: Number(s.end) || 0 })) + .filter((s: SkipSegment) => s.end > s.start) + resolveActiveSegments() + renderSegments() + } + + state.episodeList?.querySelectorAll('[data-episode-id]').forEach(el => el.classList.remove('bg-accent/20')) + const newListEl = state.episodeList?.querySelector(`[data-episode-id="${nextEp}"]`) + newListEl?.classList.add('bg-accent/20') + + if (state.episodeGrid) { + state.episodeGrid.querySelectorAll('[data-episode-id]').forEach(el => { + el.classList.remove('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent') + }) + switchEpisodeRange(Math.floor((nextEp - 1) / 100)) + const newGridEl = state.episodeGrid.querySelector(`[data-episode-id="${nextEp}"]`) + newGridEl?.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent') + } + + const url = new URL(window.location.href) + url.searchParams.set('ep', String(nextEp)) + history.pushState(null, '', url.toString()) + state.transitionEpisode = null + } catch { + sessionStorage.setItem('mal:autoplay-next', 'true') + const url = new URL(window.location.href) + url.searchParams.set('ep', String(nextEp)) + window.location.href = url.toString() + } +} diff --git a/static/player/episodes/thumbnails.ts b/static/player/episodes/thumbnails.ts new file mode 100644 index 0000000..f6fd96c --- /dev/null +++ b/static/player/episodes/thumbnails.ts @@ -0,0 +1,35 @@ +import { state } from '../state' + +export const setupThumbnails = (): void => { + fetch(`/api/watch/thumbnails/${state.malID}`) + .then(res => res.json()) + .then((data: Array<{ mal_id: number; url: string; title?: string }>) => { + if (!state.episodeList) return + data.forEach(item => { + const card = state.episodeList.querySelector(`[data-episode-id="${item.mal_id}"]`) + if (!card) return + + if (item.url) { + const imgContainer = card.querySelector('.relative.aspect-video') + if (imgContainer) { + let img = imgContainer.querySelector('img') + if (!img) { + img = document.createElement('img') + img.className = 'h-full w-full object-cover transition-transform group-hover:scale-105' + img.loading = 'lazy' + imgContainer.querySelector('.flex.h-full.w-full.items-center.justify-center')?.remove() + imgContainer.prepend(img) + } + img.src = item.url + img.alt = item.title ?? `Episode ${item.mal_id}` + } + } + + if (item.title) { + const titleEl = card.querySelector('[data-episode-title]') + if (titleEl) titleEl.textContent = item.title + } + }) + }) + .catch(err => console.error('Failed to fetch thumbnails:', err)) +} diff --git a/static/player/episodes/ui.ts b/static/player/episodes/ui.ts new file mode 100644 index 0000000..1e7c211 --- /dev/null +++ b/static/player/episodes/ui.ts @@ -0,0 +1,57 @@ +import { state } from '../state' +import { updateSubtitleOptions } from '../subtitles' +import { updateQualityOptions } from '../quality' +import { updateModeButtons } from '../mode' + +export const setupAutoplayButton = (): void => { + const btn = document.querySelector('[data-autoplay]') as HTMLInputElement | null + if (!btn) return + btn.checked = localStorage.getItem('mal:autoplay-enabled') !== 'false' +} + +export const isAutoplayEnabled = (): boolean => localStorage.getItem('mal:autoplay-enabled') !== 'false' + +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}`) +} + +const getEpisodeEls = () => { + const grid = state.episodeGrid + const list = state.episodeList + return { + gridEls: grid ? Array.from(grid.querySelectorAll('[data-episode-id]')) : [], + listEls: list ? Array.from(list.querySelectorAll('[data-episode-id]')) : [], + } +} + +export const updateEpisodeHighlight = (num: number): void => { + const { gridEls, listEls } = getEpisodeEls() + ;[...gridEls, ...listEls].forEach(el => el.classList.remove('ring-2', 'ring-accent', 'bg-accent/20', 'text-accent')) + + 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') + ;(gridEl ?? listEl)?.scrollIntoView({ behavior: 'smooth', block: 'center' }) +} + +export const switchEpisodeRange = (idx: number): void => { + const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null + if (!dropdown) return + const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[] + const target = btns[idx] + if (!target) return + + const start = Number.parseInt(target.dataset.rangeStart ?? '1', 10) + const end = Number.parseInt(target.dataset.rangeEnd ?? '100', 10) + + const label = dropdown.querySelector('[data-dropdown-label]') as HTMLElement | null + if (label) label.textContent = `${String(start).padStart(2, '0')}-${String(end).padStart(2, '0')}` + + 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) + }) +}