wait untill subtitles are loaded before picking one for reenabling

src/components/player/hooks/useCaptions.ts

@@ -24,6 +24,9 @@ export function useCaptions() {
   const setIsOpenSubtitles = useSubtitleStore((s) => s.setIsOpenSubtitles);
 
   const captionList = usePlayerStore((s) => s.captionList);
+  const isLoadingExternalSubtitles = usePlayerStore(
+    (s) => s.isLoadingExternalSubtitles,
+  );
   const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
   const source = usePlayerStore((s) => s.source);
   const selectedCaption = usePlayerStore((s) => s.caption.selected);
@@ -185,6 +188,9 @@ export function useCaptions() {
   useEffect(() => {
     if (!selectedCaption) return;
 
+    // Don't clear while external subtitles are still loading - the caption might appear
+    if (isLoadingExternalSubtitles) return;
+
     // Skip validation for custom/pasted captions that aren't in the caption list
     const isCustomCaption =
       selectedCaption.id === "custom-caption" ||
@@ -226,6 +232,7 @@ export function useCaptions() {
     setCaption,
     selectCaptionById,
     currentTranslateTask,
+    isLoadingExternalSubtitles,
   ]);
 
   return {

src/components/player/hooks/useInitializePlayer.ts

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { usePlayerStore } from "@/stores/player/store";
+import { useSubtitleStore } from "@/stores/subtitles";
 import { useVolumeStore } from "@/stores/volume";
 
 import { useCaptions } from "./useCaptions";
@@ -24,15 +25,51 @@ export function useInitializeSource() {
     () => (source ? JSON.stringify(source) : null),
     [source],
   );
+  const captionList = usePlayerStore((s) => s.captionList);
+  const isLoadingExternalSubtitles = usePlayerStore(
+    (s) => s.isLoadingExternalSubtitles,
+  );
+  const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
+  const enabled = useSubtitleStore((s) => s.enabled);
   const { selectLastUsedLanguageIfEnabled } = useCaptions();
 
-  // Only select subtitles on initial load, not when source changes
-  const hasInitializedRef = useRef(false);
+  // Trigger re-run when HLS tracks may have loaded (they load after manifest)
+  const [hlsRetryTrigger, setHlsRetryTrigger] = useState(0);
+  const hasRetriedForSourceRef = useRef<string | null>(null);
 
   useEffect(() => {
-    if (sourceIdentifier && !hasInitializedRef.current) {
-      hasInitializedRef.current = true;
-      selectLastUsedLanguageIfEnabled();
+    if (!sourceIdentifier || !enabled) return;
+
+    // Wait for external subtitles to finish loading before selecting
+    // This ensures we have the full caption list (provider + external) before picking
+    if (isLoadingExternalSubtitles) return;
+
+    const captions =
+      captionList.length > 0 ? captionList : (getHlsCaptionList?.() ?? []);
+    if (captions.length === 0) {
+      // For HLS sources, tracks may load after manifest - retry once per source
+      const alreadyRetried =
+        hasRetriedForSourceRef.current === sourceIdentifier;
+      if (source?.type === "hls" && !alreadyRetried) {
+        hasRetriedForSourceRef.current = sourceIdentifier;
+        const retryTimer = setTimeout(
+          () => setHlsRetryTrigger((n) => n + 1),
+          2000,
+        );
+        return () => clearTimeout(retryTimer);
+      }
+      return;
     }
-  }, [sourceIdentifier, selectLastUsedLanguageIfEnabled]);
+
+    selectLastUsedLanguageIfEnabled();
+  }, [
+    sourceIdentifier,
+    source?.type,
+    enabled,
+    isLoadingExternalSubtitles,
+    captionList,
+    getHlsCaptionList,
+    selectLastUsedLanguageIfEnabled,
+    hlsRetryTrigger,
+  ]);
 }