Re-add auto captions

Co-authored-by: mrjvs <mistrjvs@gmail.com>

src/components/player/hooks/useCaptions.ts

@@ -46,10 +46,15 @@ export function useCaptions() {
     else await selectLastUsedLanguage();
   }, [selectLastUsedLanguage, disable, enabled]);
 
+  const selectLastUsedLanguageIfEnabled = useCallback(async () => {
+    if (enabled) await selectLastUsedLanguage();
+  }, [selectLastUsedLanguage, enabled]);
+
   return {
     selectLanguage,
     disable,
     selectLastUsedLanguage,
     toggleLastUsed,
+    selectLastUsedLanguageIfEnabled,
   };
 }

src/components/player/hooks/useInitializePlayer.ts

@@ -1,8 +1,10 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import { usePlayerStore } from "@/stores/player/store";
 import { useVolumeStore } from "@/stores/volume";
 
+import { useCaptions } from "./useCaptions";
+
 export function useInitializePlayer() {
   const display = usePlayerStore((s) => s.display);
   const volume = useVolumeStore((s) => s.volume);
@@ -15,3 +17,21 @@ export function useInitializePlayer() {
     init,
   };
 }
+
+export function useInitializeSource() {
+  const source = usePlayerStore((s) => s.source);
+  const sourceIdentifier = useMemo(
+    () => (source ? JSON.stringify(source) : null),
+    [source]
+  );
+  const { selectLastUsedLanguageIfEnabled } = useCaptions();
+
+  const funRef = useRef(selectLastUsedLanguageIfEnabled);
+  useEffect(() => {
+    funRef.current = selectLastUsedLanguageIfEnabled;
+  }, [selectLastUsedLanguageIfEnabled]);
+
+  useEffect(() => {
+    if (sourceIdentifier) funRef.current();
+  }, [sourceIdentifier]);
+}

src/components/player/internals/VideoContainer.tsx

@@ -5,6 +5,8 @@ import { convertSubtitlesToObjectUrl } from "@/components/player/utils/captions"
 import { playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 
+import { useInitializeSource } from "../hooks/useInitializePlayer";
+
 // initialize display interface
 function useDisplayInterface() {
   const display = usePlayerStore((s) => s.display);
@@ -112,6 +114,7 @@ function VideoElement() {
 export function VideoContainer() {
   const show = useShouldShowVideoElement();
   useDisplayInterface();
+  useInitializeSource();
 
   if (!show) return null;
   return <VideoElement />;

src/pages/PlayerView.tsx

@@ -1,9 +1,7 @@
 import { RunOutput } from "@movie-web/providers";
 import { useCallback, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
-import { useEffectOnce } from "react-use";
 
-import { useCaptions } from "@/components/player/hooks/useCaptions";
 import { usePlayer } from "@/components/player/hooks/usePlayer";
 import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
 import { convertProviderCaption } from "@/components/player/utils/captions";
@@ -41,7 +39,6 @@ export function PlayerView() {
   } = usePlayer();
   const { setPlayerMeta, scrapeMedia } = usePlayerMeta();
   const backUrl = useLastNonPlayerLink();
-  const { disable } = useCaptions();
 
   const paramsData = JSON.stringify({
     media: params.media,
@@ -86,10 +83,6 @@ export function PlayerView() {
     ]
   );
 
-  useEffectOnce(() => {
-    disable();
-  });
-
   return (
     <PlayerPart backUrl={backUrl} onMetaChange={metaChange}>
       {status === playerStatus.IDLE ? (