From 6f2fb93b413f9f5724d4cf96894985f9a08f864e Mon Sep 17 00:00:00 2001 From: Travis Shivers Date: Mon, 29 Jun 2020 19:41:47 -0500 Subject: [PATCH] Added next button and simplified shaka buttons --- src/components/application/slplayer.vue | 10 +++---- src/player/ui/closebutton.js | 23 +++++----------- src/player/ui/forward30button.js | 12 ++------ src/player/ui/nextbutton.js | 35 ++++++++++++++---------- src/player/ui/replay10button.js | 12 ++------ src/store/modules/plexclients/getters.js | 5 ++++ src/store/modules/plexclients/state.js | 2 +- src/store/modules/slplayer/actions.js | 6 +++- 8 files changed, 48 insertions(+), 57 deletions(-) diff --git a/src/components/application/slplayer.vue b/src/components/application/slplayer.vue index 8ea053f8..dea5e5c7 100644 --- a/src/components/application/slplayer.vue +++ b/src/components/application/slplayer.vue @@ -299,10 +299,10 @@ export default { shaka.ui.OverflowMenu.registerElement('subtitle', new SubtitleSelectionFactory(this.eventbus)); shaka.ui.OverflowMenu.registerElement('audio', new AudioSelectionFactory(this.eventbus)); shaka.ui.OverflowMenu.registerElement('media', new MediaSelectionFactory(this.eventbus)); - shaka.ui.Controls.registerElement('close', new CloseButtonFactory(this.eventbus)); - shaka.ui.Controls.registerElement('forward30', new Forward30ButtonFactory()); - shaka.ui.Controls.registerElement('replay10', new Replay10ButtonFactory()); - shaka.ui.Controls.registerElement('next', new NextButtonFactory()); + 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() { @@ -321,7 +321,6 @@ export default { this.eventbus.$on('audiotreamselectionchanged', this.CHANGE_AUDIO_STREAM); this.eventbus.$on('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX); this.eventbus.$on('bitrateselectionchanged', this.CHANGE_MAX_VIDEO_BITRATE); - this.eventbus.$on('playerclosebuttonclicked', this.PRESS_STOP); this.INIT_PLAYER_STATE(); this.applyPlayerWatchers(); @@ -337,7 +336,6 @@ export default { this.eventbus.$off('audiotreamselectionchanged', this.CHANGE_AUDIO_STREAM); this.eventbus.$off('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX); this.eventbus.$off('bitrateselectionchanged', this.CHANGE_MAX_VIDEO_BITRATE); - this.eventbus.$off('playerclosebuttonclicked', this.PRESS_STOP); this.eventbus.$emit('slplayerdestroy'); this.DESTROY_PLAYER_STATE(); }, diff --git a/src/player/ui/closebutton.js b/src/player/ui/closebutton.js index 8276a86d..38aba3de 100644 --- a/src/player/ui/closebutton.js +++ b/src/player/ui/closebutton.js @@ -1,34 +1,25 @@ -// eslint-disable-next-line max-classes-per-file import shaka from 'shaka-player/dist/shaka-player.ui.debug'; +import store from '@/store'; class CloseButton extends shaka.ui.Element { - constructor(parent, controls, eventBus) { + constructor(parent, controls) { super(parent, controls); - this.eventBus = eventBus; // The actual button that will be displayed this.button = document.createElement('button'); this.button.classList.add('shaka-close-button'); + this.button.classList.add('shaka-slplayer-button'); this.button.classList.add('material-icons-round'); this.button.textContent = 'close'; this.parent.appendChild(this.button); // Listen for clicks on the button to start the next playback this.eventManager.listen(this.button, 'click', () => { - this.eventBus.$emit('playerclosebuttonclicked'); + store.dispatch('slplayer/PRESS_STOP'); }); } } -// Factory that will create a button at run time. -class CloseButtonFactory { - constructor(eventBus) { - this.eventBus = eventBus; - } - - create(rootElement, controls) { - return new CloseButton(rootElement, controls, this.eventBus); - } -} - -export default CloseButtonFactory; +export default { + create: (rootElement, controls) => new CloseButton(rootElement, controls), +}; diff --git a/src/player/ui/forward30button.js b/src/player/ui/forward30button.js index 0c20b5b1..d5f2c777 100644 --- a/src/player/ui/forward30button.js +++ b/src/player/ui/forward30button.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line max-classes-per-file import shaka from 'shaka-player/dist/shaka-player.ui.debug'; class Forward30Button extends shaka.ui.Element { @@ -42,11 +41,6 @@ class Forward30Button extends shaka.ui.Element { } } -// Factory that will create a button at run time. -class Forward30ButtonFactory { - create(rootElement, controls) { - return new Forward30Button(rootElement, controls); - } -} - -export default Forward30ButtonFactory; +export default { + create: (rootElement, controls) => new Forward30Button(rootElement, controls), +}; diff --git a/src/player/ui/nextbutton.js b/src/player/ui/nextbutton.js index 435246d2..59185e4d 100644 --- a/src/player/ui/nextbutton.js +++ b/src/player/ui/nextbutton.js @@ -1,44 +1,49 @@ -// eslint-disable-next-line max-classes-per-file import shaka from 'shaka-player/dist/shaka-player.ui.debug'; +import store from '@/store'; class NextButton extends shaka.ui.Element { #watcherCancellers = []; constructor(parent, controls) { super(parent, controls); - console.log(this); + // The actual button that will be displayed this.button = document.createElement('button'); this.button.classList.add('shaka-nextbutton'); + this.button.classList.add('shaka-slplayer-button'); this.button.classList.add('material-icons-round'); this.button.textContent = 'skip_next'; this.parent.appendChild(this.button); - const store = null; + this.#watcherCancellers = [ store.watch( - (state, getters) => getters['plexservers/lol'], - () => {}, + (state, getters) => getters['plexclients/ACTIVE_PLAY_QUEUE_NEXT_ITEM_EXISTS'], + (nextItemExists) => { this.setButtonEnabled(nextItemExists); }, + { immediate: true }, ), ]; // Listen for clicks on the button to start the next playback this.eventManager.listen(this.button, 'click', () => { - console.log('click'); + // TODO: maybe await and lock this one at a time? + store.dispatch('slplayer/PLAY_NEXT'); }); } + setButtonEnabled(nextItemExists) { + this.button.disabled = !nextItemExists; + } + // TODO: replace this function name with "release" when upgrading to shaka 3 destroy() { - console.log('NEXT BUTTON RELEASE CALLED'); + this.#watcherCancellers.forEach((canceller) => { + canceller(); + }); + super.destroy(); } } -// Factory that will create a button at run time. -class NextButtonFactory { - create(rootElement, controls) { - return new NextButton(rootElement, controls, this.eventBus); - } -} - -export default NextButtonFactory; +export default { + create: (rootElement, controls) => new NextButton(rootElement, controls), +}; diff --git a/src/player/ui/replay10button.js b/src/player/ui/replay10button.js index 76bd3a31..e7d10dc8 100644 --- a/src/player/ui/replay10button.js +++ b/src/player/ui/replay10button.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line max-classes-per-file import shaka from 'shaka-player/dist/shaka-player.ui.debug'; class Replay10Button extends shaka.ui.Element { @@ -42,11 +41,6 @@ class Replay10Button extends shaka.ui.Element { } } -// Factory that will create a button at run time. -class Replay10ButtonFactory { - create(rootElement, controls) { - return new Replay10Button(rootElement, controls); - } -} - -export default Replay10ButtonFactory; +export default { + create: (rootElement, controls) => new Replay10Button(rootElement, controls), +}; diff --git a/src/store/modules/plexclients/getters.js b/src/store/modules/plexclients/getters.js index 3dfc2a9a..6c36cd0b 100644 --- a/src/store/modules/plexclients/getters.js +++ b/src/store/modules/plexclients/getters.js @@ -84,4 +84,9 @@ export default { ? getters.GET_ACTIVE_PLAY_QUEUE .Metadata[getters.GET_ACTIVE_PLAY_QUEUE.playQueueSelectedItemOffset] : null), + + ACTIVE_PLAY_QUEUE_NEXT_ITEM_EXISTS: (state, getters) => (getters.GET_ACTIVE_PLAY_QUEUE + ? getters.GET_ACTIVE_PLAY_QUEUE.playQueueSelectedItemOffset + < (getters.GET_ACTIVE_PLAY_QUEUE.size - 1) + : false), }; diff --git a/src/store/modules/plexclients/state.js b/src/store/modules/plexclients/state.js index 468d85e2..e982c948 100644 --- a/src/store/modules/plexclients/state.js +++ b/src/store/modules/plexclients/state.js @@ -8,7 +8,7 @@ const state = () => ({ product: 'SyncLounge', name: 'SyncLounge Player', labels: [['Recommended', 'green']], - lastSeenAt: Date.now().toISOString(), + lastSeenAt: new Date().toISOString(), }, }, diff --git a/src/store/modules/slplayer/actions.js b/src/store/modules/slplayer/actions.js index 3aebc8cf..19d6c466 100644 --- a/src/store/modules/slplayer/actions.js +++ b/src/store/modules/slplayer/actions.js @@ -356,11 +356,15 @@ export default { commit('plexclients/SET_ACTIVE_MEDIA_METADATA', metadata, { root: true }); } else { if (rootGetters['plexclients/GET_ACTIVE_SERVER_ID'] !== rootGetters['plexclients/GET_ACTIVE_PLAY_QUEUE_MACHINE_IDENTIFIER']) { + console.log('nomatch'); commit('plexclients/SET_ACTIVE_SERVER_ID', rootGetters['plexclients/GET_ACTIVE_PLAY_QUEUE_MACHINE_IDENTIFIER'], { root: true }); commit('plexservers/SET_LAST_SERVER_ID', rootGetters['plexclients/GET_ACTIVE_PLAY_QUEUE_MACHINE_IDENTIFIER'], { root: true }); } - commit('plexclients/SET_ACTIVE_MEDIA_METADATA', rootGetters['plexclients/GET_ACTIVE_PLAY_QUEUE_SELECTED_ITEM'], { root: true }); + commit('plexclients/SET_ACTIVE_MEDIA_METADATA', { + machineIdentifier: rootGetters['plexclients/GET_ACTIVE_SERVER_ID'], + ...rootGetters['plexclients/GET_ACTIVE_PLAY_QUEUE_SELECTED_ITEM'], + }, { root: true }); } // Assume same server machineIdentifier, but this may not always be okay to do. (TODO: figure it out)