ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Event listener fixes, loadScript promise, ads tweaks

Browse Source
This commit is contained in:
Sam Potts
2018-03-11 02:03:35 +11:00
parent c734bc4957
commit e206edc1f6
25 changed files with 3559 additions and 3386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
src/js/listeners.js
View File

@ -10,192 +10,209 @@ import ui from './ui';
// Sniff out the browser
const browser = utils.getBrowser();
const listeners = {
// Global listeners
global() {
let last = null;
class Listeners {
constructor(player) {
this.player = player;
this.lastKey = null;
// Get the key code for an event
const getKeyCode = event => (event.keyCode ? event.keyCode : event.which);
this.handleKey = this.handleKey.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
}
// Handle key press
const handleKey = event => {
const code = getKeyCode(event);
const pressed = event.type === 'keydown';
const repeat = pressed && code === last;
// 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;
}
// 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;
}
// 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.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;
}
// If the code is found prevent default (e.g. prevent scrolling for arrows)
if (preventDefault.includes(code)) {
event.preventDefault();
event.stopPropagation();
}
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 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 76:
// L key
this.loop = !this.loop;
break;
/* case 73:
this.setLoop('start');
break;
case 76:
this.setLoop();
break;
case 79:
this.setLoop('end');
break; */
default:
break;
}
// 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();
}
// Store last code for next cycle
last = code;
} else {
last = null;
}
// 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 code is found prevent default (e.g. prevent scrolling for arrows)
if (preventDefault.includes(code)) {
event.preventDefault();
event.stopPropagation();
}
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 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;
case 76:
// L key
this.player.loop = !this.player.loop;
break;
/* case 73:
this.setLoop('start');
break;
case 76:
this.setLoop();
break;
case 79:
this.setLoop('end');
break; */
default:
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();
}
// Store last code for next cycle
this.lastKey = code;
} else {
this.lastKey = null;
}
}
// Toggle menu
toggleMenu(event) {
controls.toggleMenu.call(this.player, event);
}
// Global window & document listeners
global(toggle) {
// 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) {
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.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;