fix build for electron-builder

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "miru",
+  "name": "Miru",
   "version": "0.1.0",
+  "author": "ThaUnknown_",
   "main": "src/index.js",
   "scripts": {
     "start": "SET NODE_ENV=development & concurrently \"npm run web:watch\" \"npm run electron:start\"",
@@ -10,16 +11,13 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-    "anitomyscript": "^2.0.4",
     "builtin-modules": "^3.2.0",
     "concurrently": "^7.0.0",
     "electron": "^16.0.10",
     "electron-builder": "^22.14.13",
-    "matroska-subtitles": "^3.3.2",
     "svelte": "^3.46.4",
     "vite": "^2.8.6",
-    "vite-plugin-commonjs-externals": "^0.1.1",
+    "vite-plugin-commonjs-externals": "^0.1.1"
-    "webtorrent": "^1.7.2"
   },
   "standard": {
     "ignore": [
@@ -32,5 +30,10 @@
     "files": [
       "src/**/*"
     ]
+  },
+  "dependencies": {
+    "anitomyscript": "^2.0.4",
+    "matroska-subtitles": "^3.3.2",
+    "webtorrent": "^1.7.2"
   }
 }

src/renderer/src/lib/Router.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <div class="overflow-y-hidden content-wrapper">
-  <Player {files} miniplayer={page !=='player'} bind:page />
+  <Player {files} miniplayer={page !== 'player'} bind:page />
   {#if page === 'schedule'}
     <Schedule />
   {:else if page === 'settings'}
@@ -24,7 +24,7 @@
 </div>
 
 <style>
-  .content-wrapper{
+  .content-wrapper {
     will-change: width;
   }
   :global(.nav-hidden) > .content-wrapper {

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

@@ -1,3 +1,31 @@
+<script context="module">
+    async function mediaChange(current, image) {
+    if (current) {
+      const { release_group, anime_title, episode_number, episode_title } = await anitomyscript(current.name)
+      // honestly, this is made for anime, but works fantastic for everything else.
+      const name = [anime_title, episode_number, episode_title].filter(i => i).join(' - ')
+      if ('mediaSession' in navigator) {
+        const metadata = image
+          ? new MediaMetadata({
+              title: name || 'Video Player',
+              artwork: [
+                {
+                  src: image,
+                  sizes: '256x256',
+                  type: 'image/jpg'
+                }
+              ]
+            })
+          : new MediaMetadata({
+              title: name || 'Video Player'
+            })
+        if (release_group) metadata.artist = release_group
+        navigator.mediaSession.metadata = metadata
+      }
+    }
+  }
+</script>
+
 <script>
   import Peer from '@/modules/Peer.js'
   import Subtitles from '@/modules/subtitles.js'
@@ -74,18 +102,18 @@
     })
   }
 
