diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/js/controls.js | 6 | ||||
-rw-r--r-- | src/js/defaults.js | 3 | ||||
-rw-r--r-- | src/js/listeners.js | 560 | ||||
-rw-r--r-- | src/js/plugins/ads.js | 109 | ||||
-rw-r--r-- | src/js/plugins/vimeo.js | 11 | ||||
-rw-r--r-- | src/js/plugins/youtube.js | 4 | ||||
-rw-r--r-- | src/js/plyr.js | 26 | ||||
-rw-r--r-- | src/js/ui.js | 4 | ||||
-rw-r--r-- | src/js/utils.js | 66 |
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 |