    /**
     * @file volume-control.js
     */
    import Component from '../component.js';
    import checkVolumeSupport from './volume-control/check-volume-support';
    import {isPlain} from '../utils/obj';

    // Required children
    import './volume-control/volume-control.js';
    import './mute-toggle.js';

    /**
     * A Component to contain the MuteToggle and VolumeControl so that
     * they can work together.
     *
     * @extends Component
     */
    class VolumePanel extends Component {

      /**
       * Creates an instance of this class.
       *
       * @param {Player} player
       *        The `Player` that this class should be attached to.
       *
       * @param {Object} [options={}]
       *        The key/value store of player options.
       */
      constructor(player, options = {}) {
        if (typeof options.inline !== 'undefined') {
          options.inline = options.inline;
        } else {
          options.inline = true;
        }

        // pass the inline option down to the VolumeControl as vertical if
        // the VolumeControl is on.
        if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
          options.volumeControl = options.volumeControl || {};
          options.volumeControl.vertical = !options.inline;
        }

        super(player, options);

        // hide this control if volume support is missing
        checkVolumeSupport(this, player);

        // 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.volumeControl, ['slideractive'], this.sliderActive_);
        this.on(this.muteToggle, 'focus', this.sliderActive_);

        this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
        this.on(this.muteToggle, 'blur', this.sliderInactive_);
      }

      /**
       * Add vjs-slider-active class to the VolumePanel
       *
       * @listens VolumeControl#slideractive
       * @private
       */
      sliderActive_() {
        this.addClass('vjs-slider-active');
      }

      /**
       * Removes vjs-slider-active class to the VolumePanel
       *
       * @listens VolumeControl#sliderinactive
       * @private
       */
      sliderInactive_() {
        this.removeClass('vjs-slider-active');
      }

      /**
       * Create the `Component`'s DOM element
       *
       * @return {Element}
       *         The element that was created.
       */
      createEl() {
        let orientationClass = 'vjs-volume-panel-horizontal';

        if (!this.options_.inline) {
          orientationClass = 'vjs-volume-panel-vertical';
        }

        return super.createEl('div', {
          className: `vjs-volume-panel vjs-control ${orientationClass}`
        });
      }

    }

    /**
     * Default options for the `VolumeControl`
     *
     * @type {Object}
     * @private
     */
    VolumePanel.prototype.options_ = {
      children: [
        'muteToggle',
        'volumeControl'
      ]
    };

    Component.registerComponent('VolumePanel', VolumePanel);
    export default VolumePanel;