Added cue markings within the time line for when midrolls will be displayed. Removed unusued callback parameter.

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',

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) => {

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;
+}