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

Cleaned up shaka ui components

This commit is contained in:
Travis Shivers 2020-06-29 20:52:43 -05:00
parent 18c1b35f1c
commit 3c8e8b84c3
11 changed files with 114 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -187,15 +187,7 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
import sizing from '@/mixins/sizing';
import 'shaka-player/dist/controls.css';
import BitrateSelectionFactory from '@/player/ui/bitrateselection';
import SubtitleSelectionFactory from '@/player/ui/subtitleselection';
import AudioSelectionFactory from '@/player/ui/audioselection';
import MediaSelectionFactory from '@/player/ui/mediaselection';
import CloseButtonFactory from '@/player/ui/closebutton';
import Forward30ButtonFactory from '@/player/ui/forward30button';
import Replay10ButtonFactory from '@/player/ui/replay10button';
import NextButtonFactory from '@/player/ui/nextbutton';
import '@/player/ui';
shaka.log.setLevel(shaka.log.Level.ERROR);
shaka.polyfill.installAll();
@ -280,17 +272,6 @@ export default {
},
},
created() {
shaka.ui.OverflowMenu.registerElement('bitrate', BitrateSelectionFactory);
shaka.ui.OverflowMenu.registerElement('subtitle', SubtitleSelectionFactory);
shaka.ui.OverflowMenu.registerElement('audio', AudioSelectionFactory);
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);
},
mounted() {
this.SET_PLAYER(new shaka.Player(this.$refs.videoPlayer));
this.SET_PLAYER_CONFIGURATION(this.playerConfig);

22
src/player/ui/audioselection.js
View File

@ -1,5 +1,7 @@
import shaka from 'shaka-player/dist/shaka-player.ui.debug';
import ShakaUtils from '@/player/ui/utils';
import {
setDisplay, getDescendantIfExists, removeAllChildren, focusOnTheChosenItem, checkmarkIcon,
} from '@/player/ui/utils';
import store from '@/store';
class AudioSelection extends shaka.ui.SettingsMenu {
@ -32,27 +34,27 @@ class AudioSelection extends shaka.ui.SettingsMenu {
updateAudioSelection() {
// Hide menu if no audio
if (store.getters['slplayer/GET_AUDIO_STREAMS'].length <= 0) {
ShakaUtils.setDisplay(this.menu, false);
ShakaUtils.setDisplay(this.button, false);
setDisplay(this.menu, false);
setDisplay(this.button, false);
return;
}
// Otherwise, restore it.
ShakaUtils.setDisplay(this.button, true);
setDisplay(this.button, true);
// Remove old shaka-resolutions
// 1. Save the back to menu button
const backButton = ShakaUtils.getFirstDescendantWithClassName(this.menu, 'shaka-back-to-overflow-button');
const backButton = getDescendantIfExists(this.menu, 'shaka-back-to-overflow-button');
// 2. Remove everything
ShakaUtils.removeAllChildren(this.menu);
removeAllChildren(this.menu);
// 3. Add the backTo Menu button back
this.menu.appendChild(backButton);
this.addAudioSelection();
ShakaUtils.focusOnTheChosenItem(this.menu);
focusOnTheChosenItem(this.menu);
}
addAudioSelection() {
@ -72,7 +74,7 @@ class AudioSelection extends shaka.ui.SettingsMenu {
if (audio.id === store.getters['slplayer/GET_AUDIO_STREAM_ID']) {
button.setAttribute('aria-selected', 'true');
button.appendChild(ShakaUtils.checkmarkIcon());
button.appendChild(checkmarkIcon());
span.classList.add('shaka-chosen-item');
this.currentSelection.textContent = span.textContent;
}
@ -95,6 +97,8 @@ class AudioSelection extends shaka.ui.SettingsMenu {
}
}
export default {
const factory = {
create: (rootElement, controls) => new AudioSelection(rootElement, controls),
};
shaka.ui.OverflowMenu.registerElement('audio', factory);

22
src/player/ui/bitrateselection.js
View File

@ -1,5 +1,7 @@
import shaka from 'shaka-player/dist/shaka-player.ui.debug';
import ShakaUtils from '@/player/ui/utils';
import {
setDisplay, getDescendantIfExists, removeAllChildren, focusOnTheChosenItem, checkmarkIcon,
} from '@/player/ui/utils';
import store from '@/store';
class BitrateSelection extends shaka.ui.SettingsMenu {
@ -32,27 +34,27 @@ class BitrateSelection extends shaka.ui.SettingsMenu {
updateBitrateSelection() {
// Hide menu if no bitrates
if (store.getters['slplayer/GET_QUALITIES'].length <= 0) {
ShakaUtils.setDisplay(this.menu, false);
ShakaUtils.setDisplay(this.button, false);
setDisplay(this.menu, false);
setDisplay(this.button, false);
return;
}
// Otherwise, restore it.
ShakaUtils.setDisplay(this.button, true);
setDisplay(this.button, true);
// Remove old shaka-resolutions
// 1. Save the back to menu button
const backButton = ShakaUtils.getFirstDescendantWithClassName(this.menu, 'shaka-back-to-overflow-button');
const backButton = getDescendantIfExists(this.menu, 'shaka-back-to-overflow-button');
// 2. Remove everything
ShakaUtils.removeAllChildren(this.menu);
removeAllChildren(this.menu);
// 3. Add the backTo Menu button back
this.menu.appendChild(backButton);
this.addBitrateSelection();
ShakaUtils.focusOnTheChosenItem(this.menu);
focusOnTheChosenItem(this.menu);
}
addBitrateSelection() {
@ -72,7 +74,7 @@ class BitrateSelection extends shaka.ui.SettingsMenu {
if (bitrateOption.maxVideoBitrate === store.getters['settings/GET_SLPLAYERQUALITY']) {
button.setAttribute('aria-selected', 'true');
button.appendChild(ShakaUtils.checkmarkIcon());
button.appendChild(checkmarkIcon());
span.classList.add('shaka-chosen-item');
this.currentSelection.textContent = span.textContent;
}
@ -95,6 +97,8 @@ class BitrateSelection extends shaka.ui.SettingsMenu {
}
}
export default {
const factory = {
create: (rootElement, controls) => new BitrateSelection(rootElement, controls),
};
shaka.ui.OverflowMenu.registerElement('bitrate', factory);

4
src/player/ui/closebutton.js
View File

@ -20,6 +20,8 @@ class CloseButton extends shaka.ui.Element {
}
}
export default {
const factory = {
create: (rootElement, controls) => new CloseButton(rootElement, controls),
};
shaka.ui.Controls.registerElement('close', factory);

4
src/player/ui/forward30button.js
View File

@ -41,6 +41,8 @@ class Forward30Button extends shaka.ui.Element {
}
}
export default {
const factory = {
create: (rootElement, controls) => new Forward30Button(rootElement, controls),
};
shaka.ui.Controls.registerElement('forward30', factory);

8
src/player/ui/index.js Normal file
View File

@ -0,0 +1,8 @@
import './bitrateselection';
import './subtitleselection';
import './audioselection';
import './mediaselection';
import './closebutton';
import './forward30button';
import './replay10button';
import './nextbutton';

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

@ -1,5 +1,7 @@
import shaka from 'shaka-player/dist/shaka-player.ui.debug';
import ShakaUtils from '@/player/ui/utils';
import {
setDisplay, getDescendantIfExists, removeAllChildren, focusOnTheChosenItem, checkmarkIcon,
} from '@/player/ui/utils';
import store from '@/store';
class MediaSelection extends shaka.ui.SettingsMenu {
@ -32,27 +34,27 @@ class MediaSelection extends shaka.ui.SettingsMenu {
updateMediaSelection() {
// Hide menu if there is only the one version
if (store.getters['slplayer/GET_MEDIA_LIST'].length <= 1) {
ShakaUtils.setDisplay(this.menu, false);
ShakaUtils.setDisplay(this.button, false);
setDisplay(this.menu, false);
setDisplay(this.button, false);
return;
}
// Otherwise, restore it.
ShakaUtils.setDisplay(this.button, true);
setDisplay(this.button, true);
// Remove old shaka-resolutions
// 1. Save the back to menu button
const backButton = ShakaUtils.getFirstDescendantWithClassName(this.menu, 'shaka-back-to-overflow-button');
const backButton = getDescendantIfExists(this.menu, 'shaka-back-to-overflow-button');
// 2. Remove everything
ShakaUtils.removeAllChildren(this.menu);
removeAllChildren(this.menu);
// 3. Add the backTo Menu button back
this.menu.appendChild(backButton);
this.addMediaSelection();
ShakaUtils.focusOnTheChosenItem(this.menu);
focusOnTheChosenItem(this.menu);
}
addMediaSelection() {
@ -72,7 +74,7 @@ class MediaSelection extends shaka.ui.SettingsMenu {
if (media.index === store.getters['slplayer/GET_MEDIA_INDEX']) {
button.setAttribute('aria-selected', 'true');
button.appendChild(ShakaUtils.checkmarkIcon());
button.appendChild(checkmarkIcon());
span.classList.add('shaka-chosen-item');
this.currentSelection.textContent = span.textContent;
}
@ -95,6 +97,8 @@ class MediaSelection extends shaka.ui.SettingsMenu {
}
}
export default {
const factory = {
create: (rootElement, controls) => new MediaSelection(rootElement, controls),
};
shaka.ui.OverflowMenu.registerElement('media', factory);

4
src/player/ui/nextbutton.js
View File

@ -45,6 +45,8 @@ class NextButton extends shaka.ui.Element {
}
}
export default {
const factory = {
create: (rootElement, controls) => new NextButton(rootElement, controls),
};
shaka.ui.Controls.registerElement('next', factory);

4
src/player/ui/replay10button.js
View File

@ -41,6 +41,8 @@ class Replay10Button extends shaka.ui.Element {
}
}
export default {
const factory = {
create: (rootElement, controls) => new Replay10Button(rootElement, controls),
};
shaka.ui.Controls.registerElement('replay10', factory);

22
src/player/ui/subtitleselection.js
View File

@ -1,5 +1,7 @@
import shaka from 'shaka-player/dist/shaka-player.ui.debug';
import ShakaUtils from '@/player/ui/utils';
import {
setDisplay, getDescendantIfExists, removeAllChildren, focusOnTheChosenItem, checkmarkIcon,
} from '@/player/ui/utils';
import store from '@/store';
class SubtitleSelection extends shaka.ui.SettingsMenu {
@ -32,27 +34,27 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
updateSubtitleSelection() {
// Hide menu if there is only the None subtitle option
if (store.getters['slplayer/GET_SUBTITLE_STREAMS'].length <= 1) {
ShakaUtils.setDisplay(this.menu, false);
ShakaUtils.setDisplay(this.button, false);
setDisplay(this.menu, false);
setDisplay(this.button, false);
return;
}
// Otherwise, restore it.
ShakaUtils.setDisplay(this.button, true);
setDisplay(this.button, true);
// Remove old shaka-resolutions
// 1. Save the back to menu button
const backButton = ShakaUtils.getFirstDescendantWithClassName(this.menu, 'shaka-back-to-overflow-button');
const backButton = getDescendantIfExists(this.menu, 'shaka-back-to-overflow-button');
// 2. Remove everything
ShakaUtils.removeAllChildren(this.menu);
removeAllChildren(this.menu);
// 3. Add the backTo Menu button back
this.menu.appendChild(backButton);
this.addSubtitleSelection();
ShakaUtils.focusOnTheChosenItem(this.menu);
focusOnTheChosenItem(this.menu);
}
addSubtitleSelection() {
@ -72,7 +74,7 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
if (subtitle.id === store.getters['slplayer/GET_SUBTITLE_STREAM_ID']) {
button.setAttribute('aria-selected', 'true');
button.appendChild(ShakaUtils.checkmarkIcon());
button.appendChild(checkmarkIcon());
span.classList.add('shaka-chosen-item');
this.currentSelection.textContent = span.textContent;
}
@ -95,6 +97,8 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
}
}
export default {
const factory = {
create: (rootElement, controls) => new SubtitleSelection(rootElement, controls),
};
shaka.ui.OverflowMenu.registerElement('subtitle', factory);

107
src/player/ui/utils.js
View File

@ -1,97 +1,72 @@
class ShakaUtils {
/**
/**
* Depending on the value of display, sets/removes the css class of element to
* either display it or hide it.
*
* @param {Element} element
* @param {boolean} display
*/
static setDisplay(element, display) {
if (!element) {
return;
}
if (display) {
// Removing a non-existent class doesn't throw, so, even if
// the element is not hidden, this should be fine.
element.classList.remove('shaka-hidden');
} else {
element.classList.add('shaka-hidden');
}
export const setDisplay = (element, display) => {
if (!element) {
return;
}
/**
* @param {!HTMLElement} element
* @param {string} className
* @return {!HTMLElement}
*/
// TODO: This can be replaced by shaka.util.Dom.getElementByClassName
static getFirstDescendantWithClassName(element, className) {
return ShakaUtils.getDescendantIfExists(element, className);
if (display) {
// Removing a non-existent class doesn't throw, so, even if
// the element is not hidden, this should be fine.
element.classList.remove('shaka-hidden');
} else {
element.classList.add('shaka-hidden');
}
};
/**
/**
* @param {!HTMLElement} element
* @param {string} className
* @return {?HTMLElement}
*/
static getDescendantIfExists(element, className) {
const childrenWithClassName = element.getElementsByClassName(className);
if (childrenWithClassName.length) {
return /** @type {!HTMLElement} */ (childrenWithClassName[0]);
}
return null;
export const getDescendantIfExists = (element, className) => {
const childrenWithClassName = element.getElementsByClassName(className);
if (childrenWithClassName.length) {
return /** @type {!HTMLElement} */ (childrenWithClassName[0]);
}
/**
return null;
};
/**
* Remove all of the child nodes of an element.
* @param {!Element} element
* @export
*/
static removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
export const removeAllChildren = (element) => {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
};
static checkmarkIcon() {
const icon = document.createElement('i');
icon.classList.add('material-icons-round');
icon.classList.add('shaka-chosen-item');
icon.textContent = 'done';
// Screen reader should ignore icon text.
icon.setAttribute('aria-hidden', 'true');
return icon;
}
export const checkmarkIcon = () => {
const icon = document.createElement('i');
icon.classList.add('material-icons-round');
icon.classList.add('shaka-chosen-item');
icon.textContent = 'done';
// Screen reader should ignore icon text.
icon.setAttribute('aria-hidden', 'true');
return icon;
};
/**
/**
* Finds a descendant of |menu| that has a 'shaka-chosen-item' class
* and focuses on its' parent.
*
* @param {HTMLElement} menu
*/
static focusOnTheChosenItem(menu) {
if (!menu) {
return;
}
const chosenItem = ShakaUtils.getDescendantIfExists(menu, 'shaka-chosen-item');
if (chosenItem) {
chosenItem.parentElement.focus();
}
export const focusOnTheChosenItem = (menu) => {
if (!menu) {
return;
}
static addEventListeners(eventListeners, eventBus) {
eventListeners.forEach(({ event, fn }) => {
eventBus.$on(event, fn);
});
const chosenItem = getDescendantIfExists(menu, 'shaka-chosen-item');
if (chosenItem) {
chosenItem.parentElement.focus();
}
static removeEventListeners(eventListeners, eventBus) {
eventListeners.forEach(({ event, fn }) => {
eventBus.$off(event, fn);
});
}
}
export default ShakaUtils;
};