fix: dont scroll to end of episode list when completed, unimmerse on pointermove

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.3.24",
+	"version": "6.3.25",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/app.d.ts

@@ -5,6 +5,7 @@ import { SvelteComponentTyped } from 'svelte'
 import type { SessionMetadata } from '$lib/components/ui/player/util'
 import type { Search } from '$lib/modules/anilist/queries'
 import type { VariablesOf } from 'gql.tada'
+import type { CompositionEventHandler } from 'svelte/elements'
 
 // for information about these interfaces
 export interface AuthResponse {
@@ -137,13 +138,15 @@ declare global {
     }
   }
 
+   declare namespace svelteHTML {
+     interface HTMLAttributes<T> {
+       'on:navigate'?: CompositionEventHandler<T>
+     }
+  }
+
   // declare module '*.svelte' {
   //   export default SvelteComponentTyped
   // }
 }
 
-declare module '*.svelte' {
-  export default SvelteComponentTyped
-}
-
 export {}

src/lib/components/EpisodesList.svelte

@@ -65,7 +65,7 @@
   $: _progress = progress(media) ?? 0
   $: completed = list(media) === 'COMPLETED'
 
-  let currentPage = Math.floor((progress(media) ?? 0) / perPage) + 1
+  $: currentPage = Math.floor((!completed ? _progress : 0) / perPage) + 1
 
   function play (episode: number) {
     searchStore.set({ media, episode })

src/lib/components/ui/player/player.svelte

@@ -107,14 +107,24 @@
   let seeking = false
   let ended = false
   let paused = true
+  let pointerMoving = false
   const cast = false
 
   $: $isPlaying = !paused
 
   $: buffering = readyState < 3
-  $: immersed = !buffering && !seeking && !paused && !ended && !pictureInPictureElement
+  $: immersed = !buffering && !paused && !ended && !pictureInPictureElement && !pointerMoving
   $: isMiniplayer = $page.route.id !== '/app/player'
 
+  let pointerMoveTimeout = 0
+  function resetMove () {
+    clearTimeout(pointerMoveTimeout)
+    pointerMoving = true
+    pointerMoveTimeout = setTimeout(() => {
+      pointerMoving = false
+    }, 300)
+  }
+
   // functions
   function playPause () {
     playAnimation(paused ? 'play' : 'pause')
@@ -663,7 +673,7 @@
 
 <svelte:document bind:fullscreenElement bind:visibilityState use:holdToFF={'key'} />
 
-<div class='w-full h-full relative content-center bg-black overflow-clip text-left' class:fitWidth class:seeking bind:this={wrapper}>
+<div class='w-full h-full relative content-center bg-black overflow-clip text-left' class:fitWidth class:seeking bind:this={wrapper} on:navigate={resetMove}>
   <video class='w-full h-full' preload='auto' class:cursor-none={immersed} class:cursor-pointer={isMiniplayer} class:object-cover={fitWidth} class:opacity-0={$settings.playerDeband || seeking} class:absolute={$settings.playerDeband} class:top-0={$settings.playerDeband}
     use:createSubtitles
     use:createDeband={$settings.playerDeband}
@@ -688,6 +698,7 @@
     on:timeupdate={checkSkippableChapters}
     on:timeupdate={checkCompletion}
     on:loadedmetadata={autoPlay}
+    on:pointermove={resetMove}
   />
   <div class='absolute w-full h-full flex items-center justify-center top-0 pointer-events-none' class:hidden={isMiniplayer}>
     <div class='absolute top-0 flex w-full pointer-events-none justify-center gap-4 pt-3 items-center font-bold text-lg transition-opacity' class:opacity-0={immersed}>

src/lib/modules/navigate.ts

@@ -266,6 +266,8 @@ function focusElement (element?: HTMLElement | null) {
   if (isInput) setTimeout(() => { (element as HTMLInputElement).readOnly = false })
   element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' })
 
+  element.dispatchEvent(new CustomEvent('navigate', { bubbles: true, composed: true, detail: { target: element.id, value: element.dataset.value } }))
+
   return true
 }