@lahzenegar/video-react/lib/components/control-bar/ControlBar.js

Video-React is a web video player built from the ground up for an HTML5 world using React library.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ProgressControl = require('./ProgressControl');

var _ProgressControl2 = _interopRequireDefault(_ProgressControl);

var _PlayToggle = require('./PlayToggle');

var _PlayToggle2 = _interopRequireDefault(_PlayToggle);

var _AudioOnly = require('./AudioOnly');

var _AudioOnly2 = _interopRequireDefault(_AudioOnly);

var _Live = require('./Live');

var _Live2 = _interopRequireDefault(_Live);

var _SettingMenu = require('./SettingMenu');

var _SettingMenu2 = _interopRequireDefault(_SettingMenu);

var _FullscreenToggle = require('./FullscreenToggle');

var _FullscreenToggle2 = _interopRequireDefault(_FullscreenToggle);

var _CurrentTimeDisplay = require('../time-controls/CurrentTimeDisplay');

var _CurrentTimeDisplay2 = _interopRequireDefault(_CurrentTimeDisplay);

var _DurationDisplay = require('../time-controls/DurationDisplay');

var _DurationDisplay2 = _interopRequireDefault(_DurationDisplay);

var _TimeDivider = require('../time-controls/TimeDivider');

var _TimeDivider2 = _interopRequireDefault(_TimeDivider);

var _VolumeMenuButton = require('./VolumeMenuButton');

var _VolumeMenuButton2 = _interopRequireDefault(_VolumeMenuButton);

var _PlaybackRateMenuButton = require('./PlaybackRateMenuButton');

var _PlaybackRateMenuButton2 = _interopRequireDefault(_PlaybackRateMenuButton);

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var propTypes = {
  children: _propTypes2.default.any,
  autoHide: _propTypes2.default.bool,
  className: _propTypes2.default.string
};

var defaultProps = {
  autoHide: true
};

var ControlBar = function (_Component) {
  (0, _inherits3.default)(ControlBar, _Component);

  function ControlBar(props) {
    (0, _classCallCheck3.default)(this, ControlBar);
    return (0, _possibleConstructorReturn3.default)(this, (ControlBar.__proto__ || (0, _getPrototypeOf2.default)(ControlBar)).call(this, props));
  }

  (0, _createClass3.default)(ControlBar, [{
    key: 'getChildren',
    value: function getChildren() {
      var children = _react2.default.Children.toArray(this.props.children);
      return (0, _utils.mergeAndSortChildren)([], children, this.props);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          autoHide = _props.autoHide,
          className = _props.className,
          _props$player = _props.player,
          hasDVR = _props$player.hasDVR,
          isLive = _props$player.isLive,
          tracks = _props$player.tracks,
          switchingTrack = _props$player.switchingTrack,
          activeTrack = _props$player.activeTrack,
          realActiveTrack = _props$player.realActiveTrack,
          playbackRate = _props$player.playbackRate;

      var children = this.getChildren();

      return _react2.default.createElement(
        'div',
        {
          className: (0, _classnames2.default)('video-react-control-bar', {
            'video-react-control-bar-auto-hide': autoHide
          }, className)
        },
        (!isLive || hasDVR) && _react2.default.createElement(
          'div',
          { className: 'video-react-control-bar-progress-bar' },
          _react2.default.createElement(_ProgressControl2.default, (0, _extends3.default)({}, this.props, {
            key: 'progress-control',
            order: 1
          }))
        ),
        _react2.default.createElement(
          'div',
          { className: 'video-react-control-bar-buttons' },
          _react2.default.createElement(
            'div',
            { className: 'video-react-control-left' },
            _react2.default.createElement(_PlayToggle2.default, (0, _extends3.default)({}, this.props, {
              key: 'play-toggle',
              order: 2
            })),
            _react2.default.createElement(_VolumeMenuButton2.default, (0, _extends3.default)({}, this.props, {
              key: 'volume-menu-button',
              order: 3
            })),
            !isLive ? _react2.default.createElement(
              'div',
              { className: 'video-react-control-time-display' },
              _react2.default.createElement(_CurrentTimeDisplay2.default, (0, _extends3.default)({}, this.props, {
                key: 'current-time-display',
                order: 4
              })),
              _react2.default.createElement(_TimeDivider2.default, (0, _extends3.default)({}, this.props, {
                key: 'time-divider',
                order: 5
              })),
              _react2.default.createElement(_DurationDisplay2.default, (0, _extends3.default)({}, this.props, {
                key: 'duration-display',
                order: 6
              }))
            ) : _react2.default.createElement(_Live2.default, (0, _extends3.default)({}, this.props, {
              key: 'live-indicator',
              order: 7
            }))
          ),
          _react2.default.createElement(
            'div',
            { className: 'video-react-control-right' },
            children,
            _react2.default.createElement(_AudioOnly2.default, (0, _extends3.default)({}, this.props, {
              key: 'audio-only',
              order: 8
            })),
            _react2.default.createElement(_SettingMenu2.default, (0, _extends3.default)({}, this.props, {
              rates: [0.5, 0.75, 1, 1.25, 1.5],
              activeTrack: activeTrack,
              switchingTrack: switchingTrack,
              realActiveTrack: realActiveTrack,
              tracks: tracks,
              isLive: isLive,
              playbackRate: playbackRate,
              key: 'settings',
              order: 10
            })),
            _react2.default.createElement(_FullscreenToggle2.default, (0, _extends3.default)({}, this.props, {
              key: 'fullscreen-toggle',
              order: 11
            }))
          )
        )
      );
    }
  }]);
  return ControlBar;
}(_react.Component);

exports.default = ControlBar;


ControlBar.propTypes = propTypes;
ControlBar.defaultProps = defaultProps;
ControlBar.displayName = 'ControlBar';