Inline volumeMenuButton option

src/css/components/_play-pause.scss

@@ -1,5 +1,4 @@
 .video-js .vjs-play-control {
-  width: 5em;
   cursor: pointer;
   @include flex(none);
 }

src/css/components/_slider.scss

@@ -3,6 +3,7 @@
   position: relative;
   cursor: pointer;
   padding: 0;
+  margin: 0 0.45em 0 0.45em;
 
   @include background-color-with-alpha($secondary-bg, 0.9);
 }

src/css/components/_volume.scss

@@ -25,7 +25,7 @@
 }
 
 .video-js .vjs-volume-bar {
-  margin: 1.3em;
+  margin: 1.35em;
 }
 
 .video-js .vjs-volume-bar.vjs-slider-horizontal {
@@ -50,6 +50,7 @@
   // Volume handle
   &:before {
     position: absolute;
+    font-size: 0.9em; // Doing this to match the handle on play progress.
   }
 }
 
@@ -59,15 +60,15 @@
   // Volume handle
   &:before {
     top: -0.5em;
-    left: -0.35em;
+    left: -0.3em;
   }
 }
 .video-js .vjs-slider-horizontal .vjs-volume-level {
   height: 0.3em;
 
   // Volume handle
   &:before {
-    top: -0.35em;
+    top: -0.3em;
     right: -0.5em;
   }
 }
@@ -81,7 +82,7 @@ a little differently. It needs to be possible to tab to the volume slider
 without hitting space bar on the menu button. To do this we're not using
 display:none to hide the slider menu by default, and instead setting the
 width and height to zero. */
-.video-js .vjs-volume-menu-button .vjs-menu {
+.video-js .vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
   display: block;
   width: 0;
   height: 0;
@@ -90,11 +91,11 @@ width and height to zero. */
 .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 {
+.video-js .vjs-volume-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em;
 }
 
-.video-js .vjs-menu-button.vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+.video-js .vjs-menu-button.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu .vjs-menu-content {
   height: 0;
   width: 0;
 

src/css/components/menu/_menu-inline.scss

@@ -0,0 +1,56 @@
+.video-js .vjs-menu-button-inline {
+  @include transition(all 0.4s);
+
+  overflow: hidden;
+}
+
+.video-js .vjs-menu-button.vjs-menu-button-inline:before {
+  // Icon pseudoelement has a different base font size (1.8em), so we need to
+  // account for that in the width. 4em (standard button width) divided by 1.8
+  // to get the same button width as normal.
+  width: 2.222222222em;
+}
+
+.video-js .vjs-menu-button-inline .vjs-menu {
+  opacity: 0;
+  height: 100%;
+  width: auto;
+
+  position: absolute;
+  left: 2.2222222em;
+  top: 0;
+
+  padding: 0;
+  margin: 0;
+
+  @include transition(all 0.2s);
+}
+
+.video-js.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
+  position: relative;
+  width: 0;
+}
+
+.video-js.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu {
+  width: auto;
+}
+
+.video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content {
+  width: auto;
+  height: 100%;
+  margin: 0;
+
+  overflow: hidden;
+}
+
+// Hover state
+.video-js .vjs-menu-button-inline:hover {
+  // This width is currently specific to the inline volume bar.
+  width: 10em;
+}
+
+.video-js .vjs-menu-button.vjs-menu-button-inline:hover .vjs-menu,
+.video-js .vjs-menu-button-inline .vjs-menu.vjs-lock-showing {
+  display: block;
+  opacity: 1;
+}

src/css/components/menu/_menu-popup.scss

@@ -0,0 +1,27 @@
+.video-js .vjs-menu-button-popup .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: -3em; /* (Width of vjs-menu - width of button) / 2 */
+  width: 0em;
+  height: 0em;
+  margin-bottom: 1.5em;
+  border-top-color: rgba(7, 40, 50, $control-bar--transparency); /* Same as ul background */
+}
+
+/* Button Pop-up Menu */
+.video-js .vjs-menu-button-popup .vjs-menu-content {
+  @include background-color-with-alpha($primary-bg, 0.7);
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  position: absolute;
+  width: 10em;
+  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+  max-height: 15em;
+}
+
+.video-js .vjs-menu-button.vjs-menu-button-popup:hover .vjs-menu,
+.video-js .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
+  display: block;
+}

src/css/components/menu/_menu.scss

