@atlaskit/media-ui 28.3.3 → 28.3.4

package/dist/es2019/customMediaPlayer/mediaPlayer/mediaPlayerBase.js

@@ -15,7 +15,6 @@ import SoundIcon from '@atlaskit/icon/core/migration/volume-high--hipchat-outgoi
 import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
 import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { injectIntl } from 'react-intl-next';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import MediaButton from '../../MediaButton';
@@ -45,10 +44,37 @@ import VideoSkipBackwardTenIcon from '@atlaskit/icon/core/video-skip-backward-te
 import { getUserCaptionsLocale, setUserCaptionsLocale, findPreselectedTrackIndex, getUserCaptionsEnabled, setUserCaptionsEnabled } from './captions';
 import { CaptionsUploaderBrowser } from './captions/artifactUploader';
 import CaptionDeleteConfirmationModal from './captions/captionDeleteConfirmationModal';
-const MEDIUM_VIDEO_MAX_WIDTH = 400;
-const SMALL_VIDEO_MAX_WIDTH = 245;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
 const VIEWED_TRACKING_SECS = 2;
+export const breakpoints = {
+  LARGE_VIDEO_MAX_WIDTH: 570,
+  MEDIUM_VIDEO_MAX_WIDTH: 430,
+  SMALL_VIDEO_MAX_WIDTH: 260
+};
+const breakpointControls = {
+  playPauseButton: () => true,
+  volume: () => true,
+  fullScreenButton: () => true,
+  currentTime: playerWidth => playerWidth > breakpoints.SMALL_VIDEO_MAX_WIDTH,
+  captionsControls: playerWidth => playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH,
+  downloadButton: playerWidth => playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH,
+  volumeSlider: playerWidth => playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH,
+  skipButtons: playerWidth => playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH,
+  speedControls: playerWidth => playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH,
+  hdButton: playerWidth => playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH,
+  captionsAdminControls: playerWidth => playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH
+};
+const getPlayerSize = playerWidth => {
+  if (playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH) {
+    return 'xlarge';
+  } else if (playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH) {
+    return 'large';
+  } else if (playerWidth > breakpoints.SMALL_VIDEO_MAX_WIDTH) {
+    return 'medium';
+  } else {
+    return 'small';
+  }
+};
 
 /* Styles */
 
@@ -78,14 +104,16 @@ class _MediaPlayerBase extends Component {
       volume: 1,
       status: 'paused',
       duration: 0,
-      isMuted: false
+      isMuted: false,
+      currentActiveCues: () => undefined
     });
     _defineProperty(this, "wasPlayedOnce", false);
     _defineProperty(this, "lastCurrentTime", 0);
     _defineProperty(this, "timeSaver", new TimeSaver(this.props.lastWatchTimeConfig));
     _defineProperty(this, "state", {
       isFullScreenEnabled: false,
-      playerSize: 'large',
+      playerWidth: 100,
+      // initial value for playerSize: 'small', i.e. width < 260px
       playbackSpeed: 1,
       selectedTracksIndex: -1,
       areCaptionsEnabled: false,
@@ -118,9 +146,11 @@ class _MediaPlayerBase extends Component {
       } = this.props;
       const {
         isFullScreenEnabled,
-        playerSize,
         playbackSpeed
       } = this.state;
+      const {
+        playerSize
+      } = this;
       fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
         isAutoPlay,
         isHDAvailable,
@@ -168,22 +198,25 @@ class _MediaPlayerBase extends Component {
         this.timeSaver.defaultTime = 0;
       }
     });
