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

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