matvp91 · matvp91 · Mar 27, 2020
diff --git a/dev/index.tsx b/dev/index.tsx
@@ -24,13 +24,13 @@ const player = IndigoPlayer.init(
       locale: 'en-US',
       image: 'https://peach.blender.org/wp-content/uploads/rodents2.png?x11217',
     },
-    // thumbnails: {
-    //   src: './thumbnails.vtt',
-    // },
-    // BIF Files
     thumbnails: {
-      src: './thumbnails.bif',
+      src: './thumbnails.vtt',
     },
+    // BIF Files
+    // thumbnails: {
+    //   src: './thumbnails.bif',
+    // },
     // freewheel: {
     //   clientSide: true,
     //   network: 96749,
@@ -56,11 +56,11 @@ const player = IndigoPlayer.init(
       //   src:
       //     'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
       // },
-      // {
-      //   type: 'hls',
-      //   src:
-      //     'https://stream1-vod.cdn1.sbs.prd.telenet-ops.be/geo/vier/dedag/volledigeafleveringen/133fc7a62dea3da106ba0b9f54f6e83d4f6777ec/DE_DAG_1_8_F0261554/DE_DAG_1_8_F0261554.m3u8',
-      // },
+      {
+        type: 'hls',
+        src:
+          'https://stream1-vod.cdn1.sbs.prd.telenet-ops.be/geo/vier/dedag/volledigeafleveringen/133fc7a62dea3da106ba0b9f54f6e83d4f6777ec/DE_DAG_1_8_F0261554/DE_DAG_1_8_F0261554.m3u8',
+      },
       // {
       //   type: 'hls',
       //   src: 'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8',
@@ -70,11 +70,11 @@ const player = IndigoPlayer.init(
       //   src:
       //     'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4',
       // },
-      {
-        type: 'mp4',
-        src:
-          'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-      },
+      // {
+      //   type: 'mp4',
+      //   src:
+      //     'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+      // },
       // {
       //   type: 'mp4',
       //   src:

diff --git a/src/extensions/StateExtension/StateExtension.ts b/src/extensions/StateExtension/StateExtension.ts
@@ -53,6 +53,7 @@ export interface IState {
   playbackRate: number;
 
   audioLanguages: string[];
+  audioLanguage: string;
 
   width: number;
   height: number;
@@ -108,6 +109,7 @@ export class StateExtension extends Module {
     playbackRate: 1,
 
     audioLanguages: [],
+    audioLanguage: null,
 
     width: null,
     height: null,
@@ -378,6 +380,11 @@ export class StateExtension extends Module {
     });
     this.on(Events.MEDIA_STATE_AUDIOLANGUAGES, setAudioLanguages);
 
+    const setAudioLanguage = this.dispatch((draft, data) => {
+      draft.audioLanguage = data.audioLanguage;
+    });
+    this.on(Events.MEDIA_STATE_AUDIOLANGUAGECHANGE, setAudioLanguage);
+
     const setDimensions = this.dispatch((draft, data) => {
       draft.width = data.width;
       draft.height = data.height;
@@ -530,6 +537,10 @@ export class StateExtension extends Module {
         push(Events.STATE_AUDIOLANGUAGES);
       }
 
+      if (prevState.audioLanguage !== this.state.audioLanguage) {
+        push(Events.STATE_AUDIOLANGUAGE_CHANGE);
+      }
+
       if (
         prevState.width !== this.state.width ||
         prevState.height !== this.state.height

diff --git a/src/media/DashMedia/DashMedia.ts b/src/media/DashMedia/DashMedia.ts
@@ -5,6 +5,7 @@ import {
   ErrorCodes,
   Events,
   Format,
+  IAudioLanguageEventData,
   IAudioLanguagesEventData,
   IEventData,
   IInstance,
@@ -36,7 +37,7 @@ export class DashMedia extends Media {
     id: track.id,
     width: track.width,
     height: track.height,
-    bandwidth: track.bandwidth,
+    bitrate: track.bandwidth,
   });
 
   public async load() {
@@ -53,6 +54,14 @@ export class DashMedia extends Media {
       'adaptation',
       this.onAdaptationEvent.bind(this),
     );
+    this.player.addEventListener(
+      'trackschanged',
+      this.onTracksChanged.bind(this),
+    );
+    this.player.addEventListener(
+      'variantchanged',
+      this.onVariantChanged.bind(this),
+    );
 
     this.emit(Events.SHAKA_INSTANCE, {
       shaka,
@@ -91,21 +100,7 @@ export class DashMedia extends Media {
     try {
       await this.player.load(this.instance.format.src);
 
-      const tracks = this.player
-        .getVariantTracks()
-        .filter(track => track.type === 'variant')
-        .sort((a, b) => b.bandwidth - a.bandwidth)
-        .map(this.formatTrack);
-
-      this.emit(Events.MEDIA_STATE_TRACKS, {
-        tracks,
-      } as ITracksEventData);
-
-      const audioLanguages = this.player.getAudioLanguages();
-
-      this.emit(Events.MEDIA_STATE_AUDIOLANGUAGES, {
-        audioLanguages,
-      } as IAudioLanguagesEventData);
+      this.updateAudioLanguages();
     } catch (error) {
       this.onError(error);
     }
@@ -140,6 +135,12 @@ export class DashMedia extends Media {
 
   public selectAudioLanguage(language: string) {
     this.player.selectAudioLanguage(language);
+
+    this.emit(Events.MEDIA_STATE_AUDIOLANGUAGECHANGE, {
+      audioLanguage: language,
+    } as IAudioLanguageEventData);
+
+    this.updateTracks();
   }
 
   private emitTrackChange() {
@@ -172,4 +173,54 @@ export class DashMedia extends Media {
     const estimatedBandwidth = this.player.getStats().estimatedBandwidth;
     this.instance.storage.set('estimatedBandwidth', estimatedBandwidth);
   }
+
+  private onTracksChanged() {
+    this.updateAudioLanguage();
+    this.updateTracks();
+  }
+
+  private onVariantChanged() {
+    this.updateAudioLanguage();
+    this.updateTracks();
+  }
+
+  private updateAudioLanguages() {
+    const audioLanguages = this.player.getAudioLanguages();
+
+    this.emit(Events.MEDIA_STATE_AUDIOLANGUAGES, {
+      audioLanguages,
+    } as IAudioLanguagesEventData);
+  }
+
+  private updateAudioLanguage() {
+    const variant = this.player
+      .getVariantTracks()
+      .find(variant => variant.active);
+
+    if (!variant) {
+      return;
+    }
+
+    this.emit(Events.MEDIA_STATE_AUDIOLANGUAGECHANGE, {
+      audioLanguage: variant.language,
+    } as IAudioLanguageEventData);
+  }
+
+  private updateTracks() {
+    const activeLanguage = this.player
+      .getVariantTracks()
+      .find(track => track.active).language;
+
+    const tracks = this.player
+      .getVariantTracks()
+      .filter(
+        track => track.type === 'variant' && track.language === activeLanguage,
+      )
+      .sort((a, b) => b.bandwidth - a.bandwidth)
+      .map(this.formatTrack);
+
+    this.emit(Events.MEDIA_STATE_TRACKS, {
+      tracks,
+    } as ITracksEventData);
+  }
 }
diff --git a/src/media/HlsMedia/HlsMedia.ts b/src/media/HlsMedia/HlsMedia.ts
@@ -94,6 +94,6 @@ export class HlsMedia extends Media {
     id,
     width: track.width,
     height: track.height,
-    bandwidth: track.bitrate,
+    bitrate: track.bitrate,
   });
 }
diff --git a/src/types.ts b/src/types.ts
@@ -202,7 +202,7 @@ export interface ITrack {
   id: number;
   width: number;
   height: number;
-  bandwidth: number;
+  bitrate: number;
 }
 
 // Ads
@@ -272,6 +272,10 @@ export interface IAudioLanguagesEventData extends IEventData {
   audioLanguages: string[];
 }
 
+export interface IAudioLanguageEventData extends IEventData {
+  audioLanguage: string
+}
+
 export interface ITrackChangeEventData extends IEventData {
   track: ITrack;
   auto: boolean;

diff --git a/src/ui/State.tsx b/src/ui/State.tsx
@@ -1,21 +1,7 @@
-import {
-  AdBreakType,
-  Events,
-  IInstance,
-  IThumbnail,
-  ITrack,
-  KeyboardNavigationPurpose,
-  Subtitle,
-} from '@src/types';
+import { AdBreakType, Events, IInstance, IThumbnail, ITrack, KeyboardNavigationPurpose, Subtitle } from '@src/types';
 import { getTranslation } from '@src/ui/i18n';
 import { triggerEvent } from '@src/ui/triggerEvent';
-import {
-  IActions,
-  IData,
-  SettingsTabs,
-  ViewTypes,
-  IStateStore,
-} from '@src/ui/types';
+import { IActions, IData, IStateStore, SettingsTabs, ViewTypes } from '@src/ui/types';
 import { attachEvents, EventUnsubscribeFn } from '@src/ui/utils/attachEvents';
 import { secondsToHMS } from '@src/ui/utils/secondsToHMS';
 import uniqBy from 'lodash/uniqBy';
@@ -303,6 +289,10 @@ export class StateStore
     this.selectSubtitle(this.props.player.subtitle ? null : subtitle);
   };
 
+  private selectAudioLanguage = (audioLanguage: string) => {
+    this.props.instance.selectAudioLanguage(audioLanguage);
+  };
+
   private togglePip = () => {
     (this.props.instance.getModule('PipExtension') as any).togglePip();
   };
@@ -452,6 +442,10 @@ export class StateStore
       }
     }
 
+    const audioLanguages = this.props.player.audioLanguages;
+
+    const activeAudioLanguage = this.props.player.audioLanguage;
+
     const tracks = uniqBy<ITrack>(
       this.props.player.tracks.sort(
         (a, b) => Number(b.height) - Number(a.height),
@@ -461,9 +455,7 @@ export class StateStore
 
     let activeTrack = null;
     if (this.props.player.track) {
-      activeTrack = tracks.find(
-        track => track.id === this.props.player.track.id,
-      );
+      activeTrack = this.props.player.tracks.find(track => track.id === this.props.player.track.id);
     }
 
     let selectedTrack = activeTrack;
@@ -482,6 +474,9 @@ export class StateStore
     if (tracks.length) {
       visibleSettingsTabs.push(SettingsTabs.TRACKS);
     }
+    if (audioLanguages.length) {
+      visibleSettingsTabs.push(SettingsTabs.AUDIOLANGUAGES);
+    }
 
     let pipSupported = false;
     if (this.props.instance.config.ui.pip) {
@@ -550,6 +545,10 @@ export class StateStore
       activeSubtitle,
       activeThumbnail: this.state.activeThumbnail,
 
+      // Audio languages
+      audioLanguages,
+      activeAudioLanguage,
+
       // i18n
       getTranslation: this.getTranslation,
     } as IData;
@@ -574,6 +573,7 @@ export class StateStore
       toggleActiveSubtitle: this.toggleActiveSubtitle,
       setPlaybackRate: this.setPlaybackRate,
       togglePip: this.togglePip,
+      selectAudioLanguage: this.selectAudioLanguage,
     } as IActions;
   }
 }
diff --git a/src/ui/components/Settings.tsx b/src/ui/components/Settings.tsx
@@ -11,11 +11,18 @@ tabs[SettingsTabs.OPTIONS] = (props: SettingsProps) => (
       <SettingsSelect
         onClick={props.actions.setSettingsTab}
         items={[
+          props.data.visibleSettingsTabs.includes(SettingsTabs.AUDIOLANGUAGES) && {
+            item: SettingsTabs.AUDIOLANGUAGES,
+            label: props.data.getTranslation('Language'),
+            info: `${
+              props.data.activeAudioLanguage ? props.data.activeAudioLanguage : ''
+            }`,
+          },
           props.data.visibleSettingsTabs.includes(SettingsTabs.TRACKS) && {
             item: SettingsTabs.TRACKS,
             label: props.data.getTranslation('Quality'),
             info: `${
-              props.data.activeTrack ? props.data.activeTrack.width : ''
+              props.data.selectedTrack !== 'auto' && props.data.activeTrack ? props.data.activeTrack.height : ''
             }`,
           },
           props.data.visibleSettingsTabs.includes(SettingsTabs.SUBTITLES) && {
@@ -55,7 +62,7 @@ tabs[SettingsTabs.TRACKS] = (props: SettingsProps) => (
       items={[
         ...props.data.tracks.map(track => ({
           item: track,
-          label: `${track.width}`,
+          label: `${track.width}x${track.height} (${Math.floor(track.bitrate / 1000)}kbps)`,
         })),
         {
           item: 'auto',
@@ -130,6 +137,26 @@ tabs[SettingsTabs.PLAYBACKRATES] = (props: SettingsProps) => (
   </>
 );
 
+tabs[SettingsTabs.AUDIOLANGUAGES] = (props: SettingsProps) => (
+  <>
+    <SettingsHeader
+      title={props.data.getTranslation('Language')}
+      onBackClick={() => props.actions.setSettingsTab(SettingsTabs.OPTIONS)}
+    />
+    <SettingsSelect
+      selected={props.data.activeAudioLanguage}
+      onClick={audioLanguage => {
+        props.actions.selectAudioLanguage(audioLanguage);
+        props.actions.toggleSettings();
+      }}
+      items={props.data.audioLanguages.map(audioLanguage => ({
+          item: audioLanguage,
+          label: audioLanguage,
+        }))}
+    />
+    </>
+);
+
 interface SettingsHeaderProps {
   title: string;
   onBackClick?();