fix: some issues with TV navigation in player

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",

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>

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]}