@desynova-digital/player 4.0.0 → 4.0.2

package/components/Player.js

@@ -0,0 +1,706 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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 _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]),
+  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),
+  theme: _propTypes.PropTypes.string
+};
+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 = _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 {
+    return '100%';
+  }
+}, function (props) {
+  if (props.playerType === 'qc') {
+    return 'calc(36.33% - 70px)';
+  } else {
+    return '36.33%';
+  }
+});
+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)';
+}, 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 = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+var Player = exports["default"] = /*#__PURE__*/function (_Component) {
+  _inherits(Player, _Component);
+  function Player(props) {
+    var _this;
+    _classCallCheck(this, Player);
+    _this = _callSuper(this, Player, [props]);
+    _this.controlsHideTimer = null;
+    _this.meterHeight = 40;
+    _this.video = null; // the Video component
+    _this.manager = new _Manager["default"](props.store);
+    _this.actions = _this.manager.getActions();
+    _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",
+    value: function componentDidMount() {
+      this.handleResize();
+      window.addEventListener('resize', this.handleResize);
+      _fullscreen["default"].addEventListener(this.handleFullScreenChange);
+      /*
+       * const { player } = this.manager.getState();
+       * this.actions.toggleFullscreen(player);
+       */
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var playerType = this.props.playerType;
+      this.handleResize();
+      if (playerType !== prevProps.playerType) {
+        this.actions.handleZoomChange(0);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // Remove event listener
+      window.removeEventListener('resize', this.handleResize);
+      _fullscreen["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 [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
+        ref: function ref(c) {
+          _this2._playerHeader = c;
+        },
+        key: "video-header",
+        order: 1
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({
+        ref: function ref(c) {
+          _this2.video = c;
+          _this2.manager.video = _this2.video;
+        },
+        key: "video",
+        order: 2
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({
+        ref: function ref(c) {
+          _this2._progressControl = c;
+        }
+      }, this.props, {
+        key: "progress-control",
+        order: 3
+      })), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
+        ref: function ref(c) {
+          _this2._controlBar = c;
+        },
+        key: "control-bar",
+        order: 4
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props, {
+        frameRate: fullProps.frameRate
+      }))];
+    }
+  }, {
+    key: "getImageChildren",
+    value: function getImageChildren(props, fullProps) {
+      var _this3 = this;
+      return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
+        ref: function ref(c) {
+          _this3._playerHeader = c;
+        },
+        key: "video-header",
+        order: 1
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ImageViewer["default"], _extends({
+        ref: function ref(c) {
+          _this3.video = c;
+          _this3.manager.video = _this3.video;
+        },
+        key: "image",
+        order: 0.0
+      }, fullProps)),
+      /*#__PURE__*/
+      /*
+       * <ControlBar
+       *   ref={(c) => {
+       *     this._controlBar = c;
+       *   }}
+       *   key="control-bar"
+       *   order={2}
+       *   {...this.props}
+       * />,
+       */
+      _react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props))];
+    }
+  }, {
+    key: "getAdvancedChildren",
+    value: function getAdvancedChildren(props, fullProps) {
+      var _this4 = this;
+      return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
+        ref: function ref(c) {
+          _this4._playerHeader = c;
+        },
+        key: "video-header",
+        order: 1
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({
+        ref: function ref(c) {
+          _this4.video = c;
+          _this4.manager.video = _this4.video;
+        },
+        key: "video",
+        order: 0.0
+      }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
+        ref: function ref(c) {
+          _this4._controlBar = c;
+        },
+        key: "control-bar",
+        order: 2
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
+        key: "shortcut",
+        order: 99.0
+      }, props, {
+        frameRate: fullProps.frameRate
+      }))];
+    }
+  }, {
+    key: "getChildren",
+    value: function getChildren(props, position) {
+      if (position === 'left') {
+        var _propsWithoutChildren = _objectSpread(_objectSpread({}, 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 = _objectSpread(_objectSpread({}, 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: "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;
+    }
+
+    // play the video
+  }, {
+    key: "play",
+    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 _this$video;
+      (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
+    }
+
+    // Check if your browser can play different types of video:
+  }, {
+    key: "canPlayType",
+    value: function canPlayType() {
+      var _this$video2;
+      (_this$video2 = this.video).canPlayType.apply(_this$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 _this$manager$getStat = this.manager.getState(),
+        player = _this$manager$getStat.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 _this$props = this.props,
+        controlType = _this$props.controlType,
+        playerType = _this$props.playerType,
+        fileType = _this$props.fileType;
+      var height = 0;
+      _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(_fullscreen["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 _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
+      var props = _objectSpread(_objectSpread({}, 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 _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;
+        },
+        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);
+Player.contextTypes = {
+  store: _propTypes.PropTypes.instanceOf(Object)
+};
+Player.propTypes = propTypes;
+Player.defaultProps = defaultProps;
+Player.displayName = 'Player';