Changed audio stream menu to use vuex watchers

src/components/application/slplayer.vue

@@ -229,9 +229,6 @@ export default {
   computed: {
     ...mapGetters('slplayer', [
       'GET_SUBTITLE_STREAMS',
-      'GET_AUDIO_STREAMS',
-      'GET_QUALITIES',
-      'GET_AUDIO_STREAM_ID',
       'GET_SUBTITLE_STREAM_ID',
       'GET_MEDIA_LIST',
       'GET_MEDIA_INDEX',
@@ -293,7 +290,7 @@ export default {
   created() {
     shaka.ui.OverflowMenu.registerElement('bitrate', BitrateSelectionFactory);
     shaka.ui.OverflowMenu.registerElement('subtitle', new SubtitleSelectionFactory(this.eventbus));
-    shaka.ui.OverflowMenu.registerElement('audio', new AudioSelectionFactory(this.eventbus));
+    shaka.ui.OverflowMenu.registerElement('audio',  AudioSelectionFactory);
     shaka.ui.OverflowMenu.registerElement('media', new MediaSelectionFactory(this.eventbus));
     shaka.ui.Controls.registerElement('close', CloseButtonFactory);
     shaka.ui.Controls.registerElement('forward30', Forward30ButtonFactory);
@@ -314,7 +311,6 @@ export default {
     this.smallPlayButton.addEventListener('click', this.onClick);
 
     this.eventbus.$on('subtitlestreamselectionchanged', this.CHANGE_SUBTITLE_STREAM);
-    this.eventbus.$on('audiotreamselectionchanged', this.CHANGE_AUDIO_STREAM);
     this.eventbus.$on('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX);
 
     this.INIT_PLAYER_STATE();
@@ -328,7 +324,6 @@ export default {
     this.bigPlayButton.removeEventListener('click', this.onClick);
     this.smallPlayButton.removeEventListener('click', this.onClick);
     this.eventbus.$off('subtitlestreamselectionchanged', this.CHANGE_SUBTITLE_STREAM);
-    this.eventbus.$off('audiotreamselectionchanged', this.CHANGE_AUDIO_STREAM);
     this.eventbus.$off('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX);
     this.eventbus.$emit('slplayerdestroy');
     this.DESTROY_PLAYER_STATE();
@@ -336,7 +331,6 @@ export default {
 
   methods: {
     ...mapActions('slplayer', [
-      'CHANGE_AUDIO_STREAM',
       'CHANGE_SUBTITLE_STREAM',
       'CHANGE_MEDIA_INDEX',
       'CHANGE_PLAYER_SRC',
@@ -417,18 +411,6 @@ export default {
         immediate: true,
       });
 
-      this.$watch('GET_AUDIO_STREAMS', (newStreams) => {
-        this.eventbus.$emit('audiotreamschanged', newStreams);
-      }, {
-        immediate: true,
-      });
-
-      this.$watch('GET_AUDIO_STREAM_ID', (newId) => {
-        this.eventbus.$emit('audiotreamidchanged', newId);
-      }, {
-        immediate: true,
-      });
-
       this.$watch('GET_MEDIA_LIST', (newList) => {
         this.eventbus.$emit('medialistchanged', newList);
       }, {

src/player/ui/audioselection.js

@@ -1,29 +1,24 @@
-// eslint-disable-next-line max-classes-per-file
 import shaka from 'shaka-player/dist/shaka-player.ui.debug';
 import ShakaUtils from '@/player/ui/utils';
+import store from '@/store';
 
 class AudioSelection extends shaka.ui.SettingsMenu {
-  constructor(parent, controls, eventBus) {
-    super(parent, controls, 'audiotrack');
-    this.eventBus = eventBus;
-    this.selectedAudioId = 0;
-    this.audioStreams = [];
-    this.eventListeners = [
-      {
-        event: 'audiotreamschanged',
-        fn: this.onAudioStreamsChanged.bind(this),
-      },
-      {
-        event: 'audiotreamidchanged',
-        fn: this.onAudioStreamIdChanged.bind(this),
-      },
-    ];
+  #watcherCancellers = [];
 
-    ShakaUtils.addEventListeners(this.eventListeners, this.eventBus);
-    this.eventBus.$once(
-      'slplayerdestroy',
-      () => ShakaUtils.removeEventListeners(this.eventListeners, this.eventBus),
-    );
+  constructor(parent, controls) {
+    super(parent, controls, 'audiotrack');
+
+    this.#watcherCancellers = [
+      store.watch(
+        (state, getters) => getters['slplayer/GET_AUDIO_STREAMS'],
+        this.updateAudioSelection.bind(this),
+      ),
+
+      store.watch(
+        (state, getters) => getters['slplayer/GET_AUDIO_STREAM_ID'],
+        this.updateAudioSelection.bind(this),
+      ),
+    ];
 
     this.button.classList.add('shaka-audio-button');
     this.menu.classList.add('shaka-audio');
@@ -34,21 +29,9 @@ class AudioSelection extends shaka.ui.SettingsMenu {
     this.updateAudioSelection();
   }
 
-  onAudioStreamsChanged(streams) {
-    this.audioStreams = streams;
-    this.updateAudioSelection();
-  }
-
-  onAudioStreamIdChanged(id) {
-    if (id !== this.selectedAudioId) {
-      this.selectedAudioId = id;
-      this.updateAudioSelection();
-    }
-  }
-
   updateAudioSelection() {
     // Hide menu if no audio
-    if (this.audioStreams.length <= 0) {
+    if (store.getters['slplayer/GET_AUDIO_STREAMS'].length <= 0) {
       ShakaUtils.setDisplay(this.menu, false);
       ShakaUtils.setDisplay(this.button, false);
       return;
@@ -73,7 +56,7 @@ class AudioSelection extends shaka.ui.SettingsMenu {
   }
 
   addAudioSelection() {
-    this.audioStreams.forEach((audio) => {
+    store.getters['slplayer/GET_AUDIO_STREAMS'].forEach((audio) => {
       const button = document.createElement('button');
       button.classList.add('explicit-audio');
 
@@ -87,7 +70,7 @@ class AudioSelection extends shaka.ui.SettingsMenu {
         () => this.onAudioClicked(audio.id),
       );
 
-      if (audio.id === this.selectedAudioId) {
+      if (audio.id === store.getters['slplayer/GET_AUDIO_STREAM_ID']) {
         button.setAttribute('aria-selected', 'true');
         button.appendChild(ShakaUtils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
@@ -99,18 +82,19 @@ class AudioSelection extends shaka.ui.SettingsMenu {
   }
 
   onAudioClicked(audioId) {
-    this.eventBus.$emit('audiotreamselectionchanged', audioId);
+    store.dispatch('slplayer/CHANGE_AUDIO_STREAM', audioId);
+  }
+
+  // TODO: replace this function name with "release" when upgrading to shaka 3
+  destroy() {
+    this.#watcherCancellers.forEach((canceller) => {
+      canceller();
+    });
+
+    super.destroy();
   }
 }
 
-class AudioSelectionFactory {
-  constructor(eventBus) {
-    this.eventBus = eventBus;
-  }
-
-  create(rootElement, controls) {
-    return new AudioSelection(rootElement, controls, this.eventBus);
-  }
-}
-
-export default AudioSelectionFactory;
+export default {
+  create: (rootElement, controls) => new AudioSelection(rootElement, controls),
+};

src/player/ui/bitrateselection.js

@@ -85,6 +85,7 @@ class BitrateSelection extends shaka.ui.SettingsMenu {
     store.dispatch('slplayer/CHANGE_MAX_VIDEO_BITRATE', bitrate);
   }
 
+  // TODO: replace this function name with "release" when upgrading to shaka 3
   destroy() {
     this.#watcherCancellers.forEach((canceller) => {
       canceller();

src/player/ui/nextbutton.js

@@ -27,6 +27,8 @@ class NextButton extends shaka.ui.Element {
       // TODO: maybe await and lock this one at a time?
       store.dispatch('slplayer/PLAY_NEXT');
     });
+
+    this.updateButtonEnabled();
   }
 
   updateButtonEnabled() {