From c5ff2a0104eacf738ef5c58591986fc82b9f8c9c Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 24 May 2025 21:18:34 +0200
Subject: [PATCH] fix: dont scroll to end of episode list when completed,
 unimmerse on pointermove

---
 package.json                               |  2 +-
 src/app.d.ts                               | 11 +++++++----
 src/lib/components/EpisodesList.svelte     |  2 +-
 src/lib/components/ui/player/player.svelte | 15 +++++++++++++--
 src/lib/modules/navigate.ts                |  2 ++
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7e103dd..6a31d85 100644
--- a/package.json
+++ b/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",
diff --git a/src/app.d.ts b/src/app.d.ts
index b5b40af..d4c66d8 100644
--- a/src/app.d.ts
+++ b/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 {}
diff --git a/src/lib/components/EpisodesList.svelte b/src/lib/components/EpisodesList.svelte
index 7e2d95a..71b2340 100644
--- a/src/lib/components/EpisodesList.svelte
+++ b/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 })
diff --git a/src/lib/components/ui/player/player.svelte b/src/lib/components/ui/player/player.svelte
index 09e97b9..9e4bd9c 100644
--- a/src/lib/components/ui/player/player.svelte
+++ b/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}>
diff --git a/src/lib/modules/navigate.ts b/src/lib/modules/navigate.ts
index f94113e..07a2df7 100644
--- a/src/lib/modules/navigate.ts
+++ b/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
 }