aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/controls.js4
-rw-r--r--src/js/plugins/ads.js120
-rw-r--r--src/js/support.js2
-rw-r--r--src/js/utils.js6
4 files changed, 53 insertions, 79 deletions
diff --git a/src/js/controls.js b/src/js/controls.js
index 936bee6b..ea30acec 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -845,11 +845,11 @@ const controls = {
container.style.height = '';
// Only listen once
- utils.off(container, utils.transitionEnd, restore);
+ utils.off(container, utils.transitionEndEvent, restore);
};
// Listen for the transition finishing and restore auto height/width
- utils.on(container, utils.transitionEnd, restore);
+ utils.on(container, utils.transitionEndEvent, restore);
// Set dimensions to target
container.style.width = `${size.width}px`;
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 4e405962..96e0ce61 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -1,8 +1,13 @@
+// ==========================================================================
+// Advertisement plugin using Google IMA HTML5 SDK
+// Create an account with our ad partner, vi here:
+// https://www.vi.ai/publisher-video-monetization/
+// ==========================================================================
+
+/* global google */
+
import utils from '../utils';
-/**
- * Advertisements using Google IMA HTML5 SDK.
- */
class Ads {
/**
* Ads constructor.
@@ -49,7 +54,7 @@ class Ads {
this.startSafetyTimer(12000, 'ready()');
// Setup a simple promise to resolve if the IMA loader is ready.
- this.adsLoaderPromise = new Promise((resolve) => {
+ this.adsLoaderPromise = new Promise(resolve => {
this.on('ADS_LOADER_LOADED', () => resolve());
});
this.adsLoaderPromise.then(() => {
@@ -57,7 +62,7 @@ class Ads {
});
// Setup a promise to resolve if the IMA manager is ready.
- this.adsManagerPromise = new Promise((resolve) => {
+ this.adsManagerPromise = new Promise(resolve => {
this.on('ADS_MANAGER_LOADED', () => resolve());
});
this.adsManagerPromise.then(() => {
@@ -112,12 +117,8 @@ class Ads {
this.adsLoader = new google.ima.AdsLoader(this.adDisplayContainer);
// Listen and respond to ads loaded and error events.
- this.adsLoader.addEventListener(
- google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
- event => this.onAdsManagerLoaded(event), false);
- this.adsLoader.addEventListener(
- google.ima.AdErrorEvent.Type.AD_ERROR,
- error => this.onAdError(error), false);
+ this.adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, event => this.onAdsManagerLoaded(event), false);
+ this.adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
// Request video ads.
const adsRequest = new google.ima.AdsRequest();
@@ -161,7 +162,7 @@ class Ads {
this.adsCuePoints = this.adsManager.getCuePoints();
// Add advertisement cue's within the time line if available.
- this.adsCuePoints.forEach((cuePoint) => {
+ this.adsCuePoints.forEach(cuePoint => {
if (cuePoint !== 0 && cuePoint !== -1) {
const seekElement = this.player.elements.progress;
if (seekElement) {
@@ -177,56 +178,32 @@ class Ads {
// Add listeners to the required events.
// Advertisement error events.
- this.adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,
- error => this.onAdError(error));
+ this.adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
// Advertisement regular events.
- this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_BREAK_READY,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_METADATA,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.CLICK,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.LOADED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.STARTED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.DURATION_CHANGE,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.FIRST_QUARTILE,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.IMPRESSION,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.INTERACTION,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.LINEAR_CHANGED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.MIDPOINT,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.PAUSED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.RESUMED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.THIRD_QUARTILE,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.USER_CLOSE,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED,
- event => this.onAdEvent(event));
- this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED,
- event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_BREAK_READY, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_METADATA, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.CLICK, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.STARTED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.DURATION_CHANGE, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.FIRST_QUARTILE, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.IMPRESSION, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.INTERACTION, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.LINEAR_CHANGED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.MIDPOINT, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.PAUSED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.RESUMED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.THIRD_QUARTILE, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.USER_CLOSE, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED, event => this.onAdEvent(event));
+ this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED, event => this.onAdEvent(event));
// Resolve our adsManager.
this.handleEventListeners('ADS_MANAGER_LOADED');
@@ -241,7 +218,7 @@ class Ads {
const { container } = this.player.elements;
// Listen for events if debugging.
- this.player.debug.log(`ads event: ${event.type}`);
+ this.player.debug.log(`Ads event: ${event.type}`);
// Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated.
@@ -319,7 +296,7 @@ class Ads {
*/
onAdError(adErrorEvent) {
this.cancel();
- this.player.debug.log('Ads error.', adErrorEvent);
+ this.player.debug.log('Ads error', adErrorEvent);
}
/**
@@ -354,8 +331,7 @@ class Ads {
// Listen to the resizing of the window. And resize ad accordingly.
window.addEventListener('resize', () => {
- this.adsManager.resize(container.offsetWidth, container.offsetHeight,
- google.ima.ViewMode.NORMAL);
+ this.adsManager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
});
}
@@ -376,10 +352,8 @@ class Ads {
try {
if (!this.initialized) {
-
// Initialize the ads manager. Ad rules playlist will start at this time.
- this.adsManager.init(container.offsetWidth, container.offsetHeight,
- google.ima.ViewMode.NORMAL);
+ this.adsManager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
// Call play to start showing the ad. Single video and overlay ads will
// start at this time; the call will be ignored for ad rules.
@@ -399,7 +373,7 @@ class Ads {
* Resume our video.
*/
resumeContent() {
- this.player.debug.log('Resume video.');
+ this.player.debug.log('Resume video');
// Hide our ad container.
this.adsContainer.style.display = 'none';
@@ -417,7 +391,7 @@ class Ads {
* Pause our video.
*/
pauseContent() {
- this.player.debug.log('Pause video.');
+ this.player.debug.log('Pause video');
// Show our ad container.
this.adsContainer.style.display = 'block';
@@ -436,7 +410,7 @@ class Ads {
* media-ads/docs/sdks/android/faq#8
*/
cancel() {
- this.player.debug.warn('Ad cancelled.');
+ this.player.debug.warn('Ad cancelled');
// Pause our video.
this.resumeContent();
@@ -460,7 +434,7 @@ class Ads {
}
// Re-set our adsManager promises.
- this.adsManagerPromise = new Promise((resolve) => {
+ this.adsManagerPromise = new Promise(resolve => {
this.on('ADS_MANAGER_LOADED', () => resolve());
this.player.debug.log(this.adsManager);
});
@@ -503,7 +477,7 @@ class Ads {
* @param {String} from
*/
startSafetyTimer(time, from) {
- this.player.debug.log(`Safety timer invoked from: ${from}.`);
+ this.player.debug.log(`Safety timer invoked from: ${from}`);
this.safetyTimer = window.setTimeout(() => {
this.cancel();
this.clearSafetyTimer('startSafetyTimer()');
@@ -516,7 +490,7 @@ class Ads {
*/
clearSafetyTimer(from) {
if (typeof this.safetyTimer !== 'undefined' && this.safetyTimer !== null) {
- this.player.debug.log(`Safety timer cleared from: ${from}.`);
+ this.player.debug.log(`Safety timer cleared from: ${from}`);
clearTimeout(this.safetyTimer);
this.safetyTimer = undefined;
}
diff --git a/src/js/support.js b/src/js/support.js
index f75517d6..23a8ebef 100644
--- a/src/js/support.js
+++ b/src/js/support.js
@@ -151,7 +151,7 @@ const support = {
touch: 'ontouchstart' in document.documentElement,
// Detect transitions support
- transitions: utils.transitionEnd !== false,
+ transitions: utils.transitionEndEvent !== false,
// Reduced motion iOS & MacOS setting
// https://webkit.org/blog/7551/responsive-design-for-motion/
diff --git a/src/js/utils.js b/src/js/utils.js
index 1b64fc8d..79ed5861 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -731,7 +731,7 @@ const utils = {
},
// Get the transition end event
- transitionEnd: (() => {
+ get transitionEndEvent() {
const element = document.createElement('span');
const events = {
@@ -743,8 +743,8 @@ const utils = {
const type = Object.keys(events).find(event => element.style[event] !== undefined);
- return typeof type === 'string' ? type : false;
- })(),
+ return utils.is.string(type) ? events[type] : false;
+ },
// Force repaint of element
repaint(element) {
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 19:40:19 +0000