diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 952a0e6f7d..65335274a0 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -174,6 +174,10 @@ class SeekBar extends Slider { * @listens mousedown */ handleMouseDown(event) { + if (!Dom.isSingleLeftClick(event)) { + return; + } + this.player_.scrubbing(true); this.videoWasPlaying = !this.player_.paused(); @@ -191,6 +195,10 @@ class SeekBar extends Slider { * @listens mousemove */ handleMouseMove(event) { + if (!Dom.isSingleLeftClick(event)) { + return; + } + let newTime = this.calculateDistance(event) * this.player_.duration(); // Don't let video end while scrubbing. diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js index 8216b26cb4..695bda6fb6 100644 --- a/src/js/control-bar/volume-control/volume-bar.js +++ b/src/js/control-bar/volume-control/volume-bar.js @@ -3,6 +3,7 @@ */ import Slider from '../../slider/slider.js'; import Component from '../../component.js'; +import * as Dom from '../../utils/dom.js'; // Required children import './volume-level.js'; @@ -45,6 +46,22 @@ class VolumeBar extends Slider { }); } + /** + * Handle mouse down on volume bar + * + * @param {EventTarget~Event} event + * The `mousedown` event that caused this to run. + * + * @listens mousedown + */ + handleMouseDown(event) { + if (!Dom.isSingleLeftClick(event)) { + return; + } + + super.handleMouseDown(event); + } + /** * Handle movement events on the {@link VolumeMenuButton}. * @@ -54,6 +71,10 @@ class VolumeBar extends Slider { * @listens mousemove */ handleMouseMove(event) { + if (!Dom.isSingleLeftClick(event)) { + return; + } + this.checkMuted(); this.player_.volume(this.calculateDistance(event)); } diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index a2a3cd4b17..71cb2a5c0b 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -744,6 +744,56 @@ export function insertContent(el, content) { return appendContent(emptyEl(el), content); } +/** + * Check if event was a single left click + * + * @param {EventTarget~Event} event + * Event object + * + * @return {boolean} + * - True if a left click + * - False if not a left click + */ +export function isSingleLeftClick(event) { + // Note: if you create something draggable, be sure to + // call it on both `mousedown` and `mousemove` event, + // otherwise `mousedown` should be enough for a button + + if (event.button === undefined && event.buttons === undefined) { + // Why do we need `butttons` ? + // Because, middle mouse sometimes have this: + // e.button === 0 and e.buttons === 4 + // Furthermore, we want to prevent combination click, something like + // HOLD middlemouse then left click, that would be + // e.button === 0, e.buttons === 5 + // just `button` is not gonna work + + // Alright, then what this block does ? + // this is for chrome `simulate mobile devices` + // I want to support this as well + + return true; + } + + if (event.button === 0 && event.buttons === undefined) { + // Touch screen, sometimes on some specific device, `buttons` + // doesn't have anything (safari on ios, blackberry...) + + return true; + } + + if (event.button !== 0 || event.buttons !== 1) { + // This is the reason we have those if else block above + // if any special case we can catch and let it slide + // we do it above, when get to here, this definitely + // is-not-left-click + + return false; + } + + return true; +} + /** * Finds a single DOM element matching `selector` within the optional * `context` of another DOM element (defaulting to `document`).