@atlaskit/media-ui 22.3.0 → 22.3.2

package/dist/esm/customMediaPlayer/index.js

@@ -5,15 +5,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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 _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 _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; } }
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Keep media player components used in media-viewer to use static colors from the new color palette to
 // support the hybrid theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
@@ -49,29 +44,22 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "22.3.0";
+var packageVersion = "22.3.2";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
 var VIEWED_TRACKING_SECS = 2;
 export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   _inherits(CustomMediaPlayerBase, _Component);
-
   var _super = _createSuper(CustomMediaPlayerBase);
-
   function CustomMediaPlayerBase() {
     var _this;
-
     _classCallCheck(this, CustomMediaPlayerBase);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "videoWrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "videoState", {
       isLoading: true,
       buffered: 0,
@@ -81,46 +69,34 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       duration: 0,
       isMuted: false
     });
-
     _defineProperty(_assertThisInitialized(_this), "wasPlayedOnce", false);
-
     _defineProperty(_assertThisInitialized(_this), "lastCurrentTime", 0);
-
     _defineProperty(_assertThisInitialized(_this), "timeSaver", new TimeSaver(_this.props.lastWatchTimeConfig));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       isFullScreenEnabled: false,
       playerSize: 'large',
       playbackSpeed: 1
     });
-
     _defineProperty(_assertThisInitialized(_this), "onFullScreenChange", function (e) {
       if (e.target !== _this.videoWrapperRef.current) {
         return;
       }
-
       var currentFullScreenMode = _this.state.isFullScreenEnabled;
       var isFullScreenEnabled = !!getFullscreenElement();
-
       if (currentFullScreenMode !== isFullScreenEnabled) {
         var _this$props$onFullscr, _this$props;
-
         (_this$props$onFullscr = (_this$props = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
-
         _this.setState({
           isFullScreenEnabled: isFullScreenEnabled
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onTimeChanged", function () {
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
     });
-
     _defineProperty(_assertThisInitialized(_this), "onVolumeChanged", function () {
       _this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
     });
-
     _defineProperty(_assertThisInitialized(_this), "onCurrentTimeChange", function (currentTime, duration) {
       if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
         _this.timeSaver.defaultTime = currentTime;
@@ -128,26 +104,22 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.timeSaver.defaultTime = 0;
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderCurrentTime", function (_ref) {
       var currentTime = _ref.currentTime,
-          duration = _ref.duration;
+        duration = _ref.duration;
       return /*#__PURE__*/React.createElement(CurrentTime, {
         draggable: false
       }, formatDuration(currentTime), " / ", formatDuration(duration));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderHDButton", function () {
       var _this$props2 = _this.props,
-          type = _this$props2.type,
-          isHDAvailable = _this$props2.isHDAvailable,
-          isHDActive = _this$props2.isHDActive,
-          onHDToggleClick = _this$props2.onHDToggleClick;
-
+        type = _this$props2.type,
+        isHDAvailable = _this$props2.isHDAvailable,
+        isHDActive = _this$props2.isHDActive,
+        onHDToggleClick = _this$props2.onHDToggleClick;
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
-
       var primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
       var secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
@@ -160,21 +132,16 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         })
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "onPlaybackSpeedChange", function (playbackSpeed) {
       if (!_this.actions) {
         return;
       }
-
       _this.actions.setPlaybackSpeed(playbackSpeed);
-
       _this.setState({
         playbackSpeed: playbackSpeed
       });
-
       _this.createAndFireUIEvent('playbackSpeedChange');
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSpeedControls", function () {
       var playbackSpeed = _this.state.playbackSpeed;
       var originalDimensions = _this.props.originalDimensions;
@@ -187,7 +154,6 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         }
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderVolume", function (videoState, actions, showSlider) {
       return /*#__PURE__*/React.createElement(VolumeWrapper, {
         showSlider: showSlider
@@ -211,17 +177,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         onChanged: _this.onVolumeChanged
       })));
     });
-
     _defineProperty(_assertThisInitialized(_this), "toggleFullscreen", function () {
       return _this.videoWrapperRef.current && toggleFullscreen(_this.videoWrapperRef.current);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onFullScreenButtonClick", function () {
       _this.toggleFullscreen();
-
       _this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
     });
-
     _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
       if (width > MEDIUM_VIDEO_MAX_WIDTH) {
         _this.setState({
@@ -237,16 +199,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderFullScreenButton", function () {
       var _this$props3 = _this.props,
-          formatMessage = _this$props3.intl.formatMessage,
-          type = _this$props3.type;
-
+        formatMessage = _this$props3.intl.formatMessage,
+        type = _this$props3.type;
       if (type === 'audio') {
         return;
       }
-
       var isFullScreenEnabled = _this.state.isFullScreenEnabled;
       var icon = isFullScreenEnabled ? /*#__PURE__*/React.createElement(FullScreenIconOff, {
         label: formatMessage(messages.disable_fullscreen)
@@ -259,14 +218,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         iconBefore: icon
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderDownloadButton", function () {
       var onDownloadClick = _this.props.onDownloadClick;
-
       if (!onDownloadClick) {
         return;
       }
-
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-download-button",
         onClick: _this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
@@ -275,12 +231,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         })
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderShortcuts", function (_ref2) {
       var togglePlayPauseAction = _ref2.togglePlayPauseAction,
-          toggleMute = _ref2.toggleMute,
-          skipBackward = _ref2.skipBackward,
-          skipForward = _ref2.skipForward;
+        toggleMute = _ref2.toggleMute,
+        skipBackward = _ref2.skipBackward,
+        skipForward = _ref2.skipForward;
       var isShortcutEnabled = _this.props.isShortcutEnabled;
       var isFullScreenEnabled = _this.state.isFullScreenEnabled;
       var shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/React.createElement(Shortcut, {
@@ -292,7 +247,6 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         code: keyCodes.m,
         handler: _this.getKeyboardShortcutHandler(toggleMute, 'mute')
       })];
-
       if (shortcuts && isFullScreenEnabled) {
         // Fullscreen shortcuts only. We don't want to override left/right keys in media-viewer settings
         shortcuts.push( /*#__PURE__*/React.createElement(Shortcut, {
@@ -306,10 +260,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           handler: _this.getKeyboardShortcutHandler(skipForward, 'rightArrow')
         }));
       }
-
       return shortcuts;
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderPlayPauseButton", function (isPlaying) {
       var formatMessage = _this.props.intl.formatMessage;
       var toggleButtonIcon = isPlaying ? /*#__PURE__*/React.createElement(PauseIcon, {
@@ -327,7 +279,6 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         onClick: isPlaying ? _this.pausePlayByButtonClick : _this.startPlayByButtonClick
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSkipBackwardButton", function (skipBackward) {
       var formatMessage = _this.props.intl.formatMessage;
       return /*#__PURE__*/React.createElement(Tooltip, {
@@ -341,7 +292,6 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         onClick: _this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSkipForwardButton", function (skipForward) {
       var formatMessage = _this.props.intl.formatMessage;
       return /*#__PURE__*/React.createElement(Tooltip, {
@@ -355,71 +305,58 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         onClick: _this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSpinner", function () {
       return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
         appearance: "invert",
         size: "large"
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "pause", function () {
       if (_this.actions) {
         _this.actions.pause();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "play", function () {
       var onFirstPlay = _this.props.onFirstPlay;
-
       if (_this.actions) {
         _this.actions.play();
       }
-
       simultaneousPlayManager.pauseOthers(_assertThisInitialized(_this));
-
       if (!_this.wasPlayedOnce && onFirstPlay) {
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "getMediaButtonClickHandler", function (action, buttonType) {
       return function () {
         action();
-
         _this.createAndFireUIEvent('mediaButtonClick', buttonType);
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "getKeyboardShortcutHandler", function (action, shortcutType) {
       return function () {
         var showControls = _this.props.showControls;
         action();
-
         if (showControls) {
           showControls();
         }
-
         _this.createAndFireUIEvent('shortcutPress', shortcutType);
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "onViewed", function (videoState) {
       var _this$props4 = _this.props,
-          createAnalyticsEvent = _this$props4.createAnalyticsEvent,
-          fileId = _this$props4.fileId,
-          isAutoPlay = _this$props4.isAutoPlay,
-          isHDAvailable = _this$props4.isHDAvailable,
-          isHDActive = _this$props4.isHDActive,
-          type = _this$props4.type;
+        createAnalyticsEvent = _this$props4.createAnalyticsEvent,
+        fileId = _this$props4.fileId,
+        isAutoPlay = _this$props4.isAutoPlay,
+        isHDAvailable = _this$props4.isHDAvailable,
+        isHDActive = _this$props4.isHDActive,
+        type = _this$props4.type;
       var _this$state = _this.state,
-          isFullScreenEnabled = _this$state.isFullScreenEnabled,
-          playerSize = _this$state.playerSize,
-          playbackSpeed = _this$state.playbackSpeed;
+        isFullScreenEnabled = _this$state.isFullScreenEnabled,
+        playerSize = _this$state.playerSize,
+        playbackSpeed = _this$state.playbackSpeed;
       var status = videoState.status,
-          currentTime = videoState.currentTime;
-
+        currentTime = videoState.currentTime;
       if (status === 'playing' && (currentTime < _this.lastCurrentTime || currentTime >= _this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
         fireAnalyticsEvent(createPlayedTrackEvent(type, _objectSpread(_objectSpread({}, videoState), {}, {
           isAutoPlay: isAutoPlay,
@@ -432,60 +369,48 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.lastCurrentTime = currentTime;
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "resetPendingPlayPauseToggleTimer", function () {
       if (_this.clickToTogglePlayTimoutId !== undefined) {
         clearTimeout(_this.clickToTogglePlayTimoutId);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "doubleClickToFullscreen", function () {
       _this.resetPendingPlayPauseToggleTimer();
-
-      _this.toggleFullscreen(); // TODO Add an event similar to "playPauseBlanketClick" but for fullscreen trigger
-
+      _this.toggleFullscreen();
+      // TODO Add an event similar to "playPauseBlanketClick" but for fullscreen trigger
     });
-
     _defineProperty(_assertThisInitialized(_this), "togglePlayByBlanketClick", function (action) {
       _this.resetPendingPlayPauseToggleTimer();
-
       _this.clickToTogglePlayTimoutId = setTimeout(function () {
         action();
-
         _this.createAndFireUIEvent('playPauseBlanketClick');
       }, 200);
     });
-
     _defineProperty(_assertThisInitialized(_this), "startPlayByBlanketClick", function () {
       _this.togglePlayByBlanketClick(_this.play);
     });
-
     _defineProperty(_assertThisInitialized(_this), "pausePlayByBlanketClick", function () {
       _this.togglePlayByBlanketClick(_this.pause);
     });
-
     _defineProperty(_assertThisInitialized(_this), "startPlayByButtonClick", _this.getMediaButtonClickHandler(_this.play, 'playButton'));
-
     _defineProperty(_assertThisInitialized(_this), "pausePlayByButtonClick", _this.getMediaButtonClickHandler(_this.pause, 'pauseButton'));
-
     return _this;
   }
-
   _createClass(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props5 = this.props,
-          type = _this$props5.type,
-          fileId = _this$props5.fileId,
-          isAutoPlay = _this$props5.isAutoPlay,
-          isHDAvailable = _this$props5.isHDAvailable,
-          isHDActive = _this$props5.isHDActive,
-          onFirstPlay = _this$props5.onFirstPlay,
-          createAnalyticsEvent = _this$props5.createAnalyticsEvent;
+        type = _this$props5.type,
+        fileId = _this$props5.fileId,
+        isAutoPlay = _this$props5.isAutoPlay,
+        isHDAvailable = _this$props5.isHDAvailable,
+        isHDActive = _this$props5.isHDActive,
+        onFirstPlay = _this$props5.onFirstPlay,
+        createAnalyticsEvent = _this$props5.createAnalyticsEvent;
       var _this$state2 = this.state,
-          isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-          playerSize = _this$state2.playerSize,
-          playbackSpeed = _this$state2.playbackSpeed;
+        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
+        playerSize = _this$state2.playerSize,
+        playbackSpeed = _this$state2.playbackSpeed;
       fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -494,16 +419,12 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         playerSize: playerSize,
         playbackSpeed: playbackSpeed
       }, fileId), createAnalyticsEvent);
-
       if (this.videoWrapperRef.current) {
         this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
       }
-
       simultaneousPlayManager.subscribe(this);
-
       if (isAutoPlay) {
         simultaneousPlayManager.pauseOthers(this);
-
         if (onFirstPlay) {
           fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
             isAutoPlay: isAutoPlay,
@@ -524,13 +445,10 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       if (this.videoWrapperRef.current) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
-
       if (this.state.isFullScreenEnabled) {
         var _this$props$onFullscr2, _this$props6;
-
         (_this$props$onFullscr2 = (_this$props6 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props6, false);
       }
-
       simultaneousPlayManager.unsubscribe(this);
     }
   }, {
@@ -546,17 +464,16 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
       var _this$props7 = this.props,
-          type = _this$props7.type,
-          fileId = _this$props7.fileId,
-          isHDActive = _this$props7.isHDActive,
-          isHDAvailable = _this$props7.isHDAvailable,
-          isAutoPlay = _this$props7.isAutoPlay,
-          createAnalyticsEvent = _this$props7.createAnalyticsEvent;
+        type = _this$props7.type,
+        fileId = _this$props7.fileId,
+        isHDActive = _this$props7.isHDActive,
+        isHDAvailable = _this$props7.isHDAvailable,
+        isAutoPlay = _this$props7.isAutoPlay,
+        createAnalyticsEvent = _this$props7.createAnalyticsEvent;
       var _this$state3 = this.state,
-          isFullScreenEnabled = _this$state3.isFullScreenEnabled,
-          playerSize = _this$state3.playerSize,
-          playbackSpeed = _this$state3.playbackSpeed;
-
+        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+        playerSize = _this$state3.playerSize,
+        playbackSpeed = _this$state3.playbackSpeed;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -565,31 +482,24 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         playerSize: playerSize,
         playbackSpeed: playbackSpeed
       });
-
       var analyticsEvent;
-
       switch (eventType) {
         case 'mediaButtonClick':
           analyticsEvent = createMediaButtonClickedEvent(type, playbackState, actionSubjectId, fileId);
           break;
-
         case 'shortcutPress':
           analyticsEvent = createMediaShortcutPressedEvent(type, playbackState, actionSubjectId, fileId);
           break;
-
         case 'playPauseBlanketClick':
           analyticsEvent = createPlayPauseBlanketClickedEvent(type, playbackState, fileId);
           break;
-
         case 'timeRangeNavigate':
         case 'volumeRangeNavigate':
           analyticsEvent = createTimeRangeNavigatedEvent(type, playbackState, actionSubjectId, fileId);
           break;
-
         case 'playbackSpeedChange':
           analyticsEvent = createPlaybackSpeedChangedEvent(type, playbackState, fileId);
           break;
-
         default:
           analyticsEvent = {
             eventType: 'ui',
@@ -600,21 +510,19 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
             }
           };
       }
-
       fireAnalyticsEvent(analyticsEvent, createAnalyticsEvent);
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props8 = this.props,
-          type = _this$props8.type,
-          src = _this$props8.src,
-          isAutoPlay = _this$props8.isAutoPlay,
-          onCanPlay = _this$props8.onCanPlay,
-          onError = _this$props8.onError,
-          poster = _this$props8.poster;
+        type = _this$props8.type,
+        src = _this$props8.src,
+        isAutoPlay = _this$props8.isAutoPlay,
+        onCanPlay = _this$props8.onCanPlay,
+        onError = _this$props8.onError,
+        poster = _this$props8.poster;
       return /*#__PURE__*/React.createElement(CustomVideoWrapper, {
         ref: this.videoWrapperRef,
         "data-testid": "custom-media-player"
@@ -629,39 +537,33 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         poster: poster
       }, function (video, videoState, actions) {
         _this2.onViewed(videoState);
-
-        _this2.setActions(actions); //Video State(either prop or variable) is ReadOnly
-
-
+        _this2.setActions(actions);
+        //Video State(either prop or variable) is ReadOnly
         _this2.videoState = videoState;
         var status = videoState.status,
-            currentTime = videoState.currentTime,
-            buffered = videoState.buffered,
-            duration = videoState.duration,
-            isLoading = videoState.isLoading;
+          currentTime = videoState.currentTime,
+          buffered = videoState.buffered,
+          duration = videoState.duration,
+          isLoading = videoState.isLoading;
         var playerSize = _this2.state.playerSize;
         var isPlaying = status === 'playing';
         var isLargePlayer = playerSize === 'large';
         var isMediumPlayer = playerSize === 'medium';
         var skipAmount = 10;
-
         var skipBackward = function skipBackward() {
           var newTime = videoState.currentTime - skipAmount;
           actions.navigate(Math.max(newTime, 0));
         };
-
         var skipForward = function skipForward() {
           var newTime = videoState.currentTime + skipAmount;
           actions.navigate(Math.min(newTime, videoState.duration));
         };
-
         var shortcuts = _this2.renderShortcuts({
           togglePlayPauseAction: isPlaying ? _this2.pause : _this2.play,
           toggleMute: actions.toggleMute,
           skipBackward: skipBackward,
           skipForward: skipForward
         });
-
         return /*#__PURE__*/React.createElement(VideoWrapper, null, /*#__PURE__*/React.createElement(WidthObserver, {
           setWidth: _this2.onResize
         }), shortcuts, isLoading && _this2.renderSpinner(), /*#__PURE__*/React.createElement(PlayPauseBlanket, {
@@ -680,7 +582,6 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-
   return CustomMediaPlayerBase;
 }(Component);
 export var CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/esm/customMediaPlayer/playPauseBlanket.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import styled from '@emotion/styled';
 export var PlayPauseBlanket = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
 PlayPauseBlanket.displayName = 'PlayPauseBlanket';