@desynova-digital/player 3.9.6 → 4.0.0

package/components/Player.js

@@ -1,821 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _reactDom = require('react-dom');
-
-var _Manager = require('../Manager');
-
-var _Manager2 = _interopRequireDefault(_Manager);
-
-var _Video = require('./Video');
-
-var _Video2 = _interopRequireDefault(_Video);
-
-var _ImageViewer = require('./ImageViewer');
-
-var _ImageViewer2 = _interopRequireDefault(_ImageViewer);
-
-var _Shortcut = require('./Shortcut');
-
-var _Shortcut2 = _interopRequireDefault(_Shortcut);
-
-var _ControlBar = require('./control-bar/ControlBar');
-
-var _ControlBar2 = _interopRequireDefault(_ControlBar);
-
-var _ProgressControl = require('./progress-bar/ProgressControl');
-
-var _ProgressControl2 = _interopRequireDefault(_ProgressControl);
-
-var _PlayerHeader = require('./PlayerHeader');
-
-var _PlayerHeader2 = _interopRequireDefault(_PlayerHeader);
-
-var _Playlist = require('./Playlist');
-
-var _Playlist2 = _interopRequireDefault(_Playlist);
-
-var _AudioMeter = require('./AudioMeter');
-
-var _AudioMeter2 = _interopRequireDefault(_AudioMeter);
-
-var _utils = require('../utils');
-
-var _fullscreen = require('../utils/fullscreen');
-
-var _fullscreen2 = _interopRequireDefault(_fullscreen);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var propTypes = {
-  store: _propTypes.PropTypes.instanceOf(Object),
-  width: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
-  height: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
-  frameRate: _propTypes.PropTypes.number,
-  initialTime: _propTypes.PropTypes.number,
-  audioSrc: _propTypes.PropTypes.string,
-  fluid: _propTypes.PropTypes.bool,
-  muted: _propTypes.PropTypes.bool,
-  playsInline: _propTypes.PropTypes.bool,
-  aspectRatio: _propTypes.PropTypes.string,
-  videoId: _propTypes.PropTypes.string,
-  startTime: _propTypes.PropTypes.number,
-  loop: _propTypes.PropTypes.bool,
-  autoPlay: _propTypes.PropTypes.bool,
-  src: _propTypes.PropTypes.string,
-  poster: _propTypes.PropTypes.string,
-  preload: _propTypes.PropTypes.oneOf(['auto', 'metadata', 'none']),
-  videoDetails: _propTypes.PropTypes.instanceOf(Object),
-  rightSection: _propTypes.PropTypes.node,
-  onPlayerClose: _propTypes.PropTypes.func,
-  onCommentsAdd: _propTypes.PropTypes.func,
-  onLoadStart: _propTypes.PropTypes.func,
-  onWaiting: _propTypes.PropTypes.func,
-  onCanPlay: _propTypes.PropTypes.func,
-  onCanPlayThrough: _propTypes.PropTypes.func,
-  onPlaying: _propTypes.PropTypes.func,
-  onEnded: _propTypes.PropTypes.func,
-  onSeeking: _propTypes.PropTypes.func,
-  onSeeked: _propTypes.PropTypes.func,
-  onPlay: _propTypes.PropTypes.func,
-  onPause: _propTypes.PropTypes.func,
-  onProgress: _propTypes.PropTypes.func,
-  onDurationChange: _propTypes.PropTypes.func,
-  onError: _propTypes.PropTypes.func,
-  onSuspend: _propTypes.PropTypes.func,
-  onAbort: _propTypes.PropTypes.func,
-  onEmptied: _propTypes.PropTypes.func,
-  onStalled: _propTypes.PropTypes.func,
-  onLoadedMetadata: _propTypes.PropTypes.func,
-  onLoadedData: _propTypes.PropTypes.func,
-  onTimeUpdate: _propTypes.PropTypes.func,
-  onRateChange: _propTypes.PropTypes.func,
-  onVolumeChange: _propTypes.PropTypes.func,
-  onAddMarker: _propTypes.PropTypes.func,
-  onMarkerSelect: _propTypes.PropTypes.func,
-  onTagClick: _propTypes.PropTypes.func,
-  onDeleteMarker: _propTypes.PropTypes.func,
-  onEditAction: _propTypes.PropTypes.func,
-  onPlayerChange: _propTypes.PropTypes.func,
-  fileType: _propTypes.PropTypes.oneOf(['video', 'image', 'audio']),
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
-  assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
-  controlType: _propTypes.PropTypes.oneOf(['default', 'advanced']),
-  markers: _propTypes.PropTypes.instanceOf(Array),
-  playlist: _propTypes.PropTypes.instanceOf(Array),
-  playlistClick: _propTypes.PropTypes.func,
-  transcriptArr: _propTypes.PropTypes.instanceOf(Array),
-  tagsMarker: _propTypes.PropTypes.instanceOf(Array)
-};
-
-var defaultProps = {
-  fluid: true,
-  muted: false,
-  playsInline: false,
-  aspectRatio: 'auto',
-  playerType: 'default',
-  controlType: 'default',
-  width: null,
-  height: null,
-  frameRate: 25,
-  initialTime: 35990,
-  audioSrc: '',
-  videoId: '',
-  startTime: 0,
-  loop: false,
-  autoPlay: false,
-  src: '',
-  poster: '',
-  preload: 'auto',
-  videoDetails: {
-    title: 'Opposition making fuss about Rupee weakening'
-  },
-  assetType: 'fc',
-  onPlayerClose: null,
-  onLoadStart: null,
-  onWaiting: null,
-  onCanPlay: null,
-  onCanPlayThrough: null,
-  onPlaying: null,
-  onEnded: null,
-  onSeeking: null,
-  onSeeked: null,
-  onPlay: null,
-  onPause: null,
-  onProgress: null,
-  onDurationChange: null,
-  onError: null,
-  onSuspend: null,
-  onAbort: null,
-  onEmptied: null,
-  onStalled: null,
-  onLoadedMetadata: null,
-  onLoadedData: null,
-  onTimeUpdate: null,
-  onRateChange: null,
-  onVolumeChange: null
-};
-
-var PlayerBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'Player__PlayerBlock',
-  componentId: 'sc-1xon7ai-0'
-})(['height:100%;']);
-
-var PlayerContainer = _styledComponents2.default.div.withConfig({
-  displayName: 'Player__PlayerContainer',
-  componentId: 'sc-1xon7ai-1'
-})(['display:flex;justify-content:flex-start;background:#000000;.left-video-section{width:', ';position:relative;}.audio-meter-block{position:relative;width:0px;display:none;&.qc{width:70px;display:block;}}.right-video-section{width:', ';position:relative;}'], function (props) {
-  if (props.hasRightSection) {
-    return '63.67%';
-  } else {
-    return '100%';
-  }
-}, function (props) {
-  if (props.playerType === 'qc') {
-    return 'calc(36.33% - 70px)';
-  } else {
-    return '36.33%';
-  }
-});
-
-var AudioMeterBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'Player__AudioMeterBlock',
-  componentId: 'sc-1xon7ai-2'
-})(['width:', ';height:', ';position:absolute;bottom:', ';left:', ';padding:', ';box-sizing:border-box;background:', ';border-radius:', ';display:', ';margin:', ';transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;'], function (props) {
-  return !props.active ? '50px' : '55px';
-}, function (props) {
-  return !props.active ? '50px !important' : 'calc(100% - 40px)';
-}, function (props) {
-  return !props.active ? '5px' : '0px';
-}, function (props) {
-  return !props.active ? '5px' : '0px';
-}, function (props) {
-  return !props.active ? '5px' : '0px';
-}, function (props) {
-  return !props.active ? 'rgba(243, 243, 243, 0.5)' : 'rgba(0, 0, 0, 1)';
-}, function (props) {
-  return !props.active ? '5px' : '0px';
-}, function (props) {
-  return !props.active ? 'block' : 'inline-block';
-}, function (props) {
-  return !props.active ? '0' : '20px 0';
-});
-
-var ControlContainer = _styledComponents2.default.div.withConfig({
-  displayName: 'Player__ControlContainer',
-  componentId: 'sc-1xon7ai-3'
-})(['']);
-
-var Player = function (_Component) {
-  _inherits(Player, _Component);
-
-  function Player(props) {
-    _classCallCheck(this, Player);
-
-    var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this, props));
-
-    _this.controlsHideTimer = null;
-    _this.meterHeight = 40;
-    _this.video = null; // the Video component
-    _this.manager = new _Manager2.default(props.store);
-    _this.actions = _this.manager.getActions();
-    _this.manager.subscribeToPlayerStateChange(_this.handleStateChange.bind(_this));
-    _this.handleResize = _this.handleResize.bind(_this);
-    _this.getChildren = _this.getChildren.bind(_this);
-    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_this);
-    _this.handleFocus = _this.handleFocus.bind(_this);
-    _this.handleBlur = _this.handleBlur.bind(_this);
-    _this.actions.handlePlayerType(props.playerType);
-    _this.actions.handleControlType(props.controlType);
-    return _this;
-  }
-
-  _createClass(Player, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.handleResize();
-      window.addEventListener('resize', this.handleResize);
-
-      _fullscreen2.default.addEventListener(this.handleFullScreenChange);
-      /*
-       * const { player } = this.manager.getState();
-       * this.actions.toggleFullscreen(player);
-       */
-    }
-
-    // shouldComponentUpdate(nextProps) {
-    //   // Rendering the component only if passed props value is changed
-
-    //   const replacerFunc = () => {
-    //     const visited = new WeakSet();
-    //     return (key, value) => {
-    //       if (typeof value === 'object' && value !== null) {
-    //         if (visited.has(value)) {
-    //           return;
-    //         }
-    //         visited.add(value);
-    //       }
-    //       return value;
-    //     };
-    //   };
-
-    //   if ( JSON.stringify(nextProps, replacerFunc()) !== JSON.stringify(this.props, replacerFunc()) ) {
-    //     return true;
-    //   } else {
-    //     return false;
-    //   }
-    // }
-
-  }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      if (_.isEqual(nextProps.markers, this.props.markers)) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.handleResize();
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      // Remove event listener
-      window.removeEventListener('resize', this.handleResize);
-      _fullscreen2.default.removeEventListener(this.handleFullScreenChange);
-      if (this.controlsHideTimer) {
-        window.clearTimeout(this.controlsHideTimer);
-      }
-    }
-  }, {
-    key: 'onTagsReset',
-    value: function onTagsReset() {
-      this.actions.handleVideoPreview(false);
-      this.actions.handleMarkerPointChange('delete');
-    }
-  }, {
-    key: 'onSegmentClick',
-    value: function onSegmentClick(start_time, end_time, seek) {
-      this.actions.handleMarkerUpdate(start_time, end_time);
-      seek ? this.actions.pause() : this.actions.play();
-      this.actions.handleVideoRewind(false);
-      this.actions.seek(start_time);
-      this.actions.handleVideoPreview(true);
-    }
-  }, {
-    key: 'getDefaultChildren',
-    value: function getDefaultChildren(props, fullProps) {
-      var _this2 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
-        ref: function ref(c) {
-          _this2._playerHeader = c;
-        },
-        key: 'video-header',
-        order: 1
-      }, fullProps)), _react2.default.createElement(_Video2.default, _extends({
-        ref: function ref(c) {
-          _this2.video = c;
-          _this2.manager.video = _this2.video;
-        },
-        key: 'video',
-        order: 2
-      }, fullProps)), _react2.default.createElement(_ProgressControl2.default, _extends({
-        ref: function ref(c) {
-          _this2._progressControl = c;
-        }
-      }, this.props, {
-        key: 'progress-control',
-        order: 3
-      })), _react2.default.createElement(_ControlBar2.default, _extends({
-        ref: function ref(c) {
-          _this2._controlBar = c;
-        },
-        key: 'control-bar',
-        order: 4
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
-    }
-  }, {
-    key: 'getImageChildren',
-    value: function getImageChildren(props, fullProps) {
-      var _this3 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
-        ref: function ref(c) {
-          _this3._playerHeader = c;
-        },
-        key: 'video-header',
-        order: 1
-      }, fullProps)), _react2.default.createElement(_ImageViewer2.default, _extends({
-        ref: function ref(c) {
-          _this3.video = c;
-          _this3.manager.video = _this3.video;
-        },
-        key: 'image',
-        order: 0.0
-      }, fullProps)),
-      /*
-       * <ControlBar
-       *   ref={(c) => {
-       *     this._controlBar = c;
-       *   }}
-       *   key="control-bar"
-       *   order={2}
-       *   {...this.props}
-       * />,
-       */
-      _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props))];
-    }
-  }, {
-    key: 'getAdvancedChildren',
-    value: function getAdvancedChildren(props, fullProps) {
-      var _this4 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
-        ref: function ref(c) {
-          _this4._playerHeader = c;
-        },
-        key: 'video-header',
-        order: 1
-      }, fullProps)), _react2.default.createElement(_Video2.default, _extends({
-        ref: function ref(c) {
-          _this4.video = c;
-          _this4.manager.video = _this4.video;
-        },
-        key: 'video',
-        order: 0.0
-      }, fullProps)), _react2.default.createElement(_ControlBar2.default, _extends({
-        ref: function ref(c) {
-          _this4._controlBar = c;
-        },
-        key: 'control-bar',
-        order: 2
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
-    }
-  }, {
-    key: 'getChildren',
-    value: function getChildren(props, position) {
-      if (position === 'left') {
-        var _propsWithoutChildren = _extends({}, props, {
-          children: null
-        });
-        var _children = [];
-        var _defaultChildren = [];
-        switch (props.fileType) {
-          case 'image':
-            _defaultChildren = this.getImageChildren();
-            break;
-          default:
-            _defaultChildren = props.controlType === 'advanced' && !props.player.isFullscreen ? this.getAdvancedChildren(_propsWithoutChildren, props) : this.getDefaultChildren(_propsWithoutChildren, props);
-        }
-        return (0, _utils.mergeAndSortChildren)(_defaultChildren, _children, _propsWithoutChildren);
-      }
-      var propsWithoutChildren = _extends({}, props, {
-        children: null
-      });
-      var children = [];
-      var defaultChildren = props.controlType === 'advanced' ? this.getAdvancedChildren(propsWithoutChildren, props) : this.getDefaultChildren(propsWithoutChildren, props);
-      return (0, _utils.mergeAndSortChildren)(defaultChildren, children, propsWithoutChildren);
-    }
-    /*
-     * get redux state
-     * { player, operation }
-     */
-
-  }, {
-    key: 'getState',
-    value: function getState() {
-      return this.manager.getState();
-    }
-
-    // get playback rate
-
-  }, {
-    key: 'play',
-
-
-    // play the video
-    value: function play() {
-      this.video.play();
-    }
-
-    // pause the video
-
-  }, {
-    key: 'pause',
-    value: function pause() {
-      this.video.pause();
-    }
-
-    // Change the video source and re-load the video:
-
-  }, {
-    key: 'load',
-    value: function load() {
-      this.video.load();
-    }
-
-    // Add a new text track to the video
-
-  }, {
-    key: 'addTextTrack',
-    value: function addTextTrack() {
-      var _video;
-
-      (_video = this.video).addTextTrack.apply(_video, arguments);
-    }
-
-    // Check if your browser can play different types of video:
-
-  }, {
-    key: 'canPlayType',
-    value: function canPlayType() {
-      var _video2;
-
-      (_video2 = this.video).canPlayType.apply(_video2, arguments);
-    }
-
-    // seek video by time
-
-  }, {
-    key: 'seek',
-    value: function seek(time) {
-      this.video.seek(time);
-    }
-
-    // jump forward x seconds
-
-  }, {
-    key: 'forward',
-    value: function forward(seconds) {
-      this.video.forward(seconds);
-    }
-
-    // jump back x seconds
-
-  }, {
-    key: 'replay',
-    value: function replay(seconds) {
-      this.video.replay(seconds);
-    }
-
-    // enter or exist full screen
-
-  }, {
-    key: 'toggleFullscreen',
-    value: function toggleFullscreen() {
-      this.video.toggleFullscreen();
-    }
-
-    // subscribe to player state change
-
-  }, {
-    key: 'subscribeToStateChange',
-    value: function subscribeToStateChange(listener) {
-      return this.manager.subscribeToPlayerStateChange(listener);
-    }
-
-    // player resize
-
-  }, {
-    key: 'handleResize',
-    value: function handleResize() {
-      var _manager$getState = this.manager.getState(),
-          player = _manager$getState.player;
-
-      var leftSectionRef = this._leftSectionRef;
-      var rightSectionRef = this._rightSectionRef;
-      var audioMeterBlock = this._audioMeterBlock;
-      var playerHeader = (0, _reactDom.findDOMNode)(this._playerHeader);
-      var video = (0, _reactDom.findDOMNode)(this.video);
-      var progressControl = (0, _reactDom.findDOMNode)(this._progressControl);
-      var controlBar = (0, _reactDom.findDOMNode)(this._controlBar);
-      var playlist = (0, _reactDom.findDOMNode)(this._playlist);
-      var playerContainer = (0, _reactDom.findDOMNode)(this._playerContainer);
-      var _props = this.props,
-          controlType = _props.controlType,
-          playerType = _props.playerType,
-          fileType = _props.fileType;
-
-      var height = 0;
-      [].concat(_toConsumableArray(leftSectionRef.children)).forEach(function (child) {
-        return height += child.offsetHeight;
-      });
-      if (rightSectionRef) {
-        rightSectionRef.style.height = height + 'px';
-      }
-      if (audioMeterBlock) {
-        audioMeterBlock.style.height = video.offsetHeight + 'px';
-        audioMeterBlock.style.top = playerHeader.offsetHeight + 'px';
-        this.meterHeight = video.offsetHeight;
-      }
-      if (playlist) {
-        if (fileType === 'image') {
-          playlist.style.height = 'calc(100% - ' + (playerHeader.offsetHeight + video.offsetHeight) + 'px)';
-        } else {
-          playlist.style.height = 'calc(100% - ' + (playerHeader.offsetHeight + video.offsetHeight + progressControl.offsetHeight + controlBar.offsetHeight) + 'px)';
-        }
-      }
-      var videoHeight = window.innerHeight;
-      var videoWidth = window.innerWidth;
-      if (playerType === 'panel') {
-        videoHeight = window.innerHeight;
-        videoWidth = videoHeight * (16 / 9);
-        if (videoWidth > window.innerWidth) {
-          videoWidth = window.innerWidth;
-          videoHeight = videoWidth * (9 / 16);
-        }
-        video.style.paddingTop = '0';
-        video.style.width = videoWidth + 'px';
-        video.style.height = videoHeight + 'px';
-        video.style.margin = '0 auto';
-        video.classList.add('ratio-border');
-      } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
-        var playlistMinHeight = 150;
-        if (controlType === 'default') {
-          if (fileType === 'image') {
-            videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight;
-          } else {
-            videoHeight = window.innerHeight - playlistMinHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
-          }
-        } else {
-          videoHeight = window.innerHeight - playerHeader.offsetHeight - controlBar.offsetHeight - this._advancedControl.offsetHeight - 30;
-        }
-        videoWidth = videoHeight * (16 / 9);
-        if (videoWidth > leftSectionRef.offsetWidth) {
-          videoWidth = leftSectionRef.offsetWidth;
-          videoHeight = videoWidth * (9 / 16);
-        }
-        video.style.paddingTop = '0';
-        video.style.width = videoWidth + 'px';
-        video.style.height = videoHeight + 'px';
-        video.style.margin = '0 auto';
-        video.classList.add('ratio-border');
-      } else if (window.innerHeight >= 900) {
-        video.style.paddingTop = '56.25%';
-        video.style.width = 'auto';
-        video.style.height = 'auto';
-        video.classList.remove('ratio-border');
-      }
-      if (player.isFullscreen && progressControl) {
-        videoHeight = window.innerHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
-        videoWidth = videoHeight * (16 / 9);
-        if (videoWidth > window.innerWidth) {
-          videoWidth = window.innerWidth;
-          videoHeight = videoWidth * (9 / 16);
-        }
-        video.style.paddingTop = '0';
-        video.style.width = videoWidth + 'px';
-        video.style.height = videoHeight + 'px';
-        video.style.margin = '0 auto';
-        video.classList.add('ratio-border');
-      }
-      // this.video.handleResize();  
-    }
-  }, {
-    key: 'handleFullScreenChange',
-    value: function handleFullScreenChange() {
-      this.actions.handleFullscreenChange(_fullscreen2.default.isFullscreen);
-    }
-  }, {
-    key: 'handleStateChange',
-    value: function handleStateChange(state, prevState) {
-      if (state.isFullscreen !== prevState.isFullscreen) {
-        this.handleResize();
-      }
-      this.forceUpdate(); // re-render
-    }
-  }, {
-    key: 'handleFocus',
-    value: function handleFocus() {
-      this.actions.activate(true);
-    }
-  }, {
-    key: 'handleBlur',
-    value: function handleBlur() {
-      this.actions.activate(false);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this5 = this;
-
-      var _manager$getState2 = this.manager.getState(),
-          player = _manager$getState2.player;
-
-      var props = _extends({}, this.props, {
-        player: player,
-        actions: this.actions,
-        manager: this.manager,
-        store: this.manager.store,
-        video: this.video ? this.video.video : null
-      });
-      var childrensLeft = this.getChildren(props, 'left');
-      var _props2 = this.props,
-          rightSection = _props2.rightSection,
-          playerType = _props2.playerType;
-
-
-      return _react2.default.createElement(
-        PlayerBlock,
-        {
-          ref: function ref(c) {
-            _this5.manager.rootElement = c;
-          },
-          role: 'region',
-          onFocus: this.handleFocus,
-          onBlur: this.handleBlur,
-          tabIndex: '-1'
-        },
-        _react2.default.createElement(
-          PlayerContainer,
-          _extends({
-            ref: function ref(playerContainer) {
-              _this5._playerContainer = playerContainer;
-            }
-          }, props, {
-            hasRightSection: !!rightSection
-          }),
-          _react2.default.createElement(
-            'div',
-            {
-              className: 'left-video-section',
-              ref: function ref(leftSectionRef) {
-                _this5._leftSectionRef = leftSectionRef;
-              }
-            },
-            childrensLeft
-          ),
-          _react2.default.createElement(
-            'div',
-            {
-              className: 'audio-meter-block ' + playerType,
-              ref: function ref(audioMeterBlock) {
-                _this5._audioMeterBlock = audioMeterBlock;
-              }
-            },
-            _react2.default.createElement(
-              AudioMeterBlock,
-              {
-                onClick: function onClick() {
-                  _this5.meterBlockClick();
-                },
-                role: 'presentation',
-                active: true
-              },
-              _react2.default.createElement(_AudioMeter2.default, { player: props.player, height: this.meterHeight })
-            )
-          ),
-          rightSection ? _react2.default.createElement(
-            'div',
-            {
-              className: 'right-video-section',
-              ref: function ref(rightSectionRef) {
-                _this5._rightSectionRef = rightSectionRef;
-              }
-            },
-            rightSection
-          ) : null
-        ),
-        props.controlType === 'advanced' ? _react2.default.createElement(
-          ControlContainer,
-          {
-            ref: function ref(advancedControl) {
-              _this5._advancedControl = advancedControl;
-            }
-          },
-          _react2.default.createElement(_ProgressControl2.default, _extends({}, props, { key: 'progress-control', order: 1 }))
-        ) : _react2.default.createElement(_Playlist2.default, _extends({
-          ref: function ref(c) {
-            _this5._playlist = c;
-          },
-          key: 'playlist',
-          order: 5
-        }, this.props))
-      );
-    }
-  }, {
-    key: 'playbackRate',
-    get: function get() {
-      return this.video.playbackRate;
-    }
-
-    /*
-     * set playback rate
-     * speed of video
-     */
-    ,
-    set: function set(rate) {
-      this.video.playbackRate = rate;
-    }
-  }, {
-    key: 'muted',
-    get: function get() {
-      return this.video.muted;
-    },
-    set: function set(val) {
-      this.video.muted = val;
-    }
-  }, {
-    key: 'volume',
-    get: function get() {
-      return this.video.volume;
-    },
-    set: function set(val) {
-      this.video.volume = val;
-    }
-
-    // video width
-
-  }, {
-    key: 'videoWidth',
-    get: function get() {
-      return this.video.videoWidth;
-    }
-
-    // video height
-
-  }, {
-    key: 'videoHeight',
-    get: function get() {
-      return this.video.videoHeight;
-    }
-  }]);
-
-  return Player;
-}(_react.Component);
-
-exports.default = Player;
-
-
-Player.contextTypes = { store: _propTypes.PropTypes.instanceOf(Object) };
-Player.propTypes = propTypes;
-Player.defaultProps = defaultProps;
-Player.displayName = 'Player';