feat: DoH on android, delay unimerse on seeking, don't autostart external player

package.json

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

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

@@ -34,7 +34,7 @@
   function openPlayer () {
     if (isMiniplayer) goto('/app/player/')
   }
-  const player = native.spawnPlayer(mediaInfo.file.url)
+  const player = isMiniplayer ? Promise.resolve() : native.spawnPlayer(mediaInfo.file.url)
   const startTime = Date.now()
 
   const elapsed = writable(0, (set) => {

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

@@ -784,7 +784,7 @@
   {#if !isMiniplayer}
     <div class='absolute w-full h-full flex items-center justify-center top-0 pointer-events-none'>
       {#if !$settings.minimalPlayerUI}
-        <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 gradient-to-bottom' class:opacity-0={immersed}>
+        <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 gradient-to-bottom delay-300' class:opacity-0={immersed}>
           <div class='flex justify-center items-center gap-2'>
             <Users size={18} />
             {$torrentstats.peers.seeders}
@@ -807,7 +807,7 @@
         {/await}
       {/if}
       {#if stats}
-        <div class='absolute top-10 left-10 border-white/15 border bg-black/60 pointer-events-auto transition-opacity select:opacity-100 px-3 py-2 rounded'>
+        <div class='absolute top-10 left-10 border-white/15 border bg-black/60 pointer-events-auto px-3 py-2 rounded'>
           <button class='absolute right-3 top-1' type='button' use:click={toggleStats}>×</button>
           FPS: {stats.fps}<br />
           Presented frames: {stats.presented}<br />
@@ -821,7 +821,7 @@
         </div>
       {/if}
       <Options {wrapper} bind:openSubs {video} {seekTo} {selectAudio} {selectVideo} {fullscreen} {chapters} {subtitles} {videoFiles} {selectFile} {pip} bind:playbackRate bind:subtitleDelay id='player-options-button-top'
-        class='{($settings.minimalPlayerUI || SUPPORTS.isAndroid) ? 'inline-flex' : 'mobile:inline-flex hidden'} p-3 w-12 h-12 absolute top-4 left-4 bg-black/20 pointer-events-auto transition-opacity select:opacity-100 {immersed && 'opacity-0'}' />
+        class='{($settings.minimalPlayerUI || SUPPORTS.isAndroid) ? 'inline-flex' : 'mobile:inline-flex hidden'} p-3 w-12 h-12 absolute top-4 left-4 bg-black/20 pointer-events-auto transition-opacity select:opacity-100 delay-300 {immersed && 'opacity-0'}' />
       {#if fastForwarding}
         <div class='absolute top-10 font-bold text-sm animate-[fade-in_.4s_ease] flex items-center leading-none bg-black/60 px-4 py-2 rounded-2xl'>x2 <FastForward class='ml-2' size='12' fill='currentColor' /></div>
       {/if}
@@ -863,7 +863,7 @@
         {/each}
       {/if}
     </div>
-    <div class='absolute w-full bottom-0 flex flex-col gradient px-6 py-3 transition-opacity select:opacity-100' class:opacity-0={immersed}>
+    <div class='absolute w-full bottom-0 flex flex-col gradient px-6 py-3 transition-opacity delay-300 select:opacity-100' class:opacity-0={immersed}>
       <div class='flex justify-between gap-12 items-end'>
         <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>

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

@@ -130,7 +130,7 @@
   let lastDbl = 0
   function customDoubleClick (e: MouseEvent) {
     const now = Date.now()
-    if (now - lastDbl < 300) {
+    if (now - lastDbl < 100) {
       dispatch('dblclick', e)
     }
     lastDbl = now

src/routes/app/settings/+page.svelte

@@ -6,7 +6,7 @@
   import { Switch } from '$lib/components/ui/switch'
   import * as ToggleGroup from '$lib/components/ui/toggle-group'
   import native from '$lib/modules/native'
-  import { settings, languageCodes, subtitleResolutions } from '$lib/modules/settings'
+  import { settings, languageCodes, subtitleResolutions, SUPPORTS } from '$lib/modules/settings'
 
   async function selectPlayer () {
     $settings.playerPath = await native.selectPlayer()
@@ -93,10 +93,12 @@
   <SettingCard let:id title='Enable External Player' description='Opens a custom user-picked external video player to play video, instead of using the built-in one.'>
     <Switch {id} bind:checked={$settings.enableExternal} />
   </SettingCard>
-  <SettingCard let:id title='External Video Player' description='Executable for an external video player. Make sure the player supports HTTP sources.'>
-    <div class='flex'>
-      <Input type='url' bind:value={$settings.playerPath} readonly {id} class='w-32 shrink-0 bg-background rounded-r-none pointer-events-none' />
-      <Button class='rounded-l-none font-bold' on:click={selectPlayer} variant='secondary'>Select</Button>
-    </div>
-  </SettingCard>
+  {#if !SUPPORTS.isAndroid}
+    <SettingCard let:id title='External Video Player' description='Executable for an external video player. Make sure the player supports HTTP sources.'>
+      <div class='flex'>
+        <Input type='url' bind:value={$settings.playerPath} readonly {id} class='w-32 shrink-0 bg-background rounded-r-none pointer-events-none' />
+        <Button class='rounded-l-none font-bold' on:click={selectPlayer} variant='secondary'>Select</Button>
+      </div>
+    </SettingCard>
+  {/if}
 </div>

src/routes/app/settings/client/+page.svelte

@@ -12,14 +12,18 @@
 </script>
 
 <div class='space-y-3 pb-10 lg:max-w-4xl'>
+  <div class='font-weight-bold text-xl font-bold'>Security Settings</div>
   {#if !SUPPORTS.isAndroid}
-    <div class='font-weight-bold text-xl font-bold'>Security Settings</div>
     <SettingCard let:id title='Use DNS Over HTTPS' description='Enables DNS Over HTTPS, useful if your ISP blocks certain domains.'>
       <Switch {id} bind:checked={$settings.enableDoH} />
     </SettingCard>
     <SettingCard let:id title='DNS Over HTTPS URL' description='What URL to use for querying DNS Over HTTPS.'>
       <Input type='url' bind:value={$settings.doHURL} {id} class='w-80 shrink-0 bg-background' />
     </SettingCard>
+  {:else}
+    <SettingCard title='Use DNS Over HTTPS' description="Enables DNS Over HTTPS, useful if your ISP blocks certain domains. On Android this is a system setting, which cannot be changed here. It's usually named 'Private DNS' or 'DNS over HTTPs'.">
+      <Button class='font-bold' on:click={() => native.setDOH('')} variant='secondary'>Configure DoH</Button>
+    </SettingCard>
   {/if}
 
   <div class='font-weight-bold text-xl font-bold'>Client Settings</div>