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

Click to play fix, poster fix, iOS controls fixes

Browse Source
This commit is contained in:
Sam Potts
2018-07-30 01:13:12 +10:00
parent 3a8332bdb3
commit 599b33e55f
26 changed files with 854 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
src/js/listeners.js
View File

@ -4,10 +4,12 @@
import controls from './controls';
import ui from './ui';
import { repaint } from './utils/animation';
import browser from './utils/browser';
import {
getElement,
getElements,
hasClass,
matches,
toggleClass,
toggleHidden,
@ -30,6 +32,7 @@ class Listeners {
// Handle key presses
handleKey(event) {
const { player } = this;
const code = event.keyCode ? event.keyCode : event.which;
const pressed = event.type === 'keydown';
const repeat = pressed && code === this.lastKey;
@ -48,7 +51,7 @@ class Listeners {
// 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);
player.currentTime = player.duration / 10 * (code - 48);
};
// Handle the key on keydown
@ -59,8 +62,8 @@ class Listeners {
// and any that accept key input http://webaim.org/techniques/keyboard/
const focused = document.activeElement;
if (is.element(focused)) {
const { editable } = this.player.config.selectors;
const { seek } = this.player.elements.inputs;
const { editable } = player.config.selectors;
const { seek } = player.elements.inputs;
if (focused !== seek && matches(focused, editable)) {
return;
@ -126,52 +129,52 @@ class Listeners {
case 75:
// Space and K key
if (!repeat) {
this.player.togglePlay();
player.togglePlay();
}
break;
case 38:
// Arrow up
this.player.increaseVolume(0.1);
player.increaseVolume(0.1);
break;
case 40:
// Arrow down
this.player.decreaseVolume(0.1);
player.decreaseVolume(0.1);
break;
case 77:
// M key
if (!repeat) {
this.player.muted = !this.player.muted;
player.muted = !player.muted;
}
break;
case 39:
// Arrow forward
this.player.forward();
player.forward();
break;
case 37:
// Arrow back
this.player.rewind();
player.rewind();
break;
case 70:
// F key
this.player.fullscreen.toggle();
player.fullscreen.toggle();
break;
case 67:
// C key
if (!repeat) {
this.player.toggleCaptions();
player.toggleCaptions();
}
break;
case 76:
// L key
this.player.loop = !this.player.loop;
player.loop = !player.loop;
break;
/* case 73:
@ -193,11 +196,11 @@ class Listeners {
// 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 &&
!player.fullscreen.enabled &&
player.fullscreen.active &&
code === 27
) {
this.player.fullscreen.toggle();
player.fullscreen.toggle();
}
// Store last code for next cycle
@ -214,17 +217,21 @@ class Listeners {
// Device is touch enabled
firstTouch() {
this.player.touch = true;
const { player } = this;
player.touch = true;
// Add touch class
toggleClass(
this.player.elements.container,
this.player.config.classNames.isTouch,
player.elements.container,
player.config.classNames.isTouch,
true,
);
}
setTabFocus(event) {
const { player } = this;
clearTimeout(this.focusTimer);
// Ignore any key other than tab
@ -239,8 +246,8 @@ class Listeners {
// Remove current classes
const removeCurrent = () => {
const className = this.player.config.classNames.tabFocus;
const current = getElements.call(this.player, `.${className}`);
const className = player.config.classNames.tabFocus;
const current = getElements.call(player, `.${className}`);
toggleClass(current, className, false);
};
@ -257,18 +264,17 @@ class Listeners {
// Delay the adding of classname until the focus has changed
// This event fires before the focusin event
this.focusTimer = setTimeout(() => {
const focused = document.activeElement;
// Ignore if current focus element isn't inside the player
if (!this.player.elements.container.contains(focused)) {
if (!player.elements.container.contains(focused)) {
return;
}
toggleClass(
document.activeElement,
this.player.config.classNames.tabFocus,
player.config.classNames.tabFocus,
true,
);
}, 10);
@ -276,10 +282,12 @@ class Listeners {
// Global window & document listeners
global(toggle = true) {
const { player } = this;
// Keyboard shortcuts
if (this.player.config.keyboard.global) {
if (player.config.keyboard.global) {
toggleListener.call(
this.player,
player,
window,
'keydown keyup',
this.handleKey,
@ -290,7 +298,7 @@ class Listeners {
// Click anywhere closes menu
toggleListener.call(
this.player,
player,
document.body,
'click',
this.toggleMenu,
@ -298,11 +306,11 @@ class Listeners {
);
// Detect touch by events
once.call(this.player, document.body, 'touchstart', this.firstTouch);
once.call(player, document.body, 'touchstart', this.firstTouch);
// Tab focus detection
toggleListener.call(
this.player,
player,
document.body,
'keydown focus blur',
this.setTabFocus,
@ -314,14 +322,13 @@ class Listeners {
// Container listeners
container() {
const { player } = this;
// Keyboard shortcuts
if (
!this.player.config.keyboard.global &&
this.player.config.keyboard.focused
) {
if (!player.config.keyboard.global && player.config.keyboard.focused) {
on.call(
this.player,
this.player.elements.container,
player,
player.elements.container,
'keydown keyup',
this.handleKey,
false,
@ -330,11 +337,11 @@ class Listeners {
// Toggle controls on mouse events and entering fullscreen
on.call(
this.player,
this.player.elements.container,
player,
player.elements.container,
'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
event => {
const { controls } = this.player.elements;
const { controls } = player.elements;
// Remove button states for fullscreen
if (event.type === 'enterfullscreen') {
@ -350,17 +357,17 @@ class Listeners {
let delay = 0;
if (show) {
ui.toggleControls.call(this.player, true);
ui.toggleControls.call(player, true);
// Use longer timeout for touch devices
delay = this.player.touch ? 3000 : 2000;
delay = player.touch ? 3000 : 2000;
}
// Clear timer
clearTimeout(this.player.timers.controls);
clearTimeout(player.timers.controls);
// Set new timer to prevent flicker when seeking
this.player.timers.controls = setTimeout(
() => ui.toggleControls.call(this.player, false),
player.timers.controls = setTimeout(
() => ui.toggleControls.call(player, false),
delay,
);
},
@ -369,100 +376,89 @@ class Listeners {
// Listen for media events
media() {
const { player } = this;
// Time change on media
on.call(
this.player,
this.player.media,
'timeupdate seeking seeked',
event => controls.timeUpdate.call(this.player, event),
on.call(player, player.media, 'timeupdate seeking seeked', event =>
controls.timeUpdate.call(player, event),
);
// Display duration
on.call(
this.player,
this.player.media,
player,
player.media,
'durationchange loadeddata loadedmetadata',
event => controls.durationUpdate.call(this.player, event),
event => controls.durationUpdate.call(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
on.call(this.player, this.player.media, 'canplay', () => {
toggleHidden(this.player.elements.volume, !this.player.hasAudio);
toggleHidden(
this.player.elements.buttons.mute,
!this.player.hasAudio,
);
on.call(player, player.media, 'canplay', () => {
toggleHidden(player.elements.volume, !player.hasAudio);
toggleHidden(player.elements.buttons.mute, !player.hasAudio);
});
// Handle the media finishing
on.call(this.player, this.player.media, 'ended', () => {
on.call(player, player.media, 'ended', () => {
// Show poster on end
if (
this.player.isHTML5 &&
this.player.isVideo &&
this.player.config.resetOnEnd
) {
if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
// Restart
this.player.restart();
player.restart();
}
});
// Check for buffer progress
on.call(
this.player,
this.player.media,
player,
player.media,
'progress playing seeking seeked',
event => controls.updateProgress.call(this.player, event),
event => controls.updateProgress.call(player, event),
);
// Handle volume changes
on.call(this.player, this.player.media, 'volumechange', event =>
controls.updateVolume.call(this.player, event),
on.call(player, player.media, 'volumechange', event =>
controls.updateVolume.call(player, event),
);
// Handle play/pause
on.call(
this.player,
this.player.media,
player,
player.media,
'playing play pause ended emptied timeupdate',
event => ui.checkPlaying.call(this.player, event),
event => ui.checkPlaying.call(player, event),
);
// Loading state
on.call(
this.player,
this.player.media,
'waiting canplay seeked playing',
event => ui.checkLoading.call(this.player, event),
on.call(player, player.media, 'waiting canplay seeked playing', event =>
ui.checkLoading.call(player, event),
);
// If autoplay, then load advertisement if required
// TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
on.call(this.player, this.player.media, 'playing', () => {
if (!this.player.ads) {
on.call(player, player.media, 'playing', () => {
if (!player.ads) {
return;
}
// If ads are enabled, wait for them first
if (this.player.ads.enabled && !this.player.ads.initialized) {
if (player.ads.enabled && !player.ads.initialized) {
// Wait for manager response
this.player.ads.managerPromise
.then(() => this.player.ads.play())
.catch(() => this.player.play());
player.ads.managerPromise
.then(() => player.ads.play())
.catch(() => player.play());
}
});
// Click video
if (
this.player.supported.ui &&
this.player.config.clickToPlay &&
!this.player.isAudio
player.supported.ui &&
player.config.clickToPlay &&
!player.isAudio
) {
// Re-fetch the wrapper
const wrapper = getElement.call(
this.player,
`.${this.player.config.classNames.video}`,
player,
`.${player.config.classNames.video}`,
);
// Bail if there's no wrapper (this should never happen)
@ -471,32 +467,49 @@ class Listeners {
}
// On click play, pause ore restart
on.call(this.player, wrapper, 'click', () => {
// Touch devices will just show controls (if we're hiding controls)
if (
this.player.config.hideControls &&
this.player.touch &&
!this.player.paused
) {
return;
}
on.call(
player,
player.elements.container,
'click touchstart',
event => {
const targets = [player.elements.container, wrapper];
if (this.player.paused) {
this.player.play();
} else if (this.player.ended) {
this.player.restart();
this.player.play();
} else {
this.player.pause();
}
});
// Ignore if click if not container or in video wrapper
if (
!targets.includes(event.target) &&
!wrapper.contains(event.target)
) {
return;
}
// First touch on touch devices will just show controls (if we're hiding controls)
// If controls are shown then it'll toggle like a pointer device
if (
player.config.hideControls &&
player.touch &&
hasClass(
player.elements.container,
player.config.classNames.hideControls,
)
) {
return;
}
if (player.ended) {
player.restart();
player.play();
} else {
player.togglePlay();
}
},
);
}
// Disable right click
if (this.player.supported.ui && this.player.config.disableContextMenu) {
if (player.supported.ui && player.config.disableContextMenu) {
on.call(
this.player,
this.player.elements.wrapper,
player,
player.elements.wrapper,
'contextmenu',
event => {
event.preventDefault();
@ -506,34 +519,34 @@ class Listeners {
}
// Volume change
on.call(this.player, this.player.media, 'volumechange', () => {
on.call(player, player.media, 'volumechange', () => {
// Save to storage
this.player.storage.set({
volume: this.player.volume,
muted: this.player.muted,
player.storage.set({
volume: player.volume,
muted: player.muted,
});
});
// Speed change
on.call(this.player, this.player.media, 'ratechange', () => {
on.call(player, player.media, 'ratechange', () => {
// Update UI
controls.updateSetting.call(this.player, 'speed');
controls.updateSetting.call(player, 'speed');
// Save to storage
this.player.storage.set({ speed: this.player.speed });
player.storage.set({ speed: player.speed });
});
// Quality request
on.call(this.player, this.player.media, 'qualityrequested', event => {
on.call(player, player.media, 'qualityrequested', event => {
// Save to storage
this.player.storage.set({ quality: event.detail.quality });
player.storage.set({ quality: event.detail.quality });
});
// Quality change
on.call(this.player, this.player.media, 'qualitychange', event => {
on.call(player, player.media, 'qualitychange', event => {
// Update UI
controls.updateSetting.call(
this.player,
player,
'quality',
null,
event.detail.quality,
@ -542,21 +555,21 @@ class Listeners {
// Proxy events to container
// Bubble up key events for Edge
const proxyEvents = this.player.config.events
const proxyEvents = player.config.events
.concat(['keyup', 'keydown'])
.join(' ');
on.call(this.player, this.player.media, proxyEvents, event => {
on.call(player, player.media, proxyEvents, event => {
let { detail = {} } = event;
// Get error details from media
if (event.type === 'error') {
detail = this.player.media.error;
detail = player.media.error;
}
triggerEvent.call(
this.player,
this.player.elements.container,
player,
player.elements.container,
event.type,
true,
detail,
@ -566,28 +579,30 @@ class Listeners {
// Run default and custom handlers
proxy(event, defaultHandler, customHandlerKey) {
const customHandler = this.player.config.listeners[customHandlerKey];
const { player } = this;
const customHandler = player.config.listeners[customHandlerKey];
const hasCustomHandler = is.function(customHandler);
let returned = true;
// Execute custom handler
if (hasCustomHandler) {
returned = customHandler.call(this.player, event);
returned = customHandler.call(player, event);
}
// Only call default handler if not prevented in custom handler
if (returned && is.function(defaultHandler)) {
defaultHandler.call(this.player, event);
defaultHandler.call(player, event);
}
}
// Trigger custom and default handlers
bind(element, type, defaultHandler, customHandlerKey, passive = true) {
const customHandler = this.player.config.listeners[customHandlerKey];
const { player } = this;
const customHandler = player.config.listeners[customHandlerKey];
const hasCustomHandler = is.function(customHandler);
on.call(
this.player,
player,
element,
type,
event => this.proxy(event, defaultHandler, customHandlerKey),
@ -597,91 +612,93 @@ class Listeners {
// Listen for control events
controls() {
const { player } = this;
// IE doesn't support input event, so we fallback to change
const inputEvent = browser.isIE ? 'change' : 'input';
// Play/pause toggle
if (this.player.elements.buttons.play) {
Array.from(this.player.elements.buttons.play).forEach(button => {
this.bind(button, 'click', this.player.togglePlay, 'play');
if (player.elements.buttons.play) {
Array.from(player.elements.buttons.play).forEach(button => {
this.bind(button, 'click', player.togglePlay, 'play');
});
}
// Pause
this.bind(
this.player.elements.buttons.restart,
player.elements.buttons.restart,
'click',
this.player.restart,
player.restart,
'restart',
);
// Rewind
this.bind(
this.player.elements.buttons.rewind,
player.elements.buttons.rewind,
'click',
this.player.rewind,
player.rewind,
'rewind',
);
// Rewind
this.bind(
this.player.elements.buttons.fastForward,
player.elements.buttons.fastForward,
'click',
this.player.forward,
player.forward,
'fastForward',
);
// Mute toggle
this.bind(
this.player.elements.buttons.mute,
player.elements.buttons.mute,
'click',
() => {
this.player.muted = !this.player.muted;
player.muted = !player.muted;
},
'mute',
);
// Captions toggle
this.bind(this.player.elements.buttons.captions, 'click', () =>
this.player.toggleCaptions(),
this.bind(player.elements.buttons.captions, 'click', () =>
player.toggleCaptions(),
);
// Fullscreen toggle
this.bind(
this.player.elements.buttons.fullscreen,
player.elements.buttons.fullscreen,
'click',
() => {
this.player.fullscreen.toggle();
player.fullscreen.toggle();
},
'fullscreen',
);
// Picture-in-Picture
this.bind(
this.player.elements.buttons.pip,
player.elements.buttons.pip,
'click',
() => {
this.player.pip = 'toggle';
player.pip = 'toggle';
},
'pip',
);
// Airplay
this.bind(
this.player.elements.buttons.airplay,
player.elements.buttons.airplay,
'click',
this.player.airplay,
player.airplay,
'airplay',
);
// Settings menu - click toggle
this.bind(this.player.elements.buttons.settings, 'click', event => {
controls.toggleMenu.call(this.player, event);
this.bind(player.elements.buttons.settings, 'click', event => {
controls.toggleMenu.call(player, event);
});
// Settings menu - keyboard toggle
this.bind(
this.player.elements.buttons.settings,
player.elements.buttons.settings,
'keydown',
event => {
// We only care about space
@ -696,33 +713,28 @@ class Listeners {
event.stopPropagation();
// Toggle menu
controls.toggleMenu.call(this.player, event);
controls.toggleMenu.call(player, event);
},
null,
false,
);
// Set range input alternative "value", which matches the tooltip time (#954)
this.bind(
this.player.elements.inputs.seek,
'mousedown mousemove',
event => {
const clientRect = this.player.elements.progress.getBoundingClientRect();
const percent =
100 / clientRect.width * (event.pageX - clientRect.left);
event.currentTarget.setAttribute('seek-value', percent);
},
);
this.bind(player.elements.inputs.seek, 'mousedown mousemove', event => {
const rect = player.elements.progress.getBoundingClientRect();
const percent = 100 / rect.width * (event.pageX - rect.left);
event.currentTarget.setAttribute('seek-value', percent);
});
// Pause while seeking
this.bind(
this.player.elements.inputs.seek,
player.elements.inputs.seek,
'mousedown mouseup keydown keyup touchstart touchend',
event => {
const seek = event.currentTarget;
const code = event.keyCode ? event.keyCode : event.which;
const eventType = event.type;
const attribute = 'play-on-seeked';
if (
(eventType === 'keydown' || eventType === 'keyup') &&
@ -731,7 +743,7 @@ class Listeners {
return;
}
// Was playing before?
const play = seek.hasAttribute('play-on-seeked');
const play = seek.hasAttribute(attribute);
// Done seeking
const done = ['mouseup', 'touchend', 'keyup'].includes(
@ -740,18 +752,18 @@ class Listeners {
// If we're done seeking and it was playing, resume playback
if (play && done) {
seek.removeAttribute('play-on-seeked');
this.player.play();
} else if (!done && this.player.playing) {
seek.setAttribute('play-on-seeked', '');
this.player.pause();
seek.removeAttribute(attribute);
player.play();
} else if (!done && player.playing) {
seek.setAttribute(attribute, '');
player.pause();
}
},
);
// Seek
this.bind(
this.player.elements.inputs.seek,
player.elements.inputs.seek,
inputEvent,
event => {
const seek = event.currentTarget;
@ -765,8 +777,13 @@ class Listeners {
seek.removeAttribute('seek-value');
this.player.currentTime =
seekTo / seek.max * this.player.duration;
// Super weird iOS bug where after you interact with an <input type="range">,
// it takes over further interactions on the page. This is a hack
if (browser.isIos) {
repaint(seek);
}
player.currentTime = seekTo / seek.max * player.duration;
},
'seek',
);
@ -774,65 +791,61 @@ class Listeners {
// Current time invert
// Only if one time element is used for both currentTime and duration
if (
this.player.config.toggleInvert &&
!is.element(this.player.elements.display.duration)
player.config.toggleInvert &&
!is.element(player.elements.display.duration)
) {
this.bind(this.player.elements.display.currentTime, 'click', () => {
this.bind(player.elements.display.currentTime, 'click', () => {
// Do nothing if we're at the start
if (this.player.currentTime === 0) {
if (player.currentTime === 0) {
return;
}
this.player.config.invertTime = !this.player.config.invertTime;
player.config.invertTime = !player.config.invertTime;
controls.timeUpdate.call(this.player);
controls.timeUpdate.call(player);
});
}
// Volume
this.bind(
this.player.elements.inputs.volume,
player.elements.inputs.volume,
inputEvent,
event => {
this.player.volume = event.target.value;
player.volume = event.target.value;
},
'volume',
);
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
Array.from(
getElements.call(this.player, 'input[type="range"]'),
).forEach(element => {
this.bind(element, 'input', event =>
controls.updateRangeFill.call(this.player, event.target),
);
});
Array.from(getElements.call(player, 'input[type="range"]')).forEach(
element => {
this.bind(element, 'input', event =>
controls.updateRangeFill.call(player, event.target),
);
},
);
}
// Seek tooltip
this.bind(
this.player.elements.progress,
player.elements.progress,
'mouseenter mouseleave mousemove',
event => controls.updateSeekTooltip.call(this.player, event),
event => controls.updateSeekTooltip.call(player, event),
);
// Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
this.bind(
this.player.elements.controls,
'mouseenter mouseleave',
event => {
this.player.elements.controls.hover =
!this.player.touch && event.type === 'mouseenter';
},
);
this.bind(player.elements.controls, 'mouseenter mouseleave', event => {
player.elements.controls.hover =
!player.touch && event.type === 'mouseenter';
});
// Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
this.bind(
this.player.elements.controls,
player.elements.controls,
'mousedown mouseup touchstart touchend touchcancel',
event => {
this.player.elements.controls.pressed = [
player.elements.controls.pressed = [
'mousedown',
'touchstart',
].includes(event.type);
@ -840,21 +853,22 @@ class Listeners {
);
// Focus in/out on controls
this.bind(this.player.elements.controls, 'focusin focusout', event => {
const { config, elements, timers } = this.player;
this.bind(player.elements.controls, 'focusin focusout', event => {
const { config, elements, timers } = player;
const isFocusIn = event.type === 'focusin';
// Skip transition to prevent focus from scrolling the parent element
toggleClass(
elements.controls,
config.classNames.noTransition,
event.type === 'focusin',
isFocusIn,
);
// Toggle
ui.toggleControls.call(this.player, event.type === 'focusin');
ui.toggleControls.call(player, isFocusIn);
// If focusin, hide again after delay
if (event.type === 'focusin') {
if (isFocusIn) {
// Restore transition
setTimeout(() => {
toggleClass(
@ -872,7 +886,7 @@ class Listeners {
// Hide
timers.controls = setTimeout(
() => ui.toggleControls.call(this.player, false),
() => ui.toggleControls.call(player, false),
delay,
);
}
@ -880,7 +894,7 @@ class Listeners {
// Mouse wheel for volume
this.bind(
this.player.elements.inputs.volume,
player.elements.inputs.volume,
'wheel',
event => {
// Detect "natural" scroll - suppored on OS X Safari only
@ -896,10 +910,10 @@ class Listeners {
const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
// Change the volume by 2%
this.player.increaseVolume(direction / 50);
player.increaseVolume(direction / 50);
// Don't break page scrolling at max and min
const { volume } = this.player.media;
const { volume } = player.media;
if (
(direction === 1 && volume < 1) ||
(direction === -1 && volume > 0)