aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/config/defaults.js1
-rw-r--r--src/js/plugins/ads.js29
-rw-r--r--src/js/plugins/previewThumbnails.js9
-rw-r--r--src/sass/plugins/previewThumbnails.scss56
-rw-r--r--src/sass/settings/sliders.scss4
5 files changed, 69 insertions, 30 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index 14019ca2..1bb940f8 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -404,6 +404,7 @@ const defaults = {
ads: {
enabled: false,
publisherId: '',
+ tagUrl: '',
},
// YouTube nocookies mode
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..57b9265f 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/previewThumbnails.js
@@ -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)) {
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 09:36:29 +0000