@desynova-digital/player 3.9.7 → 3.9.8

package/components/Player.js

@@ -1,77 +1,52 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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); } }
-
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactDom = require("react-dom");
+var _Manager = _interopRequireDefault(require("../Manager"));
+var _Video = _interopRequireDefault(require("./Video"));
+var _ImageViewer = _interopRequireDefault(require("./ImageViewer"));
+var _Shortcut = _interopRequireDefault(require("./Shortcut"));
+var _ControlBar = _interopRequireDefault(require("./control-bar/ControlBar"));
+var _ProgressControl = _interopRequireDefault(require("./progress-bar/ProgressControl"));
+var _PlayerHeader = _interopRequireDefault(require("./PlayerHeader"));
+var _Playlist = _interopRequireDefault(require("./Playlist"));
+var _AudioMeter = _interopRequireDefault(require("./AudioMeter"));
+var _utils = require("../utils");
+var _fullscreen = _interopRequireDefault(require("../utils/fullscreen"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
 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; }
-
+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, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var propTypes = {
   store: _propTypes.PropTypes.instanceOf(Object),
   width: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
@@ -132,7 +107,6 @@ var propTypes = {
   transcriptArr: _propTypes.PropTypes.instanceOf(Array),
   tagsMarker: _propTypes.PropTypes.instanceOf(Array)
 };
-
 var defaultProps = {
   fluid: true,
   muted: false,
@@ -180,16 +154,8 @@ var defaultProps = {
   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) {
+var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
+var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  .left-video-section {\n    width: ", ";\n    position: relative;\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n  .right-video-section {\n    width: ", ";\n    position: relative;\n  }\n"])), function (props) {
   if (props.hasRightSection) {
     return '63.67%';
   } else {
@@ -202,11 +168,7 @@ var PlayerContainer = _styledComponents2.default.div.withConfig({
     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) {
+var AudioMeterBlock = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border-radius: ", ";\n  display: ", ";\n  margin: ", ";\n  transition: all 0.1s ease-in-out;\n  -moz-transition: all 0.1s ease-in-out;\n  -webkit-transition: all 0.1s ease-in-out;\n  -ms-transition: all 0.1s ease-in-out;\n  -o-transition: all 0.1s ease-in-out;\n"])), function (props) {
   return !props.active ? '50px' : '55px';
 }, function (props) {
   return !props.active ? '50px !important' : 'calc(100% - 40px)';
@@ -225,43 +187,35 @@ var AudioMeterBlock = (0, _styledComponents2.default)('div').withConfig({
 }, 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) {
+var ControlContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+var Player = /*#__PURE__*/function (_Component) {
   _inherits(Player, _Component);
-
+  var _super = _createSuper(Player);
   function Player(props) {
+    var _this;
     _classCallCheck(this, Player);
-
-    var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this, props));
-
+    _this = _super.call(this, props);
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
     _this.video = null; // the Video component
-    _this.manager = new _Manager2.default(props.store);
+    _this.manager = new _Manager["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.manager.subscribeToPlayerStateChange(_this.handleStateChange.bind(_assertThisInitialized(_this)));
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.getChildren = _this.getChildren.bind(_assertThisInitialized(_this));
+    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
     _this.actions.handlePlayerType(props.playerType);
     _this.actions.handleControlType(props.controlType);
     return _this;
   }
-
   _createClass(Player, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       this.handleResize();
       window.addEventListener('resize', this.handleResize);
-
-      _fullscreen2.default.addEventListener(this.handleFullScreenChange);
+      _fullscreen["default"].addEventListener(this.handleFullScreenChange);
       /*
        * const { player } = this.manager.getState();
        * this.actions.toggleFullscreen(player);
@@ -290,38 +244,62 @@ var Player = function (_Component) {
     //     return false;
     //   }
     // }
-
   }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      if (_.isEqual(nextProps, this.props)) {
+    key: "shouldComponentUpdate",
+    value:
+    // 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;
+    //   }
+    // }
+
+    function shouldComponentUpdate(nextProps, nextState) {
+      if (_.isEqual(nextProps.markers, this.props.markers)) {
         return false;
       }
       return true;
     }
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.handleResize();
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       // Remove event listener
       window.removeEventListener('resize', this.handleResize);
-      _fullscreen2.default.removeEventListener(this.handleFullScreenChange);
+      _fullscreen["default"].removeEventListener(this.handleFullScreenChange);
       if (this.controlsHideTimer) {
         window.clearTimeout(this.controlsHideTimer);
       }
     }
   }, {
-    key: 'onTagsReset',
+    key: "onTagsReset",
     value: function onTagsReset() {
       this.actions.handleVideoPreview(false);
       this.actions.handleMarkerPointChange('delete');
     }
   }, {
-    key: 'onSegmentClick',
+    key: "onSegmentClick",
     value: function onSegmentClick(start_time, end_time, seek) {
       this.actions.handleMarkerUpdate(start_time, end_time);
       seek ? this.actions.pause() : this.actions.play();
@@ -330,57 +308,61 @@ var Player = function (_Component) {
       this.actions.handleVideoPreview(true);
     }
   }, {
-    key: 'getDefaultChildren',
+    key: "getDefaultChildren",
     value: function getDefaultChildren(props, fullProps) {
       var _this2 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
+      return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this2._playerHeader = c;
         },
-        key: 'video-header',
+        key: "video-header",
         order: 1
-      }, fullProps)), _react2.default.createElement(_Video2.default, _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({
         ref: function ref(c) {
           _this2.video = c;
           _this2.manager.video = _this2.video;
         },
-        key: 'video',
+        key: "video",
         order: 2
-      }, fullProps)), _react2.default.createElement(_ProgressControl2.default, _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({
         ref: function ref(c) {
           _this2._progressControl = c;
         }
       }, this.props, {
-        key: 'progress-control',
+        key: "progress-control",
         order: 3
-      })), _react2.default.createElement(_ControlBar2.default, _extends({
+      })), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
         ref: function ref(c) {
           _this2._controlBar = c;
         },
-        key: 'control-bar',
+        key: "control-bar",
         order: 4
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props, {
+        frameRate: fullProps.frameRate
+      }))];
     }
   }, {
-    key: 'getImageChildren',
+    key: "getImageChildren",
     value: function getImageChildren(props, fullProps) {
       var _this3 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
+      return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this3._playerHeader = c;
         },
-        key: 'video-header',
+        key: "video-header",
         order: 1
-      }, fullProps)), _react2.default.createElement(_ImageViewer2.default, _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ImageViewer["default"], _extends({
         ref: function ref(c) {
           _this3.video = c;
           _this3.manager.video = _this3.video;
         },
-        key: 'image',
+        key: "image",
         order: 0.0
       }, fullProps)),
+      /*#__PURE__*/
       /*
        * <ControlBar
        *   ref={(c) => {
@@ -391,39 +373,46 @@ var Player = function (_Component) {
        *   {...this.props}
        * />,
        */
-      _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props))];
+      _react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props))];
     }
   }, {
-    key: 'getAdvancedChildren',
+    key: "getAdvancedChildren",
     value: function getAdvancedChildren(props, fullProps) {
       var _this4 = this;
-
-      return [_react2.default.createElement(_PlayerHeader2.default, _extends({
+      return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this4._playerHeader = c;
         },
-        key: 'video-header',
+        key: "video-header",
         order: 1
-      }, fullProps)), _react2.default.createElement(_Video2.default, _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({
         ref: function ref(c) {
           _this4.video = c;
           _this4.manager.video = _this4.video;
         },
-        key: 'video',
+        key: "video",
         order: 0.0
-      }, fullProps)), _react2.default.createElement(_ControlBar2.default, _extends({
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
         ref: function ref(c) {
           _this4._controlBar = c;
         },
-        key: 'control-bar',
+        key: "control-bar",
         order: 2
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props, {
+        frameRate: fullProps.frameRate
+      }))];
     }
   }, {
-    key: 'getChildren',
+    key: "getChildren",
     value: function getChildren(props, position) {
       if (position === 'left') {
-        var _propsWithoutChildren = _extends({}, props, {
+        var _propsWithoutChildren = _objectSpread(_objectSpread({}, props), {}, {
           children: null
         });
         var _children = [];
@@ -437,7 +426,7 @@ var Player = function (_Component) {
         }
         return (0, _utils.mergeAndSortChildren)(_defaultChildren, _children, _propsWithoutChildren);
       }
-      var propsWithoutChildren = _extends({}, props, {
+      var propsWithoutChildren = _objectSpread(_objectSpread({}, props), {}, {
         children: null
       });
       var children = [];
@@ -448,108 +437,135 @@ var Player = function (_Component) {
      * get redux state
      * { player, operation }
      */
-
   }, {
-    key: 'getState',
+    key: "getState",
     value: function getState() {
       return this.manager.getState();
     }
 
     // get playback rate
+  }, {
+    key: "playbackRate",
+    get: function get() {
+      return this.video.playbackRate;
+    }
 
+    /*
+     * set playback rate
+     * speed of video
+     */,
+    set: function set(rate) {
+      this.video.playbackRate = rate;
+    }
   }, {
-    key: 'play',
+    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;
+    }
 
     // play the video
+  }, {
+    key: "play",
     value: function play() {
       this.video.play();
     }
 
     // pause the video
-
   }, {
-    key: 'pause',
+    key: "pause",
     value: function pause() {
       this.video.pause();
     }
 
     // Change the video source and re-load the video:
-
   }, {
-    key: 'load',
+    key: "load",
     value: function load() {
       this.video.load();
     }
 
     // Add a new text track to the video
-
   }, {
-    key: 'addTextTrack',
+    key: "addTextTrack",
     value: function addTextTrack() {
-      var _video;
-
-      (_video = this.video).addTextTrack.apply(_video, arguments);
+      var _this$video;
+      (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
     }
 
     // Check if your browser can play different types of video:
-
   }, {
-    key: 'canPlayType',
+    key: "canPlayType",
     value: function canPlayType() {
-      var _video2;
-
-      (_video2 = this.video).canPlayType.apply(_video2, arguments);
+      var _this$video2;
+      (_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
     }
 
     // seek video by time
-
   }, {
-    key: 'seek',
+    key: "seek",
     value: function seek(time) {
       this.video.seek(time);
     }
 
     // jump forward x seconds
-
   }, {
-    key: 'forward',
+    key: "forward",
     value: function forward(seconds) {
       this.video.forward(seconds);
     }
 
     // jump back x seconds
-
   }, {
-    key: 'replay',
+    key: "replay",
     value: function replay(seconds) {
       this.video.replay(seconds);
     }
 
     // enter or exist full screen
-
   }, {
-    key: 'toggleFullscreen',
+    key: "toggleFullscreen",
     value: function toggleFullscreen() {
       this.video.toggleFullscreen();
     }
 
     // subscribe to player state change
-
   }, {
-    key: 'subscribeToStateChange',
+    key: "subscribeToStateChange",
     value: function subscribeToStateChange(listener) {
       return this.manager.subscribeToPlayerStateChange(listener);
     }
 
     // player resize
-
   }, {
-    key: 'handleResize',
+    key: "handleResize",
     value: function handleResize() {
-      var _manager$getState = this.manager.getState(),
-          player = _manager$getState.player;
-
+      var _this$manager$getStat = this.manager.getState(),
+        player = _this$manager$getStat.player;
       var leftSectionRef = this._leftSectionRef;
       var rightSectionRef = this._rightSectionRef;
       var audioMeterBlock = this._audioMeterBlock;
@@ -559,13 +575,12 @@ var Player = function (_Component) {
       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 _this$props = this.props,
+        controlType = _this$props.controlType,
+        playerType = _this$props.playerType,
+        fileType = _this$props.fileType;
       var height = 0;
-      [].concat(_toConsumableArray(leftSectionRef.children)).forEach(function (child) {
+      _toConsumableArray(leftSectionRef.children).forEach(function (child) {
         return height += child.offsetHeight;
       });
       if (rightSectionRef) {
@@ -640,12 +655,12 @@ var Player = function (_Component) {
       // this.video.handleResize();  
     }
   }, {
-    key: 'handleFullScreenChange',
+    key: "handleFullScreenChange",
     value: function handleFullScreenChange() {
-      this.actions.handleFullscreenChange(_fullscreen2.default.isFullscreen);
+      this.actions.handleFullscreenChange(_fullscreen["default"].isFullscreen);
     }
   }, {
-    key: 'handleStateChange',
+    key: "handleStateChange",
     value: function handleStateChange(state, prevState) {
       if (state.isFullscreen !== prevState.isFullscreen) {
         this.handleResize();
@@ -653,24 +668,24 @@ var Player = function (_Component) {
       this.forceUpdate(); // re-render
     }
   }, {
-    key: 'handleFocus',
+    key: "handleFocus",
     value: function handleFocus() {
       this.actions.activate(true);
     }
   }, {
-    key: 'handleBlur',
+    key: "handleBlur",
     value: function handleBlur() {
       this.actions.activate(false);
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this5 = this;
+      var _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
+      // console.log("justttttttttttt");
 
-      var _manager$getState2 = this.manager.getState(),
-          player = _manager$getState2.player;
-
-      var props = _extends({}, this.props, {
+      var props = _objectSpread(_objectSpread({}, this.props), {}, {
         player: player,
         actions: this.actions,
         manager: this.manager,
@@ -678,144 +693,69 @@ var Player = function (_Component) {
         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'
+      var _this$props2 = this.props,
+        rightSection = _this$props2.rightSection,
+        playerType = _this$props2.playerType;
+      return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
+        ref: function ref(c) {
+          _this5.manager.rootElement = c;
         },
-        _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;
+        role: "region",
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
+        ref: function ref(playerContainer) {
+          _this5._playerContainer = playerContainer;
+        }
+      }, props, {
+        hasRightSection: !!rightSection
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "left-video-section",
+        ref: function ref(leftSectionRef) {
+          _this5._leftSectionRef = leftSectionRef;
+        }
+      }, childrensLeft), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "audio-meter-block ".concat(playerType),
+        ref: function ref(audioMeterBlock) {
+          _this5._audioMeterBlock = audioMeterBlock;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(AudioMeterBlock, {
+        onClick: function onClick() {
+          _this5.meterBlockClick();
+        },
+        role: "presentation",
+        active: true
+      }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
+        player: props.player,
+        height: this.meterHeight
+      }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "right-video-section",
+        ref: function ref(rightSectionRef) {
+          _this5._rightSectionRef = rightSectionRef;
+        }
+      }, rightSection) : null), props.controlType === 'advanced' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
+        ref: function ref(advancedControl) {
+          _this5._advancedControl = advancedControl;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({}, props, {
+        key: "progress-control",
+        order: 1
+      }))) : /*#__PURE__*/_react["default"].createElement(_Playlist["default"], _extends({
+        ref: function ref(c) {
+          _this5._playlist = c;
+        },
+        key: "playlist",
+        order: 5
+      }, this.props)));
     }
   }]);
-
   return Player;
 }(_react.Component);
-
-exports.default = Player;
-
-
-Player.contextTypes = { store: _propTypes.PropTypes.instanceOf(Object) };
+exports["default"] = Player;
+Player.contextTypes = {
+  store: _propTypes.PropTypes.instanceOf(Object)
+};
 Player.propTypes = propTypes;
 Player.defaultProps = defaultProps;
 Player.displayName = 'Player';