From 204e9ad1ea3692384b9b8a2ec8aac4c77de27d4c Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Mon, 14 Jul 2025 17:58:48 +0200
Subject: [PATCH] fix: some issues with TV navigation in player

---
 package.json                                |  2 +-
 src/lib/components/ui/player/options.svelte | 12 +++++++++++-
 src/lib/components/ui/player/player.svelte  |  8 ++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index b869cee..ddac647 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.37",
+	"version": "6.4.38",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",
diff --git a/src/lib/components/ui/player/options.svelte b/src/lib/components/ui/player/options.svelte
index f1ae665..1ae595a 100644
--- a/src/lib/components/ui/player/options.svelte
+++ b/src/lib/components/ui/player/options.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
   import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical'
-  import { tick } from 'svelte'
+  import { getContext, tick } from 'svelte'
 
   import { Input } from '../input'
 
@@ -13,6 +13,7 @@
   import type { Writable } from 'simple-store-svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
+  import { beforeNavigate } from '$app/navigation'
   import { Button } from '$lib/components/ui/button'
   import * as Dialog from '$lib/components/ui/dialog'
   import * as Tooltip from '$lib/components/ui/tooltip'
@@ -72,6 +73,15 @@
   export let id = ''
 
   let keybindDesc: unknown = null
+
+  const stopProgressBar = getContext<() => void>('stop-progress-bar')
+  beforeNavigate(({ cancel }) => {
+    if (open) {
+      open = false
+      cancel()
+      stopProgressBar()
+    }
+  })
 </script>
 
 <Dialog.Root portal={wrapper} bind:open>
diff --git a/src/lib/components/ui/player/player.svelte b/src/lib/components/ui/player/player.svelte
index 8bf007f..4ae83c1 100644
--- a/src/lib/components/ui/player/player.svelte
+++ b/src/lib/components/ui/player/player.svelte
@@ -467,7 +467,11 @@
   }
 
   function seekBarKey (event: KeyboardEvent) {
-    if (['ArrowLeft', 'ArrowRight'].includes(event.key)) event.stopPropagation()
+    if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      event.stopPropagation()
+    }
 
     switch (event.key) {
       case 'ArrowLeft':
@@ -864,7 +868,7 @@
         <div class='flex flex-col gap-2 text-left cursor-pointer'>
           <a class='text-white text-lg font-normal leading-none line-clamp-1 hover:text-neutral-300 hover:underline' href='/app/anime/{mediaInfo.media.id}' data-up='#player-options-button-top'>{mediaInfo.session.title}</a>
           <Sheet.Root portal={wrapper} bind:open={episodeListOpen}>
-            <Sheet.Trigger id='episode-list-button' class='text-[rgba(217,217,217,0.6)] hover:text-neutral-500 text-sm leading-none font-light line-clamp-1 text-left hover:underline'>{mediaInfo.session.description}</Sheet.Trigger>
+            <Sheet.Trigger id='episode-list-button' data-down='#player-seekbar' class='text-[rgba(217,217,217,0.6)] hover:text-neutral-500 text-sm leading-none font-light line-clamp-1 text-left hover:underline'>{mediaInfo.session.description}</Sheet.Trigger>
             <Sheet.Content class='w-full sm:w-[550px] p-3 sm:p-6 max-w-full sm:max-w-full h-full overflow-y-scroll flex flex-col pb-0 shrink-0 gap-0 bg-black justify-between'>
               {#if mediaInfo.media}
                 {#await Promise.all([episodes(mediaInfo.media.id), client.single(mediaInfo.media.id)]) then [eps, media]}