@desynova-digital/player 4.0.1 → 4.0.2

package/Player.js

@@ -1,945 +0,0 @@
-"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';