feat: extract episode navigation and completion handling

static/player/episodes/complete.ts

@@ -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)
+    }
+  }
+}

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<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()
+  }
+}

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))
+}

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)
+  })
+}