Merge pull request #1038 from movie-web/feature/audiotracks

Support for HLS audio tracks

src/assets/locales/en.json

@@ -294,6 +294,7 @@
         "enableSubtitles": "Enable Subtitles",
         "experienceSection": "Viewing experience",
         "playbackItem": "Playback settings",
+        "audioItem": "Audio",
         "qualityItem": "Quality",
         "sourceItem": "Video sources",
         "subtitleItem": "Subtitle settings",

src/components/player/atoms/Settings.tsx

@@ -14,6 +14,7 @@ import { Menu } from "@/components/player/internals/ContextMenu";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { usePlayerStore } from "@/stores/player/store";
 
+import { AudioView } from "./settings/AudioView";
 import { CaptionSettingsView } from "./settings/CaptionSettingsView";
 import { CaptionsView } from "./settings/CaptionsView";
 import { DownloadRoutes } from "./settings/Downloads";
@@ -46,6 +47,11 @@ function SettingsOverlay({ id }: { id: string }) {
             <QualityView id={id} />
           </Menu.Card>
         </OverlayPage>
+        <OverlayPage id={id} path="/audio" width={343} height={431}>
+          <Menu.Card>
+            <AudioView id={id} />
+          </Menu.Card>
+        </OverlayPage>
         <OverlayPage id={id} path="/captions" width={343} height={431}>
           <Menu.CardWithScrollable>
             <CaptionsView id={id} />

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

@@ -0,0 +1,65 @@
+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);
+  const changeAudioTrack = usePlayerStore((s) => s.display?.changeAudioTrack);
+
+  const change = useCallback(
+    (track: AudioTrack) => {
+      changeAudioTrack?.(track);
+      router.close();
+    },
+    [router, changeAudioTrack],
+  );
+
+  return (
+    <>
+      <Menu.BackLink onClick={() => router.navigate("/")}>Audio</Menu.BackLink>
+      <Menu.Section className="flex flex-col pb-4">
+        {audioTracks.map((v) => (
+          <AudioOption
+            key={v.id}
+            selected={v.id === currentAudioTrack?.id}
+            langCode={v.language}
+            onClick={audioTracks.includes(v) ? () => change(v) : undefined}
+          >
+            {getPrettyLanguageNameFromLocale(v.language) ?? unknownChoice}
+          </AudioOption>
+        ))}
+      </Menu.Section>
+    </>
+  );
+}

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

@@ -16,6 +16,7 @@ export function SettingsMenu({ id }: { id: string }) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
+  const currentAudioTrack = usePlayerStore((s) => s.currentAudioTrack);
   const selectedCaptionLanguage = usePlayerStore(
     (s) => s.caption.selected?.language,
   );
