Rooba
/
synclounge
mirror of https://github.com/synclounge/synclounge.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change media selection to use vuex watchers

This commit is contained in:
Travis Shivers 2020-06-29 20:27:04 -05:00
parent 95e5ee6660
commit 18c1b35f1c
2 changed files with 34 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/application/slplayer.vue
View File

@ -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

80
src/player/ui/mediaselection.js
View File

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