diff --git a/demo/css/plyr-ads.css b/demo/css/plyr-ads.css index 6c72ced..2a6515a 100644 --- a/demo/css/plyr-ads.css +++ b/demo/css/plyr-ads.css @@ -2,6 +2,7 @@ position: relative; } .plyr-ads { + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; position: absolute; top: 0; left: 0; @@ -10,3 +11,24 @@ z-index: 10; } .plyr-ads video { left: 0; } + .plyr-ads__skip-button { + font-size: .8rem; + position: absolute; + color: #fff; + bottom: 40px; + right: 0; + z-index: 11; + background: rgba(0, 0, 0, 0.8); + padding: 5px 10px; } + .plyr-ads__skip-button.done { + font-size: 1.5rem; } + .plyr-ads__skip-button.done:after { + content: ''; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAABGdBTUEAALGPC/xhBQAAAAJiS0dEAP+Hj8y/AAAAZElEQVQ4y+3SwQmDQBBGYRFy9mYLSRXWEyvRRtKBbdhDUoTH8HkVllX+u++48GD2zTTNTYiPrnhDXeBnyAT+Zo9EgNUrE9iMmQCLvhTas2jXWY8jvbNPP5OsU5L1my0uPY2bCjtXdo6mqRVtTgAAAABJRU5ErkJggg=="); + background-repeat: no-repeat; + display: inline-block; + height: 24px; + margin-left: 2px; + vertical-align: middle; + width: 24px; + display: inline-block; } diff --git a/demo/js/plyr-ads.js b/demo/js/plyr-ads.js index e908485..1df28f1 100644 --- a/demo/js/plyr-ads.js +++ b/demo/js/plyr-ads.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr-Ads -// plyr-ads.js v1.0.2 +// plyr-ads.js v1.0.3 // https://github.com/ferdiemmen/plyr-ads // License: The MIT License (MIT) // ========================================================================== @@ -72,10 +72,12 @@ function PlyrAds(plyr, options) { this.adsManager; this.adsLoader; + this.adDuration; this.intervalTimer; this.plyr = plyr; this.options = options; this.plyrContainer = plyr.getContainer(); + this.adPaused = false; this.skipAdButton; this.adDisplayContainer; @@ -113,13 +115,24 @@ function _createAdSkipButton() { var delay = parseInt(this.options.skipButton.delay, 10) * 1000; - setTimeout(function() { - this.skipAdButton = _insertElement('button', this.plyrContainer, {class: 'plyr-ads__skip-button'}); - this.skipAdButton.innerHTML = this.options.skipButton.text; - this.skipAdButton.addEventListener(_getStartEvent(), function() { - this.playVideo(); - }.bind(this), false); - }.bind(this), delay); + var skipTimer = this.options.skipButton.delay; + + this.skipAdButton = _insertElement('button', this.plyrContainer, {class: 'plyr-ads__skip-button'}); + this.skipAdButton.innerHTML = 'You can skip to video in ' + (skipTimer--); + + var skipButtonTimer = window.setInterval(function() { + if (!this.adPaused) { + this.skipAdButton.innerHTML = 'You can skip to video in ' + skipTimer--; + } + if ((skipTimer + 1) === 0) { + this.skipAdButton.className += ' done'; + this.skipAdButton.innerHTML = this.options.skipButton.text; + this.skipAdButton.addEventListener(_getStartEvent(), function() { + this.playVideo(); + }.bind(this), false); + window.clearInterval(skipButtonTimer); + } + }.bind(this), 1000); } function _getStartEvent() { @@ -158,7 +171,9 @@ } function _playVideo() { - this.skipAdButton.remove(); + if (this.skipAdButton) { + this.skipAdButton.remove(); + } this.adDisplayContainer.I.remove(); this.plyr.play(); } @@ -188,9 +203,6 @@ function _playAds() { - // Add ad skip button to DOM. - this.createAdSkipButton(); - // Initialize the container. Must be done via a user action on mobile devices. this.adDisplayContainer.initialize(); @@ -241,6 +253,16 @@ function (e) { this.onAdEvent(e); }.bind(this)); + this.adsManager.addEventListener( + google.ima.AdEvent.Type.PAUSED, + function (e) { + this.onAdEvent(e); + }.bind(this)); + this.adsManager.addEventListener( + google.ima.AdEvent.Type.RESUMED, + function (e) { + this.onAdEvent(e); + }.bind(this)); this.adsManager.addEventListener( google.ima.AdEvent.Type.COMPLETE, function (e) { @@ -280,11 +302,35 @@ if (ad.isLinear()) { // For a linear ad, a timer can be started to poll for // the remaining time. - this.intervalTimer = setInterval( - function () { - var remainingTime = Math.round(this.adsManager.getRemainingTime()); - }.bind(this), - 300); // every 300ms + // this.intervalTimer = setInterval( + // function () { + // var remainingTime = Math.round(this.adsManager.getRemainingTime()); + // }.bind(this), + // 300); // every 300ms + if (ad.g.duration > 15) { + // Add ad skip button to DOM. + this.createAdSkipButton(); + } + } + break; + case google.ima.AdEvent.Type.PAUSED: + // This event indicates the ad has started - the video player + // can adjust the UI, for example display a pause button and + // remaining time. + if (ad.isLinear()) { + // For a linear ad, a timer can be started to poll for + // the remaining time. + this.adPaused = true; + } + break; + case google.ima.AdEvent.Type.RESUMED: + // This event indicates the ad has started - the video player + // can adjust the UI, for example display a pause button and + // remaining time. + if (ad.isLinear()) { + // For a linear ad, a timer can be started to poll for + // the remaining time. + this.adPaused = false; } break; case google.ima.AdEvent.Type.COMPLETE: diff --git a/package.json b/package.json index 1e0d712..3dc4a9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr-ads", - "version": "1.0.2", + "version": "1.0.3", "description": "Ads plugin for the awesome Plyr media player", "main": "src/js/plyr-ads.js", "devDependencies": { diff --git a/src/js/plyr-ads.js b/src/js/plyr-ads.js index e908485..1df28f1 100644 --- a/src/js/plyr-ads.js +++ b/src/js/plyr-ads.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr-Ads -// plyr-ads.js v1.0.2 +// plyr-ads.js v1.0.3 // https://github.com/ferdiemmen/plyr-ads // License: The MIT License (MIT) // ========================================================================== @@ -72,10 +72,12 @@ function PlyrAds(plyr, options) { this.adsManager; this.adsLoader; + this.adDuration; this.intervalTimer; this.plyr = plyr; this.options = options; this.plyrContainer = plyr.getContainer(); + this.adPaused = false; this.skipAdButton; this.adDisplayContainer; @@ -113,13 +115,24 @@ function _createAdSkipButton() { var delay = parseInt(this.options.skipButton.delay, 10) * 1000; - setTimeout(function() { - this.skipAdButton = _insertElement('button', this.plyrContainer, {class: 'plyr-ads__skip-button'}); - this.skipAdButton.innerHTML = this.options.skipButton.text; - this.skipAdButton.addEventListener(_getStartEvent(), function() { - this.playVideo(); - }.bind(this), false); - }.bind(this), delay); + var skipTimer = this.options.skipButton.delay; + + this.skipAdButton = _insertElement('button', this.plyrContainer, {class: 'plyr-ads__skip-button'}); + this.skipAdButton.innerHTML = 'You can skip to video in ' + (skipTimer--); + + var skipButtonTimer = window.setInterval(function() { + if (!this.adPaused) { + this.skipAdButton.innerHTML = 'You can skip to video in ' + skipTimer--; + } + if ((skipTimer + 1) === 0) { + this.skipAdButton.className += ' done'; + this.skipAdButton.innerHTML = this.options.skipButton.text; + this.skipAdButton.addEventListener(_getStartEvent(), function() { + this.playVideo(); + }.bind(this), false); + window.clearInterval(skipButtonTimer); + } + }.bind(this), 1000); } function _getStartEvent() { @@ -158,7 +171,9 @@ } function _playVideo() { - this.skipAdButton.remove(); + if (this.skipAdButton) { + this.skipAdButton.remove(); + } this.adDisplayContainer.I.remove(); this.plyr.play(); } @@ -188,9 +203,6 @@ function _playAds() { - // Add ad skip button to DOM. - this.createAdSkipButton(); - // Initialize the container. Must be done via a user action on mobile devices. this.adDisplayContainer.initialize(); @@ -241,6 +253,16 @@ function (e) { this.onAdEvent(e); }.bind(this)); + this.adsManager.addEventListener( + google.ima.AdEvent.Type.PAUSED, + function (e) { + this.onAdEvent(e); + }.bind(this)); + this.adsManager.addEventListener( + google.ima.AdEvent.Type.RESUMED, + function (e) { + this.onAdEvent(e); + }.bind(this)); this.adsManager.addEventListener( google.ima.AdEvent.Type.COMPLETE, function (e) { @@ -280,11 +302,35 @@ if (ad.isLinear()) { // For a linear ad, a timer can be started to poll for // the remaining time. - this.intervalTimer = setInterval( - function () { - var remainingTime = Math.round(this.adsManager.getRemainingTime()); - }.bind(this), - 300); // every 300ms + // this.intervalTimer = setInterval( + // function () { + // var remainingTime = Math.round(this.adsManager.getRemainingTime()); + // }.bind(this), + // 300); // every 300ms + if (ad.g.duration > 15) { + // Add ad skip button to DOM. + this.createAdSkipButton(); + } + } + break; + case google.ima.AdEvent.Type.PAUSED: + // This event indicates the ad has started - the video player + // can adjust the UI, for example display a pause button and + // remaining time. + if (ad.isLinear()) { + // For a linear ad, a timer can be started to poll for + // the remaining time. + this.adPaused = true; + } + break; + case google.ima.AdEvent.Type.RESUMED: + // This event indicates the ad has started - the video player + // can adjust the UI, for example display a pause button and + // remaining time. + if (ad.isLinear()) { + // For a linear ad, a timer can be started to poll for + // the remaining time. + this.adPaused = false; } break; case google.ima.AdEvent.Type.COMPLETE: diff --git a/src/scss/plyr-ads.scss b/src/scss/plyr-ads.scss index 8a228a1..32e44f9 100644 --- a/src/scss/plyr-ads.scss +++ b/src/scss/plyr-ads.scss @@ -17,13 +17,28 @@ } &__skip-button { - font-size: 1.5rem; + font-size: .8rem; position: absolute; color: #fff; - top: 20px; + bottom: 40px; right: 0; z-index: 11; background: rgba(0,0,0,.8); padding: 5px 10px; + + &.done { + font-size: 1.5rem; + &:after { + content: ''; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAABGdBTUEAALGPC/xhBQAAAAJiS0dEAP+Hj8y/AAAAZElEQVQ4y+3SwQmDQBBGYRFy9mYLSRXWEyvRRtKBbdhDUoTH8HkVllX+u++48GD2zTTNTYiPrnhDXeBnyAT+Zo9EgNUrE9iMmQCLvhTas2jXWY8jvbNPP5OsU5L1my0uPY2bCjtXdo6mqRVtTgAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; + display: inline-block; + height: 24px; + margin-left: 2px; + vertical-align: middle; + width: 24px; + display: inline-block; + } + } } }