From 5539061ae4be37e90db68c441919e7a29f82cd0c Mon Sep 17 00:00:00 2001
From: vlOd2 <66838724+vlOd2@users.noreply.github.com>
Date: Sun, 28 Dec 2025 15:14:52 +0200
Subject: [PATCH] Fix translated caption not applying when menu is closed

---
 src/components/player/atoms/Captions.tsx      | 18 ++++++++++++++++
 .../atoms/settings/TranslateSubtitleView.tsx  | 21 +++----------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/player/atoms/Captions.tsx b/src/components/player/atoms/Captions.tsx
index 89e419e0..d5ebb43f 100644
--- a/src/components/player/atoms/Captions.tsx
+++ b/src/components/player/atoms/Captions.tsx
@@ -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
diff --git a/src/components/player/atoms/settings/TranslateSubtitleView.tsx b/src/components/player/atoms/settings/TranslateSubtitleView.tsx
index 62223141..e14a7fbc 100644
--- a/src/components/player/atoms/settings/TranslateSubtitleView.tsx
+++ b/src/components/player/atoms/settings/TranslateSubtitleView.tsx
@@ -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);