fix: torrent modal not overlaying video player

fix: incorrectly reporting torrent download location
feat: card type setting
fix: nicer looking torrent errors
fix: throw error when no extensions are configured

common/modules/extensions/index.js

@@ -14,12 +14,13 @@ import { extensionsWorker } from '@/views/Settings/TorrentSettings.svelte'
  * @returns {Promise<(Result & { parseObject: import('anitomyscript').AnitomyResult })[]>}
  * **/
 export default async function getResultsFromExtensions ({ media, episode, batch, movie, resolution }) {
+  const worker = await /** @type {ReturnType<import('@/modules/extensions/worker.js').loadExtensions>} */(extensionsWorker)
+  if (!(await worker.metadata)?.length) throw new Error('No torrent sources configured. Add extensions in settings.')
+
   const aniDBMeta = await ALToAniDB(media)
   const anidbAid = aniDBMeta?.mappings?.anidb_id
   const anidbEid = anidbAid && (await ALtoAniDBEpisode({ media, episode }, aniDBMeta))?.anidbEid
 
-  const worker = await /** @type {ReturnType<import('@/modules/extensions/worker.js').loadExtensions>} */(extensionsWorker)
-
   /** @type {Options} */
   const options = {
     anilistId: media.id,
@@ -36,7 +37,7 @@ export default async function getResultsFromExtensions ({ media, episode, batch,
 
   const deduped = dedupe(results)
 
-  if (!deduped?.length) throw new Error('No results found')
+  if (!deduped?.length) throw new Error('No results found. Try specifying a torrent manually.')
 
   const parseObjects = await anitomyscript(deduped.map(({ title }) => title))
   // @ts-ignore

common/modules/util.js

@@ -147,7 +147,7 @@ export const defaults = {
   smoothScroll: true,
   cards: 'small',
   expandingSidebar: true,
-  torrentPath: undefined,
+  torrentPathNew: undefined,
   font: undefined,
   angle: 'default',
   toshoURL: SUPPORTS.extensions ? decodeURIComponent(atob('aHR0cHM6Ly9mZWVkLmFuaW1ldG9zaG8ub3JnLw==')) : '',

common/views/Settings/InterfaceSettings.svelte

@@ -37,7 +37,12 @@
 <SettingCard title='CSS Variables' description='Used for custom themes. Can change colors, sizes, spacing and more. Best way to discover variables is to use the built-in devtools via Ctrl+Shift+I or F12.'>
   <textarea class='form-control w-500 mw-full bg-dark' placeholder='--accent-color: #e5204c;' bind:value={$variables} />
 </SettingCard>
-
+<SettingCard title='Card Type' description='What type of cards to display in menus.'>
+  <select class='form-control bg-dark w-300 mw-full' bind:value={settings.cards}>
+    <option value='small' selected>Small</option>
+    <option value='full'>Full</option>
+  </select>
+</SettingCard>
 {#if SUPPORTS.angle}
   <h4 class='mb-10 font-weight-bold'>Rendering Settings</h4>
   <SettingCard title='ANGLE Backend' description="What ANGLE backend to use for rendering. DON'T CHANGE WITHOUT REASON! On some Windows machines D3D9 might help with flicker. Changing this setting to something your device doesn't support might prevent Miru from opening which will require a full reinstall. While Vulkan is an available option it might not be fully supported on Linux.">

common/views/Settings/Settings.svelte

@@ -77,7 +77,7 @@
     }
   }
   function pathListener (data) {
-    $settings.torrentPath = data
+    $settings.torrentPathNew = data
   }
 
   function playerListener (data) {

common/views/Settings/TorrentSettings.svelte

@@ -147,7 +147,7 @@
       <div class='input-group-prepend'>
         <button type='button' use:click={handleFolder} class='btn btn-primary input-group-append'>Select Folder</button>
       </div>
-      <input type='url' class='form-control bg-dark' readonly value={settings.torrentPath} placeholder='/tmp' />
+      <input type='url' class='form-control bg-dark' readonly value={settings.torrentPathNew} placeholder='/tmp' />
     </div>
   </SettingCard>
 {/if}

common/views/TorrentSearch/TorrentMenu.svelte

@@ -40,6 +40,7 @@
   import TorrentCard from './TorrentCard.svelte'
   import { add } from '@/modules/torrent.js'
   import TorrentSkeletonCard from './TorrentSkeletonCard.svelte'
+  import { onDestroy } from 'svelte'
 
   /** @type {{ media: Media, episode?: number }} */
   export let search
@@ -72,12 +73,14 @@
   $: lookup = sortResults(getResultsFromExtensions({ ...search, batch, movie, resolution }))
   $: best = getBest(lookup)
 
+  onDestroy(() => clearTimeout(timeoutHandle))
+
   $: if (!$settings.rssAutoplay) clearTimeout(timeoutHandle)
   $: autoPlay(best, $settings.rssAutoplay)
 
   $: lookup.catch(err => {
     console.error(err)
-    toast.error(`Couldn't find torrents for ${search.media.title.userPreferred} Episode ${search.episode}! Try specifying a torrent manually.\n${err.message}`)
+    toast.error(`No torrent found for ${search.media.title.userPreferred} Episode ${search.episode}!`, { description: err.message })
   })
 
   $: firstLoad = !firstLoad && lookup.catch(close)

common/views/TorrentSearch/TorrentModal.svelte

@@ -29,7 +29,7 @@
   $: search && modal?.focus()
 </script>
 
-<div class='modal z-40' class:show={search} id='viewAnime'>
+<div class='modal z-100' class:show={search} id='viewAnime'>
   {#if search}
     <div class='modal-dialog d-flex align-items-center px-md-15 pt-md-20' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
       <div class='modal-content m-0 mw-full h-full rounded overflow-hidden bg-very-dark d-flex flex-column overflow-y-scroll pt-0 px-0'>

electron/package.json

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

web/src/routes/+error.svelte

@@ -1,8 +1,7 @@
 <script>
   import { page } from '$app/stores'
-
-  console.log($page)
 </script>
+
 <div class='overflow-x-hidden content-wrapper h-full overflow-y-scroll position-relative d-flex justify-content-center align-items-center text-white font-weight-lighter line-height-11 px-15'>
   <div class='w-600 d-sm-flex justify-content-center align-items-center flex-row d-none'>
     <div class='fs-80 border-right pr-20'>{$page.status}</div>