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

Merge branch 'develop' into issues/1316-allow-to-customize-vimeo-url-params

Browse Source
This commit is contained in:
Sam Potts
2019-01-26 17:19:58 +11:00
committed by GitHub
parent 052e426810 8b57104f83
commit a84fc396e8
27 changed files with 428 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -404,6 +404,7 @@ const defaults = {
ads: {
enabled: false,
publisherId: '',
tagUrl: '',
},
// YouTube nocookies mode
@ -412,6 +413,7 @@ const defaults = {
// Preview Thumbnails plugin
previewThumbnails: {
enabled: false,
src: '',
},
// Vimeo plugin

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', () => {

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

@ -109,20 +109,22 @@ class PreviewThumbnails {
// Download VTT files and parse them
getThumbnails() {
return new Promise(resolve => {
if (!this.player.config.previewThumbnails.src) {
const { src } = this.player.config.previewThumbnails;
if (is.empty(src)) {
throw new Error('Missing previewThumbnails.src config attribute');
}
// previewThumbnails.src can be string or list. If string, convert into single-element list
const { src } = this.player.config.previewThumbnails;
// If string, convert into single-element list
const urls = is.string(src) ? [src] : src;
// Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnails
// Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
const promises = urls.map(u => this.getThumbnail(u));
Promise.all(promises).then(() => {
// Sort smallest to biggest (e.g., [120p, 480p, 1080p])
this.thumbnails.sort((x, y) => x.height - y.height);
this.player.debug.log('Preview thumbnails', this.thumbnails);
resolve();
@ -301,11 +303,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)) {

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v3.4.7
// plyr.js v3.4.8
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================

2
src/js/plyr.polyfilled.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
// plyr.js v3.4.7
// plyr.js v3.4.8
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================

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