diff options
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/listeners.js | 34 | ||||
| -rw-r--r-- | src/js/plyr.js | 30 | ||||
| -rw-r--r-- | src/js/ui.js | 4 | ||||
| -rw-r--r-- | src/js/utils.js | 3 |
4 files changed, 38 insertions, 33 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js index 46bce967..d5ab5f56 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -24,7 +24,12 @@ const listeners = { const handleKey = event => { const code = getKeyCode(event); const pressed = event.type === 'keydown'; - const held = pressed && code === last; + const repeat = pressed && code === last; + + // 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 @@ -92,7 +97,7 @@ const listeners = { case 56: case 57: // 0-9 - if (!held) { + if (!repeat) { seekByKey(); } break; @@ -100,7 +105,7 @@ const listeners = { case 32: case 75: // Space and K key - if (!held) { + if (!repeat) { this.togglePlay(); } break; @@ -117,7 +122,7 @@ const listeners = { case 77: // M key - if (!held) { + if (!repeat) { this.muted = !this.muted; } break; @@ -139,7 +144,7 @@ const listeners = { case 67: // C key - if (!held) { + if (!repeat) { this.toggleCaptions(); } break; @@ -209,7 +214,7 @@ const listeners = { // Toggle controls on mouse events and entering fullscreen utils.on( this.elements.container, - 'click mouseenter mouseleave mousemove touchmove enterfullscreen exitfullscreen', + 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => { this.toggleControls(event); } @@ -269,13 +274,10 @@ const listeners = { const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`); // Bail if there's no wrapper (this should never happen) - if (!wrapper) { + if (!utils.is.htmlElement(wrapper)) { return; } - // Set cursor - wrapper.style.cursor = 'pointer'; - // On click play, pause ore restart utils.on(wrapper, 'click', () => { // Touch devices will just show controls (if we're hiding controls) @@ -527,15 +529,9 @@ const listeners = { }); // Focus in/out on controls - // TODO: Check we need capture here - utils.on( - this.elements.controls, - 'focusin focusout', - event => { - this.toggleControls(event); - }, - true - ); + utils.on(this.elements.controls, 'focusin focusout', event => { + this.toggleControls(event); + }); } // Mouse wheel for volume diff --git a/src/js/plyr.js b/src/js/plyr.js index 4ec1c207..d41b81aa 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -290,7 +290,7 @@ class Plyr { * Get playing state */ get playing() { - return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2: true); + return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true); } /** @@ -912,8 +912,8 @@ class Plyr { return this; } - // Don't hide if config says not to, it's audio, or not ready or loading - if (!this.supported.ui || !this.config.hideControls || this.type === 'audio') { + // Don't hide if no UI support or it's audio + if (!this.supported.ui || this.type === 'audio') { return this; } @@ -928,10 +928,10 @@ class Plyr { isEnterFullscreen = toggle.type === 'enterfullscreen'; // Whether to show controls - show = ['click', 'mousemove', 'touchmove', 'mouseenter', 'focusin'].includes(toggle.type); + show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type); // Delay hiding on move events - if (['mousemove', 'touchmove'].includes(toggle.type)) { + if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) { delay = 2000; } @@ -945,11 +945,11 @@ class Plyr { } } - // Clear timer every movement - window.clearTimeout(this.timers.hover); + // Clear timer on every call + window.clearTimeout(this.timers.controls); // If the mouse is not over the controls, set a timeout to hide them - if (show || this.media.paused || this.loading) { + if (show || this.paused || this.loading) { // Check if controls toggled const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false); @@ -959,7 +959,7 @@ class Plyr { } // Always show controls when paused or if touch - if (this.media.paused || this.loading) { + if (this.paused || this.loading) { return this; } @@ -971,8 +971,16 @@ class Plyr { // If toggle is false or if we're playing (regardless of toggle), // then set the timer to hide the controls - if (!show || !this.media.paused) { - this.timers.hover = window.setTimeout(() => { + if (!show || this.playing) { + this.timers.controls = window.setTimeout(() => { + console.warn({ + pressed: this.elements.controls.pressed, + hover: this.elements.controls.pressed, + playing: this.playing, + paused: this.paused, + loading: this.loading, + }); + // If the mouse is over the controls (and not entering fullscreen), bail if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) { return; diff --git a/src/js/ui.js b/src/js/ui.js index 3807d9f3..3ae974c3 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -143,7 +143,7 @@ const ui = { utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused); // Set aria state - if (utils.is.array(this.elements.buttons.play)) { + if (utils.is.nodeList(this.elements.buttons.play)) { Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing)); } @@ -179,7 +179,7 @@ const ui = { ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume); } - // Update checkbox for mute state + // Update mute state if (utils.is.htmlElement(this.elements.buttons.mute)) { utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0); } diff --git a/src/js/utils.js b/src/js/utils.js index eb0a9650..299f8c92 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -559,7 +559,8 @@ const utils = { } // Get state - const state = utils.is.boolean(input) ? input : !element.getAttribute('aria-pressed'); + const pressed = element.getAttribute('aria-pressed') === 'true'; + const state = utils.is.boolean(input) ? input : !pressed; // Set the attribute on target element.setAttribute('aria-pressed', state); |