feat(web): improve hero on firefox, improve FAQ

capacitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "capacitor",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "private": true,
   "scripts": {
     "build:native": "cd public/nodejs/ && npm install && docker build -t android-build:latest . && docker run -v ${PWD}:/app/ -it android-build:latest /bin/bash /app/setup-deps.sh",

common/modules/webtorrent.js

@@ -217,7 +217,7 @@ export default class TorrentClient extends WebTorrent {
     if (this.torrents.length) await this.remove(this.torrents[0])
     const torrent = await this.add(data, {
       private: this.settings.torrentPeX,
-      path: this.torrentPath,
+      path: this.torrentPath || undefined,
       destroyStoreOnDestroy: !this.settings.torrentPersist,
       skipVerify,
       announce

common/types.d.ts

@@ -36,6 +36,16 @@ declare global {
   interface ScreenOrientation {
     lock: Function
   }
+
+  namespace svelteHTML {
+    interface HTMLAttributes {
+      'on:leavepictureinpicture'?: (
+        event: Event<{
+          target: EventTarget;
+        }>
+      ) => void;
+    }
+  }
 }
 
 declare module '*.svelte' {

common/views/Player/Player.svelte

@@ -188,7 +188,7 @@
         watchedListener = ({ detail }) => {
           checkCompletionByTime(detail, duration)
         }
-        client.addEventListener('externalWatched', watchedListener)
+        client.on('externalWatched', watchedListener)
       }
     }
   }

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "private": true,
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",

package.json

@@ -30,7 +30,7 @@
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.2",
-    "webtorrent": "^2.1.37"
+    "webtorrent": "^2.2.1"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240222.0",

pnpm-lock.yaml

@@ -51,8 +51,8 @@ importers:
         specifier: ^5.0.2
         version: 5.0.2(webpack-cli@5.1.4)(webpack@5.90.3)
       webtorrent:
-        specifier: ^2.1.37
+        specifier: ^2.2.1
-        version: 2.1.37
+        version: 2.2.1
     devDependencies:
       '@cloudflare/workers-types':
         specifier: ^4.20240222.0
@@ -2183,13 +2183,8 @@ packages:
     dependencies:
       dequal: 2.0.3
 
-  /b4a@1.6.4:
-    resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
-    dev: true
-
   /b4a@1.6.6:
     resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
-    dev: false
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -2357,8 +2352,8 @@ packages:
       - supports-color
     dev: false
 
-  /bittorrent-tracker@11.0.1:
+  /bittorrent-tracker@11.0.2:
-    resolution: {integrity: sha512-WDvixbEkLgnEeVk8iiF2/LwB2zsuxehir3wBFkHskB/LvYE4HQI+6RoWPHjwGqi9POPJdeOnSPFa8pZvB0Bd8A==}
+    resolution: {integrity: sha512-MUv1zqWd1OZKPkgncj9JkpumhtF2Q+xeHptz8rJz+APK5/ZIAOIiHyLqDmoDL06JMa1iHPmeOlJG8I5Hi1UIbw==}
     engines: {node: '>=12.20.0'}
     hasBin: true
     dependencies:
@@ -4726,8 +4721,8 @@ packages:
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
-  /fsa-chunk-store@1.1.4:
+  /fsa-chunk-store@1.1.5:
-    resolution: {integrity: sha512-Z4SJTYxZIta37RXJofM6HsKrgM9W+pQxiyQuw0bpvsfn1HGXcBWyXZWhsCfi7wbNb6GIlykXZ9Jxwc95IiPMzA==}
+    resolution: {integrity: sha512-+3G6d/syYrw4tGJCivHWjtTKNeP7rOXfX1wgnwzsu81CVHKVOah74XxGdlRHRrMTN5dU15lWbnhgtRsBop3V5A==}
     dependencies:
       filename-reserved-regex: 3.0.0
     dev: false
@@ -5271,12 +5266,12 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
-  /hybrid-chunk-store@1.2.2:
+  /hybrid-chunk-store@1.2.4:
-    resolution: {integrity: sha512-oZtxLfVHWKVKPS8KoYpWgVohEKbq3s90s7a1FwG7+EZFC/8bqZrdX4axlH5tO/g2PnGpZTVxS2YnftyCpydKSw==}
+    resolution: {integrity: sha512-wLVIU7rDAz0bQ9sOVwqNWV44A+yAitm+yw66vilkIhZ7V1lVQtiZBQ98YF4vr8rmbqnysgW+pW/PZ1UQtnQCCA==}
     dependencies:
       '@thaunknown/idb-chunk-store': 1.0.2
       cache-chunk-store: 3.2.2
-      fsa-chunk-store: 1.1.4
+      fsa-chunk-store: 1.1.5
       memory-chunk-store: 1.3.5
     dev: false
 
@@ -8504,7 +8499,7 @@ packages:
   /tar-stream@3.1.6:
     resolution: {integrity: sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==}
     dependencies:
-      b4a: 1.6.4
+      b4a: 1.6.6
       fast-fifo: 1.3.2
       streamx: 2.16.1
     dev: true
@@ -8667,13 +8662,13 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  /torrent-discovery@11.0.1:
+  /torrent-discovery@11.0.2:
-    resolution: {integrity: sha512-+QhOUWRxhR8Y6e5z5I0qil812q11Xz9Yaj1pfYwVkereTBQT1THBCeSHxWZEHuGjKLiIBueVzPP7+wiPtedXKg==}
+    resolution: {integrity: sha512-oDpBMfSsrIGAM4TzZFMwdyFqD2GLFSZXw/IHojB8TpVPqrwXO3hOpfLqM5MOVEtr43+pTGLjULXLFihrh06X7A==}
     engines: {node: '>=12.20.0'}
     dependencies:
       bittorrent-dht: 11.0.5
       bittorrent-lsd: 2.0.0
-      bittorrent-tracker: 11.0.1
+      bittorrent-tracker: 11.0.2
       debug: 4.3.4
       run-parallel: 1.2.0
     transitivePeerDependencies:
@@ -9342,8 +9337,8 @@ packages:
     resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
     engines: {node: '>=0.8.0'}
 
-  /webtorrent@2.1.37:
+  /webtorrent@2.2.1:
-    resolution: {integrity: sha512-phvPd+f0aSa2CH0woeQqym8VqljHs1quXyBIJQoVQjCVsx3BleZ98StyoWy6FafF2ML6khWfOYn2rJC9nN6msA==}
+    resolution: {integrity: sha512-dK9AI0kKHl6VrSCzCSdy8EUqNrjsIHfLCcMsObMZe9mEsetJYuLsA8ZI6exxwpbyiOlsa920TNYNbSqP0/v/6w==}
     engines: {node: '>=14'}
     dependencies:
       '@silentbot1/nat-api': 0.4.7
@@ -9361,7 +9356,7 @@ packages:
       debug: 4.3.4
       escape-html: 1.0.3
       fs-chunk-store: 4.1.0
-      hybrid-chunk-store: 1.2.2
+      hybrid-chunk-store: 1.2.4
       immediate-chunk-store: 2.2.0
       join-async-iterator: 1.1.1
       load-ip-set: 3.0.1
@@ -9379,7 +9374,7 @@ packages:
       speed-limiter: 1.0.2
       streamx: 2.16.1
       throughput: 1.0.1
-      torrent-discovery: 11.0.1
+      torrent-discovery: 11.0.2
       torrent-piece: 3.0.0
       uint8-util: 2.2.4
       unordered-array-remove: 1.0.2

web/src/lib/components/EpisodeList.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script>
   import { since } from '@/modules/util'
 
   export let userProgress = 0

web/src/lib/components/Hero.svelte

@@ -1,9 +1,10 @@
 <script>
+  /** @type {HTMLDivElement} */
   let hero
   function about () {
-    document.querySelector('#about').scrollIntoView({ behavior: 'smooth', block: 'center' })
+    document.querySelector('#about')?.scrollIntoView({ behavior: 'smooth', block: 'center' })
     setTimeout(() => {
-      hero.parentNode.dispatchEvent(new PointerEvent('pointerup'))
+      hero.parentNode?.dispatchEvent(new PointerEvent('pointerup'))
     }, 500)
   }
 </script>

web/src/lib/css.css

@@ -18,4 +18,14 @@ hr {
 .app-image {
   aspect-ratio: 2/1;
   object-fit: contain;
+}
+
+@-moz-document url-prefix() {
+  .ghost {
+    text-shadow:
+    0.6px 0.6px 0 #3a3a3a,
+    -0.6px 0.6px 0 #3a3a3a,
+    -0.6px -0.6px 0 #3a3a3a,
+    0.6px -0.6px 0 #3a3a3a !important;
+  }
 }

web/src/routes/faq/+page.svelte

@@ -7,8 +7,12 @@
     <p>No. See above. The miniplayer provides feedback that something is happening in the background. Closing it would make the user feel like the app is lagging [because it's maxing out your internet in the background by torrenting] when nothing is happening.</p>
     <h3 class='text-white font-weight-bold'>Can I reduce the upload speed?</h3>
     <p>No. See above. This app is also meant to seed the torrents the user downloads, if you want freeleech go to some private tracker.</p>
+    <h3 class='text-white font-weight-bold'>Does Miru stream the video or does it store it?</h3>
+    <p>Miru only stores 1 torrent on your drive, unless <kbd>Persist Files</kbd> is enabled in settings. It doesn't stream the content as it also needs to seed the data it downloads to keep the swarm alive. It's important to note that it stores 1 torrent, not 1 video. A single torrent can sometimes consist of many video files, and as such take up a lot of space.</p>
+    <h3 class='text-white font-weight-bold'>I have an existing media library, can Miru import it?</h3>
+    <p>No. Miru does not scan libraries like Plex or Jellyfin. You can however specify Miru's <kbd>Torrent Download Location</kbd> in settings, and if you pick torrents which are already in the selected folder, Miru will use them without re-download them. Make sure that <kbd>Persis Files</kbd> is enabled, or Miru will delete content that was already watched.</p>
     <h3 class='text-white font-weight-bold'>Is this safe?</h3>
-    <p>I recommend you read the <a href='https://thewiki.moe/getting-started/torrenting/' target='_blank'>guide about basics of piracy</a>.</p>
+    <p>It's recommended that you read the <a href='https://thewiki.moe/getting-started/torrenting/' target='_blank'>guide about basics of torrenting</a>.</p>
     <h3 class='text-white font-weight-bold'>Will this replace streaming sites?</h3>
     <p>Not really. The underlying source of video are still torrents, which aren't always seeded, so anime that's a few years old might not play back smoothly.</p>
     <h3 class='text-white font-weight-bold'>Can I log in with MAL?</h3>
@@ -18,7 +22,7 @@
     <ul>
       <li>the anime isn't seeded</li>
       <li>your download speed isn't fast enough</li>
-      <li>your ISP blocks Torrenting, see <a href='https://thewiki.moe/en/tutorials/unblock' target='_blank'>this tutorial</a> for a potential fix, or simply use a VPN</li>
+      <li>your ISP blocks Torrenting, see <a href='https://thewiki.moe/tutorials/unblock/' target='_blank'>this tutorial</a> for a potential fix, or simply use a VPN</li>
       <li>the app couldn't find a matching torrent for the anime</li>
     </ul>
     <h3 class='text-white font-weight-bold'>I selected an episode to play, but Miru plays something else!</h3>
@@ -26,13 +30,13 @@
     <h3 class='text-white font-weight-bold'>Can I play my own torrents?</h3>
     <p>Yes. For the home menu you can specify a different RSS feed to check when the app looks for new releases. Additionally you can just paste/drag-drop a torrent file/magnet link anywhere when using the app, and it will try it's best to auto-detect what anime is playing.</p>
     <h3 class='text-white font-weight-bold'>Can I change what tracker torrents are found from?</h3>
-    <p>Not really. No other tracker has the kind of API/search functionality which is required, which Miru uses to the fullest extent to make sure it finds the torrents it's looking for without false-positives.</p>
+    <p>Yes. If you find other community made extensions, you can import them in the app settings, however there is no curated list of community made extensions.</p>
     <h3 class='text-white font-weight-bold'>How is this different from sequential qBit?</h3>
     <p>Unlike qBit's sequential, this will prioritise downloading torrent pieces directly needed for playback, which with the user seeking isn't always just sequential.</p>
-    <h3 class='text-white font-weight-bold'>Why Electron?</h3>
+    <h3 class='text-white font-weight-bold'>Why is it a native app, not a website?</h3>
-    <p>Electron has node.js integration, which can use TCP/UDP, that is the only reason. Browsers can't access TCP/UDP which means they can't access the global BT swarm.</p>
+    <p>The BitTorrent protocol requires TCP/UDP to function, that is the only reason. Browsers can't access TCP/UDP which means they can't access the global BitTorrent swarm.</p>
-    <p>&gt; Can't you make this just use WebRTC?</p>
+    <h5 class='text-white font-weight-bold'>&gt; Can't you make this just use WebRTC?</h5>
-    <p>Yes. A BitTorrent implementation which uses WebRTC exists, but it's not yet adopted by any clients, and libtorrent [the library which qBit and others use] is still working/just added support for WebRTC, which means there's no swarm. This will hopefully change in the future.</p>
+    <p>Yes. A BitTorrent implementation which uses WebRTC exists, but it's not yet adopted by any clients, and libtorrent [the library which qBit and others use] is still working on/just added support for WebRTC, which means there's no global swarm. This will hopefully change in the future.</p>
     <h3 class='text-white font-weight-bold'>Miru crashed too many times.</h3>
     <p>This is likely because Miru updated from a very old version to a very new one. Uninstall Miru, go to <kbd>%appdata%/miru</kbd> remove all files and re-install it. If this issue persists visit the Discord for help.</p>
   </div>