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 ( + + + + + + {props.children} + + + ); +} + 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 }) { router.navigate("/")}>Audio {audioTracks.map((v) => ( - change(v) : undefined} - disabled={!audioTracks.includes(v)} > - {v.label} ({v.language}) - + {getPrettyLanguageNameFromLocale(v.language) ?? unknownChoice} + ))}