fix: RSS url including illegal chars, closing modals with ESC and by clicking whitespace, disabled offscreenRendering on subtitles for PiP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "homepage": "https://github.com/ThaUnknown/miru#readme",

src/renderer/src/lib/RSSView.svelte

@@ -64,7 +64,7 @@
     let titles = []
     for (const t of grouped) {
       // replace & with encoded
-      let title = t.replace(/&/g, '%26')
+      let title = t.replace(/&/g, '%26').replace(/\?/g, '%3F').replace(/#/g, '%23')
       titles.push(title)
 
       // replace Season 2 with S2, else replace 2nd Season with S2, but keep the original title
@@ -172,6 +172,9 @@
   function close() {
     table = null
   }
+  function checkClose({ keyCode }) {
+    if (keyCode == 27) close()
+  }
   function play(entry) {
     updateMedia(fileMedia)
     if (entry.seeders !== '?' && entry.seeders <= 15) {
@@ -186,9 +189,9 @@
   }
 </script>
 
-<div class="modal" class:show={table} id="viewAnime" tabindex="-1" role="dialog">
+<div class="modal" class:show={table} id="viewAnime" on:keydown={checkClose} tabindex="-1">
   {#if table}
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document" on:click|self={close}>
       <div class="modal-content w-auto">
         <button class="close pointer" type="button" on:click={close}>
           <span>&times;</span>
@@ -223,3 +226,14 @@
     </div>
   {/if}
 </div>
+
+<style>
+  .trailer {
+    padding-bottom: 56.25%;
+  }
+  .close {
+    top: 1rem !important;
+    left: unset;
+    right: 2.5rem !important;
+  }
+</style>

src/renderer/src/lib/ViewAnime.svelte

@@ -70,7 +70,7 @@
   }
 </script>
 
-<div class="modal modal-full" class:show={$view} on:keydown={checkClose}>
+<div class="modal modal-full" class:show={$view} on:keydown={checkClose} tabindex="-1">
   {#if $view}
     <div class="h-full modal-content bg-very-dark p-0 overflow-y-auto">
       <button class="d-flex justify-content-center align-items-center close pointer z-30 bg-dark shadow-lg border top-20 right-0" type="button" on:click={close}>
@@ -136,7 +136,10 @@
                         close()
                       }}>
                       <span class="material-icons mr-10 font-size-24 w-30"> play_arrow </span>
-                      <span>{$view.mediaListEntry?.progress ? 'Continue ' + (Math.min($view.episodes || $view.nextAiringEpisode?.episode, $view.mediaListEntry?.progress + 1)) : 'Play'}</span>
+                      <span
+                        >{$view.mediaListEntry?.progress
+                          ? 'Continue ' + Math.min($view.episodes || $view.nextAiringEpisode?.episode, $view.mediaListEntry?.progress + 1)
+                          : 'Play'}</span>
                     </button>
                     {#if alToken && $view.mediaListEntry?.status !== 'CURRENT' && $view.mediaListEntry?.status !== 'COMPLETED'}
                       <button class="btn d-flex align-items-center mb-5 font-weight-bold font-size-16 btn-primary" on:click={() => addToList($view)}>

src/renderer/src/lib/ViewTrailer.svelte

@@ -10,9 +10,9 @@
   }
 </script>
 
-<div class="modal" class:show={$url} on:keydown={checkClose}>
+<div class="modal" class:show={$url} on:keydown={checkClose} tabindex="-1">
   {#if $url}
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document" on:click|self={close}>
       <div class="modal-content w-three-quarter h-full bg-transparent d-flex justify-content-center flex-column">
         <button class="d-flex justify-content-center align-items-center close pointer z-30 bg-dark shadow-lg border top-20 right-0" type="button" on:click={close}>
           <span>×</span>

src/renderer/src/modules/subtitles.js

@@ -122,7 +122,8 @@ export default class Subtitles {
         video: this.video,
         subContent: this.headers[this.current].header.slice(0, -1),
         fonts: this.fonts,
-        workerUrl: 'lib/subtitles-octopus-worker.js'
+        workerUrl: 'lib/subtitles-octopus-worker.js',
+        offscreenRender: false
       }
       this.renderer = new SubtitlesOctopus(options)
       this.selectCaptions(this.current)