Improve UX for translated subtitles

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

@@ -38,6 +38,7 @@ export interface CaptionOptionProps {
   error?: React.ReactNode;
   flag?: boolean;
   translatable?: boolean;
+  isTranslatedTarget?: boolean;
   subtitleUrl?: string;
   subtitleType?: string;
   // subtitle details from wyzie
@@ -61,12 +62,13 @@ function CaptionOptionRightSide(props: CaptionOptionProps) {
         <span
           className={classNames(
             "text-buttons-secondaryText px-2 py-1 rounded bg-opacity-0",
+            {
+              "mr-3": margin,
+              "bg-opacity-100 bg-buttons-purpleHover": props.isTranslatedTarget,
+            },
             "transition duration-300 ease-in-out",
             "hover:bg-opacity-100 hover:bg-buttons-primaryHover",
             "hover:text-buttons-primaryText",
-            {
-              "mr-3": margin,
-            },
           )}
           onClick={(e) => {
             e.stopPropagation();

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

@@ -129,13 +129,22 @@ export function LanguageSubtitlesView({
           v.id === selectedCaptionId ||
           v.id === currentTranslateTask?.targetCaption?.id
         }
-        loading={v.id === currentlyDownloading && downloadReq.loading}
+        disabled={!!currentTranslateTask && !currentTranslateTask.done}
+        loading={
+          (v.id === currentlyDownloading && downloadReq.loading) ||
+          (!!currentTranslateTask &&
+            v.id === currentTranslateTask.targetCaption.id &&
+            !currentTranslateTask.done)
+        }
         error={
           v.id === currentlyDownloading && downloadReq.error
             ? downloadReq.error.toString()
             : undefined
         }
-        onClick={() => startDownload(v.id)}
+        onClick={() =>
+          (!currentTranslateTask || currentTranslateTask.done) &&
+          startDownload(v.id)
+        }
         onTranslate={() => {
           onTranslateSubtitle?.(v);
           router.navigate(
@@ -144,6 +153,7 @@ export function LanguageSubtitlesView({
               : "/captionsOverlay/translateSubtitleOverlay",
           );
         }}
+        isTranslatedTarget={v.id === currentTranslateTask?.targetCaption?.id}
         onDoubleClick={handleDoubleClick}
         flag
         translatable

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

@@ -97,10 +97,9 @@ export function TranslateSubtitleView({
       const tCaption = translateTask.translatedCaption!;
       setDirectCaption(tCaption, {
         id: tCaption.id,
+        url: "",
         language: tCaption.language,
         needsProxy: false,
-        url: "",
-        source: "translation",
       });
     }
   }, [translateTask, setDirectCaption]);
@@ -140,10 +139,7 @@ export function TranslateSubtitleView({
           translateTask.targetLanguage === langCode
         }
         onClick={() =>
-          !translateTask ||
-          translateTask.targetCaption.id !== caption.id ||
-          translateTask.done ||
-          translateTask.error
+          !translateTask || translateTask.done || translateTask.error
             ? onClick()
             : undefined
         }
@@ -180,7 +176,14 @@ export function TranslateSubtitleView({
       </Menu.BackLink>
 
       <div className="!pt-1 mt-2 pb-3">
-        {availableLanguages.map(renderTargetLang)}
+        {availableLanguages
+          .filter(
+            (lang) =>
+              lang !== caption.language &&
+              !lang.includes(caption.language) &&
+              !caption.language.includes(lang),
+          )
+          .map(renderTargetLang)}
       </div>
     </>
   );