diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/controls.js | 24 | ||||
| -rw-r--r-- | src/js/defaults.js | 1 | ||||
| -rw-r--r-- | src/js/listeners.js | 19 | ||||
| -rw-r--r-- | src/js/media.js | 2 | ||||
| -rw-r--r-- | src/js/plyr.js | 33 | ||||
| -rw-r--r-- | src/js/support.js | 2 | ||||
| -rw-r--r-- | src/sass/components/menus.scss | 2 |
7 files changed, 56 insertions, 27 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index 295a2eef..c4cc7531 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -384,6 +384,16 @@ const controls = { const clientRect = this.elements.inputs.seek.getBoundingClientRect(); const visible = `${this.config.classNames.tooltip}--visible`; + const toggle = toggle => { + utils.toggleClass(this.elements.display.seekTooltip, visible, toggle); + }; + + // Hide on touch + if (this.touch) { + toggle(false); + return; + } + // Determine percentage, if already visible if (utils.is.event(event)) { percent = 100 / clientRect.width * (event.pageX - clientRect.left); @@ -412,7 +422,7 @@ const controls = { 'mouseenter', 'mouseleave', ].includes(event.type)) { - utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter'); + toggle(event.type === 'mouseenter'); } }, @@ -541,7 +551,7 @@ const controls = { switch (setting) { case 'captions': - value = this.captions.active ? this.captions.language : ''; + value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config); break; default: @@ -638,11 +648,7 @@ const controls = { return null; } - if (!support.textTracks || !captions.getTracks.call(this).length) { - return i18n.get('none', this.config); - } - - if (this.captions.active) { + if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) { const currentTrack = captions.getCurrentTrack.call(this); if (utils.is.track(currentTrack)) { @@ -677,10 +683,10 @@ const controls = { label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase(), })); - // Add the "None" option to turn off captions + // Add the "Disabled" option to turn off captions tracks.unshift({ language: '', - label: i18n.get('none', this.config), + label: i18n.get('disabled', this.config), }); // Generate options diff --git a/src/js/defaults.js b/src/js/defaults.js index 56a45539..e50c4e28 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -181,7 +181,6 @@ const defaults = { end: 'End', all: 'All', reset: 'Reset', - none: 'None', disabled: 'Disabled', advertisement: 'Ad', }, diff --git a/src/js/listeners.js b/src/js/listeners.js index 888202c2..a0edc7c6 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -17,6 +17,7 @@ class Listeners { this.handleKey = this.handleKey.bind(this); this.toggleMenu = this.toggleMenu.bind(this); + this.firstTouch = this.firstTouch.bind(this); } // Handle key presses @@ -187,6 +188,17 @@ class Listeners { controls.toggleMenu.call(this.player, event); } + // Device is touch enabled + firstTouch() { + this.player.touch = true; + + // Add touch class + utils.toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true); + + // Clean up + utils.off(document.body, 'touchstart', this.firstTouch); + } + // Global window & document listeners global(toggle = true) { // Keyboard shortcuts @@ -196,6 +208,9 @@ class Listeners { // Click anywhere closes menu utils.toggleListener(document.body, 'click', this.toggleMenu, toggle); + + // Detect touch by events + utils.on(document.body, 'touchstart', this.firstTouch); } // Container listeners @@ -288,7 +303,7 @@ class Listeners { // On click play, pause ore restart utils.on(wrapper, 'click', () => { // Touch devices will just show controls (if we're hiding controls) - if (this.player.config.hideControls && support.touch && !this.player.paused) { + if (this.player.config.hideControls && this.player.touch && !this.player.paused) { return; } @@ -538,7 +553,7 @@ class Listeners { if (this.player.config.hideControls) { // Watch for cursor over controls so they don't hide when trying to interact on(this.player.elements.controls, 'mouseenter mouseleave', event => { - this.player.elements.controls.hover = event.type === 'mouseenter'; + this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter'; }); // Watch for cursor over controls so they don't hide when trying to interact diff --git a/src/js/media.js b/src/js/media.js index 494c5376..3a97a9d9 100644 --- a/src/js/media.js +++ b/src/js/media.js @@ -46,7 +46,7 @@ const media = { utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); // Add touch class - utils.toggleClass(this.elements.container, this.config.classNames.isTouch, support.touch); + utils.toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); } // Inject the player wrapper diff --git a/src/js/plyr.js b/src/js/plyr.js index 061ac25c..2989146c 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -36,6 +36,9 @@ class Plyr { this.loading = false; this.failed = false; + // Touch device + this.touch = support.touch; + // Set the media element this.media = target; @@ -954,26 +957,32 @@ class Plyr { // Is the enter fullscreen event isEnterFullscreen = toggle.type === 'enterfullscreen'; - // Whether to show controls - show = [ - 'mouseenter', - 'mousemove', + // Events that show the controls + const showEvents = [ 'touchstart', 'touchmove', + 'mouseenter', + 'mousemove', 'focusin', - ].includes(toggle.type); + ]; - // Delay hiding on move events - if ([ - 'mousemove', + // Events that delay hiding + const delayEvents = [ 'touchmove', 'touchend', - ].includes(toggle.type)) { + 'mousemove', + ]; + + // Whether to show controls + show = showEvents.includes(toggle.type); + + // Delay hiding on move events + if (delayEvents.includes(toggle.type)) { delay = 2000; } // Delay a little more for keyboard users - if (toggle.type === 'focusin') { + if (!this.touch && toggle.type === 'focusin') { delay = 3000; utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true); } @@ -1001,7 +1010,7 @@ class Plyr { } // Delay for hiding on touch - if (support.touch) { + if (this.touch) { delay = 3000; } } @@ -1010,6 +1019,8 @@ class Plyr { // then set the timer to hide the controls if (!show || this.playing) { this.timers.controls = setTimeout(() => { + console.warn(this.elements.controls.pressed, this.elements.controls.hover, delay); + // 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/support.js b/src/js/support.js index 7f9a88b1..eede764d 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -143,7 +143,7 @@ const support = { })(), // Touch - // Remember a device can be moust + touch enabled + // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event touch: 'ontouchstart' in document.documentElement, // Detect transitions support diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index 4ad67ec1..9eada7de 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -84,7 +84,6 @@ position: absolute; top: 50%; transform: translateY(-50%); - transition: border-color 0.2s ease; } &--forward { @@ -108,7 +107,6 @@ margin-bottom: floor($plyr-control-padding / 2); padding-left: ceil($plyr-control-padding * 4); position: relative; - width: calc(100% - #{$horizontal-padding}); &::after { |