@@ -0,0 +1,47 @@
+.video-js .vjs-menu-button {
+  cursor: pointer;
+}
+
+.video-js .vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0; margin: 0;
+  overflow: auto;
+}
+
+/* prevent menus from opening while scrubbing (FF, IE) */
+.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
+  display: none;
+}
+
+.video-js .vjs-menu ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0.2em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+
+.video-js .vjs-menu ul li.vjs-selected {
+  background-color: $primary-bg;
+}
+.video-js .vjs-menu ul li:focus,
+.video-js .vjs-menu ul li:hover,
+.video-js .vjs-menu ul li.vjs-selected:focus,
+.video-js .vjs-menu ul li.vjs-selected:hover {
+  outline: 0;
+  color: $primary-bg;
+
+  @include background-color-with-alpha($primary-text, 0.75);
+}
+.video-js .vjs-menu ul li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}

src/css/video-js.scss

@@ -7,13 +7,19 @@ $icon-font-path: 'font';
 @import "components/layout";
 @import "components/big-play";
 @import "components/button";
+
 @import "components/control-bar";
 @import "components/control";
 @import "components/control-spacer";
+
 @import "components/progress";
 @import "components/slider";
 @import "components/volume";
-@import "components/menu";
+
+@import "components/menu/menu";
+@import "components/menu/menu-popup";
+@import "components/menu/menu-inline";
+
 @import "components/poster";
 @import "components/live";
 @import "components/time";

src/js/control-bar/control-bar.js

@@ -46,6 +46,7 @@ ControlBar.prototype.options_ = {
   loadEvent: 'play',
   children: [
     'playToggle',
+    'volumeMenuButton',
     'currentTimeDisplay',
     'timeDivider',
     'durationDisplay',
@@ -59,7 +60,6 @@ ControlBar.prototype.options_ = {
     'chaptersButton',
     'subtitlesButton',
     'captionsButton',
-    'volumeMenuButton',
     'fullscreenToggle'
   ]
 };

src/js/control-bar/volume-menu-button.js

@@ -21,7 +21,13 @@ class VolumeMenuButton extends MenuButton {
   constructor(player, options={}){
     // If the vertical option isn't passed at all, default to true.
     if (options.vertical === undefined) {
-      options.vertical = true;
+      // If an inline volumeMenuButton is used, we should default to using a horizontal
+      // slider for obvious reasons.
+      if (options.inline) {
+        options.vertical = false;
+      } else {
+        options.vertical = true;
+      }
     }
 
     // The vertical option needs to be set on the volumeBar as well, since that will

src/js/menu/menu-button.js

@@ -18,7 +18,7 @@ import toTitleCase from '../utils/to-title-case.js';
  */
 class MenuButton extends Button {
 
-  constructor(player, options){
+  constructor(player, options={}){
     super(player, options);
 
     this.update();
@@ -114,16 +114,25 @@ class MenuButton extends Button {
    * @method buildCSSClass
    */
   buildCSSClass() {
-    return `vjs-menu-button ${super.buildCSSClass()}`;
+    var menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+
+    return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
   }
 
   /**
    * Focus - Add keyboard functionality to element
-   * This function is not needed anymore. Instead, the 
+   * This function is not needed anymore. Instead, the
    * keyboard functionality is handled by
-   * treating the button as triggering a submenu. 
+   * treating the button as triggering a submenu.
    * When the button is pressed, the submenu
-   * appears. Pressing the button again makes 
+   * appears. Pressing the button again makes
    * the submenu disappear.
    *
    * @method handleFocus
@@ -139,7 +148,7 @@ class MenuButton extends Button {
   handleBlur() {}
 
   /**
-   * When you click the button it adds focus, which 
+   * When you click the button it adds focus, which
    * will show the menu indefinitely.
    * So we'll remove focus when the mouse leaves the button.
    * Focus is needed for tab navigation.

src/js/slider/slider.js

@@ -41,7 +41,7 @@ class Slider extends Component {
    * Create the component's DOM element
    *
    * @param {String} type Type of element to create
-   * @param {Object=} props List of properties in Object form 
+   * @param {Object=} props List of properties in Object form
    * @return {Element}
    * @method createEl
    */
@@ -86,7 +86,7 @@ class Slider extends Component {
   handleMouseMove() {}
 
   /**
-   * Handle mouse up on Slider 
+   * Handle mouse up on Slider
    *
    * @method handleMouseUp
    */