fix: quality selection in fullscreen, pip only while playing, outdated player episodelist, save port availability

package.json

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

src/app.d.ts

@@ -1,7 +1,4 @@
 // See https://kit.svelte.dev/docs/types#app
-
-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'

src/lib/components/SearchModal.svelte

@@ -174,7 +174,7 @@
           </div>
           <div class='flex items-center space-x-2 grow'>
             <span>Resolution</span>
-            <SingleCombo bind:value={$settings.searchQuality} items={videoResolutions} class='w-32 shrink-0 grow border-border border' />
+            <SingleCombo bind:value={$settings.searchQuality} items={videoResolutions} portal='#episodeListTarget' class='w-32 shrink-0 grow border-border border' />
           </div>
         </div>
         <ProgressButton

src/lib/components/ui/combobox/combobox.svelte

@@ -28,6 +28,8 @@
 
   export let placeholder = 'Any'
 
+  export let portal = '#root'
+
   let open = false
   export let value: value[] = []
 
@@ -65,7 +67,7 @@
   export { className as class }
 </script>
 
-<Popover.Root bind:open let:ids portal='#root'>
+<Popover.Root bind:open let:ids {portal}>
   <Popover.Trigger asChild let:builder>
     <Button
       builders={[builder]}

src/lib/components/ui/player/pip.ts

@@ -20,7 +20,7 @@ export default class PictureInPicture {
     this._attachListeners(document.documentElement, false)
 
     window.addEventListener('visibilitychange', () => {
-      if (get(settings).playerAutoPiP) this.pip(document.visibilityState !== 'visible')
+      if (get(settings).playerAutoPiP) this.pip(document.visibilityState !== 'visible' && !this.video?.paused)
     }, { signal: this.ctrl.signal })
   }
 

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

@@ -50,6 +50,7 @@
   import Subtitles from '$lib/components/icons/Subtitles.svelte'
   import { Button } from '$lib/components/ui/button'
   import * as Sheet from '$lib/components/ui/sheet'
+  import { client } from '$lib/modules/anilist'
   import { episodes } from '$lib/modules/anizip'
   import { authAggregator } from '$lib/modules/auth'
   import { isPlaying } from '$lib/modules/idle'
@@ -781,8 +782,10 @@
           <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'>{mediaInfo.session.description}</Sheet.Trigger>
           <Sheet.Content class='w-[550px] 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 episodes(mediaInfo.media.id) then eps}
-                <EpisodesList {eps} media={mediaInfo.media} />
+              {#await Promise.all([episodes(mediaInfo.media.id), client.single(mediaInfo.media.id)]) then [eps, media]}
+                {#if media.data?.Media}
+                  <EpisodesList {eps} media={media.data.Media} />
+                {/if}
               {/await}
             {/if}
           </Sheet.Content>

src/routes/setup/extensions/+page.svelte

@@ -1,4 +1,5 @@
 <script lang='ts'>
+  import { persisted } from 'svelte-persisted-store'
   import { toast } from 'svelte-sonner'
 
   import Footer, { type Checks } from '../Footer.svelte'
@@ -45,6 +46,9 @@
   }
 
   if (!SUPPORTS.isAndroid && !Object.keys($saved).length) importDefault()
+
+  const hasForwarding = persisted('torrent-port-forwarding', false)
+  $settings.lookupPreference = $hasForwarding ? 'quality' : 'seeders'
 </script>
 
 <Progress step={2} />

src/routes/setup/network/+page.svelte

@@ -29,6 +29,8 @@
 </script>
 
 <script lang='ts'>
+  import { persisted } from 'svelte-persisted-store'
+
   import Footer from '../Footer.svelte'
   import Progress from '../Progress.svelte'
 
@@ -39,10 +41,13 @@
   import { dragScroll } from '$lib/modules/navigate'
   import { settings } from '$lib/modules/settings'
 
+  const hasForwarding = persisted('torrent-port-forwarding', false)
+
   if (!speedTest.isRunning) speedTest.play()
 
   async function checkPortAvailability (port: number): Checks['promise'] {
     const res = await native.checkIncomingConnections(port)
+    $hasForwarding = res
     if (res) return { status: 'success', text: 'Port forwarding is available.' }
     return { status: 'error', text: 'Not available. Peer discovery will suffer. Streaming old, poorly seeded anime might be impossible.' }
   }