Fix translated caption not applying when menu is closed

This commit is contained in:
vlOd2 2025-12-28 15:14:52 +02:00
parent 44618524dd
commit 5539061ae4
2 changed files with 21 additions and 18 deletions

View file

@ -2,6 +2,7 @@ import { useEffect } from "react";
import { Icons } from "@/components/Icon";
import { OverlayAnchor } from "@/components/overlays/OverlayAnchor";
import { useCaptions } from "@/components/player/hooks/useCaptions";
import { VideoPlayerButton } from "@/components/player/internals/Button";
import { useOverlayRouter } from "@/hooks/useOverlayRouter";
import { usePlayerStore } from "@/stores/player/store";
@ -9,11 +10,28 @@ import { usePlayerStore } from "@/stores/player/store";
export function Captions() {
const router = useOverlayRouter("settings");
const setHasOpenOverlay = usePlayerStore((s) => s.setHasOpenOverlay);
const { setDirectCaption } = useCaptions();
const translateTask = usePlayerStore((s) => s.caption.translateTask);
useEffect(() => {
setHasOpenOverlay(router.isRouterActive);
}, [setHasOpenOverlay, router.isRouterActive]);
useEffect(() => {
if (!translateTask) {
return;
}
if (translateTask.done) {
const tCaption = translateTask.translatedCaption!;
setDirectCaption(tCaption, {
id: tCaption.id,
url: "",
language: tCaption.language,
needsProxy: false,
});
}
}, [translateTask, setDirectCaption]);
return (
<OverlayAnchor id={router.id}>
<VideoPlayerButton

View file

@ -71,7 +71,7 @@ const availableLanguages: string[] = [
"cy",
];
export interface LanguageSubtitlesViewProps {
export interface TranslateSubtitlesViewProps {
id: string;
caption: CaptionListItem;
overlayBackLink?: boolean;
@ -81,29 +81,14 @@ export function TranslateSubtitleView({
id,
caption,
overlayBackLink,
}: LanguageSubtitlesViewProps) {
}: TranslateSubtitlesViewProps) {
const { t } = useTranslation();
const router = useOverlayRouter(id);
const { setDirectCaption, disable: disableCaptions } = useCaptions();
const { disable: disableCaptions } = useCaptions();
const translateTask = usePlayerStore((s) => s.caption.translateTask);
const translateCaption = usePlayerStore((s) => s.translateCaption);
const clearTranslateTask = usePlayerStore((s) => s.clearTranslateTask);
useEffect(() => {
if (!translateTask) {
return;
}
if (translateTask.done) {
const tCaption = translateTask.translatedCaption!;
setDirectCaption(tCaption, {
id: tCaption.id,
url: "",
language: tCaption.language,
needsProxy: false,
});
}
}, [translateTask, setDirectCaption]);
function renderTargetLang(langCode: string) {
const friendlyName = getPrettyLanguageNameFromLocale(langCode);