aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/config/defaults.js4
-rw-r--r--src/js/plugins/ads.js29
-rw-r--r--src/js/plugins/previewThumbnails.js19
-rw-r--r--src/js/plyr.js2
-rw-r--r--src/js/plyr.polyfilled.js2
-rw-r--r--src/sass/plugins/previewThumbnails.scss56
-rw-r--r--src/sass/settings/sliders.scss4
7 files changed, 79 insertions, 37 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index 1891074d..650bcd2a 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -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
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 375fdc13..c643c5dd 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -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', () => {
diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js
index 053875c7..3832be5c 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/previewThumbnails.js
@@ -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)) {
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 1059ce05..674ffb3c 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -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)
// ==========================================================================
diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js
index ac6d1c28..42207a1e 100644
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@@ -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)
// ==========================================================================
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss
index 8fb0132d..02a2f619 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/previewThumbnails.scss
@@ -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;
- }
}
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 86d8de54..6ac053b0 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -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
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 16:59:06 +0000