@desynova-digital/player 4.0.1 → 4.0.3

package/media/Video.js

@@ -1,684 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _propTypes = require("prop-types");
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _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';