diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/defaults.js | 3 | ||||
| -rw-r--r-- | src/js/plugins/ads.js | 20 | ||||
| -rw-r--r-- | src/sass/plugins/ads.scss | 8 |
3 files changed, 17 insertions, 14 deletions
diff --git a/src/js/defaults.js b/src/js/defaults.js index 31a1f8a8..dedd4b2b 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -179,7 +179,6 @@ const defaults = { reset: 'Reset', none: 'None', disabled: 'Disabled', - adCountdown: 'Ad - {countdown}', }, // URLs @@ -365,7 +364,7 @@ const defaults = { // Ads ads: { - tagUrl: null, + tag: null, }, }; diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index e7940d18..5c828141 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -18,7 +18,7 @@ class Ads { this.player = player; this.playing = false; this.initialized = false; - this.enabled = utils.is.url(player.config.ads.tagUrl); + this.enabled = utils.is.url(player.config.ads.tag); // Check if a tag URL is provided. if (!this.enabled) { @@ -122,7 +122,7 @@ class Ads { // Request video ads const request = new google.ima.AdsRequest(); - request.adTagUrl = this.player.config.ads.tagUrl; + request.adTagUrl = this.player.config.ads.tag; // Specify the linear and nonlinear slot sizes. This helps the SDK // to select the correct creative if multiple are returned @@ -150,15 +150,15 @@ class Ads { if (!start) { window.clearInterval(this.countdownTimer); this.elements.container.removeAttribute('data-badge-text'); + return; } const update = () => { const time = utils.formatTime(this.manager.getRemainingTime()); - const text = this.player.config.i18n.adCountdown.replace('{countdown}', time); - this.elements.container.setAttribute('data-badge-text', text); + this.elements.container.setAttribute('data-badge-text', time); }; - this.countdownTimer = window.setInterval(update, 500); + this.countdownTimer = window.setInterval(update, 100); } /** @@ -296,7 +296,9 @@ class Ads { // for example display a pause button and remaining time. Fired when content should // be paused. This usually happens right before an ad is about to cover the content this.handleEventListeners('CONTENT_PAUSE_REQUESTED'); + dispatchEvent('contentpause'); + this.pauseContent(); break; @@ -307,8 +309,13 @@ class Ads { // Fired when content should be resumed. This usually happens when an ad finishes // or collapses this.handleEventListeners('CONTENT_RESUME_REQUESTED'); + dispatchEvent('contentresume'); + + this.pollCountdown(); + this.resumeContent(); + break; case google.ima.AdEvent.Type.STARTED: @@ -321,9 +328,6 @@ class Ads { case google.ima.AdEvent.Type.COMPLETE: dispatchEvent('complete'); - - // End countdown - this.pollCountdown(); break; case google.ima.AdEvent.Type.IMPRESSION: diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 60751851..86fd8e30 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -9,7 +9,7 @@ position: absolute; right: 0; top: 0; - z-index: 3; // Above the controls. + z-index: 3; // Above the controls &::after { background: rgba($plyr-color-gunmetal, 0.8); @@ -17,7 +17,7 @@ bottom: $plyr-control-spacing; color: #fff; content: attr(data-badge-text); - font-size: 10px; + font-size: 11px; padding: 2px 6px; pointer-events: none; position: absolute; @@ -30,7 +30,7 @@ } } -// Advertisement cue's for the progress bar. +// Advertisement cue's for the progress bar .plyr__cues { background: currentColor; display: block; @@ -41,5 +41,5 @@ position: absolute; top: 50%; width: 3px; - z-index: 3; // Between progress and thumb. + z-index: 3; // Between progress and thumb } |