From 83e8e6910b584b1d95868dd1391c5ed8b7a0b3f4 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 3 May 2026 15:31:08 +0200
Subject: [PATCH] fix: address copilot review - grid init, autoplay, segments,
 progress save

---
 static/player.ts | 41 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/static/player.ts b/static/player.ts
index a04b18f..239c23b 100644
--- a/static/player.ts
+++ b/static/player.ts
@@ -658,7 +658,7 @@ const initPlayer = (): void => {
     if (!availableModes.includes(mode) || mode === currentMode) return
     const nextURL = streamUrlForMode(mode)
     if (!nextURL) return
-    const wasPlaying = !video.paused
+    const wasPlaying = video.ended || !video.paused
     const previousTime = displayTimeFromAbsolute(video.currentTime)
     currentMode = mode
     hidePreviewPopover()
@@ -877,7 +877,7 @@ const initPlayer = (): void => {
       }
 
       const streamUrl = streamUrlForMode(currentMode)
-      const wasPlaying = !video.paused
+      const wasPlaying = video.ended || !video.paused
       video.src = streamUrl
       video.load()
       if (wasPlaying) video.play().catch(() => {})
@@ -893,6 +893,18 @@ const initPlayer = (): void => {
       updateModeButtons(currentMode)
       updateVideoOverlay(currentEpisode, data.episode_title || '')
 
+      // Update skip segments for new episode
+      if (data.segments && Array.isArray(data.segments)) {
+        parsedSegments = data.segments.map((segment: SkipSegment) => {
+          const start = Number(segment.start || 0)
+          const end = Number(segment.end || 0)
+          if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
+            return { ...segment, start: 0, end: 0 }
+          }
+          return { ...segment, start, end }
+        }).filter((s: SkipSegment) => s.start > 0 || s.end > 0)
+      }
+
       const episodeList = document.querySelector('[data-episode-list]')
       if (episodeList) {
         episodeList.querySelectorAll('[data-episode-id]').forEach((el) => {
@@ -904,9 +916,26 @@ const initPlayer = (): void => {
         }
       }
 
+      // Update episode grid highlight for >100 episodes
+      const episodeGrid = document.querySelector('[data-episode-grid]')
+      if (episodeGrid) {
+        episodeGrid.querySelectorAll('[data-episode-id]').forEach((el) => {
+          el.classList.remove('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent')
+        })
+        const rangeIndex = Math.floor((nextEpisode - 1) / 100)
+        switchEpisodeRange(rangeIndex)
+        const gridEpEl = episodeGrid.querySelector(`[data-episode-id="${nextEpisode}"]`) as HTMLElement | null
+        if (gridEpEl) {
+          gridEpEl.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent')
+        }
+      }
+
       const newUrl = new URL(window.location.href)
       newUrl.searchParams.set('ep', String(nextEpisode))
       history.pushState(null, '', newUrl.toString())
+
+      // Reset transitionEpisode so beforeunload handler saves progress
+      transitionEpisode = null
     } catch {
       sessionStorage.setItem('mal:autoplay-next', 'true')
       const newUrl = new URL(window.location.href)
@@ -1280,9 +1309,13 @@ const initPlayer = (): void => {
     })
   }
 
-  // Initialize grid to show first range
+  // Initialize grid to show the range containing the current episode
   if (episodeGrid && totalEpisodes > 100) {
-    switchEpisodeRange(0)
+    const currentEpNum = parseInt(currentEpisode, 10)
+    const initialRangeIndex = !Number.isNaN(currentEpNum) && currentEpNum > 0
+      ? Math.floor((currentEpNum - 1) / 100)
+      : 0
+    switchEpisodeRange(initialRangeIndex)
   }
 
   playerInitialized = true