fix: swipe controls overlapped with player ui

This commit is contained in:
NoCrypt 2024-09-12 01:18:23 +07:00
parent 3bb3c7436f
commit 7beede8dcc
2 changed files with 4 additions and 10 deletions

View file

@ -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 = `

View file

@ -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) {