@@ -35,6 +36,11 @@ export function SettingsMenu({ id }: { id: string }) {
       t("player.menus.subtitles.unknownLanguage")
     : undefined;
 
+  const selectedAudioLanguagePretty = currentAudioTrack
+    ? getPrettyLanguageNameFromLocale(currentAudioTrack.language) ??
+      t("player.menus.subtitles.unknownLanguage")
+    : undefined;
+
   const source = usePlayerStore((s) => s.source);
 
   const downloadable = source?.type === "file" || source?.type === "hls";
@@ -51,6 +57,15 @@ export function SettingsMenu({ id }: { id: string }) {
         >
           {t("player.menus.settings.qualityItem")}
         </Menu.ChevronLink>
+        {currentAudioTrack && (
+          <Menu.ChevronLink
+            onClick={() => router.navigate("/audio")}
+            rightText={selectedAudioLanguagePretty ?? undefined}
+          >
+            {t("player.menus.settings.audioItem")}
+          </Menu.ChevronLink>
+        )}
+
         <Menu.ChevronLink
           onClick={() => router.navigate("/source")}
           rightText={sourceName}

src/components/player/display/base.ts

@@ -81,6 +81,24 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
     emit("qualities", convertedLevels);
   }
 
+  function reportAudioTracks() {
+    if (!hls) return;
+    const currentTrack = hls.audioTracks[hls.audioTrack];
+    emit("changedaudiotrack", {
+      id: currentTrack.id.toString(),
+      label: currentTrack.name,
+      language: currentTrack.lang ?? "unknown",
+    });
+    emit(
+      "audiotracks",
+      hls.audioTracks.map((v) => ({
+        id: v.id.toString(),
+        label: v.name,
+        language: v.lang ?? "unknown",
+      })),
+    );
+  }
+
   function setupQualityForHls() {
     if (videoElement && canPlayHlsNatively(videoElement)) {
       return; // nothing to change
@@ -155,6 +173,7 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
           if (!hls) return;
           reportLevels();
           setupQualityForHls();
+          reportAudioTracks();
 
           if (isExtensionActiveCached()) {
             hls.on(Hls.Events.LEVEL_LOADED, async (_, data) => {
@@ -464,5 +483,18 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
       hls?.setSubtitleOption({ lang });
       return promise;
     },
+    changeAudioTrack(track) {
+      if (!hls) return;
+      const audioTrack = hls?.audioTracks.find(
+        (t) => t.id.toString() === track.id,
+      );
+      if (!audioTrack) return;
+      hls.audioTrack = hls.audioTracks.indexOf(audioTrack);
+      emit("changedaudiotrack", {
+        id: audioTrack.id.toString(),
+        label: audioTrack.name,
+        language: audioTrack.lang ?? "unknown",
+      });
+    },
   };
 }

src/components/player/display/chromecast.ts

@@ -283,5 +283,8 @@ export function makeChromecastDisplayInterface(
     async setSubtitlePreference() {
       return Promise.resolve();
     },
+    changeAudioTrack() {
+      // cant change audio tracks
+    },
   };
 }

src/components/player/display/displayInterface.ts

@@ -1,7 +1,7 @@
 import { MediaPlaylist } from "hls.js";
 
 import { MWMediaType } from "@/backend/metadata/types/mw";
-import { CaptionListItem } from "@/stores/player/slices/source";
+import { AudioTrack, CaptionListItem } from "@/stores/player/slices/source";
 import { LoadableSource, SourceQuality } from "@/stores/player/utils/qualities";
 import { Listener } from "@/utils/events";
 
@@ -25,6 +25,8 @@ export type DisplayInterfaceEvents = {
   loading: boolean;
   qualities: SourceQuality[];
   changedquality: SourceQuality | null;
+  audiotracks: AudioTrack[];
+  changedaudiotrack: AudioTrack | null;
   needstrack: boolean;
   canairplay: boolean;
   playbackrate: number;
@@ -60,6 +62,7 @@ export interface DisplayInterface extends Listener<DisplayInterfaceEvents> {
     automaticQuality: boolean,
     preferredQuality: SourceQuality | null,
   ): void;
+  changeAudioTrack(audioTrack: AudioTrack): void;
   processVideoElement(video: HTMLVideoElement): void;
   processContainerElement(container: HTMLElement): void;
   toggleFullscreen(): void;

src/stores/player/slices/display.ts

@@ -75,6 +75,16 @@ export const createDisplaySlice: MakeSlice<DisplaySlice> = (set, get) => ({
         s.currentQuality = quality;
       });
     });
+    newDisplay.on("audiotracks", (audioTracks) => {
+      set((s) => {
+        s.audioTracks = audioTracks;
+      });
+    });
+    newDisplay.on("changedaudiotrack", (audioTrack) => {
+      set((s) => {
+        s.currentAudioTrack = audioTrack;
+      });
+    });
     newDisplay.on("needstrack", (needsTrack) => {
       set((s) => {
         s.caption.asTrack = needsTrack;

src/stores/player/slices/source.ts

@@ -56,12 +56,20 @@ export interface CaptionListItem {
   hls?: boolean;
 }
 
+export interface AudioTrack {
+  id: string;
+  label: string;
+  language: string;
+}
+
 export interface SourceSlice {
   status: PlayerStatus;
   source: SourceSliceSource | null;
   sourceId: string | null;
   qualities: SourceQuality[];
+  audioTracks: AudioTrack[];
   currentQuality: SourceQuality | null;
+  currentAudioTrack: AudioTrack | null;
   captionList: CaptionListItem[];
   caption: {
     selected: Caption | null;
@@ -109,8 +117,10 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
   source: null,
   sourceId: null,
   qualities: [],
+  audioTracks: [],
   captionList: [],
   currentQuality: null,
+  currentAudioTrack: null,
   status: playerStatus.IDLE,
   meta: null,
   caption: {