ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Plugin tweaks for ads and previews

Browse Source
This commit is contained in:
Sam Potts
2019-01-26 16:31:47 +11:00
parent c577eb01ce
commit c44351507f
20 changed files with 149 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

6
demo/dist/demo.js vendored
View File

@ -4156,8 +4156,10 @@ typeof navigator === "object" && (function () {
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
},
ads: {
enabled: env.prod || env.dev,
publisherId: '918848828995742'
enabled: true,
// env.prod || env.dev,
publisherId: '918848828995742',
tagUrl: 'https://pubads.g.doubleclick.net/gampad/live/ads?sz=640x360&iu=/21736521837/ovo/web&impl=s&gdfp_req=1&env=vp&output=vast&cust_params=usergroup%3Dannon%26content-type%3Don-demand&cmsid=2490180&vid=3788'
},
previewThumbnails: {
enabled: true,

2
demo/dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
demo/src/js/demo.js
View File

@ -75,8 +75,10 @@ import Raven from 'raven-js';
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
},
ads: {
enabled: env.prod || env.dev,
enabled: true, // env.prod || env.dev,
publisherId: '918848828995742',
tagUrl:
'https://pubads.g.doubleclick.net/gampad/live/ads?sz=640x360&iu=/21736521837/ovo/web&impl=s&gdfp_req=1&env=vp&output=vast&cust_params=usergroup%3Dannon%26content-type%3Don-demand&cmsid=2490180&vid=3788',
},
previewThumbnails: {
enabled: true,

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

39
dist/plyr.js vendored
View File

@ -3466,7 +3466,8 @@ typeof navigator === "object" && (function (global, factory) {
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
ads: {
enabled: false,
publisherId: ''
publisherId: '',
tagUrl: ''
},
// YouTube nocookies mode
noCookie: false,
@ -5970,7 +5971,7 @@ typeof navigator === "object" && (function (global, factory) {
_classCallCheck(this, Ads);
this.player = player;
this.publisherId = player.config.ads.publisherId;
this.config = player.config.ads;
this.playing = false;
this.initialized = false;
this.elements = {
@ -6037,7 +6038,7 @@ typeof navigator === "object" && (function (global, factory) {
this.listeners(); // Setup the IMA SDK
this.setupIMA();
} // Build the default tag URL
} // Build the tag URL
}, {
key: "setupIMA",
@ -6206,7 +6207,8 @@ typeof navigator === "object" && (function (global, factory) {
var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated
var ad = event.getAd(); // Proxy event
var ad = event.getAd();
var adData = event.getAdData(); // Proxy event
var dispatchEvent = function dispatchEvent(type) {
var event = "ads".concat(type.replace(/_/g, '').toLowerCase());
@ -6288,6 +6290,13 @@ typeof navigator === "object" && (function (global, factory) {
dispatchEvent(event.type);
break;
case google.ima.AdEvent.Type.LOG:
if (adData.adError) {
this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage()));
}
break;
default:
break;
}
@ -6320,9 +6329,8 @@ typeof navigator === "object" && (function (global, factory) {
this.player.on('ended', function () {
_this8.loader.contentComplete();
});
this.player.on('seeking', function () {
this.player.on('timeupdate', function () {
time = _this8.player.currentTime;
return time;
});
this.player.on('seeked', function () {
var seekedTime = _this8.player.currentTime;
@ -6540,11 +6548,18 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "enabled",
get: function get() {
return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
var config = this.config;
return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is.empty(config.publisherId) || is.url(config.tagUrl));
}
}, {
key: "tagUrl",
get: function get() {
var config = this.config;
if (is.url(config.tagUrl)) {
return config.tagUrl;
}
var params = {
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
AV_CHANNELID: '5a0458dc28a06145e4519d21',
@ -6860,12 +6875,20 @@ typeof navigator === "object" && (function (global, factory) {
this.toggleThumbContainer(true);
this.setThumbContainerSizeAndPos();
} // Find the desired thumbnail index
// TODO: Handle a video longer than the thumbs where thumbNum is null
var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime;
});
var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image
var hasThumb = thumbNum >= 0;
var qualityIndex = 0;
this.toggleThumbContainer(hasThumb); // No matching thumb found
if (!hasThumb) {
return;
} // Check to see if we've already downloaded higher quality versions of this image
this.thumbnails.forEach(function (thumbnail, index) {
if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

39
dist/plyr.polyfilled.js vendored
View File

@ -6528,7 +6528,8 @@ typeof navigator === "object" && (function (global, factory) {
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
ads: {
enabled: false,
publisherId: ''
publisherId: '',
tagUrl: ''
},
// YouTube nocookies mode
noCookie: false,
@ -9083,7 +9084,7 @@ typeof navigator === "object" && (function (global, factory) {
_classCallCheck(this, Ads);
this.player = player;
this.publisherId = player.config.ads.publisherId;
this.config = player.config.ads;
this.playing = false;
this.initialized = false;
this.elements = {
@ -9150,7 +9151,7 @@ typeof navigator === "object" && (function (global, factory) {
this.listeners(); // Setup the IMA SDK
this.setupIMA();
} // Build the default tag URL
} // Build the tag URL
}, {
key: "setupIMA",
@ -9319,7 +9320,8 @@ typeof navigator === "object" && (function (global, factory) {
var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated
var ad = event.getAd(); // Proxy event
var ad = event.getAd();
var adData = event.getAdData(); // Proxy event
var dispatchEvent = function dispatchEvent(type) {
var event = "ads".concat(type.replace(/_/g, '').toLowerCase());
@ -9401,6 +9403,13 @@ typeof navigator === "object" && (function (global, factory) {
dispatchEvent(event.type);
break;
case google.ima.AdEvent.Type.LOG:
if (adData.adError) {
this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage()));
}
break;
default:
break;
}
@ -9433,9 +9442,8 @@ typeof navigator === "object" && (function (global, factory) {
this.player.on('ended', function () {
_this8.loader.contentComplete();
});
this.player.on('seeking', function () {
this.player.on('timeupdate', function () {
time = _this8.player.currentTime;
return time;
});
this.player.on('seeked', function () {
var seekedTime = _this8.player.currentTime;
@ -9653,11 +9661,18 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "enabled",
get: function get() {
return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
var config = this.config;
return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is$1.empty(config.publisherId) || is$1.url(config.tagUrl));
}
}, {
key: "tagUrl",
get: function get() {
var config = this.config;
if (is$1.url(config.tagUrl)) {
return config.tagUrl;
}
var params = {
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
AV_CHANNELID: '5a0458dc28a06145e4519d21',
@ -9987,12 +10002,20 @@ typeof navigator === "object" && (function (global, factory) {
this.toggleThumbContainer(true);
this.setThumbContainerSizeAndPos();
} // Find the desired thumbnail index
// TODO: Handle a video longer than the thumbs where thumbNum is null
var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime;
});
var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image
var hasThumb = thumbNum >= 0;
var qualityIndex = 0;
this.toggleThumbContainer(hasThumb); // No matching thumb found
if (!hasThumb) {
return;
} // Check to see if we've already downloaded higher quality versions of this image
this.thumbnails.forEach(function (thumbnail, index) {
if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
src/js/config/defaults.js
View File

@ -404,6 +404,7 @@ const defaults = {
ads: {
enabled: false,
publisherId: '',
tagUrl: '',
},
// YouTube nocookies mode

29
src/js/plugins/ads.js
View File

@ -22,7 +22,7 @@ class Ads {
*/
constructor(player) {
this.player = player;
this.publisherId = player.config.ads.publisherId;
this.config = player.config.ads;
this.playing = false;
this.initialized = false;
this.elements = {
@ -49,8 +49,13 @@ class Ads {
}
get enabled() {
const { config } = this;
return (
this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId)
this.player.isHTML5 &&
this.player.isVideo &&
config.enabled &&
(!is.empty(config.publisherId) || is.url(config.tagUrl))
);
}
@ -95,8 +100,14 @@ class Ads {
this.setupIMA();
}
// Build the default tag URL
// Build the tag URL
get tagUrl() {
const { config } = this;
if (is.url(config.tagUrl)) {
return config.tagUrl;
}
const params = {
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
AV_CHANNELID: '5a0458dc28a06145e4519d21',
@ -233,7 +244,7 @@ class Ads {
const seekElement = this.player.elements.progress;
if (is.element(seekElement)) {
const cuePercentage = 100 / this.player.duration * cuePoint;
const cuePercentage = (100 / this.player.duration) * cuePoint;
const cue = createElement('span', {
class: this.player.config.classNames.cues,
});
@ -273,6 +284,7 @@ class Ads {
// Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated
const ad = event.getAd();
const adData = event.getAdData();
// Proxy event
const dispatchEvent = type => {
@ -368,6 +380,12 @@ class Ads {
dispatchEvent(event.type);
break;
case google.ima.AdEvent.Type.LOG:
if (adData.adError) {
this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);
}
break;
default:
break;
}
@ -396,9 +414,8 @@ class Ads {
this.loader.contentComplete();
});
this.player.on('seeking', () => {
this.player.on('timeupdate', () => {
time = this.player.currentTime;
return time;
});
this.player.on('seeked', () => {

9
src/js/plugins/previewThumbnails.js
View File

@ -301,11 +301,20 @@ class PreviewThumbnails {
}
// Find the desired thumbnail index
// TODO: Handle a video longer than the thumbs where thumbNum is null
const thumbNum = this.thumbnails[0].frames.findIndex(
frame => this.seekTime >= frame.startTime && this.seekTime <= frame.endTime,
);
const hasThumb = thumbNum >= 0;
let qualityIndex = 0;
this.toggleThumbContainer(hasThumb);
// No matching thumb found
if (!hasThumb) {
return;
}
// Check to see if we've already downloaded higher quality versions of this image
this.thumbnails.forEach((thumbnail, index) => {
if (this.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

56
src/sass/plugins/previewThumbnails.scss
View File

@ -2,14 +2,26 @@
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-bg: $plyr-tooltip-bg !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-bg: $plyr-color-heather !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
.plyr__preview-thumb {
background-color: $plyr-tooltip-bg;
background-color: $plyr-preview-bg;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
margin-bottom: $plyr-tooltip-padding * 2;
box-shadow: $plyr-preview-shadow;
margin-bottom: $plyr-preview-padding * 2;
opacity: 0;
padding: 3px;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
@ -24,10 +36,10 @@
// The background triangle
&::before {
border-left: $plyr-tooltip-arrow-size solid transparent;
border-right: $plyr-tooltip-arrow-size solid transparent;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
bottom: -$plyr-tooltip-arrow-size;
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
bottom: -$plyr-preview-arrow-size;
content: '';
height: 0;
left: 50%;
@ -38,14 +50,14 @@
}
&__image-container {
background: $plyr-color-heather;
border-radius: 2px;
background: $plyr-preview-image-bg;
border-radius: ($plyr-preview-radius - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
@ -57,7 +69,7 @@
// Seek time text
&__time-container {
bottom: 6px;
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
@ -65,11 +77,11 @@
z-index: 3;
span {
background-color: rgba(0, 0, 0, 0.55);
border-radius: 2px;
color: #fff;
font-size: $plyr-font-size-time;
padding: 3px 6px;
background-color: $plyr-preview-time-bg;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
@ -79,7 +91,7 @@
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g., fullscreen)
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
position: absolute;
@ -89,6 +101,10 @@
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
@ -99,8 +115,4 @@
top: 0;
width: 100%;
}
&--is-shown {
opacity: 1;
}
}

4
src/sass/settings/sliders.scss
View File

@ -6,13 +6,13 @@
$plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
$plyr-range-track-height: 4px !default;
$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill