diff options
| -rw-r--r-- | src/js/defaults.js | 1 | ||||
| -rw-r--r-- | src/js/plugins/ads.js | 17 | ||||
| -rw-r--r-- | src/sass/plugins/ads.scss | 14 |
3 files changed, 30 insertions, 2 deletions
diff --git a/src/js/defaults.js b/src/js/defaults.js index 8f1d37b1..d893c43c 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -312,6 +312,7 @@ const defaults = { error: 'plyr--has-error', hover: 'plyr--hover', tooltip: 'plyr__tooltip', + cues: 'plyr__cues', hidden: 'plyr__sr-only', hideControls: 'plyr--hide-controls', isIos: 'plyr--is-ios', diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 3738ed81..1df56b7b 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -141,6 +141,7 @@ class Ads { * @param {Event} adsManagerLoadedEvent */ onAdsManagerLoaded(adsManagerLoadedEvent) { + const { container } = this.player.elements; // Get the ads manager. const settings = new google.ima.AdsRenderingSettings(); @@ -156,6 +157,18 @@ class Ads { // Get the cue points for any mid-rolls by filtering out the pre- and post-roll. this.adsCuePoints = this.adsManager.getCuePoints(); + // Add advertisement cue's within the time line if available. + this.adsCuePoints.forEach((cuePoint, index) => { + if (cuePoint !== 0 && cuePoint !== -1) { + const seekElement = this.player.elements.progress; + const cue = utils.createElement('span', { + class: this.player.config.classNames.cues, + }); + cue.style.left = cuePoint.toString() + 'px'; + seekElement.appendChild(cue); + } + }); + // Add listeners to the required events. // Advertisement error events. this.adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error)); @@ -368,12 +381,12 @@ class Ads { this.adsLoader.contentComplete(); }); - this.player.on('seeking', event => { + this.player.on('seeking', () => { time = this.player.currentTime; return time; }); - this.player.on('seeked', event => { + this.player.on('seeked', () => { const seekedTime = this.player.currentTime; this.adsCuePoints.forEach((cuePoint, index) => { diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 3c91dd5e..4bff7a20 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -16,3 +16,17 @@ left: 0; } } + +// Advertisement cue's for the progress bar. +.plyr__cues { + display: block; + position: absolute; + z-index: 3; // Between progress and thumb. + top: 50%; + left: 0; + margin: -($plyr-range-track-height / 2) 0 0; + width: 3px; + height: $plyr-range-track-height; + background: currentColor; + opacity: 0.8; +} |