web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-29 22:07:10 +02:00
Code Releases Activity

Fixed vertical option for volumeMenuButton. closes #2352

Browse Source
This commit is contained in:
Matthew McClure 2015-07-16 18:20:23 -07:00
parent 8cc967e022
commit e5d4757e36
3 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -66,6 +66,7 @@ CHANGELOG
* Insert cloned el back into DOM. Fixes #2214 ([view](https://github.com/videojs/video.js/pull/2334))
* @heff sped up testing ([view](https://github.com/videojs/video.js/pull/2254))
* pass fs state to player from enterFullscreen, split full-window styles into their own selector ([view](https://github.com/videojs/video.js/pull/2357))
* Fixed vertical option for volumeMenuButton ([view](https://github.com/videojs/video.js/pull/2352))
--------------------

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

@ -24,6 +24,10 @@
@include display-flex(center);
}
.video-js .vjs-volume-bar {
margin: 1.3em;
}
.video-js .vjs-volume-bar.vjs-slider-horizontal {
width: 5em;
height: 0.3em;
@ -32,7 +36,6 @@
.video-js .vjs-volume-bar.vjs-slider-vertical {
width: 0.3em;
height: 5em;
margin: 1.3em;
}
.video-js .vjs-volume-level {
@ -82,9 +85,14 @@ width and height to zero. */
display: block;
width: 0;
height: 0;
left: 0.5em;
border-top-color: transparent;
}
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical .vjs-menu {
left: 0.5em;
}
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal .vjs-menu {
left: -2em;
}
.video-js .vjs-menu-button.vjs-volume-menu-button .vjs-menu .vjs-menu-content {
height: 0;
@ -100,12 +108,19 @@ width and height to zero. */
// border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
}
.video-js .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
.video-js .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical:hover .vjs-menu .vjs-menu-content,
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical .vjs-menu.vjs-lock-showing .vjs-menu-content {
height: 8em;
width: 2.9em;
}
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content,
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal .vjs-menu.vjs-lock-showing .vjs-menu-content {
height: 2.9em;
width: 8em;
}
// By default, all menu items are shown, but we hide .vjs-mute-control and .vjs-volume-control
// so that the volume menu button is the only visible volume control.
.video-js .vjs-mute-control,

27
src/js/control-bar/volume-menu-button.js
View File

@ -18,7 +18,17 @@ import VolumeBar from './volume-control/volume-bar.js';
*/
class VolumeMenuButton extends MenuButton {
constructor(player, options){
constructor(player, options={}){
// If the vertical option isn't passed at all, default to true.
if (options.vertical === undefined) {
options.vertical = true;
}
// The vertical option needs to be set on the volumeBar as well, since that will
// need to be passed along to the VolumeBar constructor
options.volumeBar = options.volumeBar || {};
options.volumeBar.vertical = !!options.vertical;
super(player, options);
// Same listeners as MuteToggle
@ -45,7 +55,14 @@ class VolumeMenuButton extends MenuButton {
* @method buildCSSClass
*/
buildCSSClass() {
return `vjs-volume-menu-button ${super.buildCSSClass()}`;
let orientationClass = '';
if (!!this.options_.vertical) {
orientationClass = 'vjs-volume-menu-button-vertical';
} else {
orientationClass = 'vjs-volume-menu-button-horizontal';
}
return `vjs-volume-menu-button ${super.buildCSSClass()} ${orientationClass}`;
}
/**
@ -59,11 +76,7 @@ class VolumeMenuButton extends MenuButton {
contentElType: 'div'
});
// The volumeBar is vertical by default in the base theme when used with a VolumeMenuButton
var options = this.options_['volumeBar'] || {};
options['vertical'] = options['vertical'] || true;
let vc = new VolumeBar(this.player_, options);
let vc = new VolumeBar(this.player_, this.options_.volumeBar);
vc.on('focus', function() {
menu.lockShowing();