From 7beede8dcce8bd8f2b23121a6ac44ac949e25a23 Mon Sep 17 00:00:00 2001
From: NoCrypt <57245077+NoCrypt@users.noreply.github.com>
Date: Thu, 12 Sep 2024 01:18:23 +0700
Subject: [PATCH] fix: swipe controls overlapped with player ui

---
 common/modules/swipecontrol.js    |  1 +
 common/views/Player/Player.svelte | 13 +++----------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/common/modules/swipecontrol.js b/common/modules/swipecontrol.js
index 94f18b7..be1e70a 100644
--- a/common/modules/swipecontrol.js
+++ b/common/modules/swipecontrol.js
@@ -33,6 +33,7 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
     border-radius: 4px;
     font-family: Arial, sans-serif;
     font-size: 14px;
+    z-index: 39;
   `;
   
   indicators.innerHTML = `
diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte
index 74f5b6b..b412c67 100644
--- a/common/views/Player/Player.svelte
+++ b/common/views/Player/Player.svelte
@@ -1071,7 +1071,6 @@
   class:fitWidth
   bind:this={container}
   role='none'
-  use:swipeControls={{enabled: SUPPORTS.isAndroid, immersePlayer}}
   use:volumeScroll
   on:pointermove={resetImmerse}
   on:keypress={resetImmerse}
@@ -1165,12 +1164,12 @@
     </div>
     <div class='col-4' />
   </div>
-  <div class='middle d-flex align-items-center justify-content-center flex-grow-1 position-relative'>
+  <div class='middle d-flex align-items-center justify-content-center flex-grow-1 position-relative' use:swipeControls={{enabled: SUPPORTS.isAndroid, immersePlayer}}>
     <!-- eslint-disable-next-line svelte/valid-compile -->
     <div class='w-full h-full position-absolute toggle-fullscreen' on:dblclick={toggleFullscreen} on:click|self={() => { if (page === 'player' && ['none', 'player'].includes(overlay)) playPause(); page = 'player'; window.dispatchEvent(new Event('overlay-check')) }} />
     <!-- eslint-disable-next-line svelte/valid-compile -->
-    <div class='w-full h-full position-absolute toggle-immerse d-none' on:dblclick={toggleFullscreen} on:dblclick={!SUPPORTS.isAndroid ? toggleFullscreen : executeSeek} on:click|self={toggleImmerse} />
-    <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player'; window.dispatchEvent(new Event('overlay-check')) }} />
+    <div class='w-full h-full position-absolute toggle-immerse d-none' on:dblclick={!SUPPORTS.isAndroid ? toggleFullscreen : executeSeek} on:click|self={toggleImmerse} />
+    <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player'; window.dispatchEvent(new Event('overlay-check')); toggleFullscreen() }} />
     <!-- eslint-disable-next-line svelte/valid-compile -->
     <span class='icon ctrl h-full align-items-center justify-content-end w-150 mw-full mr-auto' on:click={rewind}>
       <Rewind size='3rem' />
@@ -1634,12 +1633,6 @@
   .seekbar {
     font-size: 2rem !important;
   }
-  .miniplayer .mobile-focus-target {
-    display: block !important;
-  }
-  .miniplayer .mobile-focus-target:focus-visible {
-    background: hsla(209, 100%, 55%, 0.3);
-  }
 
   @media (pointer: none), (pointer: coarse) {