refactor: improvements and fixes for jassub rendering

Author: seanmcbroom

frontend/src/components/Playback/PlayerElement.vue

@@ -4,27 +4,29 @@
       :to="videoContainerRef"
       :disabled="!videoContainerRef"
       defer>
-      <Component
-        :is="mediaElementType"
-        v-show="mediaElementType === 'video' && videoContainerRef"
-        ref="mediaElementRef"
-        :poster="String(posterUrl)"
-        autoplay
-        crossorigin
-        playsinline
-        :loop="playbackManager.isRepeatingOnce"
-        :class="{ 'uno-object-fill': playerElement.isStretched.value }"
-        @loadeddata="onLoadedData">
-        <track
-          v-for="sub in playbackManager.currentItemVttParsedSubtitleTracks"
-          :key="`${playbackManager.currentSourceUrl}-${sub.srcIndex}`"
-          kind="subtitles"
-          :label="sub.label"
-          :srclang="sub.srcLang"
-          :src="sub.src">
-      </Component>
-      <SubtitleTrack
-        v-if="subtitleSettings.state.enabled && playerElement.currentExternalSubtitleTrack?.parsed !== undefined" />
+      <div class="uno-my-auto">
+        <Component
+          :is="mediaElementType"
+          v-show="mediaElementType === 'video' && videoContainerRef"
+          ref="mediaElementRef"
+          :poster="String(posterUrl)"
+          autoplay
+          crossorigin
+          playsinline
+          :loop="playbackManager.isRepeatingOnce"
+          :class="{ 'uno-object-fill': playerElement.isStretched.value, 'uno-max-h-100vh': true}"
+          @loadeddata="onLoadedData">
+          <track
+            v-for="sub in playbackManager.currentItemVttParsedSubtitleTracks"
+            :key="`${playbackManager.currentSourceUrl}-${sub.srcIndex}`"
+            kind="subtitles"
+            :label="sub.label"
+            :srclang="sub.srcLang"
+            :src="sub.src">
+        </Component>
+        <SubtitleTrack
+          v-if="subtitleSettings.state.enabled && playerElement.currentExternalSubtitleTrack?.parsed !== undefined" />
+      </div>
     </Teleport>
   </template>
 </template>

frontend/src/store/player-element.ts

@@ -124,13 +124,21 @@ class PlayerElementStore extends CommonStore<PlayerElementState> {
       && mediaElementRef.value
       && mediaElementRef.value instanceof HTMLVideoElement
     ) {
+      const hasAttachedFonts = !isNil(attachedFonts) && attachedFonts.length !== 0;
+
       this._jassub = new JASSUB({
         video: mediaElementRef.value,
         subUrl: trackSrc,
-        fonts: attachedFonts,
+        ...(hasAttachedFonts
+          ? {
+              fonts: attachedFonts
+            }
+          : {
+              useLocalFonts: true
+            }),
+        fallbackFont: DEFAULT_TYPOGRAPHY,
         workerUrl: jassubWorker,
         wasmUrl: jassubWasmUrl,
-        fallbackFont: DEFAULT_TYPOGRAPHY,
         // Both parameters needed for subs to work on iOS
         prescaleFactor: 0.8,
         onDemandRender: false,