-  if ('PresentationRequest' in window) {
+  // if ('PresentationRequest' in window) {
-    const handleAvailability = aval => {
+  //   const handleAvailability = aval => {
-      canCast = !!aval
+  //     canCast = !!aval
-    }
+  //   }
-    presentationRequest = new PresentationRequest(['build/cast.html'])
+  //   presentationRequest = new PresentationRequest(['build/cast.html'])
-    presentationRequest.addEventListener('connectionavailable', e => initCast(e))
+  //   presentationRequest.addEventListener('connectionavailable', e => initCast(e))
-    navigator.presentation.defaultRequest = presentationRequest
+  //   navigator.presentation.defaultRequest = presentationRequest
-    presentationRequest.getAvailability().then(aval => {
+  //   presentationRequest.getAvailability().then(aval => {
-      aval.onchange = e => handleAvailability(e.target.value)
+  //     aval.onchange = e => handleAvailability(e.target.value)
-      handleAvailability(aval.value)
+  //     handleAvailability(aval.value)
-    })
+  //   })
-  }
+  // }
 
   //document.fullscreenElement isn't reactive
   document.addEventListener('fullscreenchange', () => {
@@ -100,13 +128,10 @@
     if (files && files.length) {
       videos = files.filter(file => videoRx.test(file.name))
       if (videos?.length) {
-        if (!current) {
+        handleCurrent(videos[0])
-          handleCurrent(videos[0])
+        if (subs) {
-        } else {
+          subs.files = files || []
-          if (subs) {
+          subs.findSubtitleFiles(current)
-            subs.files = files || []
-            subs.findSubtitleFiles(current)
-          }
         }
       }
     }
@@ -429,31 +454,6 @@
     playbackRate: 1,
     position: Math.max(duration || 0, currentTime || 0)
   })
-  async function mediaChange(current, image) {
-    if (current) {
-      const { release_group, anime_title, episode_number, episode_title } = await anitomyscript(current.name)
-      // honestly, this is made for anime, but works fantastic for everything else.
-      name = [anime_title, episode_number, episode_title].filter(i => i).join(' - ')
-      if ('mediaSession' in navigator) {
-        const metadata = image
-          ? new MediaMetadata({
-              title: name || 'Video Player',
-              artwork: [
-                {
-                  src: image,
-                  sizes: '256x256',
-                  type: 'image/jpg'
-                }
-              ]
-            })
-          : new MediaMetadata({
-              title: name || 'Video Player'
-            })
-        if (release_group) metadata.artist = release_group
-        navigator.mediaSession.metadata = metadata
-      }
-    }
-  }
   $: mediaChange(current)
 
   if ('mediaSession' in navigator) {
@@ -530,8 +530,8 @@
       }
     }
   }
-  $: initThumbnails(200 / (videoWidth / videoHeight))
+  function initThumbnails() {
-  function initThumbnails(height) {
+    const height = 200 / (videoWidth / videoHeight)
     if (!isNaN(height)) {
       thumbnailData.interval = duration / 300 < 5 ? 5 : duration / 300
       thumbnailData.canvas.height = height
@@ -571,17 +571,14 @@
     thumbnailData.video.load()
     console.log('Thumbnail creating started')
   }
-  let isStandalone = window.matchMedia('(display-mode: standalone)').matches
+
-  window.matchMedia('(display-mode: standalone)').addEventListener('change', ({ matches }) => {
-    isStandalone = matches
-  })
   const isWindows = navigator.appVersion.includes('Windows')
   let innerWidth, innerHeight, videoWidth, videoHeight
   let menubarOffset = 0
-  $: calcMenubarOffset(innerWidth, innerHeight, videoWidth, videoHeight, isStandalone)
+  // $: calcMenubarOffset(innerWidth, innerHeight, videoWidth, videoHeight)
-  function calcMenubarOffset(innerWidth, innerHeight, videoWidth, videoHeight, isStandalone) {
+  function calcMenubarOffset(innerWidth, innerHeight, videoWidth, videoHeight) {
     // outerheight resize and innerheight resize is mutual, additionally update on metadata and app state change
-    if (isStandalone && videoWidth && videoHeight) {
+    if (videoWidth && videoHeight) {
       // so windows is very dumb, and calculates windowed mode as if it was window XP, with the old bars, but not when maximised
       const isMaximised = screen.availWidth === window.outerWidth && screen.availHeight === window.outerHeight
       const menubar = Math.max(0, isWindows && !isMaximised ? window.outerHeight - innerHeight - 8 : window.outerHeight - innerHeight)
@@ -649,6 +646,7 @@
       on:playing={hideBuffering}
       on:loadedmetadata={hideBuffering}
       on:loadedmetadata={getFPS}
+      on:loadedmetadata={initThumbnails}
       on:leavepictureinpicture={() => (pip = false)} />
     {#if stats}
       <div class="position-absolute top-0 bg-tp p-10 m-15 text-monospace rounded z-50">

vite.config.js

@@ -1,6 +1,7 @@
 import path from 'path'
 import process from 'process'
 import { defineConfig } from 'vite'
+import { builtinModules } from 'module'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import commonjsExternals from 'vite-plugin-commonjs-externals'
 
@@ -11,7 +12,8 @@ const commonjsPackages = [
   // 'electron/renderer',
   // 'original-fs',
   'webtorrent',
-  'matroska-subtitles'
+  'matroska-subtitles',
+  ...builtinModules
 ]
 
 // https://vitejs.dev/config/