Skip to content

Commit

Permalink
Add skip button timer
Browse files Browse the repository at this point in the history
  • Loading branch information
@ferdiemmen
ferdiemmen committed Jun 21, 2017
1 parent 9be1760 commit cc91da5
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 37 deletions.
22 changes: 22 additions & 0 deletions demo/css/plyr-ads.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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; }
80 changes: 63 additions & 17 deletions demo/js/plyr-ads.js
View file
Original file line number Diff line number Diff line change
@@ -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)
// ==========================================================================
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -158,7 +171,9 @@
}

function _playVideo() {
this.skipAdButton.remove();
if (this.skipAdButton) {
this.skipAdButton.remove();
}
this.adDisplayContainer.I.remove();
this.plyr.play();
}
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
80 changes: 63 additions & 17 deletions src/js/plyr-ads.js
View file
Original file line number Diff line number Diff line change
@@ -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)
// ==========================================================================
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -158,7 +171,9 @@
}

function _playVideo() {
this.skipAdButton.remove();
if (this.skipAdButton) {
this.skipAdButton.remove();
}
this.adDisplayContainer.I.remove();
this.plyr.play();
}
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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:
Expand Down
19 changes: 17 additions & 2 deletions src/scss/plyr-ads.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}

0 comments on commit cc91da5

Please sign in to comment.