fix: subtitles sometimes not loading

fix: improve default subtitle style
fix: revert timestamp shadow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",
   "main": "src/index.js",

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

@@ -139,7 +139,8 @@
       completed = false
       current = file
       emit('current', current)
-      initSubs()
+      if (subs) subs.destroy()
+      subs = new Subtitles(video, files, current, handleHeaders)
       src = file.url
       client.send('current', file)
       await tick()
@@ -169,10 +170,6 @@
     }
   }
 
-  function initSubs () {
-    if (subs) subs.destroy()
-    subs = new Subtitles(video, files, current, handleHeaders)
-  }
   function cycleSubtitles () {
     if (current && subs?.headers) {
       const tracks = subs.headers.filter(header => header)
@@ -747,7 +744,7 @@
   // }
 
   // const isWindows = navigator.appVersion.includes('Windows')
-  let innerWidth, innerHeight
+  // let innerWidth, innerHeight
   const menubarOffset = 0
   // $: calcMenubarOffset(innerWidth, innerHeight, videoWidth, videoHeight)
   // function calcMenubarOffset (innerWidth, innerHeight, videoWidth, videoHeight) {
@@ -840,7 +837,7 @@
   }
 </script>
 
-<svelte:window bind:innerWidth bind:innerHeight />
+<!-- <svelte:window bind:innerWidth bind:innerHeight /> -->
 {#if showKeybinds && !miniplayer}
   <div class='position-absolute bg-tp w-full h-full z-50 font-size-12 p-20 d-flex align-items-center justify-content-center' on:click|self={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}>
     <button class='close' type='button' on:click={() => (showKeybinds = false)} on:keydown={wrapEnter(() => (showKeybinds = false))}><span>×</span></button>
@@ -895,6 +892,7 @@
     on:loadedmetadata={findChapters}
     on:loadedmetadata={autoPlay}
     on:loadedmetadata={checkAudio}
+    on:loadedmetadata={() => subs?.initSubtitleRenderer()}
     on:leavepictureinpicture={() => (pip = false)} />
   {#if stats}
     <div class='position-absolute top-0 bg-tp p-10 m-15 text-monospace rounded z-50'>
@@ -938,37 +936,6 @@
   </div>
   <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'>
-      <!-- <div class='w-full h-full position-relative d-flex align-items-center'>
-        <canvas class='position-absolute buffer w-full' height='1px' bind:this={bufferCanvas} />
-        <input
-          class='ctrl w-full h-full prog custom-range'
-          type='range'
-          min='0'
-          max='1'
-          step='any'
-          data-name='setProgress'
-          bind:value={throttledProgress}
-          on:mousedown={handleMouseDown}
-          on:mouseup={handleMouseUp}
-          on:mousemove={handleHover}
-          on:input={handleProgress}
-          on:touchstart={handleMouseDown}
-          on:touchend={handleMouseUp}
-          on:keydown|preventDefault />
-        <datalist class='d-flex position-absolute w-full'>
-          {#each chapters.slice(1) as chapter}
-            {@const value = chapter.start / 1000 / safeduration}
-            <option {value} style:left={value * 100 + '%'} class='position-absolute' />
-          {/each}
-        </datalist>
-        <div class='hover position-absolute d-flex flex-column align-items-center' bind:this={hover}>
-          <img alt='thumbnail' class='w-full mb-5 shadow-lg' src={thumbnail} />
-          {#if hoverChapter}
-            <div class='ts'>{hoverChapter.text}</div>
-          {/if}
-          <div class='ts'>{toTS(hoverTime)}</div>
-        </div>
-      </div> -->
       <Seekbar
         accentColor={'#e5204c'}
         class='font-size-20'
@@ -1348,7 +1315,6 @@
   .bottom .ts {
     color: #ececec;
     font-size: 2rem !important;
-    text-shadow: 0 0 4px rgb(0 0 0 / 75%);
     white-space: nowrap;
     align-self: center;
     line-height: var(--base-line-height);

src/renderer/src/modules/subtitles.js

@@ -6,9 +6,17 @@ import { set } from '@/lib/Settings.svelte'
 
 import { client } from '@/modules/torrent.js'
 
-const defaultHeader = `[V4+ Styles]
+const defaultHeader = `[Script Info]
+Title: English (US)
+ScriptType: v4.00+
+WrapStyle: 0
+PlayResX: 1280
+PlayResY: 720
+ScaledBorderAndShadow: yes
+
+[V4+ Styles]
 Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
-Style: Default, ${set.font?.name || 'Roboto Medium'},26,&H00FFFFFF,&H000000FF,&H00020713,&H00000000,0,0,0,0,100,100,0,0,1,1.3,0,2,20,20,23,1
+Style: Default, ${set.font?.name.toLowerCase() || 'Roboto Medium'},52,&H00FFFFFF,&H00FFFFFF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2.6,0,2,20,20,46,1
 [Events]
 
 `
@@ -43,7 +51,7 @@ export default class Subtitles {
     if (this.selected) {
       const uint8 = new Uint8Array(detail.data)
       this.fonts.push(uint8)
-      this.renderer.addFont(uint8)
+      this.renderer?.addFont(uint8)
     }
   }
 
@@ -55,7 +63,7 @@ export default class Subtitles {
         this._tracksString[trackNumber].add(string)
         const assSub = this.constructSub(subtitle, this.headers[trackNumber].type !== 'ass', this.tracks[trackNumber].length)
         this.tracks[trackNumber].push(assSub)
-        if (this.current === trackNumber) this.renderer.createEvent(assSub)
+        if (this.current === trackNumber) this.renderer?.createEvent(assSub)
       }
     }
   }
@@ -73,7 +81,6 @@ export default class Subtitles {
           this.onHeader()
         }
       }
-      this.initSubtitleRenderer()
       const tracks = this.headers?.filter(t => t)
       if (tracks?.length && set.subtitleLanguage) {
         if (tracks.length === 1) {
@@ -153,8 +160,10 @@ export default class Subtitles {
       }
       if (set.font) {
         options.availableFonts[set.font.name.toLowerCase()] = new Uint8Array(set.font.data)
+        this.fonts.push(new Uint8Array(set.font.data))
       }
       this.renderer = new JASSUB(options)
+      this.selectCaptions(this.current)
     }
   }
 
@@ -260,12 +269,12 @@ export default class Subtitles {
   }
 
   selectCaptions (trackNumber) {
-    if (trackNumber !== undefined) {
+    if (trackNumber != null) {
       this.current = Number(trackNumber)
       this.onHeader()
-      if (this.renderer && this.headers) {
+      if (this.headers) {
         const track = this.headers[this.current]
-        this.renderer.setTrack(this.current !== -1 ? this.headers[this.current].header.slice(0, -1) : defaultHeader)
+        this.renderer?.setTrack(this.current !== -1 ? this.headers[this.current].header.slice(0, -1) : defaultHeader)
         if (this.tracks[this.current]) {
           this._stylesMap = {
             Default: 0
@@ -275,7 +284,7 @@ export default class Subtitles {
             const style = styleMatches[i].replace('Style:', '').trim()
             this._stylesMap[style] = i + 1
           }
-          for (const subtitle of this.tracks[this.current]) this.renderer.createEvent(subtitle)
+          if (this.renderer) for (const subtitle of this.tracks[this.current]) this.renderer.createEvent(subtitle)
         }
       }
     }