From f3a68368b07f3f91b6e5c719e09e265f9da0c4c1 Mon Sep 17 00:00:00 2001
From: seanmcbroom <sean.mcbroom@outlook.com>
Date: Tue, 10 Sep 2024 23:35:21 -0500
Subject: [PATCH] refactor: improvements and fixes for jassub rendering

---
 .../src/components/Playback/PlayerElement.vue | 44 ++++++++++---------
 frontend/src/store/player-element.ts          | 12 ++++-
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 13d5d5af3b4..e7ca4eb0e9e 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/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>
diff --git a/frontend/src/store/player-element.ts b/frontend/src/store/player-element.ts
index 987bc6143f6..aded6611888 100644
--- a/frontend/src/store/player-element.ts
+++ b/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,