@desynova-digital/player 3.9.7 → 3.9.8

package/components/Video.js

@@ -1,57 +1,41 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _hls = require('hls.js');
-
-var _hls2 = _interopRequireDefault(_hls);
-
-var _Manager = require('../Manager');
-
-var _Manager2 = _interopRequireDefault(_Manager);
-
-var _utils = require('../utils');
-
-var _BigPlayButton = require('./BigPlayButton');
-
-var _BigPlayButton2 = _interopRequireDefault(_BigPlayButton);
-
-var _PosterImage = require('./PosterImage');
-
-var _PosterImage2 = _interopRequireDefault(_PosterImage);
-
-var _SDOutline = require('./SDOutline');
-
-var _SDOutline2 = _interopRequireDefault(_SDOutline);
-
-var _components = require('@desynova-digital/components/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hls = _interopRequireDefault(require("hls.js"));
+var _Manager = _interopRequireDefault(require("../Manager"));
+var _utils = require("../utils");
+var _BigPlayButton = _interopRequireDefault(require("./BigPlayButton"));
+var _PosterImage = _interopRequireDefault(require("./PosterImage"));
+var _SDOutline = _interopRequireDefault(require("./SDOutline"));
+var _components = require("@desynova-digital/components/components");
+var _templateObject, _templateObject2;
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   player: _propTypes.PropTypes.instanceOf(Object),
@@ -101,7 +85,6 @@ var propTypes = {
   userEmail: _propTypes.PropTypes.string,
   playerSelectedMarker: _propTypes.PropTypes.instanceOf(Object)
 };
-
 var defaultProps = {
   startTime: 0,
   loop: false,
@@ -112,25 +95,15 @@ var defaultProps = {
   aspectRatio: 'auto',
   crossOrigin: 'anonymous'
 };
-
-var SubTitleSection = _styledComponents2.default.div.withConfig({
-  displayName: 'Video__SubTitleSection',
-  componentId: 'sc-omlcc3-0'
-})(['position:absolute;font-family:SFUIText-Regular;font-size:16px;bottom:20px;width:100%;display:flex;justify-content:center;text-align:center;color:#FFFFFF;height:90%;align-items:center;.subtitleContainer{border-radius:4px;width:fit-content;background:#000000;opacity:0.9;padding:8px 10px;line-height:20px;position:absolute;}']);
-
-var VideoBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'Video__VideoBlock',
-  componentId: 'sc-omlcc3-1'
-})(['position:relative;&.video-react-player-block{position:relative;transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;video{position:absolute;top:0;left:0;width:100%;height:100%;right:0;bottom:0;}.audio-tracks{position:relative;display:flex;background:rgba(0,0,0,0.5);color:#fff;z-index:10;position:absolute;width:100%;bottom:0;p{cursor:pointer;padding:10px;}}.loader-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;z-index:10;background:rgba(0,0,0,0.5)}}&.ratio-border{border:1px solid rgba(255,255,255,0.5);&:after{content:\'16:9 Safe Area\';position:absolute;color:#fff;font-family:SFUIText-Regular;font-size:12px;transform:rotate(-90deg);top:20%;left:-50px;}}']);
-
-var Video = function (_Component) {
+var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  font-family: SFUIText-Regular;\n  font-size: 16px;\n  bottom: 20px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  color: #FFFFFF;\n  height: 90%;\n  align-items: center;\n  \n  .subtitleContainer{\n    border-radius: 4px;\n    width: fit-content;\n    background: #000000;\n    opacity: 0.9;\n    padding: 8px 10px;\n    line-height: 20px;\n    position: absolute;\n  }\n"])));
+var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\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    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0,0,0,0.5)\n    }\n  }\n  &.ratio-border {\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: '16:9 Safe Area';\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])));
+var Video = /*#__PURE__*/function (_Component) {
   _inherits(Video, _Component);
-
+  var _super = _createSuper(Video);
   function Video(props) {
+    var _this;
     _classCallCheck(this, Video);
-
-    var _this = _possibleConstructorReturn(this, (Video.__proto__ || Object.getPrototypeOf(Video)).call(this, props));
-
+    _this = _super.call(this, props);
     _this.state = {
       audioTracks: [],
       isM3U8: false,
@@ -150,60 +123,57 @@ var Video = function (_Component) {
       currentSubtitleObj: {}
     };
     _this.video = null; // the html5 video
-    _this.manager = new _Manager2.default(props.store);
-    _this.getStyle = _this.getStyle.bind(_this);
-    _this.getChildren = _this.getChildren.bind(_this);
-    _this.play = _this.play.bind(_this);
-    _this.pause = _this.pause.bind(_this);
-    _this.seek = _this.seek.bind(_this);
-    _this.forward = _this.forward.bind(_this);
-    _this.replay = _this.replay.bind(_this);
-    _this.toggleFullscreen = _this.toggleFullscreen.bind(_this);
-    _this.getProperties = _this.getProperties.bind(_this);
-    _this.renderChildren = _this.renderChildren.bind(_this);
-    _this.handleLoadStart = _this.handleLoadStart.bind(_this);
-    _this.handleCanPlay = _this.handleCanPlay.bind(_this);
-    _this.handleCanPlayThrough = _this.handleCanPlayThrough.bind(_this);
-    _this.handlePlay = _this.handlePlay.bind(_this);
-    _this.handlePlaying = _this.handlePlaying.bind(_this);
-    _this.handlePause = _this.handlePause.bind(_this);
-    _this.handleEnded = _this.handleEnded.bind(_this);
-    _this.handleWaiting = _this.handleWaiting.bind(_this);
-    _this.handleSeeking = _this.handleSeeking.bind(_this);
-    _this.handleSeeked = _this.handleSeeked.bind(_this);
-    _this.handleFullscreenChange = _this.handleFullscreenChange.bind(_this);
-    _this.handleError = _this.handleError.bind(_this);
-    _this.handleSuspend = _this.handleSuspend.bind(_this);
-    _this.handleAbort = _this.handleAbort.bind(_this);
-    _this.handleEmptied = _this.handleEmptied.bind(_this);
-    _this.handleStalled = _this.handleStalled.bind(_this);
-    _this.handleLoadedMetaData = _this.handleLoadedMetaData.bind(_this);
-    _this.handleLoadedData = _this.handleLoadedData.bind(_this);
-    _this.handleTimeUpdate = _this.handleTimeUpdate.bind(_this);
-    _this.handleRateChange = _this.handleRateChange.bind(_this);
-    _this.handleVolumeChange = _this.handleVolumeChange.bind(_this);
-    _this.handleDurationChange = _this.handleDurationChange.bind(_this);
-    _this.handleProgress = (0, _utils.throttle)(_this.handleProgress.bind(_this), 250);
-    _this.handleKeypress = _this.handleKeypress.bind(_this);
-    _this.audioVisualizer = _this.audioVisualizer.bind(_this);
-    _this.checkWatermark = _this.checkWatermark.bind(_this);
+    _this.manager = new _Manager["default"](props.store);
+    _this.getStyle = _this.getStyle.bind(_assertThisInitialized(_this));
+    _this.getChildren = _this.getChildren.bind(_assertThisInitialized(_this));
+    _this.play = _this.play.bind(_assertThisInitialized(_this));
+    _this.pause = _this.pause.bind(_assertThisInitialized(_this));
+    _this.seek = _this.seek.bind(_assertThisInitialized(_this));
+    _this.forward = _this.forward.bind(_assertThisInitialized(_this));
+    _this.replay = _this.replay.bind(_assertThisInitialized(_this));
+    _this.toggleFullscreen = _this.toggleFullscreen.bind(_assertThisInitialized(_this));
+    _this.getProperties = _this.getProperties.bind(_assertThisInitialized(_this));
+    _this.renderChildren = _this.renderChildren.bind(_assertThisInitialized(_this));
+    _this.handleLoadStart = _this.handleLoadStart.bind(_assertThisInitialized(_this));
+    _this.handleCanPlay = _this.handleCanPlay.bind(_assertThisInitialized(_this));
+    _this.handleCanPlayThrough = _this.handleCanPlayThrough.bind(_assertThisInitialized(_this));
+    _this.handlePlay = _this.handlePlay.bind(_assertThisInitialized(_this));
+    _this.handlePlaying = _this.handlePlaying.bind(_assertThisInitialized(_this));
+    _this.handlePause = _this.handlePause.bind(_assertThisInitialized(_this));
+    _this.handleEnded = _this.handleEnded.bind(_assertThisInitialized(_this));
+    _this.handleWaiting = _this.handleWaiting.bind(_assertThisInitialized(_this));
+    _this.handleSeeking = _this.handleSeeking.bind(_assertThisInitialized(_this));
+    _this.handleSeeked = _this.handleSeeked.bind(_assertThisInitialized(_this));
+    _this.handleFullscreenChange = _this.handleFullscreenChange.bind(_assertThisInitialized(_this));
+    _this.handleError = _this.handleError.bind(_assertThisInitialized(_this));
+    _this.handleSuspend = _this.handleSuspend.bind(_assertThisInitialized(_this));
+    _this.handleAbort = _this.handleAbort.bind(_assertThisInitialized(_this));
+    _this.handleEmptied = _this.handleEmptied.bind(_assertThisInitialized(_this));
+    _this.handleStalled = _this.handleStalled.bind(_assertThisInitialized(_this));
+    _this.handleLoadedMetaData = _this.handleLoadedMetaData.bind(_assertThisInitialized(_this));
+    _this.handleLoadedData = _this.handleLoadedData.bind(_assertThisInitialized(_this));
+    _this.handleTimeUpdate = _this.handleTimeUpdate.bind(_assertThisInitialized(_this));
+    _this.handleRateChange = _this.handleRateChange.bind(_assertThisInitialized(_this));
+    _this.handleVolumeChange = _this.handleVolumeChange.bind(_assertThisInitialized(_this));
+    _this.handleDurationChange = _this.handleDurationChange.bind(_assertThisInitialized(_this));
+    _this.handleProgress = (0, _utils.throttle)(_this.handleProgress.bind(_assertThisInitialized(_this)), 250);
+    _this.handleKeypress = _this.handleKeypress.bind(_assertThisInitialized(_this));
+    _this.audioVisualizer = _this.audioVisualizer.bind(_assertThisInitialized(_this));
+    _this.checkWatermark = _this.checkWatermark.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(Video, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       var src = this.props.src;
-
       var isM3U8 = src.split('.').pop() === 'm3u8' ? true : false;
       this.setState({
         isM3U8: isM3U8
       });
-      if (_hls2.default.isSupported() && isM3U8) {
-        var _manager$getState = this.manager.getState(),
-            HLSConfig = _manager$getState.player.HLSConfig;
-
-        this.hls = new _hls2.default(HLSConfig);
+      if (_hls["default"].isSupported() && isM3U8) {
+        var _this$manager$getStat = this.manager.getState(),
+          HLSConfig = _this$manager$getStat.player.HLSConfig;
+        this.hls = new _hls["default"](HLSConfig);
         this.setupHLS(src);
       } else {
         this.video.src = src;
@@ -215,13 +185,12 @@ var Video = function (_Component) {
       });
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _state = this.state,
-          isM3U8 = _state.isM3U8,
-          watermarkInterval = _state.watermarkInterval;
-
-      if (_hls2.default.isSupported() && isM3U8) {
+      var _this$state = this.state,
+        isM3U8 = _this$state.isM3U8,
+        watermarkInterval = _this$state.watermarkInterval;
+      if (_hls["default"].isSupported() && isM3U8) {
         this.hls.detachMedia();
       } else {
         this.video.src = '';
@@ -232,21 +201,18 @@ var Video = function (_Component) {
     /**
      * This function is triggered on interval to shuffle the position of watermark on Player area
      */
-
   }, {
-    key: 'checkWatermark',
+    key: "checkWatermark",
     value: function checkWatermark() {
       var watermark = this.state.watermark;
-      var _props = this.props,
-          onPlayerClose = _props.onPlayerClose,
-          userEmail = _props.userEmail;
-
+      var _this$props = this.props,
+        onPlayerClose = _this$props.onPlayerClose,
+        userEmail = _this$props.userEmail;
       var watermark_text = document.querySelector('#watermark-text');
       var video_player = null;
       var watermark_dimension = null;
       var text_css = null;
       var bool_text = false;
-
       if (!watermark_text) {
         onPlayerClose();
       } else {
@@ -271,35 +237,33 @@ var Video = function (_Component) {
       });
     }
   }, {
-    key: 'setupHLS',
+    key: "setupHLS",
     value: function setupHLS(src) {
       var _this2 = this;
-
-      var _props2 = this.props,
-          actions = _props2.actions,
-          activeTrackIndex = _props2.activeTrackIndex;
-
+      var _this$props2 = this.props,
+        actions = _this$props2.actions,
+        activeTrackIndex = _this$props2.activeTrackIndex;
       var self = this;
       // bind them together
       this.hls.attachMedia(this.video);
-      this.hls.on(_hls2.default.Events.MEDIA_ATTACHED, function () {
+      this.hls.on(_hls["default"].Events.MEDIA_ATTACHED, function () {
         self.hls.loadSource(src);
       });
-      this.hls.on(_hls2.default.Events.MANIFEST_PARSED, function (event, data) {
+      this.hls.on(_hls["default"].Events.MANIFEST_PARSED, function (event, data) {
         var trackIndex = activeTrackIndex || 0;
         actions.handleAudioTracks(data.audioTracks);
         actions.handleAudioTrackChange(data.audioTracks[trackIndex]);
       });
-      this.hls.on(_hls2.default.Events.ERROR, function (event, data) {
+      this.hls.on(_hls["default"].Events.ERROR, function (event, data) {
         // eslint-disable-next-line no-console
         console.log('HLS.Events.ERROR: ', event, data);
         if (data.fatal) {
           switch (data.type) {
-            case _hls2.default.ErrorTypes.NETWORK_ERROR:
+            case _hls["default"].ErrorTypes.NETWORK_ERROR:
               // try to recover network error
               _this2.hls.startLoad();
               break;
-            case _hls2.default.ErrorTypes.MEDIA_ERROR:
+            case _hls["default"].ErrorTypes.MEDIA_ERROR:
               _this2.hls.recoverMediaError();
               break;
             default:
@@ -313,28 +277,36 @@ var Video = function (_Component) {
       });
     }
   }, {
-    key: 'getDefaultChildren',
+    key: "getDefaultChildren",
     value: function getDefaultChildren(props) {
-      return [_react2.default.createElement(_PosterImage2.default, _extends({ key: 'poster-image', order: 1.0 }, props)), _react2.default.createElement(_SDOutline2.default, _extends({ key: 'sd-outline', order: 2.0 }, props)), _react2.default.createElement(_BigPlayButton2.default, _extends({ key: 'big-play-button', order: 5.0 }, props))];
+      return [/*#__PURE__*/_react["default"].createElement(_PosterImage["default"], _extends({
+        key: "poster-image",
+        order: 1.0
+      }, props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], _extends({
+        key: "sd-outline",
+        order: 2.0
+      }, props)), /*#__PURE__*/_react["default"].createElement(_BigPlayButton["default"], _extends({
+        key: "big-play-button",
+        order: 5.0
+      }, props))];
     }
   }, {
-    key: 'getChildren',
+    key: "getChildren",
     value: function getChildren(props) {
-      var propsWithoutChildren = _extends({}, props, {
+      var propsWithoutChildren = _objectSpread(_objectSpread({}, props), {}, {
         children: null
       });
       var children = this.props.children;
-
-      var childs = _react2.default.Children.toArray(children).filter(function (e) {
+      var childs = _react["default"].Children.toArray(children).filter(function (e) {
         return !(0, _utils.isVideoChild)(e);
       });
       var defaultChildren = this.getDefaultChildren(propsWithoutChildren, props);
       return (0, _utils.mergeAndSortChildren)(defaultChildren, childs, propsWithoutChildren);
     }
   }, {
-    key: 'setWidthOrHeight',
+    key: "setWidthOrHeight",
     value: function setWidthOrHeight(style, name, value) {
-      var styleVal = void 0;
+      var styleVal;
       if (typeof value === 'string') {
         if (value === 'auto') {
           styleVal = 'auto';
@@ -342,28 +314,25 @@ var Video = function (_Component) {
           styleVal = value;
         }
       } else if (typeof value === 'number') {
-        styleVal = value + 'px';
+        styleVal = "".concat(value, "px");
       }
       Object.assign(style, _defineProperty({}, name, styleVal));
     }
   }, {
-    key: 'getStyle',
+    key: "getStyle",
     value: function getStyle() {
       var fluid = this.props.fluid;
-
-      var _manager$getState2 = this.manager.getState(),
-          player = _manager$getState2.player;
-
+      var _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
       var style = {};
-      var _props3 = this.props,
-          aspectRatio = _props3.aspectRatio,
-          width = _props3.width,
-          height = _props3.height;
+      var _this$props3 = this.props,
+        aspectRatio = _this$props3.aspectRatio,
+        width = _this$props3.width,
+        height = _this$props3.height;
       /*
        * The aspect ratio is either used directly
        * or to calculate width and height.
        */
-
       if (player.videoWidth) {
         // Otherwise try to get the aspect ratio from the video metadata
         aspectRatio = '16:9';
@@ -376,7 +345,6 @@ var Video = function (_Component) {
       // Get the ratio as a decimal we can use to calculate dimensions
       var ratioParts = aspectRatio.split(':');
       var ratioMultiplier = ratioParts[1] / ratioParts[0];
-
       if (height !== undefined) {
         // Or calulate the width from the aspect ratio if a height has been set
         width = height / ratioMultiplier;
@@ -385,9 +353,8 @@ var Video = function (_Component) {
         width = player.videoWidth || 400;
         height = width * ratioMultiplier;
       }
-
       if (fluid) {
-        style.paddingTop = ratioMultiplier * 100 + '%';
+        style.paddingTop = "".concat(ratioMultiplier * 100, "%");
       } else {
         // If Width contains 'auto', set 'auto' in style
         this.setWidthOrHeight(style, 'width', width);
@@ -398,16 +365,13 @@ var Video = function (_Component) {
     }
 
     // get all video properties
-
   }, {
-    key: 'getProperties',
+    key: "getProperties",
     value: function getProperties() {
       var _this3 = this;
-
       if (!this.video) {
         return null;
       }
-
       return _utils.mediaProperties.reduce(function (properties, key) {
         properties[key] = _this3.video[key];
         return properties;
@@ -415,20 +379,66 @@ var Video = function (_Component) {
     }
 
     // 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: 'UNSAFE_componentWillReceiveProps',
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _props4 = this.props,
-          src = _props4.src,
-          activeAudio = _props4.player.activeAudio,
-          currentSubtitleObj = _props4.currentSubtitleObj,
-          markers = _props4.markers;
+    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) {
+      if (val > 1) {
+        val = 1;
+      }
+      if (val < 0) {
+        val = 0;
+      }
+      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;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(newProps) {
+      var _this$props4 = this.props,
+        src = _this$props4.src,
+        activeAudio = _this$props4.player.activeAudio,
+        currentSubtitleObj = _this$props4.currentSubtitleObj,
+        markers = _this$props4.markers;
       if (newProps.src !== src) {
         var isM3U8 = this.state.isM3U8;
-
-        if (_hls2.default.isSupported() && isM3U8) {
+        if (_hls["default"].isSupported() && isM3U8) {
           this.hls.detachMedia();
         } else {
           this.video.src = '';
@@ -437,17 +447,17 @@ var Video = function (_Component) {
         this.setState({
           isM3U8: m3u8
         });
-        if (_hls2.default.isSupported() && m3u8) {
-          var _manager$getState3 = this.manager.getState(),
-              HLSConfig = _manager$getState3.player.HLSConfig;
-
-          this.hls = new _hls2.default(HLSConfig);
+        if (_hls["default"].isSupported() && m3u8) {
+          var _this$manager$getStat3 = this.manager.getState(),
+            HLSConfig = _this$manager$getStat3.player.HLSConfig;
+          this.hls = new _hls["default"](HLSConfig);
           this.setupHLS(newProps.src);
         } else {
           this.video.src = newProps.src;
         }
         this.forceUpdate(); // make sure the children can get the video property
       }
+
       if (newProps.player.activeAudio && activeAudio && activeAudio.id !== newProps.player.activeAudio.id) {
         this.hls.audioTrack = newProps.player.activeAudio.id;
       }
@@ -478,59 +488,51 @@ var Video = function (_Component) {
     }
 
     // play the video
-
   }, {
-    key: 'play',
+    key: "play",
     value: function play() {
       var promise = this.video.play();
       if (promise !== undefined) {
-        promise.catch(function () {}).then(function () {});
+        promise["catch"](function () {}).then(function () {});
       }
     }
 
     // pause the video
-
   }, {
-    key: 'pause',
+    key: "pause",
     value: function pause() {
       var promise = this.video.pause();
       if (promise !== undefined) {
-        promise.catch(function () {}).then(function () {});
+        promise["catch"](function () {}).then(function () {});
       }
     }
 
     // Change the video source and re-load the video:
-
   }, {
-    key: 'load',
+    key: "load",
     value: function load() {
       this.video.load();
     }
 
     // Add a new text track to the video
-
   }, {
-    key: 'addTextTrack',
+    key: "addTextTrack",
     value: function addTextTrack() {
-      var _video;
-
-      (_video = this.video).addTextTrack.apply(_video, arguments);
+      var _this$video;
+      (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
     }
 
     // Check if your browser can play different types of video:
-
   }, {
-    key: 'canPlayType',
+    key: "canPlayType",
     value: function canPlayType() {
-      var _video2;
-
-      (_video2 = this.video).canPlayType.apply(_video2, arguments);
+      var _this$video2;
+      (_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
     }
 
     // toggle play
-
   }, {
-    key: 'togglePlay',
+    key: "togglePlay",
     value: function togglePlay() {
       if (this.video.paused) {
         this.play();
@@ -540,9 +542,8 @@ var Video = function (_Component) {
     }
 
     // seek video by time
-
   }, {
-    key: 'seek',
+    key: "seek",
     value: function seek(time) {
       try {
         this.video.currentTime = time;
@@ -552,30 +553,26 @@ var Video = function (_Component) {
     }
 
     // jump forward x seconds
-
   }, {
-    key: 'forward',
+    key: "forward",
     value: function forward(seconds) {
       this.seek(this.video.currentTime + seconds);
     }
 
     // jump back x seconds
-
   }, {
-    key: 'replay',
+    key: "replay",
     value: function replay(seconds) {
       this.forward(-seconds);
     }
 
     // enter or exist full screen
-
   }, {
-    key: 'toggleFullscreen',
+    key: "toggleFullscreen",
     value: function toggleFullscreen() {
-      var _props5 = this.props,
-          player = _props5.player,
-          actions = _props5.actions;
-
+      var _this$props5 = this.props,
+        player = _this$props5.player,
+        actions = _this$props5.actions;
       actions.toggleFullscreen(player);
     }
 
@@ -583,23 +580,19 @@ var Video = function (_Component) {
      * Fired when the user agent
      * begins looking for media data
      */
-
   }, {
-    key: 'handleLoadStart',
+    key: "handleLoadStart",
     value: function handleLoadStart() {
-      var _props6 = this.props,
-          actions = _props6.actions,
-          onLoadStart = _props6.onLoadStart,
-          fileType = _props6.fileType;
-
-
+      var _this$props6 = this.props,
+        actions = _this$props6.actions,
+        onLoadStart = _this$props6.onLoadStart,
+        fileType = _this$props6.fileType;
       if (fileType === 'audio') {
         this.audioVisualizer();
       }
-
       actions.handleLoadStart(this.getProperties());
       if (onLoadStart) {
-        onLoadStart.apply(undefined, arguments);
+        onLoadStart.apply(void 0, arguments);
       }
     }
 
@@ -607,19 +600,15 @@ var Video = function (_Component) {
      * A handler for events that
      * signal that waiting has ended
      */
-
   }, {
-    key: 'handleCanPlay',
+    key: "handleCanPlay",
     value: function handleCanPlay() {
-      var _props7 = this.props,
-          actions = _props7.actions,
-          onCanPlay = _props7.onCanPlay;
-
-
+      var _this$props7 = this.props,
+        actions = _this$props7.actions,
+        onCanPlay = _this$props7.onCanPlay;
       actions.handleCanPlay(this.getProperties());
-
       if (onCanPlay) {
-        onCanPlay.apply(undefined, arguments);
+        onCanPlay.apply(void 0, arguments);
       }
     }
 
@@ -627,18 +616,15 @@ var Video = function (_Component) {
      * A handler for events that
      * signal that waiting has ended
      */
-
   }, {
-    key: 'handleCanPlayThrough',
+    key: "handleCanPlayThrough",
     value: function handleCanPlayThrough() {
-      var _props8 = this.props,
-          actions = _props8.actions,
-          onCanPlayThrough = _props8.onCanPlayThrough;
-
+      var _this$props8 = this.props,
+        actions = _this$props8.actions,
+        onCanPlayThrough = _this$props8.onCanPlayThrough;
       actions.handleCanPlayThrough(this.getProperties());
-
       if (onCanPlayThrough) {
-        onCanPlayThrough.apply(undefined, arguments);
+        onCanPlayThrough.apply(void 0, arguments);
       }
     }
 
@@ -646,50 +632,41 @@ var Video = function (_Component) {
      * A handler for events that
      * signal that waiting has ended
      */
-
   }, {
-    key: 'handlePlaying',
+    key: "handlePlaying",
     value: function handlePlaying() {
-      var _props9 = this.props,
-          actions = _props9.actions,
-          onPlaying = _props9.onPlaying;
-
+      var _this$props9 = this.props,
+        actions = _this$props9.actions,
+        onPlaying = _this$props9.onPlaying;
       actions.handlePlaying(this.getProperties());
-
       if (onPlaying) {
-        onPlaying.apply(undefined, arguments);
+        onPlaying.apply(void 0, arguments);
       }
     }
 
     // Fired whenever the media has been started
-
   }, {
-    key: 'handlePlay',
+    key: "handlePlay",
     value: function handlePlay() {
-      var _props10 = this.props,
-          actions = _props10.actions,
-          onPlay = _props10.onPlay;
-
+      var _this$props10 = this.props,
+        actions = _this$props10.actions,
+        onPlay = _this$props10.onPlay;
       actions.handlePlay(this.getProperties());
-
       if (onPlay) {
-        onPlay.apply(undefined, arguments);
+        onPlay.apply(void 0, arguments);
       }
     }
 
     // Fired whenever the media has been paused
-
   }, {
-    key: 'handlePause',
+    key: "handlePause",
     value: function handlePause() {
-      var _props11 = this.props,
-          actions = _props11.actions,
-          onPause = _props11.onPause;
-
+      var _this$props11 = this.props,
+        actions = _this$props11.actions,
+        onPause = _this$props11.onPause;
       actions.handlePause(this.getProperties());
-
       if (onPause) {
-        onPause.apply(undefined, arguments);
+        onPause.apply(void 0, arguments);
       }
     }
 
@@ -697,18 +674,15 @@ var Video = function (_Component) {
      * Fired when the duration of
      * the media resource is first known or changed
      */
-
   }, {
-    key: 'handleDurationChange',
+    key: "handleDurationChange",
     value: function handleDurationChange() {
-      var _props12 = this.props,
-          actions = _props12.actions,
-          onDurationChange = _props12.onDurationChange;
-
+      var _this$props12 = this.props,
+        actions = _this$props12.actions,
+        onDurationChange = _this$props12.onDurationChange;
       actions.handleDurationChange(this.getProperties());
-
       if (onDurationChange) {
-        onDurationChange.apply(undefined, arguments);
+        onDurationChange.apply(void 0, arguments);
       }
     }
 
@@ -716,24 +690,21 @@ var Video = function (_Component) {
      * Fired while the user agent
      * is downloading media data
      */
-
   }, {
-    key: 'handleProgress',
+    key: "handleProgress",
     value: function handleProgress() {
-      var _props13 = this.props,
-          actions = _props13.actions,
-          onProgress = _props13.onProgress;
-
+      var _this$props13 = this.props,
+        actions = _this$props13.actions,
+        onProgress = _this$props13.onProgress;
       if (this.video) {
         actions.handleProgressChange(this.getProperties());
       }
-
       if (onProgress) {
-        onProgress.apply(undefined, arguments);
+        onProgress.apply(void 0, arguments);
       }
     }
   }, {
-    key: 'getSubtitleStyle',
+    key: "getSubtitleStyle",
     value: function getSubtitleStyle(data) {
       var style = {};
       style.top = data && data.text_position === 'text_position_top' ? '0px' : '';
@@ -743,15 +714,14 @@ var Video = function (_Component) {
       return style;
     }
   }, {
-    key: 'displaySubtitle',
+    key: "displaySubtitle",
     value: function displaySubtitle(marker) {
-      var _props14 = this.props,
-          markers = _props14.markers,
-          resetSubtitleData = _props14.resetSubtitleData,
-          subtitleReadOnly = _props14.subtitleReadOnly,
-          subtitleDataList = _props14.subtitleDataList;
+      var _this$props14 = this.props,
+        markers = _this$props14.markers,
+        resetSubtitleData = _this$props14.resetSubtitleData,
+        subtitleReadOnly = _this$props14.subtitleReadOnly,
+        subtitleDataList = _this$props14.subtitleDataList;
       var currentSubtitleObj = this.state.currentSubtitleObj;
-
       if (resetSubtitleData) {
         resetSubtitleData();
       }
@@ -788,16 +758,14 @@ var Video = function (_Component) {
      * Fired when the end of the media resource
      * is reached (currentTime == duration)
      */
-
   }, {
-    key: 'handleEnded',
+    key: "handleEnded",
     value: function handleEnded() {
-      var _props15 = this.props,
-          loop = _props15.loop,
-          player = _props15.player,
-          actions = _props15.actions,
-          onEnded = _props15.onEnded;
-
+      var _this$props15 = this.props,
+        loop = _this$props15.loop,
+        player = _this$props15.player,
+        actions = _this$props15.actions,
+        onEnded = _this$props15.onEnded;
       if (loop) {
         this.seek(0);
         this.play();
@@ -805,25 +773,21 @@ var Video = function (_Component) {
         this.pause();
       }
       actions.handleEnd(this.getProperties());
-
       if (onEnded) {
-        onEnded.apply(undefined, arguments);
+        onEnded.apply(void 0, arguments);
       }
     }
 
     // Fired whenever the media begins waiting
-
   }, {
-    key: 'handleWaiting',
+    key: "handleWaiting",
     value: function handleWaiting() {
-      var _props16 = this.props,
-          actions = _props16.actions,
-          onWaiting = _props16.onWaiting;
-
+      var _this$props16 = this.props,
+        actions = _this$props16.actions,
+        onWaiting = _this$props16.onWaiting;
       actions.handleWaiting(this.getProperties());
-
       if (onWaiting) {
-        onWaiting.apply(undefined, arguments);
+        onWaiting.apply(void 0, arguments);
       }
     }
 
@@ -831,18 +795,15 @@ var Video = function (_Component) {
      * Fired whenever the player
      * is jumping to a new time
      */
-
   }, {
-    key: 'handleSeeking',
+    key: "handleSeeking",
     value: function handleSeeking() {
-      var _props17 = this.props,
-          actions = _props17.actions,
-          onSeeking = _props17.onSeeking;
-
+      var _this$props17 = this.props,
+        actions = _this$props17.actions,
+        onSeeking = _this$props17.onSeeking;
       actions.handleSeeking(this.getProperties());
-
       if (onSeeking) {
-        onSeeking.apply(undefined, arguments);
+        onSeeking.apply(void 0, arguments);
       }
     }
 
@@ -850,72 +811,62 @@ var Video = function (_Component) {
      * Fired when the player has
      * finished jumping to a new time
      */
-
   }, {
-    key: 'handleSeeked',
+    key: "handleSeeked",
     value: function handleSeeked() {
-      var _props18 = this.props,
-          actions = _props18.actions,
-          onSeeked = _props18.onSeeked;
-
+      var _this$props18 = this.props,
+        actions = _this$props18.actions,
+        onSeeked = _this$props18.onSeeked;
       actions.handleSeeked(this.getProperties());
-
       if (onSeeked) {
-        onSeeked.apply(undefined, arguments);
+        onSeeked.apply(void 0, arguments);
       }
     }
 
     // Handle Fullscreen Change
-
   }, {
-    key: 'handleFullscreenChange',
+    key: "handleFullscreenChange",
     value: function handleFullscreenChange() {}
 
     /*
      * Fires when the browser is
      * intentionally not getting media data
      */
-
   }, {
-    key: 'handleSuspend',
+    key: "handleSuspend",
     value: function handleSuspend() {
-      var _props19 = this.props,
-          actions = _props19.actions,
-          onSuspend = _props19.onSuspend;
-
+      var _this$props19 = this.props,
+        actions = _this$props19.actions,
+        onSuspend = _this$props19.onSuspend;
       actions.handleSuspend(this.getProperties());
       if (onSuspend) {
-        onSuspend.apply(undefined, arguments);
+        onSuspend.apply(void 0, arguments);
       }
     }
 
     // Fires when the loading of an audio/video is aborted
-
   }, {
-    key: 'handleAbort',
+    key: "handleAbort",
     value: function handleAbort() {
-      var _props20 = this.props,
-          actions = _props20.actions,
-          onAbort = _props20.onAbort;
-
+      var _this$props20 = this.props,
+        actions = _this$props20.actions,
+        onAbort = _this$props20.onAbort;
       actions.handleAbort(this.getProperties());
       if (onAbort) {
-        onAbort.apply(undefined, arguments);
+        onAbort.apply(void 0, arguments);
       }
     }
 
     // Fires when the current playlist is empty
-
   }, {
-    key: 'handleEmptied',
+    key: "handleEmptied",
     value: function handleEmptied() {
-      var _props21 = this.props,
-          actions = _props21.actions,
-          onEmptied = _props21.onEmptied;
-
+      var _this$props21 = this.props,
+        actions = _this$props21.actions,
+        onEmptied = _this$props21.onEmptied;
       actions.handleEmptied(this.getProperties());
       if (onEmptied) {
-        onEmptied.apply(undefined, arguments);
+        onEmptied.apply(void 0, arguments);
       }
     }
 
@@ -923,18 +874,15 @@ var Video = function (_Component) {
      * Fires when the browser is trying to
      * get media data, but data is not available
      */
-
   }, {
-    key: 'handleStalled',
+    key: "handleStalled",
     value: function handleStalled() {
-      var _props22 = this.props,
-          actions = _props22.actions,
-          onStalled = _props22.onStalled;
-
+      var _this$props22 = this.props,
+        actions = _this$props22.actions,
+        onStalled = _this$props22.onStalled;
       actions.handleStalled(this.getProperties());
-
       if (onStalled) {
-        onStalled.apply(undefined, arguments);
+        onStalled.apply(void 0, arguments);
       }
     }
 
@@ -942,24 +890,19 @@ var Video = function (_Component) {
      * Fires when the browser has loaded
      * meta data for the audio/video
      */
-
   }, {
-    key: 'handleLoadedMetaData',
+    key: "handleLoadedMetaData",
     value: function handleLoadedMetaData() {
-      var _props23 = this.props,
-          actions = _props23.actions,
-          onLoadedMetadata = _props23.onLoadedMetadata,
-          startTime = _props23.startTime;
-
-
+      var _this$props23 = this.props,
+        actions = _this$props23.actions,
+        onLoadedMetadata = _this$props23.onLoadedMetadata,
+        startTime = _this$props23.startTime;
       if (startTime && startTime > 0) {
         this.video.currentTime = startTime;
       }
-
       actions.handleLoadedMetaData(this.getProperties());
-
       if (onLoadedMetadata) {
-        onLoadedMetadata.apply(undefined, arguments);
+        onLoadedMetadata.apply(void 0, arguments);
       }
     }
 
@@ -967,18 +910,15 @@ var Video = function (_Component) {
      * Fires when the browser has loaded
      * the current frame of the audio/video
      */
-
   }, {
-    key: 'handleLoadedData',
+    key: "handleLoadedData",
     value: function handleLoadedData() {
-      var _props24 = this.props,
-          actions = _props24.actions,
-          onLoadedData = _props24.onLoadedData;
-
+      var _this$props24 = this.props,
+        actions = _this$props24.actions,
+        onLoadedData = _this$props24.onLoadedData;
       actions.handleLoadedData(this.getProperties());
-
       if (onLoadedData) {
-        onLoadedData.apply(undefined, arguments);
+        onLoadedData.apply(void 0, arguments);
       }
     }
 
@@ -986,16 +926,14 @@ var Video = function (_Component) {
      * Fires when the current
      * playback position has changed
      */
-
   }, {
-    key: 'handleTimeUpdate',
+    key: "handleTimeUpdate",
     value: function handleTimeUpdate() {
-      var _props25 = this.props,
-          previewActive = _props25.player.previewActive,
-          actions = _props25.actions,
-          onTimeUpdate = _props25.onTimeUpdate,
-          rightMarker = _props25.playerSelectedMarker.rightMarker;
-
+      var _this$props25 = this.props,
+        previewActive = _this$props25.player.previewActive,
+        actions = _this$props25.actions,
+        onTimeUpdate = _this$props25.onTimeUpdate,
+        rightMarker = _this$props25.playerSelectedMarker.rightMarker;
       actions.handleTimeUpdate(this.getProperties());
       if (previewActive && this.video.currentTime >= rightMarker) {
         this.video.pause();
@@ -1003,7 +941,7 @@ var Video = function (_Component) {
         actions.handleVideoPreview(false);
       }
       if (onTimeUpdate) {
-        onTimeUpdate.apply(undefined, arguments);
+        onTimeUpdate.apply(void 0, arguments);
       }
       this.displaySubtitle();
     }
@@ -1011,34 +949,28 @@ var Video = function (_Component) {
     /**
      * Fires when the playing speed of the audio/video is changed
      */
-
   }, {
-    key: 'handleRateChange',
+    key: "handleRateChange",
     value: function handleRateChange() {
-      var _props26 = this.props,
-          actions = _props26.actions,
-          onRateChange = _props26.onRateChange;
-
+      var _this$props26 = this.props,
+        actions = _this$props26.actions,
+        onRateChange = _this$props26.onRateChange;
       actions.handleRateChange(this.getProperties());
-
       if (onRateChange) {
-        onRateChange.apply(undefined, arguments);
+        onRateChange.apply(void 0, arguments);
       }
     }
 
     // Fires when the volume has been changed
-
   }, {
-    key: 'handleVolumeChange',
+    key: "handleVolumeChange",
     value: function handleVolumeChange() {
-      var _props27 = this.props,
-          actions = _props27.actions,
-          onVolumeChange = _props27.onVolumeChange;
-
+      var _this$props27 = this.props,
+        actions = _this$props27.actions,
+        onVolumeChange = _this$props27.onVolumeChange;
       actions.handleVolumeChange(this.getProperties());
-
       if (onVolumeChange) {
-        onVolumeChange.apply(undefined, arguments);
+        onVolumeChange.apply(void 0, arguments);
       }
     }
 
@@ -1046,24 +978,22 @@ var Video = function (_Component) {
      * Fires when an error occurred
      * during the loading of an audio/video
      */
-
   }, {
-    key: 'handleError',
+    key: "handleError",
     value: function handleError() {
-      var _props28 = this.props,
-          actions = _props28.actions,
-          onError = _props28.onError;
-
+      var _this$props28 = this.props,
+        actions = _this$props28.actions,
+        onError = _this$props28.onError;
       actions.handleError(this.getProperties());
       if (onError) {
-        onError.apply(undefined, arguments);
+        onError.apply(void 0, arguments);
       }
     }
   }, {
-    key: 'handleKeypress',
+    key: "handleKeypress",
     value: function handleKeypress() {}
   }, {
-    key: 'audioVisualizer',
+    key: "audioVisualizer",
     value: function audioVisualizer() {
       // getting audio nodes
       var context = new AudioContext({
@@ -1078,33 +1008,22 @@ var Video = function (_Component) {
       canvas.width = this.playerBlock.offsetWidth;
       canvas.height = this.playerBlock.offsetHeight;
       var ctx = canvas.getContext('2d');
-
       src.connect(analyser);
       analyser.connect(context.destination);
-
       analyser.fftSize = 256;
-
       var bufferLength = analyser.frequencyBinCount;
-
       var dataArray = new Uint8Array(bufferLength);
-
       var WIDTH = canvas.width;
       var HEIGHT = canvas.height;
-
       var barWidth = WIDTH / bufferLength * 1;
       var barHeight;
       var x = 0;
-
       function renderFrame() {
         requestAnimationFrame(renderFrame);
-
         x = 0;
-
         analyser.getByteFrequencyData(dataArray);
-
         ctx.fillStyle = '#000';
         ctx.fillRect(0, 0, WIDTH, HEIGHT);
-
         for (var i = 0; i < bufferLength; i++) {
           barHeight = dataArray[i] * 2;
 
@@ -1116,39 +1035,35 @@ var Video = function (_Component) {
 
           ctx.fillStyle = '#0c141d'; // 'rgb(' + r + ',' + g + ',' + b + ')';
           ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
-
           x += barWidth + 3;
         }
       }
-
       renderFrame();
     }
   }, {
-    key: 'renderChildren',
+    key: "renderChildren",
     value: function renderChildren() {
       var _this4 = this;
-
-      var props = _extends({}, this.props, {
+      var props = _objectSpread(_objectSpread({}, this.props), {}, {
         video: this.video
       });
       var children = this.props.children;
       // to make sure the children can get video property
-
       if (!this.video) {
         return null;
       }
 
       // only keep <source />, <track />, <MyComponent isVideoChild /> elements
-      return _react2.default.Children.toArray(children).filter(_utils.isVideoChild).map(function (c) {
-        var cprops = void 0;
+      return _react["default"].Children.toArray(children).filter(_utils.isVideoChild).map(function (c) {
+        var cprops;
         if (typeof c.type === 'string') {
           // add onError to <source />
           if (c.type === 'source') {
-            cprops = _extends({}, c.props);
+            cprops = _objectSpread({}, c.props);
             var preOnError = cprops.onError;
             cprops.onError = function () {
               if (preOnError) {
-                preOnError.apply(undefined, arguments);
+                preOnError.apply(void 0, arguments);
               }
               _this4.handleError.apply(_this4, arguments);
             };
@@ -1156,16 +1071,15 @@ var Video = function (_Component) {
         } else {
           cprops = props;
         }
-        return _react2.default.cloneElement(c, cprops);
+        return /*#__PURE__*/_react["default"].cloneElement(c, cprops);
       });
     }
   }, {
-    key: 'handleSubtitleContainerClick',
+    key: "handleSubtitleContainerClick",
     value: function handleSubtitleContainerClick() {
-      var _props29 = this.props,
-          actions = _props29.actions,
-          player = _props29.player;
-
+      var _this$props29 = this.props,
+        actions = _this$props29.actions,
+        player = _this$props29.player;
       if (player.paused) {
         actions.play();
       } else {
@@ -1173,15 +1087,14 @@ var Video = function (_Component) {
       }
     }
   }, {
-    key: 'handleSubtitleClick',
+    key: "handleSubtitleClick",
     value: function handleSubtitleClick(e) {
-      var _props30 = this.props,
-          actions = _props30.actions,
-          player = _props30.player,
-          onScreenSubtitleClick = _props30.onScreenSubtitleClick,
-          controlType = _props30.controlType;
+      var _this$props30 = this.props,
+        actions = _this$props30.actions,
+        player = _this$props30.player,
+        onScreenSubtitleClick = _this$props30.onScreenSubtitleClick,
+        controlType = _this$props30.controlType;
       var currentSubtitleObj = this.state.currentSubtitleObj;
-
       if (controlType === 'advanced') {
         if (onScreenSubtitleClick) {
           onScreenSubtitleClick(currentSubtitleObj);
@@ -1198,234 +1111,145 @@ var Video = function (_Component) {
       e.stopPropagation();
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this5 = this;
-
-      var _props31 = this.props,
-          loop = _props31.loop,
-          poster = _props31.poster,
-          preload = _props31.preload,
-          autoPlay = _props31.autoPlay,
-          playsInline = _props31.playsInline,
-          muted = _props31.muted,
-          crossOrigin = _props31.crossOrigin,
-          videoId = _props31.videoId,
-          fileType = _props31.fileType,
-          userEmail = _props31.userEmail;
-      var _state2 = this.state,
-          isBuffering = _state2.isBuffering,
-          watermark = _state2.watermark,
-          currentSubtitleObj = _state2.currentSubtitleObj;
-
-
+      var _this$props31 = this.props,
+        loop = _this$props31.loop,
+        poster = _this$props31.poster,
+        preload = _this$props31.preload,
+        autoPlay = _this$props31.autoPlay,
+        playsInline = _this$props31.playsInline,
+        muted = _this$props31.muted,
+        crossOrigin = _this$props31.crossOrigin,
+        videoId = _this$props31.videoId,
+        fileType = _this$props31.fileType,
+        userEmail = _this$props31.userEmail;
+      var _this$state2 = this.state,
+        isBuffering = _this$state2.isBuffering,
+        watermark = _this$state2.watermark,
+        currentSubtitleObj = _this$state2.currentSubtitleObj;
       var children = this.getChildren(this.props);
-      return _react2.default.createElement(
-        VideoBlock,
-        {
-          className: 'video-react-player-block',
-          ref: function ref(c) {
-            _this5.playerBlock = c;
-          },
-          style: this.getStyle() },
-        isBuffering && _react2.default.createElement(
-          'div',
-          {
-            className: 'loader-container',
-            onClick: function onClick() {
-              return _this5.togglePlay();
-            }
-          },
-          _react2.default.createElement(_components.Loader, { loaderName: 'SpinningLoader' })
-        ) || null,
-        fileType === 'audio' ? _react2.default.createElement(
-          _react2.default.Fragment,
-          null,
-          _react2.default.createElement('canvas', {
-            id: 'canvas',
-            ref: function ref(c) {
-              _this5.canvas = c;
-            },
-            style: {
-              top: 0,
-              left: 0,
-              position: 'absolute'
-            }
-          }),
-          _react2.default.createElement(
-            'audio',
-            {
-              id: videoId,
-              crossOrigin: 'anonymous',
-              ref: function ref(c) {
-                _this5.video = c;
-              },
-              muted: muted,
-              preload: preload,
-              loop: loop,
-              playsInline: playsInline,
-              autoPlay: autoPlay,
-              poster: poster,
-              onLoadStart: this.handleLoadStart,
-              onWaiting: this.handleWaiting,
-              onCanPlay: this.handleCanPlay,
-              onCanPlayThrough: this.handleCanPlayThrough,
-              onPlaying: this.handlePlaying,
-              onEnded: this.handleEnded,
-              onSeeking: this.handleSeeking,
-              onSeeked: this.handleSeeked,
-              onPlay: this.handlePlay,
-              onPause: this.handlePause,
-              onProgress: this.handleProgress,
-              onDurationChange: this.handleDurationChange,
-              onError: this.handleError,
-              onSuspend: this.handleSuspend,
-              onAbort: this.handleAbort,
-              onEmptied: this.handleEmptied,
-              onStalled: this.handleStalled,
-              onLoadedMetadata: this.handleLoadedMetaData,
-              onLoadedData: this.handleLoadedData,
-              onTimeUpdate: this.handleTimeUpdate,
-              onRateChange: this.handleRateChange,
-              onVolumeChange: this.handleVolumeChange
-            },
-            _react2.default.createElement('track', { kind: 'captions' }),
-            this.renderChildren()
-          )
-        ) : _react2.default.createElement(
-          'video',
-          {
-            id: videoId,
-            crossOrigin: crossOrigin,
-            ref: function ref(c) {
-              _this5.video = c;
-            },
-            muted: muted,
-            preload: preload,
-            loop: loop,
-            playsInline: playsInline,
-            autoPlay: autoPlay,
-            poster: poster,
-            onLoadStart: this.handleLoadStart,
-            onWaiting: this.handleWaiting,
-            onCanPlay: this.handleCanPlay,
-            onCanPlayThrough: this.handleCanPlayThrough,
-            onPlaying: this.handlePlaying,
-            onEnded: this.handleEnded,
-            onSeeking: this.handleSeeking,
-            onSeeked: this.handleSeeked,
-            onPlay: this.handlePlay,
-            onPause: this.handlePause,
-            onProgress: this.handleProgress,
-            onDurationChange: this.handleDurationChange,
-            onError: this.handleError,
-            onSuspend: this.handleSuspend,
-            onAbort: this.handleAbort,
-            onEmptied: this.handleEmptied,
-            onStalled: this.handleStalled,
-            onLoadedMetadata: this.handleLoadedMetaData,
-            onLoadedData: this.handleLoadedData,
-            onTimeUpdate: this.handleTimeUpdate,
-            onRateChange: this.handleRateChange,
-            onVolumeChange: this.handleVolumeChange
-          },
-          _react2.default.createElement('track', { kind: 'captions' }),
-          this.renderChildren()
-        ),
-        children,
-        _react2.default.createElement(
-          'p',
-          { className: 'user-name-wrapper', id: 'watermark-text', style: _extends({}, watermark) },
-          userEmail
-        ),
-        currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && _react2.default.createElement(
-          SubTitleSection,
-          { id: 'outer', onClick: function onClick() {
-              return _this5.handleSubtitleContainerClick();
-            } },
-          _react2.default.createElement(
-            'span',
-            { onClick: function onClick(e) {
-                return _this5.handleSubtitleClick(e);
-              }, className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
-            currentSubtitleObj.line1 && _react2.default.createElement(
-              'pre',
-              null,
-              ' ',
-              currentSubtitleObj.line1,
-              ' '
-            ) || null,
-            currentSubtitleObj.line2 && _react2.default.createElement(
-              'pre',
-              null,
-              ' ',
-              currentSubtitleObj.line2,
-              ' '
-            ) || null
-          )
-        )
-      );
-    }
-  }, {
-    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) {
-      if (val > 1) {
-        val = 1;
-      }
-      if (val < 0) {
-        val = 0;
-      }
-      this.video.volume = val;
-    }
-
-    // video width
-
-  }, {
-    key: 'videoWidth',
-    get: function get() {
-      return this.video.videoWidth;
-    }
-
-    // video height
-
-  }, {
-    key: 'videoHeight',
-    get: function get() {
-      return this.video.videoHeight;
+      return /*#__PURE__*/_react["default"].createElement(VideoBlock, {
+        className: "video-react-player-block",
+        ref: function ref(c) {
+          _this5.playerBlock = c;
+        },
+        style: this.getStyle()
+      }, isBuffering && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loader-container",
+        onClick: function onClick() {
+          return _this5.togglePlay();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+        loaderName: "SpinningLoader"
+      })) || null, fileType === 'audio' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("canvas", {
+        id: "canvas",
+        ref: function ref(c) {
+          _this5.canvas = c;
+        },
+        style: {
+          top: 0,
+          left: 0,
+          position: 'absolute'
+        }
+      }), /*#__PURE__*/_react["default"].createElement("audio", {
+        id: videoId,
+        crossOrigin: "anonymous",
+        ref: function ref(c) {
+          _this5.video = c;
+        },
+        muted: muted,
+        preload: preload,
+        loop: loop,
+        playsInline: playsInline,
+        autoPlay: autoPlay,
+        poster: poster,
+        onLoadStart: this.handleLoadStart,
+        onWaiting: this.handleWaiting,
+        onCanPlay: this.handleCanPlay,
+        onCanPlayThrough: this.handleCanPlayThrough,
+        onPlaying: this.handlePlaying,
+        onEnded: this.handleEnded,
+        onSeeking: this.handleSeeking,
+        onSeeked: this.handleSeeked,
+        onPlay: this.handlePlay,
+        onPause: this.handlePause,
+        onProgress: this.handleProgress,
+        onDurationChange: this.handleDurationChange,
+        onError: this.handleError,
+        onSuspend: this.handleSuspend,
+        onAbort: this.handleAbort,
+        onEmptied: this.handleEmptied,
+        onStalled: this.handleStalled,
+        onLoadedMetadata: this.handleLoadedMetaData,
+        onLoadedData: this.handleLoadedData,
+        onTimeUpdate: this.handleTimeUpdate,
+        onRateChange: this.handleRateChange,
+        onVolumeChange: this.handleVolumeChange
+      }, /*#__PURE__*/_react["default"].createElement("track", {
+        kind: "captions"
+      }), this.renderChildren())) : /*#__PURE__*/_react["default"].createElement("video", {
+        id: videoId,
+        crossOrigin: crossOrigin,
+        ref: function ref(c) {
+          _this5.video = c;
+        },
+        muted: muted,
+        preload: preload,
+        loop: loop,
+        playsInline: playsInline,
+        autoPlay: autoPlay,
+        poster: poster,
+        onLoadStart: this.handleLoadStart,
+        onWaiting: this.handleWaiting,
+        onCanPlay: this.handleCanPlay,
+        onCanPlayThrough: this.handleCanPlayThrough,
+        onPlaying: this.handlePlaying,
+        onEnded: this.handleEnded,
+        onSeeking: this.handleSeeking,
+        onSeeked: this.handleSeeked,
+        onPlay: this.handlePlay,
+        onPause: this.handlePause,
+        onProgress: this.handleProgress,
+        onDurationChange: this.handleDurationChange,
+        onError: this.handleError,
+        onSuspend: this.handleSuspend,
+        onAbort: this.handleAbort,
+        onEmptied: this.handleEmptied,
+        onStalled: this.handleStalled,
+        onLoadedMetadata: this.handleLoadedMetaData,
+        onLoadedData: this.handleLoadedData,
+        onTimeUpdate: this.handleTimeUpdate,
+        onRateChange: this.handleRateChange,
+        onVolumeChange: this.handleVolumeChange
+      }, /*#__PURE__*/_react["default"].createElement("track", {
+        kind: "captions"
+      }), this.renderChildren()), children, /*#__PURE__*/_react["default"].createElement("p", {
+        className: "user-name-wrapper",
+        id: "watermark-text",
+        style: _objectSpread({}, watermark)
+      }, userEmail), /*#__PURE__*/_react["default"].createElement(SubTitleSection, {
+        id: "outer",
+        onClick: function onClick() {
+          return _this5.handleSubtitleContainerClick();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: function onClick(e) {
+          return _this5.handleSubtitleClick(e);
+        },
+        className: "subtitleContainer",
+        style: _objectSpread({}, currentSubtitleObj.style)
+      }, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("pre", {
+        id: "subtitleLineOne"
+      }, " ", currentSubtitleObj.line1, " ") || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("pre", {
+        id: "subtitleLineTwo"
+      }, " ", currentSubtitleObj.line2, " ") || null)));
     }
   }]);
-
   return Video;
 }(_react.Component);
-
-exports.default = Video;
-
-
+exports["default"] = Video;
 Video.propTypes = propTypes;
 Video.defaultProps = defaultProps;
 Video.displayName = 'Video';