ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for custom controls

Browse Source
This commit is contained in:
Sam Potts
2018-02-13 00:01:19 +11:00
parent 58c2c52c95
commit 6a9be8d16b
10 changed files with 66 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
readme.md
View File

@ -244,10 +244,10 @@ Options can be passed as an object to the constructor as above or as JSON in `da
Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
| Option | Type | Default | Description |
| -------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | Boolean | `true` | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below. |
| `debug` | Boolean | `false` | Display debugging information in the console |
| `controls` | Function or Array | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return a string of HTML for the controls. Three arguments will be passed to your function; id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
| `controls` | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
| `settings` | Array | `['captions', 'quality', 'speed', 'loop']` | If you're using the default controls are used then you can specify which settings to show in the menu |
| `i18n` | Object | See [defaults.js](/src/js/defaults.js) | Used for internationalization (i18n) of the text within the UI. |
| `loadSprite` | Boolean | `true` | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself. |

6
src/js/captions.js
View File

@ -39,7 +39,7 @@ const captions = {
// Only Vimeo and HTML5 video supported at this point
if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
// Clear menu and hide
if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
controls.setCaptionsMenu.call(this);
}
@ -68,7 +68,7 @@ const captions = {
captions.show.call(this);
// Set available languages in list
if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
controls.setCaptionsMenu.call(this);
}
},
@ -124,7 +124,7 @@ const captions = {
setCue(input) {
// Get the track from the event if needed
const track = utils.is.event(input) ? input.target : input;
const {activeCues} = track;
const { activeCues } = track;
const active = activeCues.length && activeCues[0];
const currentTrack = captions.getCurrentTrack.call(this);

17
src/js/controls.js vendored
View File

@ -215,7 +215,16 @@ const controls = {
utils.setAttributes(button, attributes);
// We have multiple play buttons
if (type === 'play') {
if (!utils.is.array(this.elements.buttons[type])) {
this.elements.buttons[type] = [];
}
this.elements.buttons[type].push(button);
} else {
this.elements.buttons[type] = button;
}
return button;
},
@ -893,7 +902,6 @@ const controls = {
// Play/Pause button
if (this.config.controls.includes('play')) {
container.appendChild(controls.createButton.call(this, 'play'));
// container.appendChild(controls.createButton.call(this, 'pause'));
}
// Fast forward button
@ -1147,9 +1155,10 @@ const controls = {
// Null by default
let container = null;
this.elements.controls = null;
// HTML passed as the option
if (utils.is.string(this.config.controls)) {
// HTML or Element passed as the option
if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) {
container = this.config.controls;
} else if (utils.is.function(this.config.controls)) {
// A custom function to build controls
@ -1193,7 +1202,7 @@ const controls = {
}
// Find the elements if need be
if (utils.is.element(this.elements.controls)) {
if (!utils.is.element(this.elements.controls)) {
utils.findElements.call(this);
}

3
src/js/fullscreen.js
View File

@ -70,6 +70,9 @@ class Fullscreen {
this.toggle();
});
// Prevent double click on controls bubbling up
utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
// Update the UI
this.update();
}

2
src/js/media.js
View File

@ -86,7 +86,7 @@ const media = {
}
// Remove child sources
Array.from(this.media.querySelectorAll('source')).forEach(utils.removeElement);
utils.removeElement(this.media.querySelectorAll('source'));
// Set blank video src attribute
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error

8
src/js/plyr.js
View File

@ -1042,12 +1042,8 @@ class Plyr {
// If it's a soft destroy, make minimal changes
if (soft) {
if (Object.keys(this.elements).length) {
// Remove buttons
if (this.elements.buttons && this.elements.buttons.play) {
Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
}
// Remove others
// Remove elements
utils.removeElement(this.elements.buttons.play);
utils.removeElement(this.elements.captions);
utils.removeElement(this.elements.controls);
utils.removeElement(this.elements.wrapper);

6
src/js/ui.js
View File

@ -32,12 +32,6 @@ const ui = {
if (!this.supported.ui) {
this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
// Remove controls
utils.removeElement.call(this, 'controls');
// Remove large play
utils.removeElement.call(this, 'buttons.play');
// Restore native controls
ui.toggleNativeControls.call(this, true);

11
src/js/utils.js
View File

@ -306,12 +306,15 @@ const utils = {
// Remove an element
removeElement(element) {
if (!utils.is.element(element) || !utils.is.element(element.parentNode)) {
return null;
return;
}
if (utils.is.nodeList(element) || utils.is.array(element)) {
Array.from(element).forEach(utils.removeElement);
return;
}
element.parentNode.removeChild(element);
return element;
},
// Remove all child elements
@ -569,7 +572,7 @@ const utils = {
}
// If a nodelist is passed, call itself on each node
if (utils.is.nodeList(elements)) {
if (utils.is.nodeList(elements) || utils.is.array(elements)) {
// Create listener for each node
Array.from(elements).forEach(element => {
if (element instanceof Node) {