diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/controls.js | 61 | ||||
| -rw-r--r-- | src/js/defaults.js | 2 | ||||
| -rw-r--r-- | src/js/fullscreen.js | 2 | ||||
| -rw-r--r-- | src/js/listeners.js | 2 | ||||
| -rw-r--r-- | src/js/plyr.js | 2 | ||||
| -rw-r--r-- | src/js/plyr.polyfilled.js | 2 | ||||
| -rw-r--r-- | src/js/ui.js | 9 | ||||
| -rw-r--r-- | src/js/utils.js | 2 | ||||
| -rw-r--r-- | src/sass/components/volume.scss | 9 |
9 files changed, 55 insertions, 36 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index 5f2fb402..4404da65 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -210,7 +210,6 @@ const controls = { // Add aria attributes attributes['aria-pressed'] = false; - attributes['aria-label'] = i18n.get(label, this.config); } else { button.appendChild(controls.createIcon.call(this, icon)); button.appendChild(controls.createLabel.call(this, label)); @@ -327,22 +326,14 @@ const controls = { // Create time display createTime(type) { - const container = utils.createElement('div', { - class: 'plyr__time', - }); + const attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]); - container.appendChild( - utils.createElement( - 'span', - { - class: this.config.classNames.hidden, - }, - i18n.get(type, this.config), - ), - ); - - container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00')); + const container = utils.createElement('div', utils.extend(attributes, { + class: `plyr__time ${attributes.class}`, + 'aria-label': i18n.get(type, this.config), + }), '0:00'); + // Reference for updates this.elements.display[type] = container; return container; @@ -1204,17 +1195,21 @@ const controls = { let container = null; this.elements.controls = null; - // HTML or Element passed as the option + // Set template properties + const props = { + id: this.id, + seektime: this.config.seekTime, + title: this.config.title, + }; + let update = true; + if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) { + // String or HTMLElement passed as the option container = this.config.controls; } else if (utils.is.function(this.config.controls)) { // A custom function to build controls // The function can return a HTMLElement or String - container = this.config.controls({ - id: this.id, - seektime: this.config.seekTime, - title: this.config.title, - }); + container = this.config.controls.call(this, props); } else { // Create controls container = controls.create.call(this, { @@ -1226,6 +1221,30 @@ const controls = { // TODO: Looping // loop: 'None', }); + update = false; + } + + // Replace props with their value + const replace = input => { + let result = input; + + Object.entries(props).forEach(([ + key, + value, + ]) => { + result = utils.replaceAll(result, `{${key}}`, value); + }); + + return result; + }; + + // Update markup + if (update) { + if (utils.is.string(this.config.controls)) { + container = replace(container); + } else if (utils.is.element(container)) { + container.innerHTML = replace(container.innerHTML); + } } // Controls container diff --git a/src/js/defaults.js b/src/js/defaults.js index b63ad3c8..418b60ae 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -56,7 +56,7 @@ const defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.2.3/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.2.4/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 479d6a2f..cd2d8ac6 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -70,7 +70,7 @@ class Fullscreen { // Fullscreen toggle on double click utils.on(this.player.elements.container, 'dblclick', event => { // Ignore double click in controls - if (this.player.elements.controls.contains(event.target)) { + if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { return; } diff --git a/src/js/listeners.js b/src/js/listeners.js index 5887c3ab..2664e827 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -253,7 +253,7 @@ class Listeners { utils.on(this.player.media, 'timeupdate seeking', event => ui.timeUpdate.call(this.player, event)); // Display duration - utils.on(this.player.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this.player, event)); + utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', event => ui.durationUpdate.call(this.player, event)); // Check for audio tracks on load // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point diff --git a/src/js/plyr.js b/src/js/plyr.js index 4b3f2c09..36b05082 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v3.2.3 +// plyr.js v3.2.4 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index a1debb7a..a4fd7afa 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.2.3 +// plyr.js v3.2.4 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/ui.js b/src/js/ui.js index 1d671577..ee77a2dd 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -48,11 +48,6 @@ const ui = { this.listeners.controls(); } - // If there's no controls, bail - if (!utils.is.element(this.elements.controls)) { - return; - } - // Remove native controls ui.toggleNativeControls.call(this); @@ -277,10 +272,10 @@ const ui = { } // Always display hours if duration is over an hour - const displayHours = utils.getHours(this.duration) > 0; + const forceHours = utils.getHours(this.duration) > 0; // eslint-disable-next-line no-param-reassign - target.textContent = utils.formatTime(time, displayHours, inverted); + target.textContent = utils.formatTime(time, forceHours, inverted); }, // Handle time change event diff --git a/src/js/utils.js b/src/js/utils.js index 41419b06..fca40f53 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -468,8 +468,8 @@ const utils = { // Display this.elements.display = { buffer: utils.getElement.call(this, this.config.selectors.display.buffer), - duration: utils.getElement.call(this, this.config.selectors.display.duration), currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime), + duration: utils.getElement.call(this, this.config.selectors.display.duration), }; // Seek tooltip diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss index e12dc675..d22b7cba 100644 --- a/src/sass/components/volume.scss +++ b/src/sass/components/volume.scss @@ -23,7 +23,12 @@ // Hide sound controls on iOS // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html -.plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'] { +.plyr--is-ios .plyr__volume { + display: none !important; +} + +// Vimeo has no toggle mute method so hide mute button +// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183 +.plyr--is-ios.plyr--vimeo [data-plyr='mute'] { display: none !important; } |