fix: every subtitle track is loaded and extracted at the same time, regardless of use

aminnausin · aminnausin · commit 0efa3aa9050d · 2026-01-24T13:59:30.000-05:00
diff --git a/resources/js/components/video/VideoPlayer.vue b/resources/js/components/video/VideoPlayer.vue
@@ -1169,12 +1169,10 @@ defineExpose({
             controlsList="nodownload"
         >
             <track
-                v-for="track in stateVideo.subtitles"
-                :key="track.id"
                 kind="captions"
-                :label="track.language"
-                :srclang="track.language"
-                :src="`/data/subtitles/${track.metadata_uuid}/${track.track_id}${track.track_id === 0 ? `.${track.language}` : ''}`"
+                :label="playerSubtitles?.currentSubtitleTrack?.language ?? 'und'"
+                :srclang="playerSubtitles?.currentSubtitleTrack?.language ?? 'und'"
+                :src="playerSubtitles?.currentSubtitleTrackUrl"
             />
             Your browser does not support the video tag.
         </video>
@@ -1657,7 +1655,7 @@ video::cue {
 
     /* Incompatible with Firefox */
     video::-webkit-media-text-track-container {
-        font-size: clamp(90%, calc(var(--subtitle-font-size, 100%) * var(--subtitle-font-multiplier, 1)), 240%) !important;
+        font-size: calc(var(--subtitle-font-size, 100%) * var(--subtitle-font-multiplier, 1)) !important;
     }
 
     /* Incompatible with Firefox */
diff --git a/resources/js/components/video/subtitles/PlayerSubtitles.vue b/resources/js/components/video/subtitles/PlayerSubtitles.vue
@@ -3,7 +3,7 @@ import type { SubtitleResource } from '@/types/resources';
 import type { PopoverItem } from '@aminnausin/cedar-ui';
 import type { Ref } from 'vue';
 
-import { computed, inject, ref, useTemplateRef } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef } from 'vue';
 import { useContentStore } from '@/stores/ContentStore';
 import { storeToRefs } from 'pinia';
 import { round } from 'lodash-es';
@@ -34,6 +34,8 @@ const props = defineProps<PlayerSubtitlesProps>();
 
 //#region Local State
 const currentSubtitleTrack = ref<SubtitleResource>();
+const currentSubtitleTrackUrl = computed<string>(() => buildSubtitleUrl(currentSubtitleTrack.value));
+
 const isShowingSubtitles = ref(false);
 const subtitleSizeMultiplier = ref(1);
 const subtitleSizeMin = 0.5;
@@ -88,12 +90,9 @@ const defaultSubtitleTrack = computed<SubtitleResource | undefined>(() => {
 });
 
 const handleSizeChange = (_: Event, dir: number = 0) => {
-    if (dir) {
-        subtitleSizeMultiplier.value = round(
-            Math.max(Math.min(Number.parseFloat(`${subtitleSizeMultiplier.value}`) + subtitleSizeDelta * dir, subtitleSizeMax), subtitleSizeMin),
-            2,
-        );
-    }
+    if (dir === 0) return;
+
+    subtitleSizeMultiplier.value = round(Math.max(Math.min(Number.parseFloat(`${subtitleSizeMultiplier.value}`) + subtitleSizeDelta * dir, subtitleSizeMax), subtitleSizeMin), 2);
 };
 
 const handleSizeWheel = (event: WheelEvent) => {
@@ -105,11 +104,12 @@ const handleSizeWheel = (event: WheelEvent) => {
 //#endregion
 
 //#region Functions
+
 /**
  * Handle Subtitles Toggle
  * @param track -> Defaults to first available subtitle only if not currently showing anything
  */
-const handleSubtitles = (track?: SubtitleResource) => {
+const handleSubtitles = async (track?: SubtitleResource) => {
     const nextTrack = track ?? (isShowingSubtitles.value ? undefined : defaultSubtitleTrack.value);
 
     isShowingSubtitles.value = !!nextTrack;
@@ -130,11 +130,13 @@ const handleSubtitles = (track?: SubtitleResource) => {
         const languageTag = nextTrack.track_id === 0 ? `.${nextTrack.language}` : '';
         instantiateOctopus(`/data/subtitles/${nextTrack.metadata_uuid}/${nextTrack.track_id}${languageTag}.ass`);
         hideAllTracks();
-    } else {
-        clearOctopus();
-        for (const textTrack of player.value.textTracks) {
-            textTrack.mode = isShowingSubtitles.value && textTrack.language === currentSubtitleTrack.value?.language ? 'showing' : 'hidden';
-        }
+        return;
+    }
+    clearOctopus();
+    await nextTick();
+    for (const textTrack of player.value.textTracks) {
+        textTrack.mode = isShowingSubtitles.value ? 'showing' : 'hidden';
+        console.log('enabled track', textTrack);
     }
 };
 
@@ -155,14 +157,25 @@ const hideAllTracks = () => {
         textTrack.mode = 'hidden';
     }
 };
+
+const buildSubtitleUrl = (subtitle?: SubtitleResource): string => {
+    if (!subtitle) return '';
+
+    const { metadata_uuid, track_id, language, codec } = subtitle;
+    const languageSlug = track_id === 0 ? `.${language}` : '';
+    const extension = codec === 'ass' ? '.ass' : '.vtt';
+    return `/data/subtitles/${metadata_uuid}/${track_id}${languageSlug}${extension}`;
+};
+
 //#endregion
 defineExpose({
     handleSubtitles,
     clearSubtitles,
     resizeOctopus,
     isShowingSubtitles,
-    currentSubtitleTrack,
     defaultSubtitleTrack,
+    currentSubtitleTrack,
+    currentSubtitleTrackUrl,
     subtitleSizeMultiplier,
     subtitlesPopover,
 });
