@desynova-digital/player 4.0.1 → 4.0.2

package/components/Video.js

@@ -0,0 +1,1280 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  startTime: _propTypes.PropTypes.number,
+  loop: _propTypes.PropTypes.bool,
+  muted: _propTypes.PropTypes.bool,
+  autoPlay: _propTypes.PropTypes.bool,
+  playsInline: _propTypes.PropTypes.bool,
+  src: _propTypes.PropTypes.string,
+  poster: _propTypes.PropTypes.string,
+  className: _propTypes.PropTypes.string,
+  fileType: _propTypes.PropTypes.oneOf(['video', 'image', 'audio']),
+  preload: _propTypes.PropTypes.oneOf(['auto', 'metadata', 'none']),
+  crossOrigin: _propTypes.PropTypes.string,
+  fluid: _propTypes.PropTypes.bool,
+  children: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.element),
+  store: _propTypes.PropTypes.instanceOf(Object),
+  width: _propTypes.PropTypes.number,
+  activeTrackIndex: _propTypes.PropTypes.number,
+  height: _propTypes.PropTypes.number,
+  videoId: _propTypes.PropTypes.string,
+  onLoadStart: _propTypes.PropTypes.func,
+  onWaiting: _propTypes.PropTypes.func,
+  onCanPlay: _propTypes.PropTypes.func,
+  onCanPlayThrough: _propTypes.PropTypes.func,
+  onPlaying: _propTypes.PropTypes.func,
+  onEnded: _propTypes.PropTypes.func,
+  onSeeking: _propTypes.PropTypes.func,
+  onSeeked: _propTypes.PropTypes.func,
+  onPlay: _propTypes.PropTypes.func,
+  onPause: _propTypes.PropTypes.func,
+  onProgress: _propTypes.PropTypes.func,
+  onDurationChange: _propTypes.PropTypes.func,
+  onError: _propTypes.PropTypes.func,
+  onSuspend: _propTypes.PropTypes.func,
+  onAbort: _propTypes.PropTypes.func,
+  onEmptied: _propTypes.PropTypes.func,
+  onStalled: _propTypes.PropTypes.func,
+  onLoadedMetadata: _propTypes.PropTypes.func,
+  onLoadedData: _propTypes.PropTypes.func,
+  onTimeUpdate: _propTypes.PropTypes.func,
+  onRateChange: _propTypes.PropTypes.func,
+  onVolumeChange: _propTypes.PropTypes.func,
+  onResize: _propTypes.PropTypes.func,
+  aspectRatio: _propTypes.PropTypes.string,
+  onPlayerClose: _propTypes.PropTypes.func,
+  userEmail: _propTypes.PropTypes.string,
+  playerSelectedMarker: _propTypes.PropTypes.instanceOf(Object),
+  theme: _propTypes.PropTypes.string
+};
+var defaultProps = {
+  startTime: 0,
+  loop: false,
+  muted: false,
+  autoPlay: false,
+  playsInline: false,
+  preload: 'auto',
+  aspectRatio: 'auto',
+  crossOrigin: 'anonymous',
+  theme: 'dark'
+};
+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: ", ";\n    line-height: 20px;\n    position: absolute;\n\n    em {\n      font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n    }\n\n    strong{\n      font-weight: bold; \n    }\n    \n  }\n  .longSubtitleStyles {\n    overflow-y: auto;\n    height: fit-content;\n    max-height: 70px;\n    max-width: 75%;\n    width: fit-content;\n  }\n"])), function (props) {
+  return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
+});
+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 = exports["default"] = /*#__PURE__*/function (_Component) {
+  _inherits(Video, _Component);
+  function Video(props) {
+    var _this;
+    _classCallCheck(this, Video);
+    _this = _callSuper(this, Video, [props]);
+    _this.state = {
+      audioTracks: [],
+      isM3U8: false,
+      watermark: {
+        color: 'rgb(255, 255, 255)',
+        position: 'absolute',
+        'font-family': 'SFUIText-Regular',
+        'text-shadow': '0 0 4px rgb(0 0 0 / 50%)',
+        'font-size': '12px',
+        opacity: '0.6',
+        display: 'block',
+        top: '0px',
+        left: '0px'
+      },
+      watermarkInterval: -1,
+      isBuffering: false,
+      currentSubtitleObj: {}
+    };
+    _this.video = null; // the html5 video
+    _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",
+    value: function componentDidMount() {
+      var src = this.props.src;
+      var isM3U8 = src.split('.').pop() === 'm3u8' ? true : false;
+      this.setState({
+        isM3U8: isM3U8
+      });
+      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;
+      }
+      this.forceUpdate(); // make sure the children can get the video property
+      var watermarkInterval = setInterval(this.checkWatermark, 20000);
+      this.setState({
+        watermarkInterval: watermarkInterval
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      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 = '';
+      }
+      clearInterval(watermarkInterval);
+    }
+
+    /**
+     * This function is triggered on interval to shuffle the position of watermark on Player area
+     */
+  }, {
+    key: "checkWatermark",
+    value: function checkWatermark() {
+      var watermark = this.state.watermark;
+      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 {
+        video_player = document.querySelector('.video-react-player-block').getBoundingClientRect();
+        watermark_dimension = watermark_text.getBoundingClientRect();
+        text_css = watermark_text.style;
+        bool_text = text_css.position !== 'absolute' || text_css.opacity !== '0.6' || text_css['font-family'] !== 'SFUIText-Regular' && text_css['font-family'] !== '"SFUIText-Regular"';
+        bool_text = bool_text || text_css.display !== 'block';
+        bool_text = bool_text || text_css.top !== watermark.top;
+        bool_text = bool_text || text_css.left !== watermark.left;
+        bool_text = bool_text || text_css.length !== 9 || text_css['font-size'] !== '12px';
+        bool_text = bool_text || text_css.color !== 'rgb(255, 255, 255)';
+        bool_text = bool_text || userEmail !== watermark_text.innerText;
+        if (bool_text) {
+          onPlayerClose();
+        }
+      }
+      watermark.left = (Math.random() * (video_player.width - watermark_dimension.width)).toFixed(0) + 'px';
+      watermark.top = (Math.random() * (video_player.height - watermark_dimension.height)).toFixed(0) + 'px';
+      this.setState({
+        watermark: watermark
+      });
+    }
+  }, {
+    key: "setupHLS",
+    value: function setupHLS(src) {
+      var _this2 = this;
+      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(_hls["default"].Events.MEDIA_ATTACHED, function () {
+        self.hls.loadSource(src);
+      });
+      this.hls.on(_hls["default"].Events.MANIFEST_PARSED, function (event, data) {
+        actions.handleAudioTracks(data.audioTracks);
+      });
+      this.hls.once(_hls["default"].Events.AUDIO_TRACK_LOADED, function (event, data) {
+        var trackIndex = activeTrackIndex || 0;
+        actions.handleAudioTrackChange(self.props.player.audioTracksArr[trackIndex]);
+      });
+      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 _hls["default"].ErrorTypes.NETWORK_ERROR:
+              // try to recover network error
+              _this2.hls.startLoad();
+              break;
+            case _hls["default"].ErrorTypes.MEDIA_ERROR:
+              _this2.hls.recoverMediaError();
+              break;
+            default:
+              // cannot recover
+              _this2.hls.destroy();
+              break;
+          }
+        } else if (data.details === 'internalException' && data.type === 'otherError' || data.details === 'bufferStalledError' && data.type === 'mediaError') {
+          _this2.hls.startLoad();
+        }
+      });
+    }
+  }, {
+    key: "getDefaultChildren",
+    value: function getDefaultChildren(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",
+    value: function getChildren(props) {
+      var propsWithoutChildren = _objectSpread(_objectSpread({}, props), {}, {
+        children: null
+      });
+      var children = this.props.children;
+      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",
+    value: function setWidthOrHeight(style, name, value) {
+      var styleVal;
+      if (typeof value === 'string') {
+        if (value === 'auto') {
+          styleVal = 'auto';
+        } else if (value.match(/\d+%/)) {
+          styleVal = value;
+        }
+      } else if (typeof value === 'number') {
+        styleVal = "".concat(value, "px");
+      }
+      Object.assign(style, _defineProperty({}, name, styleVal));
+    }
+  }, {
+    key: "getStyle",
+    value: function getStyle() {
+      var fluid = this.props.fluid;
+      var _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
+      var style = {};
+      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';
+        // aspectRatio = `${player.videoWidth}:${player.videoHeight}`;
+      } else {
+        // Or use a default. The video element's is 2:1, but 16:9 is more common.
+        aspectRatio = '16:9';
+      }
+
+      // 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;
+      } else {
+        // Or use the video's metadata, or use the video el's default of 300
+        width = player.videoWidth || 400;
+        height = width * ratioMultiplier;
+      }
+      if (fluid) {
+        style.paddingTop = "".concat(ratioMultiplier * 100, "%");
+      } else {
+        // If Width contains 'auto', set 'auto' in style
+        this.setWidthOrHeight(style, 'width', width);
+        this.setWidthOrHeight(style, 'height', height);
+      }
+      style.width = '100%';
+      return style;
+    }
+
+    // get all video properties
+  }, {
+    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;
+      }, {});
+    }
+
+    // get playback rate
+  }, {
+    key: "playbackRate",
+    get: function get() {
+      return this.video.playbackRate;
+    }
+
+    /*
+     * set playback rate
+     * speed of video
+     */,
+    set: function set(rate) {
+      this.video.playbackRate = rate;
+    }
+  }, {
+    key: "muted",
+    get: function get() {
+      return this.video.muted;
+    },
+    set: function set(val) {
+      this.video.muted = val;
+    }
+  }, {
+    key: "volume",
+    get: function get() {
+      return this.video.volume;
+    },
+    set: function set(val) {
+      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 (_hls["default"].isSupported() && isM3U8) {
+          this.hls.detachMedia();
+        } else {
+          this.video.src = '';
+        }
+        var m3u8 = newProps.src.split('.').pop() === 'm3u8' ? true : false;
+        this.setState({
+          isM3U8: m3u8
+        });
+        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;
+      }
+      if (newProps.subtitleObj && newProps.subtitleObj.field && JSON.stringify(newProps.subtitleObj) !== JSON.stringify(currentSubtitleObj)) {
+        if (newProps.subtitleObj && newProps.subtitleObj.field && !newProps.subtitleObj.field.line1) {
+          this.setState({
+            currentSubtitleObj: {}
+          });
+        } else if (newProps.subtitleObj && newProps.subtitleObj.field && newProps.subtitleObj.field.line1) {
+          var style = this.getSubtitleStyle(newProps.subtitleObj.field);
+          this.setState({
+            currentSubtitleObj: {
+              charactername: newProps.subtitleObj.field.charactername,
+              line1: newProps.subtitleObj.field.line1,
+              line2: newProps.subtitleObj.field.line2,
+              start_time: newProps.subtitleObj.field.in_time,
+              end_time: newProps.subtitleObj.field.out_time,
+              style: style
+            }
+          });
+        }
+      }
+      if (newProps.markers.length && markers.length && newProps.markers[0].values.length !== markers[0].values.length) {
+        this.displaySubtitle(newProps.markers);
+      }
+      if (newProps.subtitleReadOnly && newProps.subtitleDataList) {
+        this.displaySubtitle(newProps.subtitleDataList);
+      }
+    }
+
+    // play the video
+  }, {
+    key: "play",
+    value: function play() {
+      var promise = this.video.play();
+      if (promise !== undefined) {
+        promise["catch"](function () {}).then(function () {});
+      }
+    }
+
+    // pause the video
+  }, {
+    key: "pause",
+    value: function pause() {
+      var promise = this.video.pause();
+      if (promise !== undefined) {
+        promise["catch"](function () {}).then(function () {});
+      }
+    }
+
+    // Change the video source and re-load the video:
+  }, {
+    key: "load",
+    value: function load() {
+      this.video.load();
+    }
+
+    // Add a new text track to the video
+  }, {
+    key: "addTextTrack",
+    value: function addTextTrack() {
+      var _this$video;
+      (_this$video = this.video).addTextTrack.apply(_this$video, arguments);
+    }
+
+    // Check if your browser can play different types of video:
+  }, {
+    key: "canPlayType",
+    value: function canPlayType() {
+      var _this$video2;
+      (_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
+    }
+
+    // toggle play
+  }, {
+    key: "togglePlay",
+    value: function togglePlay() {
+      if (this.video.paused) {
+        this.play();
+      } else {
+        this.pause();
+      }
+    }
+
+    // seek video by time
+  }, {
+    key: "seek",
+    value: function seek(time) {
+      try {
+        var updatedTime = 0;
+        var frameRate = this.props.frameRate;
+        if (time < 0) {
+          updatedTime = 0;
+        } else {
+          updatedTime = time > this.video.duration ? this.video.duration : (0, _utils.handleAdjustingVideoAsPerFrame)(time, frameRate);
+        }
+        this.video.currentTime = updatedTime;
+      } catch (e) {
+        // console.log(e, 'Video is not ready.')
+      }
+    }
+    // jump forward x seconds
+  }, {
+    key: "forward",
+    value: function forward(seconds) {
+      this.seek(this.video.currentTime + seconds);
+    }
+
+    // jump back x seconds
+  }, {
+    key: "replay",
+    value: function replay(seconds) {
+      this.forward(-seconds);
+    }
+
+    // enter or exist full screen
+  }, {
+    key: "toggleFullscreen",
+    value: function toggleFullscreen() {
+      var _this$props5 = this.props,
+        player = _this$props5.player,
+        actions = _this$props5.actions;
+      actions.toggleFullscreen(player);
+    }
+
+    /*
+     * Fired when the user agent
+     * begins looking for media data
+     */
+  }, {
+    key: "handleLoadStart",
+    value: function handleLoadStart() {
+      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(void 0, arguments);
+      }
+    }
+
+    /*
+     * A handler for events that
+     * signal that waiting has ended
+     */
+  }, {
+    key: "handleCanPlay",
+    value: function handleCanPlay() {
+      var _this$props7 = this.props,
+        actions = _this$props7.actions,
+        onCanPlay = _this$props7.onCanPlay;
+      actions.handleCanPlay(this.getProperties());
+      if (onCanPlay) {
+        onCanPlay.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * A handler for events that
+     * signal that waiting has ended
+     */
+  }, {
+    key: "handleCanPlayThrough",
+    value: function handleCanPlayThrough() {
+      var _this$props8 = this.props,
+        actions = _this$props8.actions,
+        onCanPlayThrough = _this$props8.onCanPlayThrough;
+      actions.handleCanPlayThrough(this.getProperties());
+      if (onCanPlayThrough) {
+        onCanPlayThrough.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * A handler for events that
+     * signal that waiting has ended
+     */
+  }, {
+    key: "handlePlaying",
+    value: function handlePlaying() {
+      var _this$props9 = this.props,
+        actions = _this$props9.actions,
+        onPlaying = _this$props9.onPlaying;
+      actions.handlePlaying(this.getProperties());
+      if (onPlaying) {
+        onPlaying.apply(void 0, arguments);
+      }
+    }
+
+    // Fired whenever the media has been started
+  }, {
+    key: "handlePlay",
+    value: function handlePlay() {
+      var _this$props10 = this.props,
+        actions = _this$props10.actions,
+        onPlay = _this$props10.onPlay;
+      actions.handlePlay(this.getProperties());
+      if (onPlay) {
+        onPlay.apply(void 0, arguments);
+      }
+    }
+
+    // Fired whenever the media has been paused
+  }, {
+    key: "handlePause",
+    value: function handlePause() {
+      var _this$props11 = this.props,
+        actions = _this$props11.actions,
+        onPause = _this$props11.onPause;
+      actions.handlePause(this.getProperties());
+      if (onPause) {
+        onPause.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fired when the duration of
+     * the media resource is first known or changed
+     */
+  }, {
+    key: "handleDurationChange",
+    value: function handleDurationChange() {
+      var _this$props12 = this.props,
+        actions = _this$props12.actions,
+        onDurationChange = _this$props12.onDurationChange;
+      actions.handleDurationChange(this.getProperties());
+      if (onDurationChange) {
+        onDurationChange.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fired while the user agent
+     * is downloading media data
+     */
+  }, {
+    key: "handleProgress",
+    value: function handleProgress() {
+      var _this$props13 = this.props,
+        actions = _this$props13.actions,
+        onProgress = _this$props13.onProgress;
+      if (this.video) {
+        actions.handleProgressChange(this.getProperties());
+      }
+      if (onProgress) {
+        onProgress.apply(void 0, arguments);
+      }
+    }
+  }, {
+    key: "getSubtitleStyle",
+    value: function getSubtitleStyle(data) {
+      var style = {};
+      style.top = data && data.text_position === 'text_position_top' ? '0px' : '';
+      style.bottom = data && data.text_position === 'text_position_bottom' ? '0px' : '';
+      style.left = data && data.text_alignment === 'text_aligned_left' ? '0px' : '';
+      style.right = data && data.text_alignment === 'text_aligned_right' ? '0px' : '';
+      return style;
+    }
+  }, {
+    key: "displaySubtitle",
+    value: function displaySubtitle(marker) {
+      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();
+      }
+      var currentTime = this.video.currentTime;
+      var currentMarker = marker || markers;
+      if (subtitleReadOnly) {
+        currentMarker = marker || subtitleDataList;
+      }
+      if (currentMarker && currentMarker[0] && currentMarker[0].name === 'Subtitle') {
+        var values = currentMarker[0].values;
+        var currentValue = values.filter(function (ele) {
+          return ele.start_time <= currentTime && ele.end_time >= currentTime;
+        });
+        var style = this.getSubtitleStyle(currentValue[0]);
+        var currentLine1 = currentSubtitleObj && currentSubtitleObj.line1 || '';
+        var propsLine1 = currentValue[0] && currentValue[0].line1 || '';
+        if (currentValue && currentValue.length && (currentSubtitleObj.start_time === currentValue[0].start_time || currentSubtitleObj.end_time === currentValue[0].end_time) && currentLine1 === propsLine1 || Object.keys(currentSubtitleObj).length && currentValue.length && currentSubtitleObj.start_time && currentValue.length === currentSubtitleObj.start_time.length && currentSubtitleObj.end_time && currentValue.length === currentSubtitleObj.end_time.length && currentLine1 === propsLine1) {
+          return;
+        } else {
+          this.setState({
+            currentSubtitleObj: {
+              charactername: currentValue[0] && currentValue[0].charactername || '',
+              line1: currentValue[0] && currentValue[0].line1 || '',
+              line2: currentValue[0] && currentValue[0].line2 || '',
+              start_time: currentValue[0] && currentValue[0].start_time || 0,
+              end_time: currentValue[0] && currentValue[0].end_time || 0,
+              style: style
+            }
+          });
+        }
+      }
+    }
+
+    /*
+     * Fired when the end of the media resource
+     * is reached (currentTime == duration)
+     */
+  }, {
+    key: "handleEnded",
+    value: function handleEnded() {
+      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();
+      } else if (!player.paused) {
+        this.pause();
+      }
+      actions.handleEnd(this.getProperties());
+      if (onEnded) {
+        onEnded.apply(void 0, arguments);
+      }
+    }
+
+    // Fired whenever the media begins waiting
+  }, {
+    key: "handleWaiting",
+    value: function handleWaiting() {
+      var _this$props16 = this.props,
+        actions = _this$props16.actions,
+        onWaiting = _this$props16.onWaiting;
+      actions.handleWaiting(this.getProperties());
+      if (onWaiting) {
+        onWaiting.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fired whenever the player
+     * is jumping to a new time
+     */
+  }, {
+    key: "handleSeeking",
+    value: function handleSeeking() {
+      var _this$props17 = this.props,
+        actions = _this$props17.actions,
+        onSeeking = _this$props17.onSeeking;
+      actions.handleSeeking(this.getProperties());
+      if (onSeeking) {
+        onSeeking.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fired when the player has
+     * finished jumping to a new time
+     */
+  }, {
+    key: "handleSeeked",
+    value: function handleSeeked() {
+      var _this$props18 = this.props,
+        actions = _this$props18.actions,
+        onSeeked = _this$props18.onSeeked;
+      actions.handleSeeked(this.getProperties());
+      if (onSeeked) {
+        onSeeked.apply(void 0, arguments);
+      }
+    }
+
+    // Handle Fullscreen Change
+  }, {
+    key: "handleFullscreenChange",
+    value: function handleFullscreenChange() {}
+
+    /*
+     * Fires when the browser is
+     * intentionally not getting media data
+     */
+  }, {
+    key: "handleSuspend",
+    value: function handleSuspend() {
+      var _this$props19 = this.props,
+        actions = _this$props19.actions,
+        onSuspend = _this$props19.onSuspend;
+      actions.handleSuspend(this.getProperties());
+      if (onSuspend) {
+        onSuspend.apply(void 0, arguments);
+      }
+    }
+
+    // Fires when the loading of an audio/video is aborted
+  }, {
+    key: "handleAbort",
+    value: function handleAbort() {
+      var _this$props20 = this.props,
+        actions = _this$props20.actions,
+        onAbort = _this$props20.onAbort;
+      actions.handleAbort(this.getProperties());
+      if (onAbort) {
+        onAbort.apply(void 0, arguments);
+      }
+    }
+
+    // Fires when the current playlist is empty
+  }, {
+    key: "handleEmptied",
+    value: function handleEmptied() {
+      var _this$props21 = this.props,
+        actions = _this$props21.actions,
+        onEmptied = _this$props21.onEmptied;
+      actions.handleEmptied(this.getProperties());
+      if (onEmptied) {
+        onEmptied.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fires when the browser is trying to
+     * get media data, but data is not available
+     */
+  }, {
+    key: "handleStalled",
+    value: function handleStalled() {
+      var _this$props22 = this.props,
+        actions = _this$props22.actions,
+        onStalled = _this$props22.onStalled;
+      actions.handleStalled(this.getProperties());
+      if (onStalled) {
+        onStalled.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fires when the browser has loaded
+     * meta data for the audio/video
+     */
+  }, {
+    key: "handleLoadedMetaData",
+    value: function handleLoadedMetaData() {
+      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(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fires when the browser has loaded
+     * the current frame of the audio/video
+     */
+  }, {
+    key: "handleLoadedData",
+    value: function handleLoadedData() {
+      var _this$props24 = this.props,
+        actions = _this$props24.actions,
+        onLoadedData = _this$props24.onLoadedData;
+      actions.handleLoadedData(this.getProperties());
+      if (onLoadedData) {
+        onLoadedData.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fires when the current
+     * playback position has changed
+     */
+  }, {
+    key: "handleTimeUpdate",
+    value: function handleTimeUpdate() {
+      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();
+        actions.seek(rightMarker);
+        actions.handleVideoPreview(false);
+      }
+      if (onTimeUpdate) {
+        onTimeUpdate.apply(void 0, arguments);
+      }
+      this.displaySubtitle();
+    }
+
+    /**
+     * Fires when the playing speed of the audio/video is changed
+     */
+  }, {
+    key: "handleRateChange",
+    value: function handleRateChange() {
+      var _this$props26 = this.props,
+        actions = _this$props26.actions,
+        onRateChange = _this$props26.onRateChange;
+      actions.handleRateChange(this.getProperties());
+      if (onRateChange) {
+        onRateChange.apply(void 0, arguments);
+      }
+    }
+
+    // Fires when the volume has been changed
+  }, {
+    key: "handleVolumeChange",
+    value: function handleVolumeChange() {
+      var _this$props27 = this.props,
+        actions = _this$props27.actions,
+        onVolumeChange = _this$props27.onVolumeChange;
+      actions.handleVolumeChange(this.getProperties());
+      if (onVolumeChange) {
+        onVolumeChange.apply(void 0, arguments);
+      }
+    }
+
+    /*
+     * Fires when an error occurred
+     * during the loading of an audio/video
+     */
+  }, {
+    key: "handleError",
+    value: function handleError() {
+      var _this$props28 = this.props,
+        actions = _this$props28.actions,
+        onError = _this$props28.onError;
+      actions.handleError(this.getProperties());
+      if (onError) {
+        onError.apply(void 0, arguments);
+      }
+    }
+  }, {
+    key: "handleKeypress",
+    value: function handleKeypress() {}
+  }, {
+    key: "audioVisualizer",
+    value: function audioVisualizer() {
+      // getting audio nodes
+      var context = new AudioContext({
+        latencyHint: 'interactive',
+        sampleRate: 44100
+      });
+      var src = context.createMediaElementSource(this.video);
+      var analyser = context.createAnalyser();
+
+      //visualising audio nodes on canvas
+      var canvas = this.canvas;
+      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;
+
+          /*
+           * var r = barHeight + (25 * (i / bufferLength));
+           * var g = 250 * (i / bufferLength);
+           * var b = s50;
+           */
+
+          ctx.fillStyle = '#0c141d'; // 'rgb(' + r + ',' + g + ',' + b + ')';
+          ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
+          x += barWidth + 3;
+        }
+      }
+      renderFrame();
+    }
+  }, {
+    key: "renderChildren",
+    value: function renderChildren() {
+      var _this4 = this;
+      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 _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 = _objectSpread({}, c.props);
+            var preOnError = cprops.onError;
+            cprops.onError = function () {
+              if (preOnError) {
+                preOnError.apply(void 0, arguments);
+              }
+              _this4.handleError.apply(_this4, arguments);
+            };
+          }
+        } else {
+          cprops = props;
+        }
+        return /*#__PURE__*/_react["default"].cloneElement(c, cprops);
+      });
+    }
+  }, {
+    key: "handleSubtitleContainerClick",
+    value: function handleSubtitleContainerClick() {
+      var _this$props29 = this.props,
+        actions = _this$props29.actions,
+        player = _this$props29.player;
+      if (player.paused) {
+        actions.play();
+      } else {
+        actions.pause();
+      }
+    }
+  }, {
+    key: "handleSubtitleClick",
+    value: function handleSubtitleClick(e) {
+      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);
+        }
+        actions.pause();
+      } else {
+        if (player.paused) {
+          actions.play();
+        } else {
+          actions.pause();
+        }
+      }
+      actions.handleVideoRewind(false);
+      e.stopPropagation();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      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,
+        theme = _this$props31.theme;
+      var _this$state2 = this.state,
+        isBuffering = _this$state2.isBuffering,
+        watermark = _this$state2.watermark,
+        currentSubtitleObj = _this$state2.currentSubtitleObj;
+      var children = this.getChildren(this.props);
+      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, {
+        theme: theme,
+        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",
+        currentSubtitleObj: currentSubtitleObj,
+        onClick: function onClick() {
+          return _this5.handleSubtitleContainerClick();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: function onClick(e) {
+          return _this5.handleSubtitleClick(e);
+        },
+        className: "subtitleContainer longSubtitleStyles",
+        style: _objectSpread({}, currentSubtitleObj.style)
+      }, currentSubtitleObj.charactername && /*#__PURE__*/_react["default"].createElement("p", {
+        id: "charactername",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.charactername
+        }
+      }) || null, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("p", {
+        id: "subtitleLineOne",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.line1
+        }
+      }) || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("p", {
+        id: "subtitleLineTwo",
+        dangerouslySetInnerHTML: {
+          __html: currentSubtitleObj.line2
+        }
+      }) || null)));
+    }
+  }]);
+  return Video;
+}(_react.Component);
+Video.propTypes = propTypes;
+Video.defaultProps = defaultProps;
+Video.displayName = 'Video';