From dbb1c1979664d1ae053f6f5e0bac68cd1344b378 Mon Sep 17 00:00:00 2001
From: Jorrin <jorrinkievit@hotmail.com>
Date: Sun, 24 Mar 2024 23:54:09 +0100
Subject: [PATCH] add flags to audio options

---
 .../player/atoms/settings/AudioView.tsx       | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/player/atoms/settings/AudioView.tsx b/src/components/player/atoms/settings/AudioView.tsx
index 0d18ada8..a2c9c7f6 100644
--- a/src/components/player/atoms/settings/AudioView.tsx
+++ b/src/components/player/atoms/settings/AudioView.tsx
@@ -1,13 +1,37 @@
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
+import { FlagIcon } from "@/components/FlagIcon";
 import { Menu } from "@/components/player/internals/ContextMenu";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { AudioTrack } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
+import { getPrettyLanguageNameFromLocale } from "@/utils/language";
 
 import { SelectableLink } from "../../internals/ContextMenu/Links";
 
+export function AudioOption(props: {
+  langCode?: string;
+  children: React.ReactNode;
+  selected?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <SelectableLink selected={props.selected} onClick={props.onClick}>
+      <span className="flex items-center">
+        <span data-code={props.langCode} className="mr-3 inline-flex">
+          <FlagIcon langCode={props.langCode} />
+        </span>
+        <span>{props.children}</span>
+      </span>
+    </SelectableLink>
+  );
+}
+
 export function AudioView({ id }: { id: string }) {
+  const { t } = useTranslation();
+  const unknownChoice = t("player.menus.subtitles.unknownLanguage");
+
   const router = useOverlayRouter(id);
   const audioTracks = usePlayerStore((s) => s.audioTracks);
   const currentAudioTrack = usePlayerStore((s) => s.currentAudioTrack);
@@ -26,14 +50,14 @@ export function AudioView({ id }: { id: string }) {
       <Menu.BackLink onClick={() => router.navigate("/")}>Audio</Menu.BackLink>
       <Menu.Section className="flex flex-col pb-4">
         {audioTracks.map((v) => (
-          <SelectableLink
+          <AudioOption
             key={v.id}
             selected={v.id === currentAudioTrack?.id}
+            langCode={v.language}
             onClick={audioTracks.includes(v) ? () => change(v) : undefined}
-            disabled={!audioTracks.includes(v)}
           >
-            {v.label} ({v.language})
-          </SelectableLink>
+            {getPrettyLanguageNameFromLocale(v.language) ?? unknownChoice}
+          </AudioOption>
         ))}
       </Menu.Section>
     </>