-    _defineProperty(this, "renderCurrentTime", ({
-      currentTime,
-      duration
-    }) => /*#__PURE__*/React.createElement(CurrentTime, {
-      draggable: false
-    }, formatDuration(currentTime), " / ", formatDuration(duration)));
-    _defineProperty(this, "renderHDButton", () => {
+    _defineProperty(this, "shouldRenderCurrentTime", () => breakpointControls.currentTime(this.state.playerWidth));
+    _defineProperty(this, "renderCurrentTime", () => {
+      return /*#__PURE__*/React.createElement(CurrentTime, {
+        draggable: false,
+        "data-testid": "current-time"
+      }, formatDuration(this.videoState.currentTime), " / ", formatDuration(this.videoState.duration));
+    });
+    _defineProperty(this, "shouldRenderHdButton", () => {
       const {
         type,
-        isHDAvailable,
+        isHDAvailable
+      } = this.props;
+      return !fg('platform_media_disable_video_640p_artifact_usage') && breakpointControls.hdButton(this.state.playerWidth) && type !== 'audio' && !!isHDAvailable;
+    });
+    _defineProperty(this, "renderHDButton", () => {
+      const {
         isHDActive,
         onHDToggleClick
       } = this.props;
-      if (type === 'audio' || !isHDAvailable) {
-        return;
-      }
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
@@ -204,6 +237,7 @@ class _MediaPlayerBase extends Component {
       });
       this.createAndFireUIEvent('playbackSpeedChange');
     });
+    _defineProperty(this, "shouldRenderSpeedControls", () => breakpointControls.speedControls(this.state.playerWidth));
     _defineProperty(this, "renderSpeedControls", () => {
       const {
         playbackSpeed
@@ -218,47 +252,46 @@ class _MediaPlayerBase extends Component {
         onClick: () => this.createAndFireUIEvent('mediaButtonClick', 'playbackSpeedButton')
       });
     });
-    _defineProperty(this, "renderVolume", (videoState, actions, showSlider) => /*#__PURE__*/React.createElement(VolumeWrapper, {
-      showSlider: showSlider
-    }, /*#__PURE__*/React.createElement(VolumeToggleWrapper, {
-      isMuted: videoState.isMuted
-    }, /*#__PURE__*/React.createElement(MutedIndicator, {
-      isMuted: videoState.isMuted
-    }), /*#__PURE__*/React.createElement(MediaButton, {
-      testId: "custom-media-player-volume-toggle-button",
-      onClick: this.getMediaButtonClickHandler(actions.toggleMute, 'muteButton'),
-      iconBefore: /*#__PURE__*/React.createElement(SoundIcon, {
-        color: "currentColor",
-        label: this.props.intl.formatMessage(messages.volumeMuteButtonAria)
-      }),
-      "aria-pressed": videoState.isMuted
-    })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, null, /*#__PURE__*/React.createElement(VolumeRange, {
-      onChange: actions.setVolume,
-      currentVolume: videoState.volume,
-      isAlwaysActive: true,
-      onChanged: this.onVolumeChanged,
-      ariaLabel: this.props.intl.formatMessage(messages.volumeLevelControlAria)
-    }))));
+    _defineProperty(this, "shouldRenderVolume", () => breakpointControls.volume(this.state.playerWidth));
+    _defineProperty(this, "shouldRenderVolumeSLider", () => breakpointControls.volumeSlider(this.state.playerWidth));
+    _defineProperty(this, "renderVolume", () => {
+      var _this$actions, _this$actions2;
+      const showSlider = this.shouldRenderVolumeSLider();
+      return /*#__PURE__*/React.createElement(VolumeWrapper, {
+        showSlider: showSlider
+      }, /*#__PURE__*/React.createElement(VolumeToggleWrapper, {
+        isMuted: this.videoState.isMuted
+      }, /*#__PURE__*/React.createElement(MutedIndicator, {
+        isMuted: this.videoState.isMuted
+      }), /*#__PURE__*/React.createElement(MediaButton, {
+        testId: "custom-media-player-volume-toggle-button",
+        onClick: this.getMediaButtonClickHandler(((_this$actions = this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.toggleMute) || (() => undefined), 'muteButton'),
+        iconBefore: /*#__PURE__*/React.createElement(SoundIcon, {
+          color: "currentColor",
+          label: this.props.intl.formatMessage(messages.volumeMuteButtonAria)
+        }),
+        "aria-pressed": this.videoState.isMuted
+      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, {
+        "data-testid": "volume-time-range-wrapper"
+      }, /*#__PURE__*/React.createElement(VolumeRange, {
+        onChange: ((_this$actions2 = this.actions) === null || _this$actions2 === void 0 ? void 0 : _this$actions2.setVolume) || (() => undefined),
+        currentVolume: this.videoState.volume,
+        isAlwaysActive: true,
+        onChanged: this.onVolumeChanged,
+        ariaLabel: this.props.intl.formatMessage(messages.volumeLevelControlAria)
+      })));
+    });
     _defineProperty(this, "toggleFullscreen", () => this.videoWrapperRef.current && toggleFullscreen(this.videoWrapperRef.current));
     _defineProperty(this, "onFullScreenButtonClick", () => {
       this.toggleFullscreen();
       this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
     });
     _defineProperty(this, "onResize", width => {
-      if (width > MEDIUM_VIDEO_MAX_WIDTH) {
-        this.setState({
-          playerSize: 'large'
-        });
-      } else if (width > SMALL_VIDEO_MAX_WIDTH) {
-        this.setState({
-          playerSize: 'medium'
-        });
-      } else {
-        this.setState({
-          playerSize: 'small'
-        });
-      }
+      this.setState({
+        playerWidth: width
+      });
     });
+    _defineProperty(this, "shouldRenderFullScreenButton", () => breakpointControls.fullScreenButton(this.state.playerWidth));
     _defineProperty(this, "renderFullScreenButton", () => {
       const {
         intl: {
@@ -285,22 +318,15 @@ class _MediaPlayerBase extends Component {
         iconBefore: icon
       });
     });
-    _defineProperty(this, "renderDownloadButton", () => {
-      const {
-        onDownloadClick
-      } = this.props;
-      if (!onDownloadClick) {
-        return;
-      }
-      return /*#__PURE__*/React.createElement(MediaButton, {
-        testId: "custom-media-player-download-button",
-        onClick: this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
-        iconBefore: /*#__PURE__*/React.createElement(DownloadIcon, {
-          color: "currentColor",
-          label: "download"
-        })
-      });
-    });
+    _defineProperty(this, "shouldRenderDownloadButton", () => breakpointControls.downloadButton(this.state.playerWidth));
+    _defineProperty(this, "renderDownloadButton", () => this.props.onDownloadClick && /*#__PURE__*/React.createElement(MediaButton, {
+      testId: "custom-media-player-download-button",
+      onClick: this.getMediaButtonClickHandler(this.props.onDownloadClick, 'downloadButton'),
+      iconBefore: /*#__PURE__*/React.createElement(DownloadIcon, {
+        color: "currentColor",
+        label: "download"
+      })
+    }));
     _defineProperty(this, "renderShortcuts", ({
       togglePlayPauseAction,
       toggleMute,
@@ -337,13 +363,14 @@ class _MediaPlayerBase extends Component {
       }
       return shortcuts;
     });
-    _defineProperty(this, "renderPlayPauseButton", isPlaying => {
+    _defineProperty(this, "shouldRenderPlayPauseButton", () => breakpointControls.playPauseButton(this.state.playerWidth));
+    _defineProperty(this, "renderPlayPauseButton", () => {
       const {
         intl: {
           formatMessage
         }
       } = this.props;
-      const toggleButtonIcon = isPlaying ? /*#__PURE__*/React.createElement(PauseIcon, {
+      const toggleButtonIcon = this.isPlaying ? /*#__PURE__*/React.createElement(PauseIcon, {
         spacing: "spacious",
         color: "currentColor",
         label: formatMessage(messages.pause)
@@ -353,16 +380,29 @@ class _MediaPlayerBase extends Component {
         label: formatMessage(messages.play)
       });
       return /*#__PURE__*/React.createElement(Tooltip, {
-        content: formatMessage(isPlaying ? messages.pause : messages.play),
+        content: formatMessage(this.isPlaying ? messages.pause : messages.play),
         position: "top"
       }, /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-play-toggle-button",
-        "data-test-is-playing": isPlaying,
+        "data-test-is-playing": this.isPlaying,
         iconBefore: toggleButtonIcon,
-        onClick: isPlaying ? this.pausePlayByButtonClick : this.startPlayByButtonClick
+        onClick: this.isPlaying ? this.pausePlayByButtonClick : this.startPlayByButtonClick
       }));
     });
-    _defineProperty(this, "renderSkipBackwardButton", skipBackward => {
+    _defineProperty(this, "defaultSkipAmount", 10);
+    _defineProperty(this, "skipBackward", (skipAmount = this.defaultSkipAmount) => {
+      var _this$actions3, _this$props$onTimeCha2, _this$props3;
+      const newTime = this.videoState.currentTime - skipAmount;
+      (_this$actions3 = this.actions) === null || _this$actions3 === void 0 ? void 0 : _this$actions3.navigate(Math.max(newTime, 0));
+      (_this$props$onTimeCha2 = (_this$props3 = this.props).onTimeChanged) === null || _this$props$onTimeCha2 === void 0 ? void 0 : _this$props$onTimeCha2.call(_this$props3);
+    });
+    _defineProperty(this, "skipForward", (skipAmount = this.defaultSkipAmount) => {
+      var _this$actions4, _this$props$onTimeCha3, _this$props4;
+      const newTime = this.videoState.currentTime + skipAmount;
+      (_this$actions4 = this.actions) === null || _this$actions4 === void 0 ? void 0 : _this$actions4.navigate(Math.min(newTime, this.videoState.duration));
+      (_this$props$onTimeCha3 = (_this$props4 = this.props).onTimeChanged) === null || _this$props$onTimeCha3 === void 0 ? void 0 : _this$props$onTimeCha3.call(_this$props4);
+    });
+    _defineProperty(this, "renderSkipBackwardButton", () => {
       const {
         intl: {
           formatMessage
@@ -378,10 +418,10 @@ class _MediaPlayerBase extends Component {
           LEGACY_fallbackIcon: SkipTenBackwardIcon,
           label: formatMessage(messages.skipBackward)
         }),
-        onClick: this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
+        onClick: this.getMediaButtonClickHandler(this.skipBackward, 'skipBackwardButton')
       }));
     });
-    _defineProperty(this, "renderSkipForwardButton", skipForward => {
+    _defineProperty(this, "renderSkipForwardButton", () => {
       const {
         intl: {
           formatMessage
@@ -397,10 +437,17 @@ class _MediaPlayerBase extends Component {
           LEGACY_fallbackIcon: SkipTenForwardIcon,
           label: formatMessage(messages.skipForward)
         }),
-        onClick: this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
+        onClick: this.getMediaButtonClickHandler(this.skipForward, 'skipForwardButton')
       }));
     });
+    _defineProperty(this, "shouldRenderSkipButtons", () => breakpointControls.skipButtons(this.state.playerWidth));
+    _defineProperty(this, "renderSkipButtons", () => {
+      return /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, this.renderSkipBackwardButton(), this.renderSkipForwardButton());
+    });
     _defineProperty(this, "renderSpinner", () => /*#__PURE__*/React.createElement(Flex, {
+      testId: "spinner",
       direction: "column",
       alignItems: "center",
       justifyContent: "center",
@@ -410,11 +457,11 @@ class _MediaPlayerBase extends Component {
       size: "large"
     })));
     _defineProperty(this, "pause", () => {
-      var _this$props$onPause, _this$props3;
+      var _this$props$onPause, _this$props5;
       if (this.actions) {
         this.actions.pause();
       }
-      (_this$props$onPause = (_this$props3 = this.props).onPause) === null || _this$props$onPause === void 0 ? void 0 : _this$props$onPause.call(_this$props3);
+      (_this$props$onPause = (_this$props5 = this.props).onPause) === null || _this$props$onPause === void 0 ? void 0 : _this$props$onPause.call(_this$props5);
     });
     _defineProperty(this, "play", () => {
       const {
@@ -461,9 +508,11 @@ class _MediaPlayerBase extends Component {
       } = this.props;
       const {
         isFullScreenEnabled,
-        playerSize,
         playbackSpeed
       } = this.state;
+      const {
+        playerSize
+      } = this;
       const {
         status,
         currentTime
@@ -555,6 +604,84 @@ class _MediaPlayerBase extends Component {
       }
       return undefined;
     });
+    _defineProperty(this, "shouldRenderCaptionsControls", () => {
+      const {
+        textTracks
+      } = this.props;
+      const {
+        playerWidth
+      } = this.state;
+      return breakpointControls.captionsControls(playerWidth) && !!textTracks;
+    });
+    _defineProperty(this, "renderCaptionsControls", () => {
+      const {
+        textTracks
+      } = this.props;
+      const {
+        areCaptionsEnabled
+      } = this.state;
+      return textTracks && /*#__PURE__*/React.createElement(CaptionsSelectControls, {
+        textTracks: textTracks,
+        onSelected: this.onTextTracksSelected,
+        areCaptionsEnabled: !!areCaptionsEnabled,
+        onCaptionsEnabledChange: this.onCaptionsEnabledChange,
+        selectedTracksIndex: this.resolveSelectedTracksIndex()
+      });
+    });
+    _defineProperty(this, "shouldRenderCaptionsAdminControls", () => {
+      var _this$props$mediaSett;
+      const {
+        playerWidth
+      } = this.state;
+      return (!this.props.fileState || this.props.fileState.status !== 'uploading') && breakpointControls.captionsAdminControls(playerWidth) && !!((_this$props$mediaSett = this.props.mediaSettings) !== null && _this$props$mediaSett !== void 0 && _this$props$mediaSett.canUpdateVideoCaptions);
+    });
+    _defineProperty(this, "renderCaptionsAdminControls", () => {
+      const {
+        isArtifactUploaderOpen,
+        artifactToDelete
+      } = this.state;
+      const {
+        textTracks,
+        identifier
+      } = this.props;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CaptionsAdminControls, {
+        textTracks: textTracks,
+        onUpload: () => this.setState({
+          isArtifactUploaderOpen: true
+        }),
+        onDelete: this.onCaptionDelete
+      }), /*#__PURE__*/React.createElement(CaptionsUploaderBrowser, {
+        identifier: identifier,
+        isOpen: isArtifactUploaderOpen,
+        onClose: () => this.setState({
+          isArtifactUploaderOpen: false
+        }),
+        onEnd: (metadata, context) => {
+          this.fireCaptionUploadSucceededEvent(context.traceId);
+        },
+        onError: (err, context) => {
+          this.fireCaptionUploadFailedEvent(context.traceId, err);
+        }
+      }), /*#__PURE__*/React.createElement(CaptionDeleteConfirmationModal, {
+        identifier: identifier,
+        artifactName: artifactToDelete,
+        onClose: () => this.setState({
+          artifactToDelete: ''
+        }),
+        onEnd: context => {
+          this.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
+          this.setState({
+            artifactToDelete: ''
+          });
+        },
+        onError: (err, context) => {
+          this.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
+          this.setState({
+            artifactToDelete: ''
+          });
+        }
+      }));
+    });
     this.state.selectedTracksIndex = this.findPreselectedTrackIndex(this.props);
     if (this.mediaUserPreferences) {
       const userCaptionsEnabled = getUserCaptionsEnabled(this.mediaUserPreferences);
@@ -602,9 +729,11 @@ class _MediaPlayerBase extends Component {
     } = this.props;
     const {
       isFullScreenEnabled,
-      playerSize,
       playbackSpeed
     } = this.state;
+    const {
+      playerSize
+    } = this;
     fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
       isAutoPlay,
       isHDAvailable,
@@ -615,17 +744,18 @@ class _MediaPlayerBase extends Component {
     }, identifier.id), createAnalyticsEvent);
     if (this.videoWrapperRef.current) {
       this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
+      this.onResize(this.videoWrapperRef.current.getBoundingClientRect().width);
     }
     simultaneousPlayManager.subscribe(this);
     if (isAutoPlay) {
-      var _this$props$onPlay, _this$props4;
+      var _this$props$onPlay, _this$props6;
       simultaneousPlayManager.pauseOthers(this);
       if (onFirstPlay) {
         this.fireFirstPlayedTrackEvent();
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
-      (_this$props$onPlay = (_this$props4 = this.props).onPlay) === null || _this$props$onPlay === void 0 ? void 0 : _this$props$onPlay.call(_this$props4);
+      (_this$props$onPlay = (_this$props6 = this.props).onPlay) === null || _this$props$onPlay === void 0 ? void 0 : _this$props$onPlay.call(_this$props6);
     }
   }
   componentWillUnmount() {
@@ -633,11 +763,14 @@ class _MediaPlayerBase extends Component {
       this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
     }
     if (this.state.isFullScreenEnabled) {
-      var _this$props$onFullscr2, _this$props5;
-      (_this$props$onFullscr2 = (_this$props5 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props5, false);
+      var _this$props$onFullscr2, _this$props7;
+      (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props7, false);
     }
     simultaneousPlayManager.unsubscribe(this);
   }
+  get playerSize() {
+    return getPlayerSize(this.state.playerWidth);
+  }
   setActions(actions) {
     // Actions are being sent constantly while the video is playing,
     // though play and pause functions are always the same objects
@@ -656,9 +789,11 @@ class _MediaPlayerBase extends Component {
     } = this.props;
     const {
       isFullScreenEnabled,
-      playerSize,
       playbackSpeed
     } = this.state;
+    const {
+      playerSize
+    } = this;
     const playbackState = {
       ...this.videoState,
       isAutoPlay,
@@ -734,6 +869,9 @@ class _MediaPlayerBase extends Component {
       artifactName
     }, this.props.identifier.id, traceId, error));
   }
+  get isPlaying() {
+    return this.videoState.status === 'playing';
+  }
   render() {
     const {
       type,
@@ -743,18 +881,8 @@ class _MediaPlayerBase extends Component {
       onError,
       poster,
       videoControlsWrapperRef,
-      textTracks,
-      areControlsVisible,
-      identifier,
-      mediaSettings: {
-        canUpdateVideoCaptions = false
-      } = {}
+      areControlsVisible
     } = this.props;
-    const {
-      areCaptionsEnabled,
-      isArtifactUploaderOpen,
-      artifactToDelete
-    } = this.state;
     return /*#__PURE__*/React.createElement(Box, {
       xcss: customVideoWrapperStyles.root,
       ref: this.videoWrapperRef,
@@ -776,36 +904,16 @@ class _MediaPlayerBase extends Component {
       //Video State(either prop or variable) is ReadOnly
       this.videoState = videoState;
       const {
-        status,
         currentTime,
         buffered,
         duration,
         isLoading
       } = videoState;
-      const {
-        playerSize
-      } = this.state;
-      const isPlaying = status === 'playing';
-      const isLargePlayer = playerSize === 'large';
-      const isMediumPlayer = playerSize === 'medium';
-      const defaultSkipAmount = 10;
-      const skipBackward = (skipAmount = defaultSkipAmount) => {
-        var _this$props$onTimeCha2, _this$props6;
-        const newTime = videoState.currentTime - skipAmount;
-        actions.navigate(Math.max(newTime, 0));
-        (_this$props$onTimeCha2 = (_this$props6 = this.props).onTimeChanged) === null || _this$props$onTimeCha2 === void 0 ? void 0 : _this$props$onTimeCha2.call(_this$props6);
-      };
-      const skipForward = (skipAmount = defaultSkipAmount) => {
-        var _this$props$onTimeCha3, _this$props7;
-        const newTime = videoState.currentTime + skipAmount;
-        actions.navigate(Math.min(newTime, videoState.duration));
-        (_this$props$onTimeCha3 = (_this$props7 = this.props).onTimeChanged) === null || _this$props$onTimeCha3 === void 0 ? void 0 : _this$props$onTimeCha3.call(_this$props7);
-      };
       const shortcuts = this.renderShortcuts({
-        togglePlayPauseAction: isPlaying ? this.pause : this.play,
+        togglePlayPauseAction: this.isPlaying ? this.pause : this.play,
         toggleMute: actions.toggleMute,
-        skipBackward,
-        skipForward
+        skipBackward: this.skipBackward,
+        skipForward: this.skipForward
       });
       return /*#__PURE__*/React.createElement(Flex, {
         direction: "column",
@@ -814,7 +922,7 @@ class _MediaPlayerBase extends Component {
         setWidth: this.onResize
       }), shortcuts, isLoading && this.renderSpinner(), /*#__PURE__*/React.createElement(PlayPauseBlanket, {
         onDoubleClick: this.doubleClickToFullscreen,
-        onClick: isPlaying ? this.pausePlayByBlanketClick : this.startPlayByBlanketClick,
+        onClick: this.isPlaying ? this.pausePlayByBlanketClick : this.startPlayByBlanketClick,
         "data-testid": "play-pause-blanket"
       }, video), /*#__PURE__*/React.createElement(ControlsWrapper, {
         ref: videoControlsWrapperRef,
@@ -828,57 +936,15 @@ class _MediaPlayerBase extends Component {
         onChange: actions.navigate,
         onChanged: this.onTimeChanged,
         disableThumbTooltip: true,
-        skipBackward: skipBackward,
-        skipForward: skipForward,
+        skipBackward: this.skipBackward,
+        skipForward: this.skipForward,
         isAlwaysActive: false
       })), /*#__PURE__*/React.createElement(Flex, {
         alignItems: "center",
         justifyContent: "space-between",
         xcss: timebarWrapperStyles.root
-      }, /*#__PURE__*/React.createElement(LeftControls, null, this.renderPlayPauseButton(isPlaying), isLargePlayer && this.renderSkipBackwardButton(skipBackward), isLargePlayer && this.renderSkipForwardButton(skipForward), this.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/React.createElement(RightControls, null, (isMediumPlayer || isLargePlayer) && this.renderCurrentTime(videoState), isLargePlayer && !fg('platform_media_disable_video_640p_artifact_usage') && this.renderHDButton(), isLargePlayer && this.renderSpeedControls(), textTracks && /*#__PURE__*/React.createElement(CaptionsSelectControls, {
-        textTracks: textTracks,
-        onSelected: this.onTextTracksSelected,
-        areCaptionsEnabled: !!areCaptionsEnabled,
-        onCaptionsEnabledChange: this.onCaptionsEnabledChange,
-        selectedTracksIndex: this.resolveSelectedTracksIndex()
-      }), this.renderFullScreenButton(), isLargePlayer && this.renderDownloadButton(), isMediumPlayer || isLargePlayer && canUpdateVideoCaptions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CaptionsAdminControls, {
-        textTracks: textTracks,
-        onUpload: () => this.setState({
-          isArtifactUploaderOpen: true
-        }),
-        onDelete: this.onCaptionDelete
-      }), /*#__PURE__*/React.createElement(CaptionsUploaderBrowser, {
-        identifier: identifier,
-        isOpen: isArtifactUploaderOpen,
-        onClose: () => this.setState({
-          isArtifactUploaderOpen: false
-        }),
-        onEnd: (metadata, context) => {
-          this.fireCaptionUploadSucceededEvent(context.traceId);
-        },
-        onError: (err, context) => {
-          this.fireCaptionUploadFailedEvent(context.traceId, err);
-        }
-      }), /*#__PURE__*/React.createElement(CaptionDeleteConfirmationModal, {
-        identifier: identifier,
-        artifactName: artifactToDelete,
-        onClose: () => this.setState({
-          artifactToDelete: ''
-        }),
-        onEnd: context => {
-          this.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
-          this.setState({
-            artifactToDelete: ''
-          });
-        },
-        onError: (err, context) => {
-          this.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
-          this.setState({
-            artifactToDelete: ''
-          });
-        }
-      }))))));
+      }, /*#__PURE__*/React.createElement(LeftControls, null, this.shouldRenderPlayPauseButton() && this.renderPlayPauseButton(), this.shouldRenderSkipButtons() && this.renderSkipButtons(), this.shouldRenderVolume() && this.renderVolume()), /*#__PURE__*/React.createElement(RightControls, null, this.shouldRenderCurrentTime() && this.renderCurrentTime(), this.shouldRenderCaptionsControls() && this.renderCaptionsControls(), this.shouldRenderSpeedControls() && this.renderSpeedControls(), this.shouldRenderHdButton() && this.renderHDButton(), this.shouldRenderDownloadButton() && this.renderDownloadButton(), this.shouldRenderFullScreenButton() && this.renderFullScreenButton(), this.shouldRenderCaptionsAdminControls() && this.renderCaptionsAdminControls()))));
     }));
   }
 }
-export const MediaPlayerBase = withAnalyticsEvents()(injectIntl(_MediaPlayerBase));
+export const MediaPlayerBase = injectIntl(_MediaPlayerBase);