diff --git a/src/components/application/slplayer.vue b/src/components/application/slplayer.vue index d37dd374..f253743e 100644 --- a/src/components/application/slplayer.vue +++ b/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); }, { diff --git a/src/player/ui/audioselection.js b/src/player/ui/audioselection.js index b1f390db..22243ef9 100644 --- a/src/player/ui/audioselection.js +++ b/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), +}; diff --git a/src/player/ui/bitrateselection.js b/src/player/ui/bitrateselection.js index f78c3791..4d51f1f1 100644 --- a/src/player/ui/bitrateselection.js +++ b/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(); diff --git a/src/player/ui/nextbutton.js b/src/player/ui/nextbutton.js index 5dcddaa6..3a8d95b7 100644 --- a/src/player/ui/nextbutton.js +++ b/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() {