@desynova-digital/player 3.9.6 → 4.0.0

package/components/Video.js

@@ -1,1431 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _hls = require('hls.js');
-
-var _hls2 = _interopRequireDefault(_hls);
-
-var _Manager = require('../Manager');
-
-var _Manager2 = _interopRequireDefault(_Manager);
-
-var _utils = require('../utils');
-
-var _BigPlayButton = require('./BigPlayButton');
-
-var _BigPlayButton2 = _interopRequireDefault(_BigPlayButton);
-
-var _PosterImage = require('./PosterImage');
-
-var _PosterImage2 = _interopRequireDefault(_PosterImage);
-
-var _SDOutline = require('./SDOutline');
-
-var _SDOutline2 = _interopRequireDefault(_SDOutline);
-
-var _components = require('@desynova-digital/components/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-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 = _styledComponents2.default.div.withConfig({
-  displayName: 'Video__SubTitleSection',
-  componentId: 'sc-omlcc3-0'
-})(['position:absolute;font-family:SFUIText-Regular;font-size:16px;bottom:20px;width:100%;display:flex;justify-content:center;text-align:center;color:#FFFFFF;height:90%;align-items:center;.subtitleContainer{border-radius:4px;width:fit-content;background:#000000;opacity:0.9;padding:8px 10px;line-height:20px;position:absolute;}']);
-
-var VideoBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'Video__VideoBlock',
-  componentId: 'sc-omlcc3-1'
-})(['position:relative;&.video-react-player-block{position:relative;transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;video{position:absolute;top:0;left:0;width:100%;height:100%;right:0;bottom:0;}.audio-tracks{position:relative;display:flex;background:rgba(0,0,0,0.5);color:#fff;z-index:10;position:absolute;width:100%;bottom:0;p{cursor:pointer;padding:10px;}}.loader-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;z-index:10;background:rgba(0,0,0,0.5)}}&.ratio-border{border:1px solid rgba(255,255,255,0.5);&:after{content:\'16:9 Safe Area\';position:absolute;color:#fff;font-family:SFUIText-Regular;font-size:12px;transform:rotate(-90deg);top:20%;left:-50px;}}']);
-
-var Video = function (_Component) {
-  _inherits(Video, _Component);
-
-  function Video(props) {
-    _classCallCheck(this, Video);
-
-    var _this = _possibleConstructorReturn(this, (Video.__proto__ || Object.getPrototypeOf(Video)).call(this, 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 _Manager2.default(props.store);
-    _this.getStyle = _this.getStyle.bind(_this);
-    _this.getChildren = _this.getChildren.bind(_this);
-    _this.play = _this.play.bind(_this);
-    _this.pause = _this.pause.bind(_this);
-    _this.seek = _this.seek.bind(_this);
-    _this.forward = _this.forward.bind(_this);
-    _this.replay = _this.replay.bind(_this);
-    _this.toggleFullscreen = _this.toggleFullscreen.bind(_this);
-    _this.getProperties = _this.getProperties.bind(_this);
-    _this.renderChildren = _this.renderChildren.bind(_this);
-    _this.handleLoadStart = _this.handleLoadStart.bind(_this);
-    _this.handleCanPlay = _this.handleCanPlay.bind(_this);
-    _this.handleCanPlayThrough = _this.handleCanPlayThrough.bind(_this);
-    _this.handlePlay = _this.handlePlay.bind(_this);
-    _this.handlePlaying = _this.handlePlaying.bind(_this);
-    _this.handlePause = _this.handlePause.bind(_this);
-    _this.handleEnded = _this.handleEnded.bind(_this);
-    _this.handleWaiting = _this.handleWaiting.bind(_this);
-    _this.handleSeeking = _this.handleSeeking.bind(_this);
-    _this.handleSeeked = _this.handleSeeked.bind(_this);
-    _this.handleFullscreenChange = _this.handleFullscreenChange.bind(_this);
-    _this.handleError = _this.handleError.bind(_this);
-    _this.handleSuspend = _this.handleSuspend.bind(_this);
-    _this.handleAbort = _this.handleAbort.bind(_this);
-    _this.handleEmptied = _this.handleEmptied.bind(_this);
-    _this.handleStalled = _this.handleStalled.bind(_this);
-    _this.handleLoadedMetaData = _this.handleLoadedMetaData.bind(_this);
-    _this.handleLoadedData = _this.handleLoadedData.bind(_this);
-    _this.handleTimeUpdate = _this.handleTimeUpdate.bind(_this);
-    _this.handleRateChange = _this.handleRateChange.bind(_this);
-    _this.handleVolumeChange = _this.handleVolumeChange.bind(_this);
-    _this.handleDurationChange = _this.handleDurationChange.bind(_this);
-    _this.handleProgress = (0, _utils.throttle)(_this.handleProgress.bind(_this), 250);
-    _this.handleKeypress = _this.handleKeypress.bind(_this);
-    _this.audioVisualizer = _this.audioVisualizer.bind(_this);
-    _this.checkWatermark = _this.checkWatermark.bind(_this);
-    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 (_hls2.default.isSupported() && isM3U8) {
-        var _manager$getState = this.manager.getState(),
-            HLSConfig = _manager$getState.player.HLSConfig;
-
-        this.hls = new _hls2.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 _state = this.state,
-          isM3U8 = _state.isM3U8,
-          watermarkInterval = _state.watermarkInterval;
-
-      if (_hls2.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 _props = this.props,
-          onPlayerClose = _props.onPlayerClose,
-          userEmail = _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 _props2 = this.props,
-          actions = _props2.actions,
-          activeTrackIndex = _props2.activeTrackIndex;
-
-      var self = this;
-      // bind them together
-      this.hls.attachMedia(this.video);
-      this.hls.on(_hls2.default.Events.MEDIA_ATTACHED, function () {
-        self.hls.loadSource(src);
-      });
-      this.hls.on(_hls2.default.Events.MANIFEST_PARSED, function (event, data) {
-        var trackIndex = activeTrackIndex || 0;
-        actions.handleAudioTracks(data.audioTracks);
-        actions.handleAudioTrackChange(data.audioTracks[trackIndex]);
-      });
-      this.hls.on(_hls2.default.Events.ERROR, function (event, data) {
-        // eslint-disable-next-line no-console
-        console.log('HLS.Events.ERROR: ', event, data);
-        if (data.fatal) {
-          switch (data.type) {
-            case _hls2.default.ErrorTypes.NETWORK_ERROR:
-              // try to recover network error
-              _this2.hls.startLoad();
-              break;
-            case _hls2.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: 'getDefaultChildren',
-    value: function getDefaultChildren(props) {
-      return [_react2.default.createElement(_PosterImage2.default, _extends({ key: 'poster-image', order: 1.0 }, props)), _react2.default.createElement(_SDOutline2.default, _extends({ key: 'sd-outline', order: 2.0 }, props)), _react2.default.createElement(_BigPlayButton2.default, _extends({ key: 'big-play-button', order: 5.0 }, props))];
-    }
-  }, {
-    key: 'getChildren',
-    value: function getChildren(props) {
-      var propsWithoutChildren = _extends({}, props, {
-        children: null
-      });
-      var children = this.props.children;
-
-      var childs = _react2.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 = void 0;
-      if (typeof value === 'string') {
-        if (value === 'auto') {
-          styleVal = 'auto';
-        } else if (value.match(/\d+%/)) {
-          styleVal = value;
-        }
-      } else if (typeof value === 'number') {
-        styleVal = value + 'px';
-      }
-      Object.assign(style, _defineProperty({}, name, styleVal));
-    }
-  }, {
-    key: 'getStyle',
-    value: function getStyle() {
-      var fluid = this.props.fluid;
-
-      var _manager$getState2 = this.manager.getState(),
-          player = _manager$getState2.player;
-
-      var style = {};
-      var _props3 = this.props,
-          aspectRatio = _props3.aspectRatio,
-          width = _props3.width,
-          height = _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 = 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: 'UNSAFE_componentWillReceiveProps',
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _props4 = this.props,
-          src = _props4.src,
-          activeAudio = _props4.player.activeAudio,
-          currentSubtitleObj = _props4.currentSubtitleObj,
-          markers = _props4.markers;
-
-      if (newProps.src !== src) {
-        var isM3U8 = this.state.isM3U8;
-
-        if (_hls2.default.isSupported() && isM3U8) {
-          this.hls.detachMedia();
-        } else {
-          this.video.src = '';
-        }
-        var m3u8 = newProps.src.split('.').pop() === 'm3u8' ? true : false;
-        this.setState({
-          isM3U8: m3u8
-        });
-        if (_hls2.default.isSupported() && m3u8) {
-          var _manager$getState3 = this.manager.getState(),
-              HLSConfig = _manager$getState3.player.HLSConfig;
-
-          this.hls = new _hls2.default(HLSConfig);
-          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: {
-              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 _video;
-
-      (_video = this.video).addTextTrack.apply(_video, arguments);
-    }
-
-    // Check if your browser can play different types of video:
-
-  }, {
-    key: 'canPlayType',
-    value: function canPlayType() {
-      var _video2;
-
-      (_video2 = this.video).canPlayType.apply(_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 _props5 = this.props,
-          player = _props5.player,
-          actions = _props5.actions;
-
-      actions.toggleFullscreen(player);
-    }
-
-    /*
-     * Fired when the user agent
-     * begins looking for media data
-     */
-
-  }, {
-    key: 'handleLoadStart',
-    value: function handleLoadStart() {
-      var _props6 = this.props,
-          actions = _props6.actions,
-          onLoadStart = _props6.onLoadStart,
-          fileType = _props6.fileType;
-
-
-      if (fileType === 'audio') {
-        this.audioVisualizer();
-      }
-
-      actions.handleLoadStart(this.getProperties());
-      if (onLoadStart) {
-        onLoadStart.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * A handler for events that
-     * signal that waiting has ended
-     */
-
-  }, {
-    key: 'handleCanPlay',
-    value: function handleCanPlay() {
-      var _props7 = this.props,
-          actions = _props7.actions,
-          onCanPlay = _props7.onCanPlay;
-
-
-      actions.handleCanPlay(this.getProperties());
-
-      if (onCanPlay) {
-        onCanPlay.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * A handler for events that
-     * signal that waiting has ended
-     */
-
-  }, {
-    key: 'handleCanPlayThrough',
-    value: function handleCanPlayThrough() {
-      var _props8 = this.props,
-          actions = _props8.actions,
-          onCanPlayThrough = _props8.onCanPlayThrough;
-
-      actions.handleCanPlayThrough(this.getProperties());
-
-      if (onCanPlayThrough) {
-        onCanPlayThrough.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * A handler for events that
-     * signal that waiting has ended
-     */
-
-  }, {
-    key: 'handlePlaying',
-    value: function handlePlaying() {
-      var _props9 = this.props,
-          actions = _props9.actions,
-          onPlaying = _props9.onPlaying;
-
-      actions.handlePlaying(this.getProperties());
-
-      if (onPlaying) {
-        onPlaying.apply(undefined, arguments);
-      }
-    }
-
-    // Fired whenever the media has been started
-
-  }, {
-    key: 'handlePlay',
-    value: function handlePlay() {
-      var _props10 = this.props,
-          actions = _props10.actions,
-          onPlay = _props10.onPlay;
-
-      actions.handlePlay(this.getProperties());
-
-      if (onPlay) {
-        onPlay.apply(undefined, arguments);
-      }
-    }
-
-    // Fired whenever the media has been paused
-
-  }, {
-    key: 'handlePause',
-    value: function handlePause() {
-      var _props11 = this.props,
-          actions = _props11.actions,
-          onPause = _props11.onPause;
-
-      actions.handlePause(this.getProperties());
-
-      if (onPause) {
-        onPause.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fired when the duration of
-     * the media resource is first known or changed
-     */
-
-  }, {
-    key: 'handleDurationChange',
-    value: function handleDurationChange() {
-      var _props12 = this.props,
-          actions = _props12.actions,
-          onDurationChange = _props12.onDurationChange;
-
-      actions.handleDurationChange(this.getProperties());
-
-      if (onDurationChange) {
-        onDurationChange.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fired while the user agent
-     * is downloading media data
-     */
-
-  }, {
-    key: 'handleProgress',
-    value: function handleProgress() {
-      var _props13 = this.props,
-          actions = _props13.actions,
-          onProgress = _props13.onProgress;
-
-      if (this.video) {
-        actions.handleProgressChange(this.getProperties());
-      }
-
-      if (onProgress) {
-        onProgress.apply(undefined, 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 _props14 = this.props,
-          markers = _props14.markers,
-          resetSubtitleData = _props14.resetSubtitleData,
-          subtitleReadOnly = _props14.subtitleReadOnly,
-          subtitleDataList = _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 && 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 _props15 = this.props,
-          loop = _props15.loop,
-          player = _props15.player,
-          actions = _props15.actions,
-          onEnded = _props15.onEnded;
-
-      if (loop) {
-        this.seek(0);
-        this.play();
-      } else if (!player.paused) {
-        this.pause();
-      }
-      actions.handleEnd(this.getProperties());
-
-      if (onEnded) {
-        onEnded.apply(undefined, arguments);
-      }
-    }
-
-    // Fired whenever the media begins waiting
-
-  }, {
-    key: 'handleWaiting',
-    value: function handleWaiting() {
-      var _props16 = this.props,
-          actions = _props16.actions,
-          onWaiting = _props16.onWaiting;
-
-      actions.handleWaiting(this.getProperties());
-
-      if (onWaiting) {
-        onWaiting.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fired whenever the player
-     * is jumping to a new time
-     */
-
-  }, {
-    key: 'handleSeeking',
-    value: function handleSeeking() {
-      var _props17 = this.props,
-          actions = _props17.actions,
-          onSeeking = _props17.onSeeking;
-
-      actions.handleSeeking(this.getProperties());
-
-      if (onSeeking) {
-        onSeeking.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fired when the player has
-     * finished jumping to a new time
-     */
-
-  }, {
-    key: 'handleSeeked',
-    value: function handleSeeked() {
-      var _props18 = this.props,
-          actions = _props18.actions,
-          onSeeked = _props18.onSeeked;
-
-      actions.handleSeeked(this.getProperties());
-
-      if (onSeeked) {
-        onSeeked.apply(undefined, 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 _props19 = this.props,
-          actions = _props19.actions,
-          onSuspend = _props19.onSuspend;
-
-      actions.handleSuspend(this.getProperties());
-      if (onSuspend) {
-        onSuspend.apply(undefined, arguments);
-      }
-    }
-
-    // Fires when the loading of an audio/video is aborted
-
-  }, {
-    key: 'handleAbort',
-    value: function handleAbort() {
-      var _props20 = this.props,
-          actions = _props20.actions,
-          onAbort = _props20.onAbort;
-
-      actions.handleAbort(this.getProperties());
-      if (onAbort) {
-        onAbort.apply(undefined, arguments);
-      }
-    }
-
-    // Fires when the current playlist is empty
-
-  }, {
-    key: 'handleEmptied',
-    value: function handleEmptied() {
-      var _props21 = this.props,
-          actions = _props21.actions,
-          onEmptied = _props21.onEmptied;
-
-      actions.handleEmptied(this.getProperties());
-      if (onEmptied) {
-        onEmptied.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fires when the browser is trying to
-     * get media data, but data is not available
-     */
-
-  }, {
-    key: 'handleStalled',
-    value: function handleStalled() {
-      var _props22 = this.props,
-          actions = _props22.actions,
-          onStalled = _props22.onStalled;
-
-      actions.handleStalled(this.getProperties());
-
-      if (onStalled) {
-        onStalled.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fires when the browser has loaded
-     * meta data for the audio/video
-     */
-
-  }, {
-    key: 'handleLoadedMetaData',
-    value: function handleLoadedMetaData() {
-      var _props23 = this.props,
-          actions = _props23.actions,
-          onLoadedMetadata = _props23.onLoadedMetadata,
-          startTime = _props23.startTime;
-
-
-      if (startTime && startTime > 0) {
-        this.video.currentTime = startTime;
-      }
-
-      actions.handleLoadedMetaData(this.getProperties());
-
-      if (onLoadedMetadata) {
-        onLoadedMetadata.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fires when the browser has loaded
-     * the current frame of the audio/video
-     */
-
-  }, {
-    key: 'handleLoadedData',
-    value: function handleLoadedData() {
-      var _props24 = this.props,
-          actions = _props24.actions,
-          onLoadedData = _props24.onLoadedData;
-
-      actions.handleLoadedData(this.getProperties());
-
-      if (onLoadedData) {
-        onLoadedData.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fires when the current
-     * playback position has changed
-     */
-
-  }, {
-    key: 'handleTimeUpdate',
-    value: function handleTimeUpdate() {
-      var _props25 = this.props,
-          previewActive = _props25.player.previewActive,
-          actions = _props25.actions,
-          onTimeUpdate = _props25.onTimeUpdate,
-          rightMarker = _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(undefined, arguments);
-      }
-      this.displaySubtitle();
-    }
-
-    /**
-     * Fires when the playing speed of the audio/video is changed
-     */
-
-  }, {
-    key: 'handleRateChange',
-    value: function handleRateChange() {
-      var _props26 = this.props,
-          actions = _props26.actions,
-          onRateChange = _props26.onRateChange;
-
-      actions.handleRateChange(this.getProperties());
-
-      if (onRateChange) {
-        onRateChange.apply(undefined, arguments);
-      }
-    }
-
-    // Fires when the volume has been changed
-
-  }, {
-    key: 'handleVolumeChange',
-    value: function handleVolumeChange() {
-      var _props27 = this.props,
-          actions = _props27.actions,
-          onVolumeChange = _props27.onVolumeChange;
-
-      actions.handleVolumeChange(this.getProperties());
-
-      if (onVolumeChange) {
-        onVolumeChange.apply(undefined, arguments);
-      }
-    }
-
-    /*
-     * Fires when an error occurred
-     * during the loading of an audio/video
-     */
-
-  }, {
-    key: 'handleError',
-    value: function handleError() {
-      var _props28 = this.props,
-          actions = _props28.actions,
-          onError = _props28.onError;
-
-      actions.handleError(this.getProperties());
-      if (onError) {
-        onError.apply(undefined, 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 = _extends({}, this.props, {
-        video: this.video
-      });
-      var children = this.props.children;
-      // to make sure the children can get video property
-
-      if (!this.video) {
-        return null;
-      }
-
-      // only keep <source />, <track />, <MyComponent isVideoChild /> elements
-      return _react2.default.Children.toArray(children).filter(_utils.isVideoChild).map(function (c) {
-        var cprops = void 0;
-        if (typeof c.type === 'string') {
-          // add onError to <source />
-          if (c.type === 'source') {
-            cprops = _extends({}, c.props);
-            var preOnError = cprops.onError;
-            cprops.onError = function () {
-              if (preOnError) {
-                preOnError.apply(undefined, arguments);
-              }
-              _this4.handleError.apply(_this4, arguments);
-            };
-          }
-        } else {
-          cprops = props;
-        }
-        return _react2.default.cloneElement(c, cprops);
-      });
-    }
-  }, {
-    key: 'handleSubtitleContainerClick',
-    value: function handleSubtitleContainerClick() {
-      var _props29 = this.props,
-          actions = _props29.actions,
-          player = _props29.player;
-
-      if (player.paused) {
-        actions.play();
-      } else {
-        actions.pause();
-      }
-    }
-  }, {
-    key: 'handleSubtitleClick',
-    value: function handleSubtitleClick(e) {
-      var _props30 = this.props,
-          actions = _props30.actions,
-          player = _props30.player,
-          onScreenSubtitleClick = _props30.onScreenSubtitleClick,
-          controlType = _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 _props31 = this.props,
-          loop = _props31.loop,
-          poster = _props31.poster,
-          preload = _props31.preload,
-          autoPlay = _props31.autoPlay,
-          playsInline = _props31.playsInline,
-          muted = _props31.muted,
-          crossOrigin = _props31.crossOrigin,
-          videoId = _props31.videoId,
-          fileType = _props31.fileType,
-          userEmail = _props31.userEmail;
-      var _state2 = this.state,
-          isBuffering = _state2.isBuffering,
-          watermark = _state2.watermark,
-          currentSubtitleObj = _state2.currentSubtitleObj;
-
-
-      var children = this.getChildren(this.props);
-      return _react2.default.createElement(
-        VideoBlock,
-        {
-          className: 'video-react-player-block',
-          ref: function ref(c) {
-            _this5.playerBlock = c;
-          },
-          style: this.getStyle() },
-        isBuffering && _react2.default.createElement(
-          'div',
-          {
-            className: 'loader-container',
-            onClick: function onClick() {
-              return _this5.togglePlay();
-            }
-          },
-          _react2.default.createElement(_components.Loader, { loaderName: 'SpinningLoader' })
-        ) || null,
-        fileType === 'audio' ? _react2.default.createElement(
-          _react2.default.Fragment,
-          null,
-          _react2.default.createElement('canvas', {
-            id: 'canvas',
-            ref: function ref(c) {
-              _this5.canvas = c;
-            },
-            style: {
-              top: 0,
-              left: 0,
-              position: 'absolute'
-            }
-          }),
-          _react2.default.createElement(
-            'audio',
-            {
-              id: videoId,
-              crossOrigin: 'anonymous',
-              ref: function ref(c) {
-                _this5.video = c;
-              },
-              muted: muted,
-              preload: preload,
-              loop: loop,
-              playsInline: playsInline,
-              autoPlay: autoPlay,
-              poster: poster,
-              onLoadStart: this.handleLoadStart,
-              onWaiting: this.handleWaiting,
-              onCanPlay: this.handleCanPlay,
-              onCanPlayThrough: this.handleCanPlayThrough,
-              onPlaying: this.handlePlaying,
-              onEnded: this.handleEnded,
-              onSeeking: this.handleSeeking,
-              onSeeked: this.handleSeeked,
-              onPlay: this.handlePlay,
-              onPause: this.handlePause,
-              onProgress: this.handleProgress,
-              onDurationChange: this.handleDurationChange,
-              onError: this.handleError,
-              onSuspend: this.handleSuspend,
-              onAbort: this.handleAbort,
-              onEmptied: this.handleEmptied,
-              onStalled: this.handleStalled,
-              onLoadedMetadata: this.handleLoadedMetaData,
-              onLoadedData: this.handleLoadedData,
-              onTimeUpdate: this.handleTimeUpdate,
-              onRateChange: this.handleRateChange,
-              onVolumeChange: this.handleVolumeChange
-            },
-            _react2.default.createElement('track', { kind: 'captions' }),
-            this.renderChildren()
-          )
-        ) : _react2.default.createElement(
-          'video',
-          {
-            id: videoId,
-            crossOrigin: crossOrigin,
-            ref: function ref(c) {
-              _this5.video = c;
-            },
-            muted: muted,
-            preload: preload,
-            loop: loop,
-            playsInline: playsInline,
-            autoPlay: autoPlay,
-            poster: poster,
-            onLoadStart: this.handleLoadStart,
-            onWaiting: this.handleWaiting,
-            onCanPlay: this.handleCanPlay,
-            onCanPlayThrough: this.handleCanPlayThrough,
-            onPlaying: this.handlePlaying,
-            onEnded: this.handleEnded,
-            onSeeking: this.handleSeeking,
-            onSeeked: this.handleSeeked,
-            onPlay: this.handlePlay,
-            onPause: this.handlePause,
-            onProgress: this.handleProgress,
-            onDurationChange: this.handleDurationChange,
-            onError: this.handleError,
-            onSuspend: this.handleSuspend,
-            onAbort: this.handleAbort,
-            onEmptied: this.handleEmptied,
-            onStalled: this.handleStalled,
-            onLoadedMetadata: this.handleLoadedMetaData,
-            onLoadedData: this.handleLoadedData,
-            onTimeUpdate: this.handleTimeUpdate,
-            onRateChange: this.handleRateChange,
-            onVolumeChange: this.handleVolumeChange
-          },
-          _react2.default.createElement('track', { kind: 'captions' }),
-          this.renderChildren()
-        ),
-        children,
-        _react2.default.createElement(
-          'p',
-          { className: 'user-name-wrapper', id: 'watermark-text', style: _extends({}, watermark) },
-          userEmail
-        ),
-        currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && _react2.default.createElement(
-          SubTitleSection,
-          { id: 'outer', onClick: function onClick() {
-              return _this5.handleSubtitleContainerClick();
-            } },
-          _react2.default.createElement(
-            'span',
-            { onClick: function onClick(e) {
-                return _this5.handleSubtitleClick(e);
-              }, className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
-            currentSubtitleObj.line1 && _react2.default.createElement(
-              'pre',
-              null,
-              ' ',
-              currentSubtitleObj.line1,
-              ' '
-            ) || null,
-            currentSubtitleObj.line2 && _react2.default.createElement(
-              'pre',
-              null,
-              ' ',
-              currentSubtitleObj.line2,
-              ' '
-            ) || null
-          )
-        )
-      );
-    }
-  }, {
-    key: 'playbackRate',
-    get: function get() {
-      return this.video.playbackRate;
-    }
-
-    /*
-     * set playback rate
-     * speed of video
-     */
-    ,
-    set: function set(rate) {
-      this.video.playbackRate = rate;
-    }
-  }, {
-    key: 'muted',
-    get: function get() {
-      return this.video.muted;
-    },
-    set: function set(val) {
-      this.video.muted = val;
-    }
-  }, {
-    key: 'volume',
-    get: function get() {
-      return this.video.volume;
-    },
-    set: function set(val) {
-      if (val > 1) {
-        val = 1;
-      }
-      if (val < 0) {
-        val = 0;
-      }
-      this.video.volume = val;
-    }
-
-    // video width
-
-  }, {
-    key: 'videoWidth',
-    get: function get() {
-      return this.video.videoWidth;
-    }
-
-    // video height
-
-  }, {
-    key: 'videoHeight',
-    get: function get() {
-      return this.video.videoHeight;
-    }
-  }]);
-
-  return Video;
-}(_react.Component);
-
-exports.default = Video;
-
-
-Video.propTypes = propTypes;
-Video.defaultProps = defaultProps;
-Video.displayName = 'Video';