From f87ada1ee03be299eaa1fffc7ba6c32fe8bb9291 Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 31 Jan 2017 15:11:26 -0500
Subject: [PATCH] fix: allow changing volume in full height of volume control
 (#3987)

* allow changing volume in full height of volume control
* make volume control have pointer cursor
---
 src/css/components/_volume.scss               |  1 +
 .../volume-control/volume-control.js          | 54 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
index 6582e3de1..922f833ae 100644
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@@ -20,6 +20,7 @@
 }
 
 .video-js .vjs-volume-control {
+  cursor: pointer;
   margin-right: 1em;
   @include display-flex;
 }
diff --git a/src/js/control-bar/volume-control/volume-control.js b/src/js/control-bar/volume-control/volume-control.js
index a2240b936..8c5ac7fd2 100644
--- a/src/js/control-bar/volume-control/volume-control.js
+++ b/src/js/control-bar/volume-control/volume-control.js
@@ -4,6 +4,7 @@
 import Component from '../../component.js';
 import checkVolumeSupport from './check-volume-support';
 import {isPlain} from '../../utils/obj';
+import { throttle, bind } from '../../utils/fn.js';
 
 // Required children
 import './volume-bar.js';
@@ -39,6 +40,11 @@ class VolumeControl extends Component {
     // hide this control if volume support is missing
     checkVolumeSupport(this, player);
 
+    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
+
+    this.on('mousedown', this.handleMouseDown);
+    this.on('touchstart', this.handleMouseDown);
+
     // while the slider is active (the mouse has been pressed down and
     // is dragging) or in focus we do not want to hide the VolumeBar
     this.on(this.volumeBar, ['focus', 'slideractive'], () => {
@@ -72,6 +78,54 @@ class VolumeControl extends Component {
     });
   }
 
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.on(doc, 'mouseup', this.handleMouseUp);
+    this.on(doc, 'touchend', this.handleMouseUp);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchend', this.handleMouseUp);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseMove(event) {
+    this.volumeBar.handleMouseMove(event);
+  }
 }
 
 /**