From 18c1b35f1c5f10b174d38f5c7fc19d0c3f0cf674 Mon Sep 17 00:00:00 2001 From: Travis Shivers Date: Mon, 29 Jun 2020 20:27:04 -0500 Subject: [PATCH] Change media selection to use vuex watchers --- src/components/application/slplayer.vue | 31 +--------- src/player/ui/mediaselection.js | 80 ++++++++++--------------- 2 files changed, 34 insertions(+), 77 deletions(-) diff --git a/src/components/application/slplayer.vue b/src/components/application/slplayer.vue index 1744da16..40776fd7 100644 --- a/src/components/application/slplayer.vue +++ b/src/components/application/slplayer.vue @@ -214,9 +214,6 @@ export default { data() { return { - eventbus: window.EventBus, - metadataLoadedPromise: null, - playerConfig: { streaming: { bufferingGoal: 120, @@ -228,10 +225,6 @@ export default { computed: { ...mapGetters('slplayer', [ - 'GET_SUBTITLE_STREAMS', - 'GET_SUBTITLE_STREAM_ID', - 'GET_MEDIA_LIST', - 'GET_MEDIA_INDEX', 'GET_THUMB_URL', 'GET_PLEX_SERVER', 'GET_TITLE', @@ -291,15 +284,14 @@ export default { shaka.ui.OverflowMenu.registerElement('bitrate', BitrateSelectionFactory); shaka.ui.OverflowMenu.registerElement('subtitle', SubtitleSelectionFactory); shaka.ui.OverflowMenu.registerElement('audio', AudioSelectionFactory); - shaka.ui.OverflowMenu.registerElement('media', new MediaSelectionFactory(this.eventbus)); + shaka.ui.OverflowMenu.registerElement('media', MediaSelectionFactory); shaka.ui.Controls.registerElement('close', CloseButtonFactory); shaka.ui.Controls.registerElement('forward30', Forward30ButtonFactory); shaka.ui.Controls.registerElement('replay10', Replay10ButtonFactory); shaka.ui.Controls.registerElement('next', NextButtonFactory); }, - async mounted() { - await this.metadataLoadedPromise; + mounted() { this.SET_PLAYER(new shaka.Player(this.$refs.videoPlayer)); this.SET_PLAYER_CONFIGURATION(this.playerConfig); this.SET_PLAYER_UI(new shaka.ui.Overlay(this.GET_PLAYER, this.$refs.videoPlayerContainer, @@ -310,10 +302,7 @@ export default { this.bigPlayButton.addEventListener('click', this.onClick); this.smallPlayButton.addEventListener('click', this.onClick); - this.eventbus.$on('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX); - this.INIT_PLAYER_STATE(); - this.applyPlayerWatchers(); window.addEventListener('keyup', this.onKeyUp); }, @@ -322,8 +311,6 @@ export default { window.removeEventListener('keyup', this.onKeyUp); this.bigPlayButton.removeEventListener('click', this.onClick); this.smallPlayButton.removeEventListener('click', this.onClick); - this.eventbus.$off('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX); - this.eventbus.$emit('slplayerdestroy'); this.DESTROY_PLAYER_STATE(); }, @@ -395,20 +382,6 @@ export default { }; }, - applyPlayerWatchers() { - this.$watch('GET_MEDIA_LIST', (newList) => { - this.eventbus.$emit('medialistchanged', newList); - }, { - immediate: true, - }); - - this.$watch('GET_MEDIA_INDEX', (newIndex) => { - this.eventbus.$emit('mediaindexchanged', newIndex); - }, { - immediate: true, - }); - }, - onKeyUp(event) { const { activeElement } = document; const isSeekBar = activeElement && activeElement.classList diff --git a/src/player/ui/mediaselection.js b/src/player/ui/mediaselection.js index d5cd4ae6..61cb1ee5 100644 --- a/src/player/ui/mediaselection.js +++ b/src/player/ui/mediaselection.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 MediaSelection extends shaka.ui.SettingsMenu { - constructor(parent, controls, eventBus) { - super(parent, controls, 'view_list'); - this.eventBus = eventBus; - this.selectedMediaIndex = 0; - this.mediaList = []; - this.eventListeners = [ - { - event: 'medialistchanged', - fn: this.onMediaListChanged.bind(this), - }, - { - event: 'mediaindexchanged', - fn: this.onMediaIndexChanged.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, 'view_list'); + + this.#watcherCancellers = [ + store.watch( + (state, getters) => getters['slplayer/GET_MEDIA_LIST'], + this.updateMediaSelection.bind(this), + ), + + store.watch( + (state, getters) => getters['slplayer/GET_MEDIA_INDEX'], + this.updateMediaSelection.bind(this), + ), + ]; this.button.classList.add('shaka-media-button'); this.menu.classList.add('shaka-media'); @@ -34,21 +29,9 @@ class MediaSelection extends shaka.ui.SettingsMenu { this.updateMediaSelection(); } - onMediaListChanged(streams) { - this.mediaList = streams; - this.updateMediaSelection(); - } - - onMediaIndexChanged(index) { - if (index !== this.selectedMediaIndex) { - this.selectedMediaIndex = index; - this.updateMediaSelection(); - } - } - updateMediaSelection() { // Hide menu if there is only the one version - if (this.mediaList.length <= 1) { + if (store.getters['slplayer/GET_MEDIA_LIST'].length <= 1) { ShakaUtils.setDisplay(this.menu, false); ShakaUtils.setDisplay(this.button, false); return; @@ -73,7 +56,7 @@ class MediaSelection extends shaka.ui.SettingsMenu { } addMediaSelection() { - this.mediaList.forEach((media) => { + store.getters['slplayer/GET_MEDIA_LIST'].forEach((media) => { const button = document.createElement('button'); button.classList.add('explicit-media'); @@ -87,7 +70,7 @@ class MediaSelection extends shaka.ui.SettingsMenu { () => this.onMediaClicked(media.index), ); - if (media.index === this.selectedMediaIndex) { + if (media.index === store.getters['slplayer/GET_MEDIA_INDEX']) { button.setAttribute('aria-selected', 'true'); button.appendChild(ShakaUtils.checkmarkIcon()); span.classList.add('shaka-chosen-item'); @@ -99,18 +82,19 @@ class MediaSelection extends shaka.ui.SettingsMenu { } onMediaClicked(index) { - this.eventBus.$emit('mediaindexselectionchanged', index); + store.dispatch('slplayer/CHANGE_MEDIA_INDEX', index); + } + + // TODO: replace this function name with "release" when upgrading to shaka 3 + destroy() { + this.#watcherCancellers.forEach((canceller) => { + canceller(); + }); + + super.destroy(); } } -class MediaSelectionFactory { - constructor(eventBus) { - this.eventBus = eventBus; - } - - create(rootElement, controls) { - return new MediaSelection(rootElement, controls, this.eventBus); - } -} - -export default MediaSelectionFactory; +export default { + create: (rootElement, controls) => new MediaSelection(rootElement, controls), +};