feat: extract episode navigation and completion handling
This commit is contained in:
67
static/player/episodes/complete.ts
Normal file
67
static/player/episodes/complete.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import DOMPurify from 'dompurify'
|
||||||
|
import { state } from '../state'
|
||||||
|
|
||||||
|
export const completeAnime = async (episodeNumber: number): Promise<void> => {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
95
static/player/episodes/nav.ts
Normal file
95
static/player/episodes/nav.ts
Normal file
@@ -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<void> => {
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
35
static/player/episodes/thumbnails.ts
Normal file
35
static/player/episodes/thumbnails.ts
Normal file
@@ -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))
|
||||||
|
}
|
||||||
57
static/player/episodes/ui.ts
Normal file
57
static/player/episodes/ui.ts
Normal file
@@ -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)
|
||||||
|
})
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user