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> </>