@desynova-digital/player 3.9.7 → 4.0.1

package/Player.js

@@ -0,0 +1,945 @@
+"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
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Header = _interopRequireDefault(require("./header/Header"));
+var _Video = _interopRequireDefault(require("./media/Video"));
+var _ControlBar = _interopRequireDefault(require("./control/ControlBar"));
+var _utils = require("./utils");
+var _ProgressControl = _interopRequireDefault(require("./control/ProgressControl"));
+var _playlist = _interopRequireDefault(require("./playlist"));
+var _Shortcut = _interopRequireDefault(require("./shortcuts/Shortcut"));
+var _AudioMeter = _interopRequireDefault(require("./media/AudioMeter"));
+var _templateObject, _templateObject2, _templateObject3;
+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 _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 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 _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 _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 _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 _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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  frameRate: _propTypes.PropTypes.number,
+  initialTime: _propTypes.PropTypes.number,
+  audioSrc: _propTypes.PropTypes.string,
+  autoPlay: _propTypes.PropTypes.bool,
+  src: _propTypes.PropTypes.string,
+  poster: _propTypes.PropTypes.string,
+  videoDetails: _propTypes.PropTypes.instanceOf(Object),
+  onPlayerClose: _propTypes.PropTypes.func,
+  onCommentsAdd: _propTypes.PropTypes.func,
+  fileType: _propTypes.PropTypes.oneOf(['video', 'image', 'audio']),
+  assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
+  markers: _propTypes.PropTypes.instanceOf(Array),
+  playlist: _propTypes.PropTypes.instanceOf(Array),
+  playlistClick: _propTypes.PropTypes.func,
+  rightSection: _propTypes.PropTypes.node
+};
+var defaultProps = {
+  frameRate: 25,
+  initialTime: 0,
+  fileType: '',
+  audioSrc: '',
+  autoPlay: false,
+  src: '',
+  poster: '',
+  videoDetails: {
+    title: ''
+  },
+  assetType: 'fc'
+};
+var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  background: #121212;\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    height: fit-content;\n    .comments-playlist-block {\n      background: #121212;\n      height: 18rem;\n      padding: ", ";\n      border-top: 0.3rem solid #122a4a;\n      box-sizing: border-box;\n    }\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%';
+  }
+  return '100%';
+}, function (props) {
+  return props.playlistVisible ? '0 2rem' : '2rem 2rem 3.5rem 2rem';
+}, 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 Player = /*#__PURE__*/function (_Component) {
+  _inherits(Player, _Component);
+  var _super = _createSuper(Player);
+  function Player(props) {
+    var _this;
+    _classCallCheck(this, Player);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      var self = _assertThisInitialized(_this);
+      var isFullscreen = _this.state.isFullscreen;
+      _this.handleResize();
+      window.addEventListener('resize', _this.handleResize);
+      document.addEventListener('webkitfullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.addEventListener('mozfullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.addEventListener('fullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.addEventListener('MSFullscreenChange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+    });
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
+      _this.handleResize();
+    });
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      var self = _assertThisInitialized(_this);
+      var isFullscreen = _this.state.isFullscreen;
+      // Remove event listener
+      window.removeEventListener('resize', _this.handleResize);
+      document.removeEventListener('webkitfullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.removeEventListener('mozfullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.removeEventListener('fullscreenchange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+      document.removeEventListener('MSFullscreenChange', function (e) {
+        self.setState(function (state) {
+          return {
+            isFullscreen: !state.isFullscreen
+          };
+        }, function () {
+          self.handleResize();
+        });
+      }, false);
+    });
+    // player resize
+    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
+      var isFullscreen = _this.state.isFullscreen;
+      var leftSectionHeight = 0;
+      var rightSectionRef = document.getElementById('right-section');
+      _toConsumableArray(_this.leftSectionRef.children).forEach(function (child) {
+        leftSectionHeight += child.offsetHeight;
+      });
+      if (rightSectionRef) {
+        rightSectionRef.style.height = leftSectionHeight + 'px';
+      }
+      var assetMedia = document.getElementById('media-container');
+      var audioMeterContainer = document.getElementById('audio-meter-block');
+      var controlsContainer = document.getElementById('controls-container');
+      var headerContainer = document.getElementById('header-container');
+      var playlistContainer = document.getElementById('comments-playlist');
+      var mediaBlock = document.getElementById('media-controls-block');
+      if (audioMeterContainer && headerContainer) {
+        audioMeterContainer.style.height = _this.mediaRef.video.offsetHeight + 'px';
+        audioMeterContainer.style.top = headerContainer.offsetHeight + 'px';
+        _this.meterHeight = _this.mediaRef.video.offsetHeight;
+      }
+      if (leftSectionHeight >= window.innerHeight - 15) {
+        if (!isFullscreen) {
+          var videoHeight = window.innerHeight - (controlsContainer === null || controlsContainer === void 0 ? void 0 : controlsContainer.offsetHeight) - (headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.offsetHeight) - ((playlistContainer === null || playlistContainer === void 0 ? void 0 : playlistContainer.offsetHeight) || 0) - 10;
+          var videoWidth = videoHeight * (16 / 9);
+          assetMedia.style.paddingTop = '0';
+          assetMedia.style.width = videoWidth + 'px';
+          assetMedia.style.height = videoHeight + 'px';
+          assetMedia.style.margin = '0 auto';
+          assetMedia.classList.add('ratio-border');
+        } else {
+          assetMedia.style.paddingTop = '0';
+          assetMedia.style.width = '100%';
+          assetMedia.style.height = "calc(100% - ".concat(controlsContainer.offsetHeight, "px)");
+          assetMedia.style.margin = '0 auto';
+          assetMedia.classList.add('ratio-border');
+        }
+      } else if (leftSectionHeight + playlistContainer.offsetHeight > window.innerHeight) {
+        console.log('playlist case');
+        var height = window.innerHeight - headerContainer.offsetHeight - controlsContainer.offsetHeight - playlistContainer.offsetHeight - 40;
+        mediaBlock.style.height = height + 'px';
+        mediaBlock.style.width = height * (16 / 9) + 'px';
+        mediaBlock.style.margin = '0 auto';
+      } else {
+        assetMedia.style.paddingTop = '56.25%';
+        assetMedia.style.width = 'auto';
+        assetMedia.style.height = 'auto';
+        assetMedia.classList.add('ratio-border');
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleFullscreen", function () {
+      var isFullscreen = _this.state.isFullscreen;
+      var playerBlock = document.getElementById('media-controls-block');
+      if (!isFullscreen) {
+        if (playerBlock.requestFullscreen) {
+          playerBlock.requestFullscreen()["catch"](function (err) {
+            console.log('err fullscreen', err);
+          });
+        } else if (document.documentElement.msRequestFullscreen) {
+          playerBlock.msRequestFullscreen()["catch"](function (err) {
+            console.log('err fullscreen', err);
+          });
+        } else if (playerBlock.mozRequestFullScreen) {
+          playerBlock.mozRequestFullScreen()["catch"](function (err) {
+            console.log('err fullscreen', err);
+          }); // Firefox
+        } else if (playerBlock.webkitRequestFullscreen) {
+          playerBlock.webkitRequestFullscreen()["catch"](function (err) {
+            console.log('err fullscreen', err);
+          }); // Chrome and Safari
+        }
+      } else if (playerBlock.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "actionClick", function (data) {
+      var _this$props = _this.props,
+        frameRate = _this$props.frameRate,
+        initialTime = _this$props.initialTime,
+        onCommentsAdd = _this$props.onCommentsAdd,
+        playlistClick = _this$props.playlistClick;
+      var _this$state = _this.state,
+        media = _this$state.media,
+        muted = _this$state.muted;
+      var playerState = _objectSpread({}, _this.state);
+      var actions = {
+        play: function play() {
+          _this.mediaRef.play();
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            hasStarted: true,
+            paused: false
+          });
+        },
+        pause: function pause() {
+          _this.mediaRef.pause();
+          // this.mediaRef.playbackRate = 1;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            // playbackRate: 1,
+            videoRewind: false,
+            paused: true
+          });
+        },
+        handle_video_preview: function handle_video_preview() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            previewActive: data.value
+          });
+        },
+        handle_sd_border_change: function handle_sd_border_change() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            SDBorderActive: data.value
+          });
+        },
+        handle_audio_tracks: function handle_audio_tracks() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            audioTracksArr: data.value
+          });
+        },
+        handle_audio_track_change: function handle_audio_track_change() {
+          _this.mediaRef.hls.audioTrack = data.value.id;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            activeAudio: data.value
+          });
+        },
+        playback_rate_change: function playback_rate_change() {
+          _this.mediaRef.video.playbackRate = data.value;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            playbackRate: data.value
+          });
+        },
+        set_media: function set_media() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            media: data.value
+          });
+        },
+        handle_pause: function handle_pause() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            mediaPlaying: false
+          });
+        },
+        handle_ended: function handle_ended() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            mediaPlaying: false
+          });
+        },
+        handle_play: function handle_play() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            mediaPlaying: true,
+            annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+              value: 'new',
+              active: false,
+              type: 'brush',
+              undo: false,
+              redo: false
+            }),
+            annotations: []
+          });
+        },
+        handle_loaded_meta_data: function handle_loaded_meta_data() {
+          var frameRate = _this.props.frameRate;
+          var seconds = data.value;
+          var timecode = (0, _utils.secondsToTime)(seconds, frameRate);
+          var frame = frameRate; // converter.secondsToFrames(seconds, frameRate);
+          // const standard = converter.secondsToTime(seconds);
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            duration: {
+              timecode: timecode,
+              frame: frame,
+              // standard,
+              seconds: seconds
+            },
+            isActive: true
+          });
+        },
+        handle_time_update: function handle_time_update() {
+          var _this$state2 = _this.state,
+            duration = _this$state2.duration,
+            currentTime = _this$state2.currentTime;
+          var seconds;
+          if (data.value > duration.seconds) {
+            seconds = duration.seconds;
+          } else seconds = data.value;
+          var timecode = (0, _utils.secondsToTime)(seconds, frameRate, initialTime);
+          var frame = currentTime.frame; // converter.secondsToFrames(seconds, frameRate);
+          // const standard = converter.secondsToTime(seconds);
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            currentTime: {
+              timecode: timecode,
+              frame: frame,
+              // standard,
+              seconds: seconds
+            }
+          });
+        },
+        seek: function seek() {
+          var _this$state3 = _this.state,
+            duration = _this$state3.duration,
+            currentTime = _this$state3.currentTime;
+          var seconds;
+          if (data.value > duration.seconds) {
+            seconds = duration.seconds;
+          } else seconds = data.value;
+          var timecode = currentTime.frame; // secondsToTime(seconds, frameRate, initialTime);
+          var frame = currentTime.frame; // converter.secondsToFrames(seconds, frameRate);
+          // const standard = converter.secondsToTime(seconds);
+          _this.mediaRef.video.currentTime = seconds;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            currentTime: {
+              timecode: timecode,
+              frame: frame,
+              // standard,
+              seconds: seconds
+            },
+            annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+              value: 'new',
+              active: false,
+              type: 'brush',
+              undo: false,
+              redo: false
+            }),
+            annotations: []
+          });
+        },
+        seeking_time: function seeking_time() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            seekingTime: data.value
+          });
+        },
+        add_seconds: function add_seconds() {
+          var _this$state4 = _this.state,
+            duration = _this$state4.duration,
+            currentTime = _this$state4.currentTime;
+          var seconds = currentTime.seconds + data.value;
+          var timecode = (0, _utils.secondsToTime)(seconds, frameRate, initialTime);
+          var frame = currentTime.frame; // converter.secondsToFrames(seconds, frameRate);
+          // const standard = converter.secondsToTime(seconds);
+          _this.mediaRef.video.currentTime = seconds;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            currentTime: {
+              timecode: timecode,
+              frame: frame,
+              // standard,
+              seconds: seconds
+            }
+          });
+        },
+        handle_image_load_data: function handle_image_load_data() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            imageData: {
+              minWidth: data.value.minWidth,
+              maxWidth: data.value.maxWidth,
+              percentage: data.value.percentage
+            }
+          });
+        },
+        zoom_in: function zoom_in() {
+          var percentage = _this.state.imageData.percentage;
+          var newPercentage = Math.round(percentage / 10) * 10 + 10;
+          newPercentage = newPercentage > 200 ? 200 : newPercentage;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            imageData: _objectSpread(_objectSpread({}, playerState.imageData), {}, {
+              percentage: newPercentage
+            })
+          });
+        },
+        zoom_out: function zoom_out() {
+          var _this$state$imageData = _this.state.imageData,
+            percentage = _this$state$imageData.percentage,
+            minWidth = _this$state$imageData.minWidth,
+            maxWidth = _this$state$imageData.maxWidth;
+          var minPercent = Math.round(minWidth / maxWidth * 100);
+          var newPercentage = Math.round(percentage / 10) * 10 - 10;
+          newPercentage = newPercentage < minPercent ? minPercent : newPercentage;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            imageData: _objectSpread(_objectSpread({}, playerState.imageData), {}, {
+              percentage: newPercentage
+            })
+          });
+        },
+        fit_to_screen: function fit_to_screen() {
+          var _this$state$imageData2 = _this.state.imageData,
+            minWidth = _this$state$imageData2.minWidth,
+            maxWidth = _this$state$imageData2.maxWidth;
+          var minPercent = Math.round(minWidth / maxWidth * 100);
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            imageData: _objectSpread(_objectSpread({}, playerState.imageData), {}, {
+              percentage: minPercent
+            })
+          });
+        },
+        toggle_playlist: function toggle_playlist() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            playlistVisible: !playerState.playlistVisible
+          });
+        },
+        playlist_click: function playlist_click() {
+          playlistClick(data.value);
+        },
+        go_to_comment: function go_to_comment() {
+          var seconds = data.value.videotime || 0;
+          var timecode = (0, _utils.secondsToTime)(seconds, frameRate, initialTime);
+          var frame = converter.secondsToFrames(seconds, frameRate);
+          var standard = converter.secondsToTime(seconds);
+          media.currentTime = seconds;
+          media.pause();
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            currentTime: {
+              timecode: timecode,
+              frame: frame,
+              standard: standard,
+              seconds: seconds
+            },
+            annotation: {
+              value: 'comment',
+              type: 'brush',
+              active: false,
+              color: '#ff6c56',
+              undo: false,
+              redo: false
+            },
+            annotations: data.value.annotations || []
+          });
+        },
+        comment: function comment() {
+          var seconds = media.currentTime;
+          var timecode = (0, _utils.secondsToTime)(seconds, frameRate, initialTime);
+          var markers = _objectSpread({}, playerState.markers);
+          var annotations = _toConsumableArray(playerState.annotations);
+          if (markers.left > -1 && markers.right > -1) {
+            timecode = "".concat((0, _utils.secondsToTime)(markers.left, frameRate, initialTime), " - ").concat((0, _utils.secondsToTime)(markers.right, frameRate, initialTime));
+            seconds = markers.left;
+          }
+          onCommentsAdd({
+            seconds: seconds,
+            timecode: timecode,
+            comment: data.value,
+            annotations: annotations
+          });
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            markers: {
+              left: -1,
+              right: -1
+            },
+            annotation: {
+              value: 'new',
+              type: 'brush',
+              active: false,
+              color: '#ff6c56',
+              undo: false,
+              redo: false
+            },
+            annotations: []
+          });
+        },
+        create_marker: function create_marker() {
+          media.pause();
+          var markers = _objectSpread({}, playerState.markers);
+          if (data.value === 'left') {
+            if (markers.right < 0 || markers.right > -1 && media.currentTime < markers.right) {
+              markers.left = media.currentTime;
+            }
+          }
+          if (data.value === 'right') {
+            if (markers.left > -1 && media.currentTime > markers.left) {
+              markers.right = media.currentTime;
+            }
+          }
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            markers: markers
+          });
+        },
+        toggle_sd_outline: function toggle_sd_outline() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            SDOutline: !playerState.SDOutline
+          });
+        },
+        volume: function volume() {
+          _this.mediaRef.video.volume = data.value > 1 ? 1 : data.value;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            volume: data.value
+          });
+        },
+        mute: function mute() {
+          _this.mediaRef.video.muted = !muted;
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            muted: !muted
+          });
+        },
+        reset_marker: function reset_marker() {
+          if (data.value === 'exit_fullscreen') {
+            _this.toggleFullscreen(!playerState.isFullscreen);
+            return _objectSpread(_objectSpread({}, playerState), {}, {
+              markers: {
+                left: -1,
+                right: -1
+              },
+              isFullscreen: !playerState.isFullscreen
+            });
+          }
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            markers: {
+              left: -1,
+              right: -1
+            }
+          });
+        },
+        show_comments: function show_comments() {
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            commentsVisible: data.value
+          });
+        },
+        new_annotation: function new_annotation() {
+          if (playerState.mediaPlaying) {
+            media.pause();
+          }
+          if (playerState.annotation.value === 'new') {
+            if (playerState.annotation.active) {
+              return _objectSpread(_objectSpread({}, playerState), {}, {
+                annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                  type: data.value
+                })
+              });
+            }
+            if (!playerState.annotation.active) {
+              return _objectSpread(_objectSpread({}, playerState), {}, {
+                annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                  active: true,
+                  type: data.value
+                })
+              });
+            }
+          }
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+              value: 'new',
+              active: true,
+              type: data.value
+            }),
+            annotations: []
+          });
+        },
+        annotation_color: function annotation_color() {
+          if (playerState.mediaPlaying) {
+            media.pause();
+          }
+          if (playerState.annotation.value === 'new') {
+            if (playerState.annotation.active) {
+              return _objectSpread(_objectSpread({}, playerState), {}, {
+                annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                  color: data.value
+                })
+              });
+            }
+            if (!playerState.annotation.active) {
+              return _objectSpread(_objectSpread({}, playerState), {}, {
+                annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                  active: true,
+                  color: data.value
+                })
+              });
+            }
+          }
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+              value: 'new',
+              active: true,
+              color: data.value
+            }),
+            annotations: []
+          });
+        },
+        annotation_revert: function annotation_revert() {
+          if (playerState.mediaPlaying) {
+            media.pause();
+          }
+          if (playerState.annotation.value === 'new' && playerState.annotation.active && playerState.annotations.length) {
+            if (data.value === 'undo') {
+              var _annotationsArr = _toConsumableArray(playerState.annotations);
+              var _deletedAnnotation = _annotationsArr.filter(function (annotation) {
+                return annotation.is_deleted;
+              });
+              var activeAnnotations = _annotationsArr.filter(function (annotation) {
+                return !annotation.is_deleted;
+              });
+              if (activeAnnotations.length) {
+                activeAnnotations[activeAnnotations.length - 1].is_deleted = true;
+              }
+              _annotationsArr = [].concat(_toConsumableArray(activeAnnotations), _toConsumableArray(_deletedAnnotation));
+              return _objectSpread(_objectSpread({}, playerState), {}, {
+                annotations: _annotationsArr,
+                annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                  redo: true,
+                  undo: activeAnnotations.length > 1
+                })
+              });
+            }
+            var annotationsArr = _toConsumableArray(playerState.annotations);
+            var deletedAnnotation = annotationsArr.filter(function (annotation) {
+              return annotation.is_deleted;
+            });
+            annotationsArr = annotationsArr.filter(function (annotation) {
+              return !annotation.is_deleted;
+            });
+            deletedAnnotation[0].is_deleted = false;
+            annotationsArr = [].concat(_toConsumableArray(annotationsArr), _toConsumableArray(deletedAnnotation));
+            return _objectSpread(_objectSpread({}, playerState), {}, {
+              annotations: annotationsArr,
+              annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+                redo: deletedAnnotation.length > 1,
+                undo: true
+              })
+            });
+          }
+          return _objectSpread({}, playerState);
+        },
+        toggle_fullscreen: function toggle_fullscreen() {
+          _this.toggleFullscreen();
+        },
+        annotation_update: function annotation_update() {
+          var annotationsArr = playerState.annotations.filter(function (annotation) {
+            return !annotation.is_deleted;
+          });
+          return _objectSpread(_objectSpread({}, playerState), {}, {
+            annotations: [].concat(_toConsumableArray(annotationsArr), [data.value]),
+            annotation: _objectSpread(_objectSpread({}, playerState.annotation), {}, {
+              undo: true,
+              redo: false
+            })
+          });
+        },
+        "default": function _default() {
+          // eslint-disable-next-line no-console
+          console.log(data);
+          return playerState;
+        }
+      };
+      playerState = actions[data.action] ? actions[data.action]() : actions["default"]();
+      _this.setState(_objectSpread({}, playerState));
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBackPressed", function () {
+      var mediaBlock = document.getElementById('media-controls-block');
+      mediaBlock.style.height = '';
+      mediaBlock.style.width = '';
+      mediaBlock.style.margin = '';
+      var onPlayerClose = _this.props.onPlayerClose;
+      onPlayerClose();
+    });
+    _this.controlsHideTimer = null;
+    _this.asset = null; // the Video component
+    _this.meterHeight = 40;
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.state = {
+      media: null,
+      videoRewind: false,
+      currentTime: {
+        timecode: '00:00:00:00',
+        frame: 0,
+        standard: '00:00',
+        seconds: 0
+      },
+      duration: {
+        timecode: '00:00:00:00',
+        frame: 0,
+        standard: '00:00',
+        seconds: 0
+      },
+      imageData: {},
+      framePerSecond: 1 / props.frameRate,
+      playbackRate: 1,
+      volume: 1,
+      playlistVisible: false,
+      /*
+       * markers: {
+       *   left: -1,
+       *   right: -1
+       * },
+       */
+      SDOutline: false,
+      commentsVisible: false,
+      annotation: {
+        value: 'new',
+        type: 'brush',
+        active: false,
+        color: '#ff6c56',
+        redo: false,
+        undo: false
+      },
+      annotations: [],
+      isFullscreen: false,
+      HLSConfig: {
+        debug: true,
+        capLevelToPlayerSize: false,
+        maxBufferLength: 10,
+        maxMaxBufferLength: 600,
+        maxBufferSize: 30,
+        enableWebVTT: false,
+        enableCEA708Captions: false
+      },
+      SDBorderActive: true,
+      paused: true,
+      hasStarted: false,
+      muted: false,
+      audioTracksArr: [],
+      seekingTime: 0,
+      previewActive: false,
+      isActive: false
+    };
+    return _this;
+  }
+  _createClass(Player, [{
+    key: "onSegmentClick",
+    value: function onSegmentClick(start_time, end_time, seek) {
+      // this.actions.handleMarkerUpdate(start_time, end_time);
+      if (seek) {
+        this.actionClick({
+          action: 'pause'
+        });
+      } else {
+        this.actionClick({
+          action: 'play'
+        });
+      }
+      // this.actions.handleVideoRewind(false);
+      this.actionClick({
+        action: 'seek',
+        value: start_time
+      });
+      // this.actions.seek(start_time);
+      this.actionClick({
+        action: 'handle_video_preview',
+        value: true
+      });
+      // this.actions.handleVideoPreview(true);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        rightSection = _this$props2.rightSection,
+        title = _this$props2.videoDetails.title,
+        playerType = _this$props2.playerType,
+        controlType = _this$props2.controlType;
+      var _this$state5 = this.state,
+        playlistVisible = _this$state5.playlistVisible,
+        hasStarted = _this$state5.hasStarted;
+      var props = _objectSpread(_objectSpread(_objectSpread({}, this.props), this.state), {}, {
+        actionClick: this.actionClick
+      });
+      return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
+        ref: function ref(c) {
+          _this2.playerBlock = c;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
+        id: "player-container",
+        ref: function ref(playerContainer) {
+          _this2.playerContainer = playerContainer;
+        }
+      }, props, {
+        hasRightSection: !!rightSection,
+        playlistVisible: playlistVisible
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "left-video-section",
+        ref: function ref(leftSectionRef) {
+          _this2.leftSectionRef = leftSectionRef;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Header["default"], _extends({
+        id: "header-container",
+        title: title,
+        onBackPressed: function onBackPressed() {
+          return _this2.onBackPressed();
+        }
+      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "media-controls-block"
+      }, /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({}, props, {
+        ref: function ref(mediaRef) {
+          _this2.mediaRef = mediaRef;
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({}, props, {
+        player: this.mediaRef
+      })), playerType === 'default' && /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({
+        id: "progress-control",
+        ref: function ref(c) {
+          _this2._progressControl = c;
+        }
+      }, props, {
+        key: "progress-control"
+      })), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "audio-meter-block",
+        className: "audio-meter-block ".concat(playerType),
+        ref: function ref(audioMeterBlock) {
+          _this2._audioMeterBlock = audioMeterBlock;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(AudioMeterBlock, {
+        onClick: function onClick() {
+          _this2.meterBlockClick();
+        },
+        role: "presentation",
+        active: true
+      }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], _extends({
+        height: this.meterHeight,
+        hasStarted: hasStarted
+      }, this.props)))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "right-video-section",
+        id: "right-section",
+        ref: function ref(rightSectionRef) {
+          _this2.rightSectionRef = rightSectionRef;
+        }
+      }, rightSection) : null), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "comments-playlist"
+      }, controlType === 'advanced' ? /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({
+        id: "progress-control",
+        ref: function ref(c) {
+          _this2._progressControl = c;
+        }
+      }, props, {
+        key: "progress-control"
+      })) : /*#__PURE__*/_react["default"].createElement(_playlist["default"], _extends({
+        id: "playlist",
+        ref: function ref(c) {
+          _this2.playlist = c;
+        },
+        key: "playlist",
+        order: 5
+      }, props))));
+    }
+  }]);
+  return Player;
+}(_react.Component);
+exports["default"] = Player;
+Player.contextTypes = {
+  store: _propTypes.PropTypes.instanceOf(Object)
+};
+Player.propTypes = propTypes;
+Player.defaultProps = defaultProps;
+Player.displayName = 'Player';