fix: Sidebar overlay

common/App.svelte

@@ -5,6 +5,7 @@
   import IPC from '@/modules/ipc.js'
 
   export const page = writable('home')
+  export const overlay = writable('none')
   export const view = writable(null)
   export async function handleAnime (anime) {
     view.set(null)
@@ -23,6 +24,7 @@
   import TorrentModal from './views/TorrentSearch/TorrentModal.svelte'
   import Menubar from './components/Menubar.svelte'
   import { Toaster } from 'svelte-sonner'
+  import Login from './components/Login.svelte'
   import Logout from './components/Logout.svelte'
   import Navbar from './components/Navbar.svelte'
 
@@ -31,13 +33,14 @@
 
 <div class='page-wrapper with-transitions bg-dark position-relative' data-sidebar-type='overlayed-all'>
   <Menubar bind:page={$page} />
-  <ViewAnime />
+  <Login />
   <Logout />
   <Sidebar bind:page={$page} />
-  <div class='overflow-hidden content-wrapper h-full z-10'>
+  <div class='overflow-hidden content-wrapper h-full'>
     <Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton />
-    <TorrentModal />
+    <ViewAnime bind:overlay={$overlay} />
-    <Router bind:page={$page} />
+    <TorrentModal bind:overlay={$overlay} />
+    <Router bind:page={$page} bind:overlay={$overlay} />
   </div>
   <Navbar bind:page={$page} />
 </div>
@@ -45,6 +48,7 @@
 <style>
   .content-wrapper {
     will-change: width;
+    white-space: pre-line;
     top: 0 !important;
   }
 

common/Router.svelte

@@ -1,4 +1,6 @@
 <script context='module'>
+  import { readable } from 'simple-store-svelte'
+
   const mql = matchMedia('(min-width: 769px)')
   const isMobile = readable(!mql.matches, set => {
     const check = ({ matches }) => set(!matches)
@@ -15,17 +17,17 @@
   import Miniplayer from 'svelte-miniplayer'
   import Search from './views/Search.svelte'
   import AiringSchedule from './views/AiringSchedule.svelte'
-  import { readable } from 'simple-store-svelte'
 
   export let page = 'home'
+  export let overlay = 'none'
 
   $: minwidth = $isMobile ? '200px' : '35rem'
   $: maxwidth = $isMobile ? '200px' : '60rem'
 </script>
 
 <div class='w-full h-full position-absolute overflow-hidden'>
-  <Miniplayer active={page !== 'player'} class='bg-dark-light z-10 {page === 'player' ? 'h-full' : ''}' {minwidth} {maxwidth} width='300px' padding='2rem' resize={!$isMobile}>
+  <Miniplayer active={(page !== 'player' && overlay !== 'torrent') || overlay === 'viewanime'} class='bg-dark-light z-100 {(page === "player" && overlay !== "viewanime") ? "h-full" : ""}' {minwidth} {maxwidth} width='300px' padding='2rem' resize={!$isMobile}>
-    <MediaHandler miniplayer={page !== 'player'} bind:page />
+    <MediaHandler miniplayer={page !== 'player' || overlay === 'viewanime'} bind:page bind:overlay />
   </Miniplayer>
 </div>
 {#if page === 'settings'}

common/components/Logout.svelte

@@ -24,7 +24,7 @@
   $: $logout && modal?.focus()
 </script>
 
-<div class='modal z-40' class:show={$logout}>
+<div class='modal z-101' class:show={$logout}>
   {#if $logout}
     <div class='modal-dialog' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
       <div class='modal-content d-flex justify-content-center flex-column'>

common/components/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from 'svelte'
-  import { media } from '../views/Player/MediaHandler.svelte'
+  import { media } from '@/views/Player/MediaHandler.svelte'
   import { settings } from '@/modules/settings.js'
   import { toast } from 'svelte-sonner'
   import { click } from '@/modules/click.js'
@@ -57,6 +57,7 @@
     {
       click: () => {
         page = 'home'
+        if ($view) $view = null
       },
       page: 'home',
       icon: 'home',
@@ -65,6 +66,7 @@
     {
       click: () => {
         page = 'search'
+        if ($view) $view = null
       },
       page: 'search',
       icon: 'search',
@@ -122,7 +124,7 @@
     {#each links as { click: _click, icon, text, image, css, page: _page } (_click)}
       <div
         class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
-        use:click={_click}>
+        use:click={() => { _click(); if (!icon.includes("login") && !icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } } }>
         <span class='text-nowrap d-flex align-items-center w-full h-full'>
           {#if image}
             <span class='material-symbols-outlined rounded' class:filled={page === _page}>
@@ -231,6 +233,9 @@
   .sidebar.animated:hover {
     width: 22rem
   }
+  .sidebar.animated {
+    z-index: 60 !important;
+  }
   .sidebar-overlay {
     width: var(--sidebar-width);
     transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

common/css.css

@@ -82,6 +82,10 @@ a[href]:active, button:not([disabled]):active, fieldset:not([disabled]):active,
   z-index: 100;
 }
 
+.z-101 {
+  z-index: 101;
+}
+
 .material-symbols-outlined {
   font-family: "Material Symbols Outlined Variable";
   font-weight: normal;

common/views/Player/MediaHandler.svelte

@@ -255,6 +255,7 @@
 
   export let miniplayer = false
   export let page = 'home'
+  export let overlay = 'none'
 </script>
 
-<Player files={$processed} {miniplayer} media={$nowPlaying} bind:playFile bind:page on:current={handleCurrent} />
+<Player files={$processed} {miniplayer} media={$nowPlaying} bind:playFile bind:page bind:overlay on:current={handleCurrent} />

common/views/Player/Player.svelte

@@ -45,6 +45,7 @@
   export let miniplayer = false
   $condition = () => !miniplayer && SUPPORTS.keybinds && !document.querySelector('.modal.show')
   export let page
+  export let overlay
   export let files = []
   $: updateFiles(files)
   let src = null
@@ -1105,10 +1106,10 @@
   </div>
   <div class='middle d-flex align-items-center justify-content-center flex-grow-1 position-relative'>
     <!-- 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') playPause(); page = 'player' }} />
+    <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:click|self={toggleImmerse} />
-    <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player' }} />
+    <div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player'; window.dispatchEvent(new Event('overlay-check')) }} />
     <!-- eslint-disable-next-line svelte/valid-compile -->
     <span class='material-symbols-outlined ctrl h-full align-items-center justify-content-end w-150 mw-full mr-auto' on:click={rewind}> fast_rewind </span>
     <span class='material-symbols-outlined ctrl' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>

common/views/TorrentSearch/TorrentModal.svelte

@@ -7,7 +7,10 @@
   export function playAnime (media, episode = 1, force) {
     episode = Number(episode)
     episode = isNaN(episode) ? 1 : episode
-    if (!force && findInCurrent({ media, episode })) return
+    if (!force && findInCurrent({ media, episode })) {
+      window.dispatchEvent(new Event('overlay-check'))
+      return
+    }
     rss.set({ media, episode })
   }
 </script>
@@ -15,7 +18,10 @@
 <script>
   import TorrentMenu from './TorrentMenu.svelte'
 
+  export let overlay
+
   function close () {
+    overlay = 'none'
     $rss = null
   }
   function checkClose ({ keyCode }) {
@@ -26,10 +32,21 @@
 
   $: search = $rss
 
-  $: search && modal?.focus()
+  $: {
+    if (search) {
+      overlay = 'torrent'
+      modal?.focus()
+    }
+  }
+
+  window.addEventListener('overlay-check', () => {
+    if (search) {
+      close()
+    }
+  })
 </script>
 
-<div class='modal z-100' class:show={search} id='viewAnime'>
+<div class='modal z-50' class:show={search} id='viewAnime'>
   {#if search}
     <div class='modal-dialog d-flex align-items-center px-md-15 pt-md-20' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
       <div class='modal-content m-0 mw-full h-full rounded overflow-hidden bg-very-dark d-flex flex-column overflow-y-scroll pt-0 px-0'>

common/views/ViewAnime/ViewAnime.svelte

@@ -14,18 +14,23 @@
   import smoothScroll from '@/modules/scroll.js'
   import IPC from '@/modules/ipc.js'
 
+  export let overlay
   const view = getContext('view')
-  function close () {
+  function close (play) {
     $view = null
+    if (!play) {
+      overlay = 'none'
+    }
   }
-  $: media = $view
   let modal
-  $: media && modal?.focus()
+  let container = null
+  $: media = $view
+  $: media && (modal?.focus(), overlay = 'viewanime', (container && container.dispatchEvent(new Event('scrolltop'))))
   function checkClose ({ keyCode }) {
     if (keyCode === 27) close()
   }
   function play (episode) {
-    close()
+    close(true)
     if (episode) return playAnime(media, episode)
     if (media.status === 'NOT_YET_RELEASED') return
     playMedia(media)
@@ -59,12 +64,17 @@
     IPC.emit('open', url)
   }
   let episodeOrder = true
+  window.addEventListener('overlay-check', () => {
+    if (media) {
+      close()
+    }
+  })
 </script>
 
-<div class='modal modal-full z-100' class:show={media} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
+<div class='modal modal-full z-50' class:show={media} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
   {#if media}
-    <div class='h-full modal-content bg-very-dark p-0 overflow-y-auto position-relative' use:smoothScroll>
+    <div class='h-full modal-content bg-very-dark p-0 overflow-y-auto position-relative' bind:this={container} use:smoothScroll>
-      <button class='close pointer z-30 bg-dark top-20 right-0 position-fixed' type='button' use:click={close}> &times; </button>
+      <button class='close pointer z-30 bg-dark top-20 right-0 position-fixed' type='button' use:click={() => close()}> &times; </button>
       <img class='w-full cover-img banner position-absolute' alt='banner' src={media.bannerImage || ' '} />
       <div class='row px-20'>
         <div class='col-lg-7 col-12 pb-10'>