WIP: Make Volume Button and Slider Siblings

src/components/control-bar/VolumeMenuButton.js

@@ -83,7 +83,7 @@ class VolumeMenuButton extends Component {
   }
 
   render() {
-    const { vertical, player, className } = this.props;
+    const { vertical, player, className, buttonClassName } = this.props;
     const inline = !vertical;
     const level = this.volumeLevel;
 
@@ -94,22 +94,29 @@ class VolumeMenuButton extends Component {
         className={classNames(
           className,
           {
-            'video-react-volume-menu-button-vertical': vertical,
-            'video-react-volume-menu-button-horizontal': !vertical,
-            'video-react-vol-muted': player.muted,
-            'video-react-vol-0': level === 0 && !player.muted,
-            'video-react-vol-1': level === 1,
-            'video-react-vol-2': level === 2,
-            'video-react-vol-3': level === 3,
+            'video-react-volume-menu-vertical': vertical,
+            'video-react-volume-menu-horizontal': !vertical,
             'video-react-slider-active':
               this.props.alwaysShowVolume || this.state.active,
             'video-react-lock-showing':
               this.props.alwaysShowVolume || this.state.active
           },
-          'video-react-volume-menu-button'
+          'video-react-volume-menu'
         )}
         onClick={this.handleClick}
+        buttonClassName={classNames(
+          buttonClassName,
+          {
+            'video-react-vol-muted': player.muted,
+            'video-react-vol-0': level === 0 && !player.muted,
+            'video-react-vol-1': level === 1,
+            'video-react-vol-2': level === 2,
+            'video-react-vol-3': level === 3
+          },
+          'video-react-volume-menu-button'
+        )}
         inline={inline}
+        aria-label="Volume"
       >
         {children}
       </PopupButton>

src/components/popup/PopupButton.js

@@ -17,25 +17,29 @@ const defaultProps = {
 };
 
 export default function PopupButton(props) {
-  const { inline, className } = props;
+  const { inline, className, buttonClassName } = props;
   const ps = { ...props };
   delete ps.children;
   delete ps.inline;
   delete ps.className;
+
   return (
-    <ClickableComponent
-      className={classNames(
-        className,
-        {
-          'video-react-menu-button-inline': !!inline,
-          'video-react-menu-button-popup': !inline
-        },
-        'video-react-control video-react-button video-react-menu-button'
-      )}
-      {...ps}
+    <div
+      className={classNames(className, 'video-react-popup-button-container')}
     >
+      <ClickableComponent
+        className={classNames(
+          buttonClassName,
+          {
+            'video-react-menu-button-inline': !!inline,
+            'video-react-menu-button-popup': !inline
+          },
+          'video-react-control video-react-button video-react-menu-button'
+        )}
+        {...ps}
+      />
       <Popup {...props} />
-    </ClickableComponent>
+    </div>
   );
 }
 

src/components/volume-control/VolumeBar.js

@@ -32,8 +32,6 @@ class VolumeBar extends Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  componentDidMount() {}
-
   getPercent() {
     const { player } = this.props;
     if (player.muted) {

styles/scss/components/control.scss

@@ -2,7 +2,6 @@
 // It's used on both real buttons (play button)
 // and div buttons (menu buttons)
 .video-react .video-react-control {
-  outline: none;
   position: relative;
   text-align: center;
   margin: 0;

styles/scss/components/slider.scss

@@ -1,5 +1,4 @@
 .video-react .video-react-slider {
-  outline: 0;
   position: relative;
   cursor: pointer;
   padding: 0;

styles/scss/components/volume.scss

@@ -77,25 +77,28 @@
   // 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-react-menu-button-popup.video-react-volume-menu-button .video-react-menu {
+  .video-react-volume-menu .video-react-menu {
     display: block;
     width: 0;
     height: 0;
     border-top-color: transparent;
+    position: absolute;
   }
 
-  .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu {
-    left: 0;
+  .video-react-volume-menu .video-react-menu {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -100%);
     height: auto;
-    width: inherit;
     background-color: inherit;
     border-radius: 4px 4px 0 0;
+    width: 100%;
   }
-  .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu {
+  .video-react-volume-menu-horizontal .video-react-menu {
     left: -2em;
   }
 
-  .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content {
+  .video-react-volume-menu .video-react-menu > .video-react-menu-content {
     height: 0;
     width: 0;
 
@@ -104,29 +107,33 @@
     overflow-y: hidden;
   }
 
-  .video-react-volume-menu-button-vertical:hover .video-react-menu-content,
-  .video-react-volume-menu-button-vertical:focus .video-react-menu-content,
-  .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content,
-  .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content {
+  .video-react-volume-menu:hover .video-react-menu-content,
+  .video-react-volume-menu:focus-within .video-react-menu-content,
+  .video-react-volume-menu.video-react-slider-active .video-react-menu-content,
+  .video-react-volume-menu.video-react-lock-showing .video-react-menu-content {
     height: auto;
     width: inherit;
     background-color: transparent;
   }
 
-  .video-react-volume-menu-button-horizontal:hover .video-react-menu-content,
-  .video-react-volume-menu-button-horizontal:focus .video-react-menu-content,
-  .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content,
-  .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content {
+  .video-react-volume-menu-horizontal:hover .video-react-menu-content,
+  .video-react-volume-menu-horizontal:focus-within .video-react-menu-content,
+  .video-react-volume-menu-horizontal.video-react-slider-active .video-react-menu-content,
+  .video-react-volume-menu-horizontal.video-react-lock-showing .video-react-menu-content {
     height: 2.9em;
     width: 8em;
   }
 
-  .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content {
+  .video-react-volume-menu .video-react-menu > .video-react-menu-content {
     // An inline volume should never have a menu background color.
     //  This protects it from external changes to background colors.
     background-color: transparent !important;
   }
 
+  .video-react-popup-button-container {
+    position: relative;
+  }
+
 }