aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/listeners.js
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2020-01-30 14:23:10 +0000
committerGitHub <noreply@github.com>2020-01-30 14:23:10 +0000
commit9d512911252cf4835c2b7364cb4ae392cb277a1d (patch)
tree5e6dcc7647285e49683f05d8a49187e8078d0d2b /src/js/listeners.js
parent44d3a17870949e828e5b1a4619a30dfcb626a174 (diff)
parentb2ac730572ad81aa9755e8b7852c53ceba0e8e9f (diff)
downloadplyr-9d512911252cf4835c2b7364cb4ae392cb277a1d.tar.lz
plyr-9d512911252cf4835c2b7364cb4ae392cb277a1d.tar.xz
plyr-9d512911252cf4835c2b7364cb4ae392cb277a1d.zip
Merge pull request #1663 from sampotts/master
Merge back to beta
Diffstat (limited to 'src/js/listeners.js')
-rw-r--r--src/js/listeners.js52
1 files changed, 21 insertions, 31 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 3c65b824..354dc605 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -9,7 +9,7 @@ import browser from './utils/browser';
import { getElement, getElements, matches, toggleClass, toggleHidden } from './utils/elements';
import { off, on, once, toggleListener, triggerEvent } from './utils/events';
import is from './utils/is';
-import { setAspectRatio } from './utils/style';
+import { getAspectRatio, setAspectRatio } from './utils/style';
class Listeners {
constructor(player) {
@@ -147,7 +147,7 @@ class Listeners {
player.loop = !player.loop;
break;
- /* case 73:
+ /* case 73:
this.setLoop('start');
break;
@@ -275,17 +275,16 @@ class Listeners {
elements.container,
'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
event => {
- const { controls } = elements;
+ const { controls: controlsElement } = elements;
// Remove button states for fullscreen
- if (controls && event.type === 'enterfullscreen') {
- controls.pressed = false;
- controls.hover = false;
+ if (controlsElement && event.type === 'enterfullscreen') {
+ controlsElement.pressed = false;
+ controlsElement.hover = false;
}
// Show, then hide after a timeout unless another control event occurs
const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
-
let delay = 0;
if (show) {
@@ -302,14 +301,6 @@ class Listeners {
},
);
- // Force edge to repaint on exit fullscreen
- // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
- /* if (browser.isEdge) {
- on.call(player, elements.container, 'exitfullscreen', () => {
- setTimeout(() => repaint(elements.container), 100);
- });
- } */
-
// Set a gutter for Vimeo
const setGutter = (ratio, padding, toggle) => {
if (!player.isVimeo) {
@@ -317,10 +308,10 @@ class Listeners {
}
const target = player.elements.wrapper.firstChild;
- const [, height] = ratio.split(':').map(Number);
- const [videoWidth, videoHeight] = player.embed.ratio.split(':').map(Number);
+ const [, y] = ratio;
+ const [videoX, videoY] = getAspectRatio.call(player);
- target.style.maxWidth = toggle ? `${(height / videoHeight) * videoWidth}px` : null;
+ target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
target.style.margin = toggle ? '0 auto' : null;
};
@@ -338,20 +329,24 @@ class Listeners {
};
const resized = () => {
- window.clearTimeout(timers.resized);
- timers.resized = window.setTimeout(setPlayerSize, 50);
+ clearTimeout(timers.resized);
+ timers.resized = setTimeout(setPlayerSize, 50);
};
on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
const { target, usingNative } = player.fullscreen;
- // Ignore for iOS native
- if (!player.isEmbed || target !== elements.container) {
+ // Ignore events not from target
+ if (target !== elements.container) {
return;
}
- const isEnter = event.type === 'enterfullscreen';
+ // If it's not an embed and no ratio specified
+ if (!player.isEmbed && is.empty(player.config.ratio)) {
+ return;
+ }
+ const isEnter = event.type === 'enterfullscreen';
// Set the player size when entering fullscreen to viewport size
const { padding, ratio } = setPlayerSize(isEnter);
@@ -486,7 +481,7 @@ class Listeners {
// Update download link when ready and if quality changes
on.call(player, player.media, 'ready qualitychange', () => {
- controls.setDownloadLink.call(player);
+ controls.setDownloadUrl.call(player);
});
// Proxy events to container
@@ -518,7 +513,7 @@ class Listeners {
}
// Only call default handler if not prevented in custom handler
- if (returned && is.function(defaultHandler)) {
+ if (returned !== false && is.function(defaultHandler)) {
defaultHandler.call(player, event);
}
}
@@ -542,7 +537,6 @@ class Listeners {
controls() {
const { player } = this;
const { elements } = player;
-
// IE doesn't support input event, so we fallback to change
const inputEvent = browser.isIE ? 'change' : 'input';
@@ -678,7 +672,6 @@ class Listeners {
// Was playing before?
const play = seek.hasAttribute(attribute);
-
// Done seeking
const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
@@ -706,7 +699,6 @@ class Listeners {
inputEvent,
event => {
const seek = event.currentTarget;
-
// If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
let seekTo = seek.getAttribute('seek-value');
@@ -806,7 +798,7 @@ class Listeners {
// Show controls when they receive focus (e.g., when using keyboard tab key)
this.bind(elements.controls, 'focusin', () => {
- const { config, elements, timers } = player;
+ const { config, timers } = player;
// Skip transition to prevent focus from scrolling the parent element
toggleClass(elements.controls, config.classNames.noTransition, true);
@@ -837,10 +829,8 @@ class Listeners {
// Detect "natural" scroll - suppored on OS X Safari only
// Other browsers on OS X will be inverted until support improves
const inverted = event.webkitDirectionInvertedFromDevice;
-
// Get delta from event. Invert if `inverted` is true
const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
-
// Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);