diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/listeners.js | 16 | ||||
| -rw-r--r-- | src/js/plugins/ads.js | 38 | ||||
| -rw-r--r-- | src/js/plyr.js | 32 | ||||
| -rw-r--r-- | src/js/ui.js | 3 |
4 files changed, 65 insertions, 24 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js index bc3f62b0..7c39ece7 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -278,18 +278,28 @@ class Listeners { // Check for buffer progress utils.on(this.player.media, 'progress playing', event => ui.updateProgress.call(this.player, event)); - // Handle native mute + // Handle volume changes utils.on(this.player.media, 'volumechange', event => ui.updateVolume.call(this.player, event)); - // Handle native play/pause + // Handle play/pause utils.on(this.player.media, 'playing play pause ended emptied', event => ui.checkPlaying.call(this.player, event)); - // Loading + // Loading state utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event)); // Check if media failed to load // utils.on(this.player.media, 'play', event => ui.checkFailed.call(this.player, event)); + // If autoplay, then load advertisement if required + // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows + utils.on(this.player.media, 'playing', () => { + // If ads are enabled, wait for them first + if (this.player.ads.enabled && !this.player.ads.initialized) { + // Wait for manager response + this.player.ads.managerPromise.then(() => this.player.ads.play()).catch(() => this.player.play()); + } + }); + // Click video if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) { // Re-fetch the wrapper diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 3e8f0923..b9d9ac1c 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -206,21 +206,23 @@ class Ads { this.cuePoints = this.manager.getCuePoints(); // Add advertisement cue's within the time line if available - this.cuePoints.forEach(cuePoint => { - if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) { - const seekElement = this.player.elements.progress; - - if (seekElement) { - const cuePercentage = 100 / this.player.duration * cuePoint; - const cue = utils.createElement('span', { - class: this.player.config.classNames.cues, - }); - - cue.style.left = `${cuePercentage.toString()}%`; - seekElement.appendChild(cue); + if (!utils.is.empty(this.cuePoints)) { + this.cuePoints.forEach(cuePoint => { + if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) { + const seekElement = this.player.elements.progress; + + if (utils.is.element(seekElement)) { + const cuePercentage = 100 / this.player.duration * cuePoint; + const cue = utils.createElement('span', { + class: this.player.config.classNames.cues, + }); + + cue.style.left = `${cuePercentage.toString()}%`; + seekElement.appendChild(cue); + } } - } - }); + }); + } // Get skippable state // TODO: Skip button @@ -385,6 +387,10 @@ class Ads { this.player.on('seeked', () => { const seekedTime = this.player.currentTime; + if (utils.is.empty(this.cuePoints)) { + return; + } + this.cuePoints.forEach((cuePoint, index) => { if (time < cuePoint && cuePoint < seekedTime) { this.manager.discardAdBreak(); @@ -396,7 +402,9 @@ class Ads { // Listen to the resizing of the window. And resize ad accordingly // TODO: eventually implement ResizeObserver window.addEventListener('resize', () => { - this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); + if (this.manager) { + this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); + } }); } diff --git a/src/js/plyr.js b/src/js/plyr.js index 1c94df62..89afdb4d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -133,7 +133,17 @@ class Plyr { } // Cache original element state for .destroy() - this.elements.original = this.media.cloneNode(true); + // TODO: Investigate a better solution as I suspect this causes reported double load issues? + setTimeout(() => { + const clone = this.media.cloneNode(true); + + // Prevent the clone autoplaying + if (clone.getAttribute('autoplay')) { + clone.pause(); + } + + this.elements.original = clone; + }, 0); // Set media type based on tag or data attribute // Supported: video, audio, vimeo, youtube @@ -286,6 +296,11 @@ class Plyr { // Setup ads if provided this.ads = new Ads(this); + + // Autoplay if required + if (this.config.autoplay) { + this.play(); + } } // --------------------------------------- @@ -323,9 +338,9 @@ class Plyr { } // If ads are enabled, wait for them first - if (this.ads.enabled && !this.ads.initialized) { + /* if (this.ads.enabled && !this.ads.initialized) { return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play()); - } + } */ // Return the promise (for HTML5) return this.media.play(); @@ -384,7 +399,7 @@ class Plyr { stop() { if (this.isHTML5) { this.media.load(); - } else { + } else if (utils.is.function(this.media.stop)) { this.media.stop(); } } @@ -524,8 +539,8 @@ class Plyr { // Set the player volume this.media.volume = volume; - // If muted, and we're increasing volume, reset muted state - if (this.muted && volume > 0) { + // If muted, and we're increasing volume manually, reset muted state + if (!utils.is.empty(value) && this.muted && volume > 0) { this.muted = false; } } @@ -1019,6 +1034,11 @@ class Plyr { // then set the timer to hide the controls if (!show || this.playing) { this.timers.controls = setTimeout(() => { + // We need controls of course... + if (!utils.is.element(this.elements.controls)) { + return; + } + // If the mouse is over the controls (and not entering fullscreen), bail if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) { return; diff --git a/src/js/ui.js b/src/js/ui.js index a3b3754a..97281b28 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -74,6 +74,9 @@ const ui = { // Reset quality options this.options.quality = []; + // Reset volume display + ui.updateVolume.call(this); + // Reset time display ui.timeUpdate.call(this); |