UX: better file handling, better video feedback

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "ThaUnknown_",
   "main": "src/index.js",
   "scripts": {

src/index.js

@@ -40,7 +40,11 @@ function createWindow () {
 
   protocol.registerHttpProtocol('miru', (req, cb) => {
     const token = req.url.slice(7)
-    mainWindow.loadURL(path.join(__dirname, '/renderer/dist/index.html' + token))
+    if (process.env.NODE_ENV !== 'development ') {
+      mainWindow.loadURL(path.join(__dirname, '/renderer/dist/index.html' + token))
+    } else {
+      mainWindow.loadURL('http://localhost:3000/' + token)
+    }
   })
 
   // mainWindow.removeMenu()

src/renderer/src/lib/Router.svelte

@@ -1,19 +1,20 @@
+<script context='module'>
+  import { writable } from 'svelte/store'
+
+  export const files = writable([])
+
+  </script>
+
 <script>
   import Home from './pages/home/Home.svelte'
   import Player from './pages/Player.svelte'
   import Settings from './pages/Settings.svelte'
   import Schedule from './pages/Schedule.svelte'
-  import { client } from '@/modules/torrent.js'
   export let page = 'home'
-  let files = []
-  client.on('torrent', torrent => {
-    console.log('hash', torrent.infoHash)
-    files = torrent.files
-  })
 </script>
 
 <div class="overflow-y-hidden content-wrapper">
-  <Player {files} miniplayer={page !== 'player'} bind:page />
+  <Player files={$files} miniplayer={page !== 'player'} bind:page />
   {#if page === 'schedule'}
     <Schedule />
   {:else if page === 'settings'}

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

@@ -149,6 +149,13 @@
           subs.findSubtitleFiles(current)
         }
       }
+    } else {
+      media = null
+      fileMedia = null
+      hadImage = false
+      src = ''
+      video?.load()
+      currentTime = 0
     }
   }
 
@@ -160,14 +167,12 @@
         interval: undefined,
         video: undefined
       })
-      src = ''
-      video?.load()
       completed = false
       file.getStreamURL((err, url) => {
         src = url
         current = file
         video?.load()
-        currentTime = 0
+        paused = false
       })
     }
   }
@@ -703,7 +708,7 @@
       <div />
       <div class="d-flex">
         <span class="material-icons" data-name="peers"> people </span>
-        <span class="stats">{torrent.peers}</span>
+        <span class="stats">{torrent.peers || 0}</span>
         <span class="material-icons"> arrow_downward </span>
         <span class="stats">{fastPrettyBytes(torrent.down)}/s</span>
         <span class="material-icons"> arrow_upward </span>
@@ -866,7 +871,7 @@
     background-color: var(--dark-color-light);
     will-change: width;
   }
-  .player.miniplayer{
+  .player.miniplayer {
     background: #00000066;
     backdrop-filter: blur(3px);
   }

src/renderer/src/modules/torrent.js

@@ -1,5 +1,6 @@
 import WebTorrent from 'webtorrent'
 import { set } from '@/lib/pages/Settings.svelte'
+import { files } from '@/lib/Router.svelte'
 import { page } from '@/App.svelte'
 export const client = new WebTorrent({
   downloadLimit: set.torrentSpeed * 1048576 || 0,
@@ -31,10 +32,16 @@ if (worker) {
     }
   })
 }
+window.client = client
+client.on('torrent', torrent => {
+  console.log('hash', torrent.infoHash)
+  files.set(torrent.files)
+})
 
 export function add (torrentID) {
   if (torrentID) {
     if (client.torrents.length) client.remove(client.torrents[0].infoHash)
+    files.set([])
     page.set('player')
     client.add(torrentID, {
       path: set.torrentPath,