feat: CSS theming

perf: transferable buffers
fix: font loading

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",
   "main": "build/main.js",
@@ -51,7 +51,7 @@
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webtorrent": "^2.1.16"
+    "webtorrent": "^2.1.17"
   },
   "dependencies": {
     "utp-native": "^2.5.3"

pnpm-lock.yaml

@@ -122,8 +122,8 @@ devDependencies:
     specifier: ^4.15.1
     version: 4.15.1(webpack-cli@5.1.4)(webpack@5.88.2)
   webtorrent:
-    specifier: ^2.1.16
-    version: 2.1.16
+    specifier: ^2.1.17
+    version: 2.1.17
 
 packages:
 
@@ -2431,7 +2431,7 @@ packages:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.12.1
-      resolve: 1.22.2
+      resolve: 1.22.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2525,7 +2525,7 @@ packages:
       ignore: 5.2.4
       is-core-module: 2.12.1
       minimatch: 3.1.2
-      resolve: 1.22.2
+      resolve: 1.22.3
       semver: 7.5.4
     dev: true
 
@@ -6074,8 +6074,8 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
-  /webtorrent@2.1.16:
-    resolution: {integrity: sha512-nty8vJDoWB3YFuW6ttnZjCnEy39z7PwGuKtITSoX2NwEe0GjdtWG2GYLPpoKI7jvpQHUnRReIRa2nfUhGD2ptA==}
+  /webtorrent@2.1.17:
+    resolution: {integrity: sha512-j9zd9hZeAQeWeJPJy20cO1GX6GUc/mrtt136IQzFQy42u8v1NeXBwdqdyrtqrxorZvBC9rBw1/o9AiC+/pI+nA==}
     engines: {node: '>=14'}
     dependencies:
       '@silentbot1/nat-api': 0.4.7

src/background/background.js

@@ -58,7 +58,8 @@ class TorrentClient extends WebTorrent {
     })
     this.dispatch('files', files)
     this.dispatch('magnet', { magnet: torrent.magnetURI, hash: torrent.infoHash })
-    this.dispatch('torrent', Array.from(torrent.torrentFile))
+    // this will cause errors when only the renderer refreshes, and not the background process, but it's not an issue, for now
+    this.dispatch('torrent', torrent.torrentFile, [torrent.torrentFile.buffer])
   }
 
   _scrape ({ id, infoHashes }) {
@@ -100,9 +101,9 @@ class TorrentClient extends WebTorrent {
             this.parseFonts(this.current)
             this.current.on('stream', (_, cb) => {
               if (!this.parsed) {
-                const parser = new SubtitleStream(this.metadata)
-                this.handleSubtitleParser(parser, true)
-                cb(parser)
+                this.stream = new SubtitleStream(this.stream)
+                this.handleSubtitleParser(this.stream, true)
+                cb(this.stream)
               }
             })
           }
@@ -138,8 +139,8 @@ class TorrentClient extends WebTorrent {
     }
   }
 
