Added next button and simplified shaka buttons

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();
   },

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),
+};

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),
+};

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),
+};

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),
+};

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),
 };

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(),
     },
   },
 

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)