actually set captions and also tweak main view to show translated from language as highlighted

src/components/player/atoms/settings/CaptionsView.tsx

@@ -419,6 +419,7 @@ export function CaptionsView({
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
+  const currentTranslateTask = usePlayerStore((s) => s.caption.translateTask);
   const { disable, selectRandomCaptionFromLastUsedLanguage } = useCaptions();
   const [isRandomSelecting, setIsRandomSelecting] = useState(false);
   const [dragging, setDragging] = useState(false);
@@ -707,7 +708,11 @@ export function CaptionsView({
               ({ language, languageName, captions: captionsForLang }) => (
                 <Menu.ChevronLink
                   key={language}
-                  selected={selectedLanguage === language}
+                  selected={
+                    (!currentTranslateTask && selectedLanguage === language) ||
+                    (!!currentTranslateTask &&
+                      currentTranslateTask.targetCaption.language === language)
+                  }
                   rightText={captionsForLang.length.toString()}
                   onClick={() => {
                     onChooseLanguage?.(language);

src/components/player/atoms/settings/LanguageSubtitlesView.tsx

@@ -29,6 +29,7 @@ export function LanguageSubtitlesView({
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
+  const currentTranslateTask = usePlayerStore((s) => s.caption.translateTask);
   const { selectCaptionById } = useCaptions();
   const [currentlyDownloading, setCurrentlyDownloading] = useState<
     string | null
@@ -124,7 +125,10 @@ export function LanguageSubtitlesView({
       <CaptionOption
         key={v.id}
         countryCode={v.language}
-        selected={v.id === selectedCaptionId}
+        selected={
+          v.id === selectedCaptionId ||
+          v.id === currentTranslateTask?.targetCaption?.id
+        }
         loading={v.id === currentlyDownloading && downloadReq.loading}
         error={
           v.id === currentlyDownloading && downloadReq.error

src/components/player/atoms/settings/TranslateSubtitleView.tsx

@@ -9,6 +9,7 @@ import { usePlayerStore } from "@/stores/player/store";
 import { getPrettyLanguageNameFromLocale } from "@/utils/language";
 
 import { CaptionOption } from "./CaptionsView";
+import { useCaptions } from "../../hooks/useCaptions";
 
 // https://developers.google.com/workspace/admin/directory/v1/languages
 const availableLanguages: string[] = [
@@ -83,7 +84,7 @@ export function TranslateSubtitleView({
 }: LanguageSubtitlesViewProps) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
-  const setCaption = usePlayerStore((s) => s.setCaption);
+  const { setDirectCaption } = useCaptions();
   const translateTask = usePlayerStore((s) => s.caption.translateTask);
   const translateCaption = usePlayerStore((s) => s.translateCaption);
   const clearTranslateTask = usePlayerStore((s) => s.clearTranslateTask);
@@ -93,10 +94,16 @@ export function TranslateSubtitleView({
       return;
     }
     if (translateTask.done) {
-      console.log(translateTask.translatedCaption);
-      // setCaption(translateTask.translatedCaption!);
+      const tCaption = translateTask.translatedCaption!;
+      setDirectCaption(tCaption, {
+        id: tCaption.id,
+        language: tCaption.language,
+        needsProxy: false,
+        url: "",
+        source: "translation",
+      });
     }
-  }, [translateTask, setCaption]);
+  }, [translateTask, setDirectCaption]);
 
   function renderTargetLang(langCode: string) {
     const friendlyName = getPrettyLanguageNameFromLocale(langCode);
@@ -115,22 +122,28 @@ export function TranslateSubtitleView({
         }
         loading={
           !!translateTask &&
+          translateTask.targetCaption.id === caption.id &&
           !translateTask.done &&
           !translateTask.error &&
           translateTask.targetLanguage === langCode
         }
         error={
           !!translateTask &&
+          translateTask.targetCaption.id === caption.id &&
           translateTask.error &&
           translateTask.targetLanguage === langCode
         }
         selected={
           !!translateTask &&
+          translateTask.targetCaption.id === caption.id &&
           translateTask.done &&
           translateTask.targetLanguage === langCode
         }
         onClick={() =>
-          !translateTask || translateTask.done || translateTask.error
+          !translateTask ||
+          translateTask.targetCaption.id !== caption.id ||
+          translateTask.done ||
+          translateTask.error
             ? onClick()
             : undefined
         }

src/components/player/hooks/useCaptions.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo } from "react";
 import subsrt from "subsrt-ts";
 
 import { downloadCaption, downloadWebVTT } from "@/backend/helpers/subs";
-import { Caption } from "@/stores/player/slices/source";
+import { Caption, CaptionListItem } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 import { usePreferencesStore } from "@/stores/preferences";
 import { useSubtitleStore } from "@/stores/subtitles";
@@ -19,6 +19,8 @@ export function useCaptions() {
     (s) => s.resetSubtitleSpecificSettings,
   );
   const setCaption = usePlayerStore((s) => s.setCaption);
+  const clearTranslateTask = usePlayerStore((s) => s.clearTranslateTask);
+  const currentTranslateTask = usePlayerStore((s) => s.caption.translateTask);
   const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
   const setIsOpenSubtitles = useSubtitleStore((s) => s.setIsOpenSubtitles);
 
@@ -42,6 +44,38 @@ export function useCaptions() {
     [captionList, getHlsCaptionList],
   );
 
+  const setDirectCaption = useCallback(
+    (caption: Caption, listItem: CaptionListItem) => {
+      setIsOpenSubtitles(!!listItem.opensubtitles);
+      setCaption(caption);
+
+      // Only reset subtitle settings if selecting a different caption
+      if (selectedCaption?.id !== caption.id) {
+        resetSubtitleSpecificSettings();
+      }
+
+      setLanguage(caption.language);
+
+      // Use native tracks for MP4 streams instead of custom rendering
+      if (source?.type === "file" && enableNativeSubtitles) {
+        setCaptionAsTrack(true);
+      } else {
+        // For HLS sources or when native subtitles are disabled, use custom rendering
+        setCaptionAsTrack(false);
+      }
+    },
+    [
+      setIsOpenSubtitles,
+      setLanguage,
+      setCaption,
+      resetSubtitleSpecificSettings,
+      source,
+      setCaptionAsTrack,
+      enableNativeSubtitles,
+      selectedCaption,
+    ],
+  );
+
   const selectCaptionById = useCallback(
     async (captionId: string) => {
       const caption = captions.find((v) => v.id === captionId);
@@ -85,36 +119,15 @@ export function useCaptions() {
         captionToSet.srtData = srtData;
       }
 
-      setIsOpenSubtitles(!!caption.opensubtitles);
-      setCaption(captionToSet);
-
-      // Only reset subtitle settings if selecting a different caption
-      if (selectedCaption?.id !== caption.id) {
-        resetSubtitleSpecificSettings();
-      }
-
-      setLanguage(caption.language);
-
-      // Use native tracks for MP4 streams instead of custom rendering
-      if (source?.type === "file" && enableNativeSubtitles) {
-        setCaptionAsTrack(true);
-      } else {
-        // For HLS sources or when native subtitles are disabled, use custom rendering
-        setCaptionAsTrack(false);
-      }
+      clearTranslateTask();
+      setDirectCaption(captionToSet, caption);
     },
     [
-      setIsOpenSubtitles,
-      setLanguage,
       captions,
-      setCaption,
-      resetSubtitleSpecificSettings,
       getSubtitleTracks,
       setSubtitlePreference,
-      source,
-      setCaptionAsTrack,
-      enableNativeSubtitles,
-      selectedCaption,
+      setDirectCaption,
+      clearTranslateTask,
     ],
   );
 
@@ -128,10 +141,11 @@ export function useCaptions() {
   );
 
   const disable = useCallback(async () => {
+    clearTranslateTask();
     setIsOpenSubtitles(false);
     setCaption(null);
     setLanguage(null);
-  }, [setCaption, setLanguage, setIsOpenSubtitles]);
+  }, [setCaption, setLanguage, setIsOpenSubtitles, clearTranslateTask]);
 
   const selectLastUsedLanguage = useCallback(async () => {
     const language = lastSelectedLanguage ?? "en";
@@ -188,13 +202,23 @@ export function useCaptions() {
     if (isCustomCaption) return;
 
     const isSelectedCaptionStillAvailable = captions.some(
-      (caption) => caption.id === selectedCaption.id,
+      (caption) =>
+        caption.id ===
+        (currentTranslateTask
+          ? currentTranslateTask.targetCaption
+          : selectedCaption
+        ).id,
     );
 
     if (!isSelectedCaptionStillAvailable) {
       // Try to find a caption with the same language
       const sameLanguageCaption = captions.find(
-        (caption) => caption.language === selectedCaption.language,
+        (caption) =>
+          caption.language ===
+          (currentTranslateTask
+            ? currentTranslateTask.targetCaption
+            : selectedCaption
+          ).language,
       );
 
       if (sameLanguageCaption) {
@@ -202,10 +226,18 @@ export function useCaptions() {
         selectCaptionById(sameLanguageCaption.id);
       } else {
         // No caption with the same language found, clear the selection
+        clearTranslateTask();
         setCaption(null);
       }
     }
-  }, [captions, selectedCaption, setCaption, selectCaptionById]);
+  }, [
+    captions,
+    selectedCaption,
+    setCaption,
+    selectCaptionById,
+    clearTranslateTask,
+    currentTranslateTask,
+  ]);
 
   return {
     selectLanguage,
@@ -213,6 +245,7 @@ export function useCaptions() {
     selectLastUsedLanguage,
     toggleLastUsed,
     selectLastUsedLanguageIfEnabled,
+    setDirectCaption,
     selectCaptionById,
     selectRandomCaptionFromLastUsedLanguage,
   };