web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-02-12 12:16:27 +02:00
Code Releases Activity

fix: allow changing volume in full height of volume control (#3987)

Browse Source 
* allow changing volume in full height of volume control
* make volume control have pointer cursor
This commit is contained in:
Gary Katsevman 2017-01-31 15:11:26 -05:00 committed by GitHub
parent 19b429bddc
commit f87ada1ee0
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/components/_volume.scss
View File

@ -20,6 +20,7 @@
}
.video-js .vjs-volume-control {
cursor: pointer;
margin-right: 1em;
@include display-flex;
}

54
src/js/control-bar/volume-control/volume-control.js
View File

@ -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);
}
}
/**