diff --git a/src/components/player/hooks/useCaptions.ts b/src/components/player/hooks/useCaptions.ts index ec99c4fb..b646ee8a 100644 --- a/src/components/player/hooks/useCaptions.ts +++ b/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, }; } diff --git a/src/components/player/hooks/useInitializePlayer.ts b/src/components/player/hooks/useInitializePlayer.ts index 378cdd5e..5964a359 100644 --- a/src/components/player/hooks/useInitializePlayer.ts +++ b/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]); +} diff --git a/src/components/player/internals/VideoContainer.tsx b/src/components/player/internals/VideoContainer.tsx index 45476eab..b1282c34 100644 --- a/src/components/player/internals/VideoContainer.tsx +++ b/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 ; diff --git a/src/pages/PlayerView.tsx b/src/pages/PlayerView.tsx index 37784759..61077177 100644 --- a/src/pages/PlayerView.tsx +++ b/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 ( {status === playerStatus.IDLE ? (