-  dispatch (type, data) {
-    message({ type, data })
+  dispatch (type, data, transfer) {
+    message({ type, data }, transfer)
   }
 
   parseSubtitles () {
@@ -165,9 +166,11 @@ class TorrentClient extends WebTorrent {
 
   cancelParse () {
     this.parser?.destroy()
+    this.stream?.destroy()
     this.metadata?.destroy()
     this.metadata = undefined
     this.parser = undefined
+    this.stream = undefined
   }
 
   parseFonts (file) {
@@ -202,7 +205,8 @@ class TorrentClient extends WebTorrent {
       })
       parser.on('file', file => {
         if (file.mimetype === 'application/x-truetype-font' || file.mimetype === 'application/font-woff' || file.mimetype === 'application/vnd.ms-opentype' || file.mimetype === 'font/sfnt' || file.mimetype.startsWith('font/') || file.filename.toLowerCase().endsWith('.ttf')) {
-          this.dispatch('file', { mimetype: file.mimetype, data: Array.from(file.data) })
+          const data = Buffer.from(file.data)
+          this.dispatch('file', { mimetype: file.mimetype, data }, [data.buffer])
         }
       })
     }
@@ -211,8 +215,7 @@ class TorrentClient extends WebTorrent {
   predestroy () {
     this.destroy()
     this.server.close()
-    this.parser?.destroy()
-    this.parser = undefined
+    this.cancelParse()
   }
 }
 
@@ -221,11 +224,10 @@ let message = null
 
 ipcRenderer.on('port', (e) => {
   e.ports[0].onmessage = ({ data }) => {
-    const cloned = structuredClone(data)
-    if (!client && cloned.type === 'settings') window.client = client = new TorrentClient(cloned.data)
-    if (cloned.type === 'destroy') client?.predestroy()
+    if (!client && data.type === 'settings') window.client = client = new TorrentClient(data.data)
+    if (data.type === 'destroy') client?.predestroy()
 
-    client.handleMessage({ data: cloned })
+    client.handleMessage({ data })
   }
   message = e.ports[0].postMessage.bind(e.ports[0])
 })

src/renderer/modules/themes.js

@@ -0,0 +1,13 @@
+import { append, element } from 'svelte/internal'
+import { writable } from 'simple-store-svelte'
+
+const style = element('style')
+style.id = 'customThemes'
+append(document.head, style)
+
+export const variables = writable(localStorage.getItem('theme') || '')
+
+variables.subscribe(value => {
+  localStorage.setItem('theme', value)
+  style.textContent = `:root{${value}}`
+})

src/renderer/modules/torrent.js

@@ -21,10 +21,10 @@ class TorrentWorker extends EventTarget {
     this.emit(data.type, data.data)
   }
 
-  async send (type, data) {
+  async send (type, data, transfer) {
     await this.ready
     console.info('Torrent: sending message', { type, data })
-    this.port.postMessage({ type, data })
+    this.port.postMessage({ type, data }, transfer)
   }
 }
 
@@ -49,21 +49,25 @@ export async function add (torrentID, hide) {
     if (typeof torrentID === 'string' && !torrentID.startsWith('magnet:')) {
       // IMPORTANT, this is because node's get bypasses proxies, wut????
       const res = await fetch(torrentID)
-      torrentID = Array.from(new Uint8Array(await res.arrayBuffer()))
+      torrentID = new Uint8Array(await res.arrayBuffer())
+      client.send('torrent', torrentID, [torrentID.buffer])
+    } else {
+      client.send('torrent', torrentID)
     }
-    client.send('torrent', torrentID)
   }
 }
 
 client.on('torrent', ({ detail }) => {
-  localStorage.setItem('torrent', JSON.stringify(detail))
+  localStorage.setItem('torrent', JSON.stringify([...detail]))
 })
 
 // load last used torrent
 queueMicrotask(() => {
   setTimeout(() => {
-    if (localStorage.getItem('torrent')) {
-      if (!files.length) client.send('torrent', JSON.parse(localStorage.getItem('torrent')))
+    const torrent = localStorage.getItem('torrent')
+    if (torrent) {
+      const data = new Uint8Array(JSON.parse(torrent))
+      if (!files.length) client.send('torrent', data, [data.buffer])
     }
   }, 1000)
 })

src/renderer/views/Player/Player.svelte

@@ -572,10 +572,9 @@
   function resetImmerse () {
     if (immerseTimeout) {
       clearTimeout(immerseTimeout)
-    } else {
-      immersed = false
     }
-    immerseTimeout = setTimeout(immersePlayer, 8 * 1000)
+    immersed = false
+    immerseTimeout = setTimeout(immersePlayer, (paused ? 8 : 1) * 1000)
   }
 
   function hideBuffering () {
@@ -966,7 +965,7 @@
   <div class='bottom d-flex z-40 flex-column px-20'>
     <div class='w-full d-flex align-items-center h-20 mb-5 seekbar'>
       <Seekbar
-        accentColor={'#e5204c'}
+        accentColor='var(--accent-color)'
         class='font-size-20'
         length={safeduration}
         {buffer}

src/renderer/views/Settings.svelte

@@ -95,6 +95,7 @@
   import { Tabs, TabLabel, Tab } from '../components/Tabination.js'
   import FontSelect from '../components/FontSelect.svelte'
   import { onDestroy } from 'svelte'
+  import { variables } from '@/modules/themes.js'
 
   onDestroy(() => {
     window.IPC.off('path')
@@ -544,6 +545,13 @@
             <input type='checkbox' id='disable-sidebar' bind:checked={settings.expandingSidebar} />
             <label for='disable-sidebar'>Enable Sidebar Animations</label>
           </div>
+          <div class='form-group mb-10 pl-10 font-size-16 w-500'
+            data-toggle='tooltip'
+            data-placement='bottom'
+            data-title='CSS Variables Used For Custom Themes'>
+            <label for='css-variables'>CSS Variables</label>
+            <textarea class='form-control' id='css-variables' placeholder='--accent-color: #e5204c;' bind:value={$variables} />
+          </div>
         </div>
       </Tab>
       <Tab>