Add languages to translation UI

src/assets/locales/en.json

@@ -837,7 +837,10 @@
         "useNativeSubtitles": "Native video subtitles",
         "useNativeSubtitlesDescription": "Broadcast subtitles for native fullscreen and PiP",
         "delayLate": "Heard audio",
-        "delayEarly": "Saw caption"
+        "delayEarly": "Saw caption",
+        "translate": {
+          "title": "Translate from {{language}}"
+        }
       },
       "watchparty": {
         "watchpartyItem": "Watch Party",

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

@@ -36,6 +36,7 @@ export interface CaptionOptionProps {
   onClick?: () => void;
   error?: React.ReactNode;
   flag?: boolean;
+  translatable?: boolean;
   subtitleUrl?: string;
   subtitleType?: string;
   // subtitle details from wyzie
@@ -55,7 +56,7 @@ function CaptionOptionRightSide(props: CaptionOptionProps) {
 
   function translateBtn(margin: boolean) {
     return (
-      props.countryCode && (
+      props.translatable && (
         <span
           className={classNames(
             "text-buttons-secondaryText px-2 py-1 rounded bg-opacity-0",

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

@@ -142,6 +142,7 @@ export function LanguageSubtitlesView({
         }}
         onDoubleClick={handleDoubleClick}
         flag
+        translatable
         subtitleUrl={v.url}
         subtitleType={v.type}
         subtitleSource={v.source}

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

@@ -4,6 +4,69 @@ import { FlagIcon } from "@/components/FlagIcon";
 import { Menu } from "@/components/player/internals/ContextMenu";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { CaptionListItem } from "@/stores/player/slices/source";
+import { getPrettyLanguageNameFromLocale } from "@/utils/language";
+
+import { CaptionOption } from "./CaptionsView";
+
+// https://developers.google.com/workspace/admin/directory/v1/languages
+const availableLanguages: string[] = [
+  "am",
+  "ar",
+  "eu",
+  "bn",
+  "en-GB",
+  "pt-BR",
+  "bg",
+  "ca",
+  "chr",
+  "hr",
+  "cs",
+  "da",
+  "nl",
+  "en",
+  "et",
+  "fil",
+  "fi",
+  "fr",
+  "de",
+  "el",
+  "gu",
+  "iw",
+  "hi",
+  "hu",
+  "is",
+  "id",
+  "it",
+  "ja",
+  "kn",
+  "ko",
+  "lv",
+  "lt",
+  "ms",
+  "ml",
+  "mr",
+  "no",
+  "pl",
+  "pt-PT",
+  "ro",
+  "ru",
+  "sr",
+  "zh-CN",
+  "sk",
+  "sl",
+  "es",
+  "sw",
+  "sv",
+  "ta",
+  "te",
+  "th",
+  "zh-TW",
+  "tr",
+  "ur",
+  "uk",
+  "vi",
+  "cy",
+];
 
 export interface LanguageSubtitlesViewProps {
   id: string;
@@ -19,6 +82,16 @@ export function TranslateSubtitleView({
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
 
+  function renderTargetLang(langCode: string) {
+    const friendlyName = getPrettyLanguageNameFromLocale(langCode);
+
+    return (
+      <CaptionOption countryCode={langCode} flag>
+        {friendlyName}
+      </CaptionOption>
+    );
+  }
+
   return (
     <>
       <Menu.BackLink
@@ -32,14 +105,20 @@ export function TranslateSubtitleView({
       >
         <span className="flex items-center">
           <FlagIcon langCode={caption.language} />
-          <span className="ml-3">Translate from {caption.id}</span>
+          <span className="ml-3">
+            {t("player.menus.subtitles.translate.title", {
+              replace: {
+                language:
+                  getPrettyLanguageNameFromLocale(caption.language) ??
+                  caption.language,
+              },
+            })}
+          </span>
         </span>
       </Menu.BackLink>
 
       <div className="!pt-1 mt-2 pb-3">
-        <div className="text-center text-video-context-type-secondary py-2">
+        {availableLanguages.map(renderTargetLang)}
-          {t("player.menus.subtitles.notFound")}
-        </div>
       </div>
     </>
   );