fix: improve keybinds button position

fix: display keybinds ui in fullscreen
fix: display modals in-app rather than as an overlay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",
   "main": "build/main.js",

src/renderer/App.svelte

@@ -35,9 +35,6 @@
 </script>
 
 <Toasts />
-<ViewAnime />
-<ViewTrailer />
-<RSSView />
 <div class='page-wrapper with-navbar with-sidebar with-transitions' data-sidebar-type='overlayed-sm-and-down' data-sidebar-hidden={$sidebar || null}>
   <div class='sticky-alerts' />
   <div class='sidebar-overlay'
@@ -46,8 +43,13 @@
     role='button' />
   <CatBlock />
   <Menubar />
-  <Sidebar bind:page={$page} />
-  <Router bind:page={$page} />
+  <div class='overflow-hidden content-wrapper'>
+    <ViewAnime />
+    <ViewTrailer />
+    <RSSView />
+    <Sidebar bind:page={$page} />
+    <Router bind:page={$page} />
+  </div>
 </div>
 
 <style>
@@ -101,6 +103,14 @@
   :global(.root) {
     animation: 0.3s ease 0s 1 root-load-in;
   }
+  .content-wrapper {
+    will-change: width;
+    top: 0 !important;
+  }
+  :global(.nav-hidden) > .content-wrapper {
+    left: 0 !important;
+    width: 100% !important;
+  }
   @keyframes root-load-in {
     from {
       bottom: -1.2rem;

src/renderer/lib/Player/Player.svelte

@@ -862,14 +862,6 @@
 </script>
 
 <!-- <svelte:window bind:innerWidth bind:innerHeight /> -->
-{#if showKeybinds && !miniplayer}
-  <div class='position-absolute bg-tp w-full h-full z-50 font-size-12 p-20 d-flex align-items-center justify-content-center' on:click|self={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}>
-    <button class='close' type='button' on:click={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}><span>×</span></button>
-    <Keybinds let:prop={item} autosave={true} clickable={true}>
-      <div class:material-icons={item?.type} class='bind'>{item?.id || ''}</div>
-    </Keybinds>
-  </div>
-{/if}
 <div
   class='player w-full h-full d-flex flex-column overflow-hidden'
   class:pointer={miniplayer}
@@ -882,6 +874,14 @@
   on:touchmove={resetImmerse}
   on:keypress={resetImmerse}
   on:mouseleave={immersePlayer}>
+  {#if showKeybinds && !miniplayer}
+    <div class='position-absolute bg-tp w-full h-full z-50 font-size-12 p-20 d-flex align-items-center justify-content-center' on:click|self={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}>
+      <button class='btn btn-square rounded-circle bg-dark font-size-16 top-0 right-0 m-10 position-absolute' type='button' on:click={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}>&times;</button>
+      <Keybinds let:prop={item} autosave={true} clickable={true}>
+        <div class:material-icons={item?.type} class='bind'>{item?.id || ''}</div>
+      </Keybinds>
+    </div>
+  {/if}
   <!-- eslint-disable-next-line svelte/valid-compile -->
   <video
     crossorigin='anonymous'
@@ -931,8 +931,7 @@
       Name: {current.name || ''}
     </div>
   {/if}
-  <div class='top z-40 d-flex justify-content-between'>
-    <div />
+  <div class='top z-40 d-flex justify-content-center'>
     <div class='d-flex'>
       <span class='material-icons' data-name='peers'> people </span>
       <span class='stats'>{torrent.peers || 0}</span>
@@ -941,7 +940,6 @@
       <span class='material-icons'> arrow_upward </span>
       <span class='stats'>{fastPrettyBytes(torrent.up)}/s</span>
     </div>
-    <span class='material-icons ctrl' title='Keybinds [`]' on:pointerdown={() => (showKeybinds = true)}> help_outline </span>
   </div>
   <div class='middle d-flex align-items-center justify-content-center flex-grow-1 position-relative'>
     <div class='w-full h-full position-absolute' on:dblclick={toggleFullscreen} on:click|self={() => { if (page === 'player') playPause(); page = 'player' }} on:keydown={wrapEnter(() => { if (page === 'player') playPause(); page = 'player' })} />
@@ -984,6 +982,7 @@
         <input class='ctrl h-full custom-range' type='range' min='0' max='1' step='any' data-name='setVolume' bind:value={volume} />
       </div>
       <div class='ts mr-auto'>{toTS(targetTime, safeduration > 3600 ? 2 : 3)} / {toTS(safeduration - targetTime, safeduration > 3600 ? 2 : 3)}</div>
+      <span class='material-icons ctrl' title='Keybinds [`]' on:pointerdown={() => (showKeybinds = true)}> keyboard </span>
       {#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
         <div class='dropdown dropup with-arrow' on:click={toggleDropdown} on:keydown={wrapEnter(toggleDropdown)}>
           <span class='material-icons ctrl' title='Audio Tracks'>

src/renderer/lib/RSSView.svelte

@@ -305,7 +305,7 @@
   {#if table}
     <div class='modal-dialog p-20' role='document' on:click|self={close} on:keydown|self={wrapEnter(close)}>
       <div class='modal-content w-auto'>
-        <button class='close pointer z-30 top-20 right-0' type='button' on:click={close}> &times; </button>
+        <button class='close pointer z-30 top-20 right-0 position-absolute' type='button' on:click={close}> &times; </button>
         <table class='table table-hover'>
           <thead>
             <tr>

src/renderer/lib/Router.svelte

@@ -9,26 +9,13 @@
   const current = getContext('gallery')
 </script>
 
-<div class='overflow-hidden content-wrapper'>
-  <Miniplayer active={page !== 'player'} class='bg-dark z-10 {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='45rem' width='300px' padding='2rem'>
-    <MediaHandler miniplayer={page !== 'player'} bind:page />
-  </Miniplayer>
-  {#if page === 'settings'}
-    <Settings />
-  {:else if page === 'home'}
-    <Home bind:current={$current} />
-  {:else if page === 'watchtogether'}
-    <WatchTogether />
-  {/if}
-</div>
-
-<style>
-  .content-wrapper {
-    will-change: width;
-    top: 0 !important;
-  }
-  :global(.nav-hidden) > .content-wrapper {
-    left: 0 !important;
-    width: 100% !important;
-  }
-</style>
+<Miniplayer active={page !== 'player'} class='bg-dark z-10 {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='45rem' width='300px' padding='2rem'>
+  <MediaHandler miniplayer={page !== 'player'} bind:page />
+</Miniplayer>
+{#if page === 'settings'}
+  <Settings />
+{:else if page === 'home'}
+  <Home bind:current={$current} />
+{:else if page === 'watchtogether'}
+  <WatchTogether />
+{/if}

src/renderer/lib/Sidebar.svelte

@@ -7,6 +7,7 @@
   import { wrapEnter } from '@/modules/util.js'
   const sidebar = getContext('sidebar')
   const view = getContext('view')
+  const trailer = getContext('trailer')
   const gallery = getContext('gallery')
   export let page
   const links = [
@@ -22,6 +23,8 @@
       click: () => {
         page = 'home'
         $gallery = null
+        $view = null
+        $trailer = null
       },
       icon: 'home',
       text: 'Home Page'
@@ -201,6 +204,7 @@
     overflow: visible;
     visibility: visible !important;
     top: var(--navbar-height);
+    height: calc(100% - var(--navbar-height))
   }
   :global(.nav-hidden) > .sidebar {
     left: calc(-1 * var(--sidebar-width)) !important;

src/renderer/lib/ViewAnime/ViewAnime.svelte

@@ -27,7 +27,7 @@
 <div class='modal modal-full' class:show={media} on:keydown={checkClose} tabindex='-1' bind:this={modal}>
   {#if media}
     <div class='h-full modal-content bg-very-dark p-0 overflow-y-auto'>
-      <button class='close pointer z-30 bg-dark top-20 right-0' type='button' on:click={close}> &times; </button>
+      <button class='close pointer z-30 bg-dark top-20 right-0 position-absolute' type='button' on:click={close}> &times; </button>
       <div class='h-md-half w-full position-relative z-20'>
         <div class='h-full w-full position-absolute bg-dark-light banner' style:--bannerurl={`url('${media.bannerImage || ''}')`} />
         <div class='d-flex h-full top w-full'>

src/renderer/lib/ViewAnime/ViewTrailer.svelte

@@ -18,7 +18,7 @@
   {#if $url}
     <div class='modal-dialog' role='document' on:click|self={close} on:keydown|self={wrapEnter(close)}>
       <div class='modal-content w-three-quarter h-full bg-transparent d-flex justify-content-center flex-column'>
-        <button class='close pointer z-30 top-20 right-0' type='button' on:click={close}> &times; </button>
+        <button class='close pointer z-30 top-20 right-0 position-absolute' type='button' on:click={close}> &times; </button>
         <div class='trailer w-full position-relative'>
           <iframe
             id='trailerVideo'