@desynova-digital/player 3.9.7 → 4.0.1

package/media/Video.js

@@ -0,0 +1,684 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hls = _interopRequireDefault(require("hls.js"));
+var _colors = _interopRequireDefault(require("../utils/colors"));
+var _components = require("@desynova-digital/components");
+var _components2 = require("@desynova-digital/components/components");
+var _SDOutline = _interopRequireDefault(require("./SDOutline"));
+var _AudioMeter = _interopRequireDefault(require("./AudioMeter"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 _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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  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)
+};
+var defaultProps = {
+  startTime: 0,
+  loop: false,
+  muted: false,
+  autoPlay: false,
+  playsInline: false,
+  preload: 'auto',
+  aspectRatio: 'auto',
+  crossOrigin: 'anonymous'
+};
+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 PlayButton = (0, _styledComponents["default"])(_components.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 100px;\n  height: 100px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: none;\n  z-index: 1;\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n"])), function (props) {
+  return _colors["default"].common.video[props.assetType].buttonGradient;
+}, function (props) {
+  return _colors["default"].common.video[props.assetType].buttonGradient;
+});
+var AudioMeterBlock = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  bottom: ", ";\n  right: 15px;\n  padding: ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border-radius: ", ";\n  display: ", ";\n  margin: ", ";\n  transition: all 0.1s ease-in-out;\n  -moz-transition: all 0.1s ease-in-out;\n  -webkit-transition: all 0.1s ease-in-out;\n  -ms-transition: all 0.1s ease-in-out;\n  -o-transition: all 0.1s ease-in-out;\n"])), function (props) {
+  return !props.active ? '50px' : '55px';
+}, function (props) {
+  return !props.active ? '50px !important' : 'calc(100% - 80px)';
+}, function (props) {
+  return !props.active ? '5px' : '0px';
+}, function (props) {
+  return !props.active ? '5px' : '0px';
+}, function (props) {
+  return !props.active ? 'rgba(243, 243, 243, 0.5)' : 'rgba(0, 0, 0, 1)';
+}, function (props) {
+  return !props.active ? '5px' : '0px';
+}, function (props) {
+  return !props.active ? 'block' : 'inline-block';
+}, function (props) {
+  return !props.active ? '0' : '20px 0';
+});
+var Video = /*#__PURE__*/function (_Component) {
+  _inherits(Video, _Component);
+  var _super = _createSuper(Video);
+  function Video(props) {
+    var _this;
+    _classCallCheck(this, Video);
+    _this = _super.call(this, props);
+    /*
+     * Fires when the browser has loaded
+     * meta data for the audio/video
+     */
+    _defineProperty(_assertThisInitialized(_this), "handleLoadedMetaData", function () {
+      var actionClick = _this.props.actionClick;
+      actionClick({
+        action: 'handle_loaded_meta_data',
+        value: _this.video.duration
+      });
+    });
+    /*
+     * Fires when the current
+     * playback position has changed
+     */
+    _defineProperty(_assertThisInitialized(_this), "handleTimeUpdate", function () {
+      var _this$props = _this.props,
+        actionClick = _this$props.actionClick,
+        previewActive = _this$props.previewActive,
+        rightMarker = _this$props.playerSelectedMarker.rightMarker;
+      if (previewActive && _this.video.currentTime >= rightMarker) {
+        actionClick({
+          action: 'pause'
+        });
+        actionClick({
+          action: 'seek',
+          value: rightMarker
+        });
+        actionClick({
+          action: 'handle_video_preview',
+          value: false
+        });
+      }
+      actionClick({
+        action: 'handle_time_update',
+        value: _this.video.currentTime
+      });
+      _this.displaySubtitle();
+    });
+    _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(props.store);
+    _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.handleEnded = _this.handleEnded.bind(_assertThisInitialized(_this));
+    _this.handleLoadedMetaData = _this.handleLoadedMetaData.bind(_assertThisInitialized(_this));
+    _this.handleTimeUpdate = _this.handleTimeUpdate.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 HLSConfig = this.props.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$props2 = this.props,
+        onPlayerClose = _this$props2.onPlayerClose,
+        userEmail = _this$props2.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$props3 = this.props,
+        actions = _this$props3.actions,
+        activeTrackIndex = _this$props3.activeTrackIndex,
+        actionClick = _this$props3.actionClick;
+      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) {
+        var trackIndex = activeTrackIndex || 0;
+        //todo handle below actions and merge it into same setstate.
+        actionClick({
+          action: 'handle_audio_tracks',
+          value: data.audioTracks
+        });
+        actionClick({
+          action: 'handle_audio_track_change',
+          value: data.audioTracks[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') {
+          _this2.hls.startLoad();
+        }
+      });
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(newProps) {
+      var _this3 = this;
+      var _this$props4 = this.props,
+        src = _this$props4.src,
+        currentSubtitleObj = _this$props4.currentSubtitleObj,
+        markers = _this$props4.markers;
+      if (newProps.src !== src) {
+        var isM3U8 = this.state.isM3U8;
+        if (_hls["default"].isSupported() && isM3U8 && this.hls.media) {
+          this.hls.detachMedia();
+        } else {
+          this.video.src = '';
+        }
+        setTimeout(function () {
+          var m3u8 = newProps.src.split('.').pop() === 'm3u8' ? true : false;
+          _this3.setState({
+            isM3U8: m3u8
+          });
+          if (_hls["default"].isSupported() && m3u8) {
+            var HLSConfig = _this3.props.HLSConfig;
+            _this3.hls = new _hls["default"](HLSConfig);
+            _this3.setupHLS(newProps.src);
+          } else {
+            _this3.video.src = newProps.src;
+          }
+          _this3.forceUpdate();
+        }, 0); // 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: {
+              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 {
+        this.video.currentTime = time;
+      } 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);
+    }
+  }, {
+    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$props6 = this.props,
+        markers = _this$props6.markers,
+        resetSubtitleData = _this$props6.resetSubtitleData,
+        subtitleReadOnly = _this$props6.subtitleReadOnly,
+        subtitleDataList = _this$props6.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 && currentValue.length === currentSubtitleObj.start_time.length && currentValue.length === currentSubtitleObj.end_time.length && currentLine1 === propsLine1) {
+          return;
+        } else {
+          this.setState({
+            currentSubtitleObj: {
+              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$props7 = this.props,
+        loop = _this$props7.loop,
+        player = _this$props7.player,
+        actions = _this$props7.actions,
+        onEnded = _this$props7.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);
+      }
+    }
+  }, {
+    key: "handleSubtitleContainerClick",
+    value: function handleSubtitleContainerClick() {
+      var _this$props8 = this.props,
+        actionClick = _this$props8.actionClick,
+        paused = _this$props8.paused;
+      if (paused) {
+        actionClick({
+          action: 'play'
+        });
+      } else {
+        actionClick({
+          action: 'pause'
+        });
+      }
+    }
+  }, {
+    key: "handleSubtitleClick",
+    value: function handleSubtitleClick(e) {
+      var _this$props9 = this.props,
+        actionClick = _this$props9.actionClick,
+        paused = _this$props9.paused,
+        onScreenSubtitleClick = _this$props9.onScreenSubtitleClick,
+        controlType = _this$props9.controlType;
+      var currentSubtitleObj = this.state.currentSubtitleObj;
+      if (controlType === 'advanced') {
+        if (onScreenSubtitleClick) {
+          onScreenSubtitleClick(currentSubtitleObj);
+        }
+        actionClick({
+          action: 'pause'
+        });
+      } else {
+        if (paused) {
+          actionClick({
+            action: 'play'
+          });
+        } else {
+          actionClick({
+            action: 'pause'
+          });
+        }
+      }
+      // actions.handleVideoRewind(false);
+      e.stopPropagation();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$props10 = this.props,
+        crossOrigin = _this$props10.crossOrigin,
+        videoId = _this$props10.videoId,
+        userEmail = _this$props10.userEmail,
+        SDBorderActive = _this$props10.SDBorderActive,
+        actionClick = _this$props10.actionClick,
+        paused = _this$props10.paused;
+      var _this$state2 = this.state,
+        isBuffering = _this$state2.isBuffering,
+        watermark = _this$state2.watermark,
+        currentSubtitleObj = _this$state2.currentSubtitleObj;
+
+      // const children = this.getChildren(this.props);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(VideoBlock, {
+        className: "video-react-player-block",
+        id: "media-container",
+        ref: function ref(c) {
+          _this4.playerBlock = c;
+        }
+        // style={this.getStyle()}
+      }, /*#__PURE__*/_react["default"].createElement("video", {
+        id: videoId
+        // crossOrigin={crossOrigin}
+        ,
+        src: this.props.src,
+        ref: function ref(c) {
+          _this4.video = c;
+        },
+        onPlay: function onPlay() {
+          actionClick({
+            action: 'play'
+          });
+        },
+        onPause: function onPause() {
+          actionClick({
+            action: 'pause'
+          });
+        },
+        onLoadedMetadata: this.handleLoadedMetaData,
+        onTimeUpdate: this.handleTimeUpdate
+      }, /*#__PURE__*/_react["default"].createElement("track", {
+        kind: "captions"
+      })), paused && /*#__PURE__*/_react["default"].createElement(PlayButton, _extends({
+        display: "rounded",
+        appearance: "cta",
+        icon: "play",
+        iconWidth: 20,
+        iconHeight: 26,
+        width: 100,
+        height: 100,
+        tabIndex: "0",
+        onClick: function onClick() {
+          actionClick({
+            action: 'play'
+          });
+        }
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_SDOutline["default"], {
+        SDBorderActive: SDBorderActive,
+        actionClick: actionClick,
+        paused: paused
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "user-name-wrapper",
+        id: "watermark-text",
+        style: _objectSpread({}, watermark)
+      }, userEmail), currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && /*#__PURE__*/_react["default"].createElement(SubTitleSection, {
+        id: "outer",
+        onClick: function onClick() {
+          return _this4.handleSubtitleContainerClick();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: function onClick(e) {
+          return _this4.handleSubtitleClick(e);
+        },
+        className: "subtitleContainer",
+        style: _objectSpread({}, currentSubtitleObj.style)
+      }, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("pre", null, " ", currentSubtitleObj.line1, " ") || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("pre", null, " ", currentSubtitleObj.line2, " ") || null))));
+      // <AudioMeterBlock
+      // id="audio-meter-block"
+      //   onClick={() => {
+      //     this.meterBlockClick();
+      //   }}
+      //   role="presentation"
+      //   active>
+      //   {/* <AudioMeter player={props.player} height={this.meterHeight} /> */}
+      //   <AudioMeter height="40" {...this.props} />
+      // </AudioMeterBlock>
+    }
+  }]);
+  return Video;
+}(_react.Component);
+exports["default"] = Video;
+Video.propTypes = propTypes;
+Video.defaultProps = defaultProps;
+Video.displayName = 'Video';