aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/controls.js6
-rw-r--r--src/js/defaults.js3
-rw-r--r--src/js/listeners.js560
-rw-r--r--src/js/plugins/ads.js109
-rw-r--r--src/js/plugins/vimeo.js11
-rw-r--r--src/js/plugins/youtube.js4
-rw-r--r--src/js/plyr.js26
-rw-r--r--src/js/ui.js4
-rw-r--r--src/js/utils.js66
9 files changed, 417 insertions, 372 deletions
diff --git a/src/js/controls.js b/src/js/controls.js
index 66c95231..4fdbe6d0 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -752,6 +752,12 @@ const controls = {
toggleMenu(event) {
const { form } = this.elements.settings;
const button = this.elements.buttons.settings;
+
+ // Menu and button are required
+ if (!utils.is.element(form) || !utils.is.element(button)) {
+ return;
+ }
+
const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
if (utils.is.event(event)) {
diff --git a/src/js/defaults.js b/src/js/defaults.js
index f7738afc..086caefe 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -373,9 +373,10 @@ const defaults = {
},
// Advertisements plugin
- // Tag is not required as publisher is determined by vi.ai using the domain
+ // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
ads: {
enabled: false,
+ publisherId: null,
},
};
diff --git a/src/js/listeners.js b/src/js/listeners.js
index f7efa7e6..865ee66f 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -10,192 +10,209 @@ import ui from './ui';
// Sniff out the browser
const browser = utils.getBrowser();
-const listeners = {
- // Global listeners
- global() {
- let last = null;
-
- // Get the key code for an event
- const getKeyCode = event => (event.keyCode ? event.keyCode : event.which);
-
- // Handle key press
- const handleKey = event => {
- const code = getKeyCode(event);
- const pressed = event.type === 'keydown';
- const repeat = pressed && code === last;
-
- // Bail if a modifier key is set
- if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+class Listeners {
+ constructor(player) {
+ this.player = player;
+ this.lastKey = null;
+
+ this.handleKey = this.handleKey.bind(this);
+ this.toggleMenu = this.toggleMenu.bind(this);
+ }
+
+ // Handle key presses
+ handleKey(event) {
+ const code = event.keyCode ? event.keyCode : event.which;
+ const pressed = event.type === 'keydown';
+ const repeat = pressed && code === this.lastKey;
+
+ // Bail if a modifier key is set
+ if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+ return;
+ }
+
+ // If the event is bubbled from the media element
+ // Firefox doesn't get the keycode for whatever reason
+ if (!utils.is.number(code)) {
+ return;
+ }
+
+ // Seek by the number keys
+ const seekByKey = () => {
+ // Divide the max duration into 10th's and times by the number value
+ this.player.currentTime = this.player.duration / 10 * (code - 48);
+ };
+
+ // Handle the key on keydown
+ // Reset on keyup
+ if (pressed) {
+ // Which keycodes should we prevent default
+ const preventDefault = [
+ 48,
+ 49,
+ 50,
+ 51,
+ 52,
+ 53,
+ 54,
+ 56,
+ 57,
+ 32,
+ 75,
+ 38,
+ 40,
+ 77,
+ 39,
+ 37,
+ 70,
+ 67,
+ 73,
+ 76,
+ 79,
+ ];
+
+ // Check focused element
+ // and if the focused element is not editable (e.g. text input)
+ // and any that accept key input http://webaim.org/techniques/keyboard/
+ const focused = utils.getFocusElement();
+ if (utils.is.element(focused) && utils.matches(focused, this.player.config.selectors.editable)) {
return;
}
- // If the event is bubbled from the media element
- // Firefox doesn't get the keycode for whatever reason
- if (!utils.is.number(code)) {
- return;
+ // If the code is found prevent default (e.g. prevent scrolling for arrows)
+ if (preventDefault.includes(code)) {
+ event.preventDefault();
+ event.stopPropagation();
}
- // Seek by the number keys
- const seekByKey = () => {
- // Divide the max duration into 10th's and times by the number value
- this.currentTime = this.duration / 10 * (code - 48);
- };
-
- // Handle the key on keydown
- // Reset on keyup
- if (pressed) {
- // Which keycodes should we prevent default
- const preventDefault = [
- 48,
- 49,
- 50,
- 51,
- 52,
- 53,
- 54,
- 56,
- 57,
- 32,
- 75,
- 38,
- 40,
- 77,
- 39,
- 37,
- 70,
- 67,
- 73,
- 76,
- 79,
- ];
-
- // Check focused element
- // and if the focused element is not editable (e.g. text input)
- // and any that accept key input http://webaim.org/techniques/keyboard/
- const focused = utils.getFocusElement();
- if (utils.is.element(focused) && utils.matches(focused, this.config.selectors.editable)) {
- return;
- }
+ switch (code) {
+ case 48:
+ case 49:
+ case 50:
+ case 51:
+ case 52:
+ case 53:
+ case 54:
+ case 55:
+ case 56:
+ case 57:
+ // 0-9
+ if (!repeat) {
+ seekByKey();
+ }
+ break;
- // If the code is found prevent default (e.g. prevent scrolling for arrows)
- if (preventDefault.includes(code)) {
- event.preventDefault();
- event.stopPropagation();
- }
+ case 32:
+ case 75:
+ // Space and K key
+ if (!repeat) {
+ this.player.togglePlay();
+ }
+ break;
+
+ case 38:
+ // Arrow up
+ this.player.increaseVolume(0.1);
+ break;
+
+ case 40:
+ // Arrow down
+ this.player.decreaseVolume(0.1);
+ break;
+
+ case 77:
+ // M key
+ if (!repeat) {
+ this.player.muted = !this.player.muted;
+ }
+ break;
+
+ case 39:
+ // Arrow forward
+ this.player.forward();
+ break;
+
+ case 37:
+ // Arrow back
+ this.player.rewind();
+ break;
+
+ case 70:
+ // F key
+ this.player.fullscreen.toggle();
+ break;
+
+ case 67:
+ // C key
+ if (!repeat) {
+ this.player.toggleCaptions();
+ }
+ break;
- switch (code) {
- case 48:
- case 49:
- case 50:
- case 51:
- case 52:
- case 53:
- case 54:
- case 55:
- case 56:
- case 57:
- // 0-9
- if (!repeat) {
- seekByKey();
- }
- break;
+ case 76:
+ // L key
+ this.player.loop = !this.player.loop;
+ break;
- case 32:
- case 75:
- // Space and K key
- if (!repeat) {
- this.togglePlay();
- }
- break;
-
- case 38:
- // Arrow up
- this.increaseVolume(0.1);
- break;
-
- case 40:
- // Arrow down
- this.decreaseVolume(0.1);
- break;
-
- case 77:
- // M key
- if (!repeat) {
- this.muted = !this.muted;
- }
- break;
-
- case 39:
- // Arrow forward
- this.forward();
- break;
-
- case 37:
- // Arrow back
- this.rewind();
- break;
-
- case 70:
- // F key
- this.fullscreen.toggle();
- break;
-
- case 67:
- // C key
- if (!repeat) {
- this.toggleCaptions();
- }
- break;
+ /* case 73:
+ this.setLoop('start');
+ break;
- case 76:
- // L key
- this.loop = !this.loop;
- break;
+ case 76:
+ this.setLoop();
+ break;
- /* case 73:
- this.setLoop('start');
- break;
+ case 79:
+ this.setLoop('end');
+ break; */
- case 76:
- this.setLoop();
- break;
+ default:
+ break;
+ }
- case 79:
- this.setLoop('end');
- break; */
+ // Escape is handle natively when in full screen
+ // So we only need to worry about non native
+ if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) {
+ this.player.fullscreen.toggle();
+ }
- default:
- break;
- }
+ // Store last code for next cycle
+ this.lastKey = code;
+ } else {
+ this.lastKey = null;
+ }
+ }
- // Escape is handle natively when in full screen
- // So we only need to worry about non native
- if (!this.fullscreen.enabled && this.fullscreen.active && code === 27) {
- this.fullscreen.toggle();
- }
+ // Toggle menu
+ toggleMenu(event) {
+ controls.toggleMenu.call(this.player, event);
+ }
- // Store last code for next cycle
- last = code;
- } else {
- last = null;
- }
- };
+ // Global window & document listeners
+ global(toggle) {
+ // Keyboard shortcuts
+ if (this.player.config.keyboard.global) {
+ utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false);
+ }
+
+ // Click anywhere closes menu
+ utils.toggleListener(document.body, 'click', this.toggleMenu, toggle);
+ }
+ // Container listeners
+ container() {
// Keyboard shortcuts
- if (this.config.keyboard.global) {
- utils.on(window, 'keydown keyup', handleKey, false);
- } else if (this.config.keyboard.focused) {
- utils.on(this.elements.container, 'keydown keyup', handleKey, false);
+ if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) {
+ utils.on(this.player.elements.container, 'keydown keyup', this.handleKey, false);
}
// Detect tab focus
// Remove class on blur/focusout
- utils.on(this.elements.container, 'focusout', event => {
- utils.toggleClass(event.target, this.config.classNames.tabFocus, false);
+ utils.on(this.player.elements.container, 'focusout', event => {
+ utils.toggleClass(event.target, this.player.config.classNames.tabFocus, false);
});
// Add classname to tabbed elements
- utils.on(this.elements.container, 'keydown', event => {
+ utils.on(this.player.elements.container, 'keydown', event => {
if (event.keyCode !== 9) {
return;
}
@@ -203,65 +220,65 @@ const listeners = {
// Delay the adding of classname until the focus has changed
// This event fires before the focusin event
setTimeout(() => {
- utils.toggleClass(utils.getFocusElement(), this.config.classNames.tabFocus, true);
+ utils.toggleClass(utils.getFocusElement(), this.player.config.classNames.tabFocus, true);
}, 0);
});
// Toggle controls visibility based on mouse movement
- if (this.config.hideControls) {
+ if (this.player.config.hideControls) {
// Toggle controls on mouse events and entering fullscreen
- utils.on(this.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => {
- this.toggleControls(event);
+ utils.on(this.player.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => {
+ this.player.toggleControls(event);
});
}
- },
+ }
// Listen for media events
media() {
// Time change on media
- utils.on(this.media, 'timeupdate seeking', event => ui.timeUpdate.call(this, event));
+ utils.on(this.player.media, 'timeupdate seeking', event => ui.timeUpdate.call(this.player, event));
// Display duration
- utils.on(this.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this, event));
+ utils.on(this.player.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this.player, event));
// Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
- utils.on(this.media, 'loadeddata', () => {
- utils.toggleHidden(this.elements.volume, !this.hasAudio);
- utils.toggleHidden(this.elements.buttons.mute, !this.hasAudio);
+ utils.on(this.player.media, 'loadeddata', () => {
+ utils.toggleHidden(this.player.elements.volume, !this.player.hasAudio);
+ utils.toggleHidden(this.player.elements.buttons.mute, !this.player.hasAudio);
});
// Handle the media finishing
- utils.on(this.media, 'ended', () => {
+ utils.on(this.player.media, 'ended', () => {
// Show poster on end
- if (this.isHTML5 && this.isVideo && this.config.showPosterOnEnd) {
+ if (this.player.isHTML5 && this.player.isVideo && this.player.config.showPosterOnEnd) {
// Restart
- this.restart();
+ this.player.restart();
// Re-load media
- this.media.load();
+ this.player.media.load();
}
});
// Check for buffer progress
- utils.on(this.media, 'progress playing', event => ui.updateProgress.call(this, event));
+ utils.on(this.player.media, 'progress playing', event => ui.updateProgress.call(this.player, event));
// Handle native mute
- utils.on(this.media, 'volumechange', event => ui.updateVolume.call(this, event));
+ utils.on(this.player.media, 'volumechange', event => ui.updateVolume.call(this.player, event));
// Handle native play/pause
- utils.on(this.media, 'playing play pause ended', event => ui.checkPlaying.call(this, event));
+ utils.on(this.player.media, 'playing play pause ended', event => ui.checkPlaying.call(this.player, event));
// Loading
- utils.on(this.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this, event));
+ utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));
// Check if media failed to load
- // utils.on(this.media, 'play', event => ui.checkFailed.call(this, event));
+ // utils.on(this.player.media, 'play', event => ui.checkFailed.call(this.player, event));
// Click video
- if (this.supported.ui && this.config.clickToPlay && !this.isAudio) {
+ if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) {
// Re-fetch the wrapper
- const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`);
+ const wrapper = utils.getElement.call(this.player, `.${this.player.config.classNames.video}`);
// Bail if there's no wrapper (this should never happen)
if (!utils.is.element(wrapper)) {
@@ -271,25 +288,25 @@ const listeners = {
// On click play, pause ore restart
utils.on(wrapper, 'click', () => {
// Touch devices will just show controls (if we're hiding controls)
- if (this.config.hideControls && support.touch && !this.paused) {
+ if (this.player.config.hideControls && support.touch && !this.player.paused) {
return;
}
- if (this.paused) {
- this.play();
- } else if (this.ended) {
- this.restart();
- this.play();
+ if (this.player.paused) {
+ this.player.play();
+ } else if (this.player.ended) {
+ this.player.restart();
+ this.player.play();
} else {
- this.pause();
+ this.player.pause();
}
});
}
// Disable right click
- if (this.supported.ui && this.config.disableContextMenu) {
+ if (this.player.supported.ui && this.player.config.disableContextMenu) {
utils.on(
- this.media,
+ this.player.media,
'contextmenu',
event => {
event.preventDefault();
@@ -299,50 +316,50 @@ const listeners = {
}
// Volume change
- utils.on(this.media, 'volumechange', () => {
+ utils.on(this.player.media, 'volumechange', () => {
// Save to storage
- this.storage.set({ volume: this.volume, muted: this.muted });
+ this.player.storage.set({ volume: this.player.volume, muted: this.player.muted });
});
// Speed change
- utils.on(this.media, 'ratechange', () => {
+ utils.on(this.player.media, 'ratechange', () => {
// Update UI
- controls.updateSetting.call(this, 'speed');
+ controls.updateSetting.call(this.player, 'speed');
// Save to storage
- this.storage.set({ speed: this.speed });
+ this.player.storage.set({ speed: this.player.speed });
});
// Quality change
- utils.on(this.media, 'qualitychange', () => {
+ utils.on(this.player.media, 'qualitychange', () => {
// Update UI
- controls.updateSetting.call(this, 'quality');
+ controls.updateSetting.call(this.player, 'quality');
// Save to storage
- this.storage.set({ quality: this.quality });
+ this.player.storage.set({ quality: this.player.quality });
});
// Caption language change
- utils.on(this.media, 'languagechange', () => {
+ utils.on(this.player.media, 'languagechange', () => {
// Update UI
- controls.updateSetting.call(this, 'captions');
+ controls.updateSetting.call(this.player, 'captions');
// Save to storage
- this.storage.set({ language: this.language });
+ this.player.storage.set({ language: this.player.language });
});
// Captions toggle
- utils.on(this.media, 'captionsenabled captionsdisabled', () => {
+ utils.on(this.player.media, 'captionsenabled captionsdisabled', () => {
// Update UI
- controls.updateSetting.call(this, 'captions');
+ controls.updateSetting.call(this.player, 'captions');
// Save to storage
- this.storage.set({ captions: this.captions.active });
+ this.player.storage.set({ captions: this.player.captions.active });
});
// Proxy events to container
// Bubble up key events for Edge
- utils.on(this.media, this.config.events.concat([
+ utils.on(this.player.media, this.player.config.events.concat([
'keyup',
'keydown',
]).join(' '), event => {
@@ -350,12 +367,12 @@ const listeners = {
// Get error details from media
if (event.type === 'error') {
- detail = this.media.error;
+ detail = this.player.media.error;
}
- utils.dispatchEvent.call(this, this.elements.container, event.type, true, detail);
+ utils.dispatchEvent.call(this.player, this.player.elements.container, event.type, true, detail);
});
- },
+ }
// Listen for control events
controls() {
@@ -364,176 +381,171 @@ const listeners = {
// Trigger custom and default handlers
const proxy = (event, handlerKey, defaultHandler) => {
- const customHandler = this.config.listeners[handlerKey];
+ const customHandler = this.player.config.listeners[handlerKey];
// Execute custom handler
if (utils.is.function(customHandler)) {
- customHandler.call(this, event);
+ customHandler.call(this.player, event);
}
// Only call default handler if not prevented in custom handler
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
- defaultHandler.call(this, event);
+ defaultHandler.call(this.player, event);
}
};
// Play/pause toggle
- utils.on(this.elements.buttons.play, 'click', event =>
+ utils.on(this.player.elements.buttons.play, 'click', event =>
proxy(event, 'play', () => {
- this.togglePlay();
+ this.player.togglePlay();
}),
);
// Pause
- utils.on(this.elements.buttons.restart, 'click', event =>
+ utils.on(this.player.elements.buttons.restart, 'click', event =>
proxy(event, 'restart', () => {
- this.restart();
+ this.player.restart();
}),
);
// Rewind
- utils.on(this.elements.buttons.rewind, 'click', event =>
+ utils.on(this.player.elements.buttons.rewind, 'click', event =>
proxy(event, 'rewind', () => {
- this.rewind();
+ this.player.rewind();
}),
);
// Rewind
- utils.on(this.elements.buttons.forward, 'click', event =>
+ utils.on(this.player.elements.buttons.forward, 'click', event =>
proxy(event, 'forward', () => {
- this.forward();
+ this.player.forward();
}),
);
// Mute toggle
- utils.on(this.elements.buttons.mute, 'click', event =>
+ utils.on(this.player.elements.buttons.mute, 'click', event =>
proxy(event, 'mute', () => {
- this.muted = !this.muted;
+ this.player.muted = !this.player.muted;
}),
);
// Captions toggle
- utils.on(this.elements.buttons.captions, 'click', event =>
+ utils.on(this.player.elements.buttons.captions, 'click', event =>
proxy(event, 'captions', () => {
- this.toggleCaptions();
+ this.player.toggleCaptions();
}),
);
// Fullscreen toggle
- utils.on(this.elements.buttons.fullscreen, 'click', event =>
+ utils.on(this.player.elements.buttons.fullscreen, 'click', event =>
proxy(event, 'fullscreen', () => {
- this.fullscreen.toggle();
+ this.player.fullscreen.toggle();
}),
);
// Picture-in-Picture
- utils.on(this.elements.buttons.pip, 'click', event =>
+ utils.on(this.player.elements.buttons.pip, 'click', event =>
proxy(event, 'pip', () => {
- this.pip = 'toggle';
+ this.player.pip = 'toggle';
}),
);
// Airplay
- utils.on(this.elements.buttons.airplay, 'click', event =>
+ utils.on(this.player.elements.buttons.airplay, 'click', event =>
proxy(event, 'airplay', () => {
- this.airplay();
+ this.player.airplay();
}),
);
// Settings menu
- utils.on(this.elements.buttons.settings, 'click', event => {
- controls.toggleMenu.call(this, event);
- });
-
- // Click anywhere closes menu
- utils.on(document.documentElement, 'click', event => {
- controls.toggleMenu.call(this, event);
+ utils.on(this.player.elements.buttons.settings, 'click', event => {
+ controls.toggleMenu.call(this.player, event);
});
// Settings menu
- utils.on(this.elements.settings.form, 'click', event => {
+ utils.on(this.player.elements.settings.form, 'click', event => {
event.stopPropagation();
// Settings menu items - use event delegation as items are added/removed
- if (utils.matches(event.target, this.config.selectors.inputs.language)) {
+ if (utils.matches(event.target, this.player.config.selectors.inputs.language)) {
proxy(event, 'language', () => {
- this.language = event.target.value;
+ this.player.language = event.target.value;
});
- } else if (utils.matches(event.target, this.config.selectors.inputs.quality)) {
+ } else if (utils.matches(event.target, this.player.config.selectors.inputs.quality)) {
proxy(event, 'quality', () => {
- this.quality = event.target.value;
+ this.player.quality = event.target.value;
});
- } else if (utils.matches(event.target, this.config.selectors.inputs.speed)) {
+ } else if (utils.matches(event.target, this.player.config.selectors.inputs.speed)) {
proxy(event, 'speed', () => {
- this.speed = parseFloat(event.target.value);
+ this.player.speed = parseFloat(event.target.value);
});
} else {
- controls.showTab.call(this, event);
+ controls.showTab.call(this.player, event);
}
});
// Seek
- utils.on(this.elements.inputs.seek, inputEvent, event =>
+ utils.on(this.player.elements.inputs.seek, inputEvent, event =>
proxy(event, 'seek', () => {
- this.currentTime = event.target.value / event.target.max * this.duration;
+ this.player.currentTime = event.target.value / event.target.max * this.player.duration;
}),
);
// Current time invert
// Only if one time element is used for both currentTime and duration
- if (this.config.toggleInvert && !utils.is.element(this.elements.display.duration)) {
- utils.on(this.elements.display.currentTime, 'click', () => {
+ if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) {
+ utils.on(this.player.elements.display.currentTime, 'click', () => {
// Do nothing if we're at the start
- if (this.currentTime === 0) {
+ if (this.player.currentTime === 0) {
return;
}
- this.config.invertTime = !this.config.invertTime;
- ui.timeUpdate.call(this);
+ this.player.config.invertTime = !this.player.config.invertTime;
+ ui.timeUpdate.call(this.player);
});
}
// Volume
- utils.on(this.elements.inputs.volume, inputEvent, event =>
+ utils.on(this.player.elements.inputs.volume, inputEvent, event =>
proxy(event, 'volume', () => {
- this.volume = event.target.value;
+ this.player.volume = event.target.value;
}),
);
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
- utils.on(utils.getElements.call(this, 'input[type="range"]'), 'input', event => {
- controls.updateRangeFill.call(this, event.target);
+ utils.on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', event => {
+ controls.updateRangeFill.call(this.player, event.target);
});
}
// Seek tooltip
- utils.on(this.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this, event));
+ utils.on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
// Toggle controls visibility based on mouse movement
- if (this.config.hideControls) {
+ if (this.player.config.hideControls) {
// Watch for cursor over controls so they don't hide when trying to interact
- utils.on(this.elements.controls, 'mouseenter mouseleave', event => {
- this.elements.controls.hover = event.type === 'mouseenter';
+ utils.on(this.player.elements.controls, 'mouseenter mouseleave', event => {
+ this.player.elements.controls.hover = event.type === 'mouseenter';
});
// Watch for cursor over controls so they don't hide when trying to interact
- utils.on(this.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
- this.elements.controls.pressed = [
+ utils.on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+ this.player.elements.controls.pressed = [
'mousedown',
'touchstart',
].includes(event.type);
});
// Focus in/out on controls
- utils.on(this.elements.controls, 'focusin focusout', event => {
- this.toggleControls(event);
+ utils.on(this.player.elements.controls, 'focusin focusout', event => {
+ this.player.toggleControls(event);
});
}
// Mouse wheel for volume
utils.on(
- this.elements.inputs.volume,
+ this.player.elements.inputs.volume,
'wheel',
event =>
proxy(event, 'volume', () => {
@@ -546,10 +558,10 @@ const listeners = {
// Scroll down (or up on natural) to decrease
if (event.deltaY < 0 || event.deltaX > 0) {
if (inverted) {
- this.decreaseVolume(step);
+ this.player.decreaseVolume(step);
direction = -1;
} else {
- this.increaseVolume(step);
+ this.player.increaseVolume(step);
direction = 1;
}
}
@@ -557,22 +569,22 @@ const listeners = {
// Scroll up (or down on natural) to increase
if (event.deltaY > 0 || event.deltaX < 0) {
if (inverted) {
- this.increaseVolume(step);
+ this.player.increaseVolume(step);
direction = 1;
} else {
- this.decreaseVolume(step);
+ this.player.decreaseVolume(step);
direction = -1;
}
}
// Don't break page scrolling at max and min
- if ((direction === 1 && this.media.volume < 1) || (direction === -1 && this.media.volume > 0)) {
+ if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) {
event.preventDefault();
}
}),
false,
);
- },
-};
+ }
+}
-export default listeners;
+export default Listeners;
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 62162e84..5cf743c2 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -8,22 +8,6 @@
import utils from '../utils';
-// Build the default tag URL
-const getTagUrl = () => {
- const params = {
- AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
- AV_CHANNELID: '5a0458dc28a06145e4519d21',
- AV_URL: '127.0.0.1:3000',
- cb: 1,
- AV_WIDTH: 640,
- AV_HEIGHT: 480,
- };
-
- const base = 'https://go.aniview.com/api/adserver6/vast/';
-
- return `${base}?${utils.buildUrlParams(params)}`;
-};
-
class Ads {
/**
* Ads constructor.
@@ -32,7 +16,8 @@ class Ads {
*/
constructor(player) {
this.player = player;
- this.enabled = player.config.ads.enabled;
+ this.publisherId = player.config.ads.publisherId;
+ this.enabled = player.isHTML5 && player.isVideo && player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
this.playing = false;
this.initialized = false;
this.elements = {
@@ -46,32 +31,32 @@ class Ads {
this.safetyTimer = null;
this.countdownTimer = null;
+ // Setup a promise to resolve when the IMA manager is ready
+ this.managerPromise = new Promise((resolve, reject) => {
+ // The ad is pre-loaded and ready
+ this.on('ADS_MANAGER_LOADED', resolve);
+
+ // Ads failed
+ this.on('ERROR', reject);
+ });
+
if (this.enabled) {
// Check if the Google IMA3 SDK is loaded or load it ourselves
if (!utils.is.object(window.google)) {
- utils.loadScript(
- player.config.urls.googleIMA.api,
- () => {
+ utils
+ .loadScript(player.config.urls.googleIMA.api)
+ .then(() => {
this.ready();
- },
- () => {
+ })
+ .catch(() => {
// Script failed to load or is blocked
- this.handleEventListeners('ERROR');
- this.player.debug.log('Ads error: Google IMA SDK failed to load');
- },
- );
+ this.trigger('ERROR');
+ this.player.debug.error('Google IMA SDK failed to load');
+ });
} else {
this.ready();
}
}
-
- // Setup a promise to resolve when the IMA manager is ready
- this.managerPromise = new Promise((resolve, reject) => {
- // The ad is pre-loaded and ready
- this.on('ADS_MANAGER_LOADED', resolve);
- // Ads failed
- this.on('ERROR', reject);
- });
}
/**
@@ -94,6 +79,23 @@ class Ads {
this.setupIMA();
}
+ // Build the default tag URL
+ get tagUrl() {
+ const params = {
+ AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
+ AV_CHANNELID: '5a0458dc28a06145e4519d21',
+ AV_URL: location.hostname,
+ cb: Date.now(),
+ AV_WIDTH: 640,
+ AV_HEIGHT: 480,
+ AV_CDIM2: this.publisherId,
+ };
+
+ const base = 'https://go.aniview.com/api/adserver6/vast/';
+
+ return `${base}?${utils.buildUrlParams(params)}`;
+ }
+
/**
* In order for the SDK to display ads for our video, we need to tell it where to put them,
* so here we define our ad container. This div is set up to render on top of the video player.
@@ -139,7 +141,7 @@ class Ads {
// Request video ads
const request = new google.ima.AdsRequest();
- request.adTagUrl = getTagUrl();
+ request.adTagUrl = this.tagUrl;
// Specify the linear and nonlinear slot sizes. This helps the SDK
// to select the correct creative if multiple are returned
@@ -153,7 +155,7 @@ class Ads {
this.loader.requestAds(request);
- this.handleEventListeners('ADS_LOADER_LOADED');
+ this.trigger('ADS_LOADER_LOADED');
} catch (e) {
this.onAdError(e);
}
@@ -171,7 +173,7 @@ class Ads {
}
const update = () => {
- const time = utils.formatTime(this.manager.getRemainingTime());
+ const time = utils.formatTime(Math.max(this.manager.getRemainingTime(), 0));
const label = `${this.player.config.i18n.advertisement} - ${time}`;
this.elements.container.setAttribute('data-badge-text', label);
};
@@ -232,7 +234,7 @@ class Ads {
});
// Resolve our adsManager
- this.handleEventListeners('ADS_MANAGER_LOADED');
+ this.trigger('ADS_MANAGER_LOADED');
}
/**
@@ -257,7 +259,7 @@ class Ads {
case google.ima.AdEvent.Type.LOADED:
// This is the first event sent for an ad - it is possible to determine whether the
// ad is a video ad or an overlay
- this.handleEventListeners('LOADED');
+ this.trigger('LOADED');
// Bubble event
dispatchEvent('loaded');
@@ -278,7 +280,7 @@ class Ads {
case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
// All ads for the current videos are done. We can now request new advertisements
// in case the video is re-played
- this.handleEventListeners('ALL_ADS_COMPLETED');
+ this.trigger('ALL_ADS_COMPLETED');
// Fire event
dispatchEvent('allcomplete');
@@ -313,7 +315,7 @@ class Ads {
// This event indicates the ad has started - the video player can adjust the UI,
// for example display a pause button and remaining time. Fired when content should
// be paused. This usually happens right before an ad is about to cover the content
- this.handleEventListeners('CONTENT_PAUSE_REQUESTED');
+ this.trigger('CONTENT_PAUSE_REQUESTED');
dispatchEvent('contentpause');
@@ -326,7 +328,7 @@ class Ads {
// appropriate UI actions, such as removing the timer for remaining time detection.
// Fired when content should be resumed. This usually happens when an ad finishes
// or collapses
- this.handleEventListeners('CONTENT_RESUME_REQUESTED');
+ this.trigger('CONTENT_RESUME_REQUESTED');
dispatchEvent('contentresume');
@@ -462,7 +464,7 @@ class Ads {
*/
pauseContent() {
// Show the advertisement container
- this.elements.container.style.zIndex = '3';
+ this.elements.container.style.zIndex = 3;
// Ad is playing.
this.playing = true;
@@ -484,7 +486,7 @@ class Ads {
}
// Tell our instance that we're done for now
- this.handleEventListeners('ERROR');
+ this.trigger('ERROR');
// Re-create our adsManager
this.loadAds();
@@ -516,9 +518,15 @@ class Ads {
* Handles callbacks after an ad event was invoked
* @param {string} event - Event type
*/
- handleEventListeners(event) {
- if (utils.is.function(this.events[event])) {
- this.events[event].call(this);
+ trigger(event) {
+ const handlers = this.events[event];
+
+ if (utils.is.array(handlers)) {
+ handlers.forEach(handler => {
+ if (utils.is.function(handler)) {
+ handler.call(this);
+ }
+ });
}
}
@@ -529,7 +537,12 @@ class Ads {
* @return {Ads}
*/
on(event, callback) {
- this.events[event] = callback;
+ if (!utils.is.array(this.events[event])) {
+ this.events[event] = [];
+ }
+
+ this.events[event].push(callback);
+
return this;
}
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 7b846f04..fcc4247c 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -16,9 +16,14 @@ const vimeo = {
// Load the API if not already
if (!utils.is.object(window.Vimeo)) {
- utils.loadScript(this.config.urls.vimeo.api, () => {
- vimeo.ready.call(this);
- });
+ utils
+ .loadScript(this.config.urls.vimeo.api)
+ .then(() => {
+ vimeo.ready.call(this);
+ })
+ .catch(error => {
+ this.debug.warn('Vimeo API failed to load', error);
+ });
} else {
vimeo.ready.call(this);
}
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 07e12b79..b2f6f57f 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -19,7 +19,9 @@ const youtube = {
youtube.ready.call(this);
} else {
// Load the API
- utils.loadScript(this.config.urls.youtube.api);
+ utils.loadScript(this.config.urls.youtube.api).catch(error => {
+ this.debug.warn('YouTube API failed to load', error);
+ });
// Setup callback for the API
// YouTube has it's own system of course...
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 04913046..d90110f2 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -12,12 +12,12 @@ import utils from './utils';
import Console from './console';
import Fullscreen from './fullscreen';
+import Listeners from './listeners';
import Storage from './storage';
import Ads from './plugins/ads';
import captions from './captions';
import controls from './controls';
-import listeners from './listeners';
import media from './media';
import source from './source';
import ui from './ui';
@@ -235,6 +235,9 @@ class Plyr {
return;
}
+ // Create listeners
+ this.listeners = new Listeners(this);
+
// Setup local storage for user settings
this.storage = new Storage(this);
@@ -250,9 +253,6 @@ class Plyr {
// Allow focus to be captured
this.elements.container.setAttribute('tabindex', 0);
- // Global listeners
- listeners.global.call(this);
-
// Add style hook
ui.addStyleHook.call(this);
@@ -272,6 +272,12 @@ class Plyr {
ui.build.call(this);
}
+ // Container listeners
+ this.listeners.container();
+
+ // Global listeners
+ this.listeners.global(true);
+
// Setup fullscreen
this.fullscreen = new Fullscreen(this);
@@ -309,15 +315,12 @@ class Plyr {
* Play the media, or play the advertisement (if they are not blocked)
*/
play() {
- // Return the promise (for HTML5)
+ // If ads are enabled, wait for them first
if (this.ads.enabled && !this.ads.initialized) {
- return this.ads.managerPromise.then(() => {
- this.ads.play();
- }).catch(() => {
- this.media.play();
- });
+ return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
}
+ // Return the promise (for HTML5)
return this.media.play();
}
@@ -1057,6 +1060,9 @@ class Plyr {
// Replace the container with the original element provided
utils.replaceElement(this.elements.original, this.elements.container);
+ // Unbind global listeners
+ this.listeners.global(false);
+
// Event
utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true);
diff --git a/src/js/ui.js b/src/js/ui.js
index 7e09dea6..d910cc91 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -26,7 +26,7 @@ const ui = {
build() {
// Re-attach media element listeners
// TODO: Use event bubbling
- listeners.media.call(this);
+ this.listeners.media();
// Don't setup interface if no support
if (!this.supported.ui) {
@@ -45,7 +45,7 @@ const ui = {
controls.inject.call(this);
// Re-attach control listeners
- listeners.controls.call(this);
+ this.listeners.controls();
}
// If there's no controls, bail
diff --git a/src/js/utils.js b/src/js/utils.js
index 5dafee89..4958627b 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -123,29 +123,29 @@ const utils = {
},
// Load an external script
- loadScript(url, callback, error) {
- const current = document.querySelector(`script[src="${url}"]`);
+ loadScript(url) {
+ return new Promise((resolve, reject) => {
+ const current = document.querySelector(`script[src="${url}"]`);
- // Check script is not already referenced, if so wait for load
- if (current !== null) {
- current.callbacks = current.callbacks || [];
- current.callbacks.push(callback);
- return;
- }
+ // Check script is not already referenced, if so wait for load
+ if (current !== null) {
+ current.callbacks = current.callbacks || [];
+ current.callbacks.push(resolve);
+ return;
+ }
- // Build the element
- const element = document.createElement('script');
+ // Build the element
+ const element = document.createElement('script');
- // Callback queue
- element.callbacks = element.callbacks || [];
- element.callbacks.push(callback);
+ // Callback queue
+ element.callbacks = element.callbacks || [];
+ element.callbacks.push(resolve);
- // Error queue
- element.errors = element.errors || [];
- element.errors.push(error);
+ // Error queue
+ element.errors = element.errors || [];
+ element.errors.push(reject);
- // Bind callback
- if (utils.is.function(callback)) {
+ // Bind callback
element.addEventListener(
'load',
event => {
@@ -154,24 +154,24 @@ const utils = {
},
false,
);
- }
- // Bind error handling
- element.addEventListener(
- 'error',
- event => {
- element.errors.forEach(err => err.call(null, event));
- element.errors = null;
- },
- false,
- );
+ // Bind error handling
+ element.addEventListener(
+ 'error',
+ event => {
+ element.errors.forEach(err => err.call(null, event));
+ element.errors = null;
+ },
+ false,
+ );
- // Set the URL after binding callback
- element.src = url;
+ // Set the URL after binding callback
+ element.src = url;
- // Inject
- const first = document.getElementsByTagName('script')[0];
- first.parentNode.insertBefore(element, first);
+ // Inject
+ const first = document.getElementsByTagName('script')[0];
+ first.parentNode.insertBefore(element, first);
+ });
},
// Load an external SVG sprite
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-11 00:55:10 +0000