better miniplayer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "scripts": {

src/renderer/src/lib/pages/Player.svelte

@@ -84,6 +84,7 @@
   function getFPS() {
     video.fps = new Promise(resolve => {
       let lastmeta = null
+      let wasPaused = !!paused
       let count = 0
 
       function handleFrames(now, metadata) {
@@ -106,6 +107,7 @@
             } else {
               resolve(rawFPS)
             }
+            paused = wasPaused
           } else {
             lastmeta = metadata
             video.requestVideoFrameCallback(handleFrames)
@@ -174,7 +176,11 @@
       file.getStreamURL((err, url) => {
         src = url
         current = file
+        if (miniplayer) {
+          video?.load()
+        } else {
           video?.play()
+        }
         checkAvail(current)
       })
     }
@@ -698,8 +704,7 @@
   </div>
 {/if}
 <!-- svelte-ignore a11y-media-has-caption -->
-{#if files?.length || !miniplayer}
-  <div
+<div
   class="player w-full h-full d-flex flex-column overflow-hidden"
   class:pointer={miniplayer}
   class:miniplayer
@@ -710,12 +715,10 @@
   on:mousemove={resetImmerse}
   on:touchmove={resetImmerse}
   on:keypress={resetImmerse}
-    on:mouseleave={immersePlayer}
-    on:click={() => (page = 'player')}>
+  on:mouseleave={immersePlayer}>
   <video
     class="position-absolute h-full w-full"
     style={`margin-top: ${menubarOffset}px`}
-      autoplay
     preload="auto"
     {src}
     bind:videoHeight
@@ -764,7 +767,7 @@
     <span class="material-icons ctrl font-size-12 p-10" title="Keybinds [`]" on:click={() => (showKeybinds = true)}> help_outline </span>
   </div>
   <div class="middle d-flex align-items-center justify-content-center flex-grow-1 z-40 position-relative">
-      <div class="position-absolute w-full h-full" on:dblclick={toggleFullscreen}>
+    <div class="position-absolute w-full h-full" on:dblclick={toggleFullscreen} on:click|self={() => (page = 'player')}>
       <div class="play-overlay w-full h-full" on:click={playPause} />
     </div>
     {#if hasLast}
@@ -864,8 +867,7 @@
       {isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
     </span>
   </div>
-  </div>
-{/if}
+</div>
 
 <style>
   .stats {
@@ -877,7 +879,7 @@
   }
   .miniplayer {
     transition: width 0.2s ease;
-    width: min(40rem, 25vw) !important;
+    width: 35rem !important;
     height: auto !important;
     bottom: 2rem;
     right: 2rem;
@@ -885,7 +887,6 @@
     position: absolute !important;
   }
   .miniplayer .top,
-  .miniplayer .middle,
   .miniplayer .bottom {
     display: none !important;
   }
@@ -987,15 +988,30 @@
     display: none;
   }
 
-  @media (pointer: none), (pointer: coarse) {
+  /* @media (pointer: none), (pointer: coarse) {
     .middle .ctrl {
       display: flex;
     }
     .middle .play-overlay {
       display: none !important;
     }
+  } */
+  .miniplayer .middle {
+    position: absolute !important;
+    width: 100%;
+    height: 100%;
+  }
+  .miniplayer .middle .ctrl {
+    display: flex;
+    font-size: 2.8rem;
+    margin: 0.6rem;
+  }
+  .miniplayer .middle .play-overlay {
+    display: none !important;
+  }
+  .miniplayer .middle .ctrl[data-name='playPause'] {
+    font-size: 5rem;
   }
-
   .middle .ctrl[data-name='playPause'] {
     font-size: 6rem;
   }

src/renderer/src/modules/torrent.js

@@ -38,11 +38,11 @@ client.on('torrent', torrent => {
   files.set(torrent.files)
 })
 
-export async function add (torrentID) {
+export async function add(torrentID, hide) {
   if (torrentID) {
     if (client.torrents.length) client.remove(client.torrents[0].infoHash)
     files.set([])
-    page.set('player')
+    if (!hide) page.set('player')
     if (typeof torrentID === 'string' && !torrentID.startsWith('magnet:')) {
       // IMPORTANT, this is because node's get bypasses proxies, wut????
       const res = await fetch(torrentID)
@@ -73,6 +73,6 @@ client.on('torrent', torrent => {
 queueMicrotask(() => {
   if (localStorage.getItem('torrent')) {
     const buffer = Buffer.from(JSON.parse(localStorage.getItem('torrent')))
-    add(buffer)
+    add(buffer, true)
   }
 })