@atlaskit/media-ui 28.3.3 → 28.4.0

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaPlayerBase = void 0;
+exports.breakpoints = exports.MediaPlayerBase = void 0;
 require("./mediaPlayerBase.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -24,7 +24,6 @@ var _volumeHighHipchatOutgoingSound = _interopRequireDefault(require("@atlaskit/
 var _videoHd = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd"));
 var _videoHdFilled = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd-filled"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
-var _analyticsNext = require("@atlaskit/analytics-next");
 var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _MediaButton = _interopRequireDefault(require("../../MediaButton"));
@@ -60,10 +59,59 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* 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
-var MEDIUM_VIDEO_MAX_WIDTH = 400;
-var SMALL_VIDEO_MAX_WIDTH = 245;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
 var VIEWED_TRACKING_SECS = 2;
+var breakpoints = exports.breakpoints = {
+  LARGE_VIDEO_MAX_WIDTH: 570,
+  MEDIUM_VIDEO_MAX_WIDTH: 430,
+  SMALL_VIDEO_MAX_WIDTH: 260
+};
+var breakpointControls = {
+  playPauseButton: function playPauseButton() {
+    return true;
+  },
+  volume: function volume() {
+    return true;
+  },
+  fullScreenButton: function fullScreenButton() {
+    return true;
+  },
+  currentTime: function currentTime(playerWidth) {
+    return playerWidth > breakpoints.SMALL_VIDEO_MAX_WIDTH;
+  },
+  captionsControls: function captionsControls(playerWidth) {
+    return playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH;
+  },
+  downloadButton: function downloadButton(playerWidth) {
+    return playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH;
+  },
+  volumeSlider: function volumeSlider(playerWidth) {
+    return playerWidth > breakpoints.MEDIUM_VIDEO_MAX_WIDTH;
+  },
+  skipButtons: function skipButtons(playerWidth) {
+    return playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH;
+  },
+  speedControls: function speedControls(playerWidth) {
+    return playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH;
+  },
+  hdButton: function hdButton(playerWidth) {
+    return playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH;
+  },
+  captionsAdminControls: function captionsAdminControls(playerWidth) {
+    return playerWidth > breakpoints.LARGE_VIDEO_MAX_WIDTH;
+  }
+};
+var getPlayerSize = function 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 */
 
@@ -95,14 +143,18 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       volume: 1,
       status: 'paused',
       duration: 0,
-      isMuted: false
+      isMuted: false,
+      currentActiveCues: function currentActiveCues() {
+        return undefined;
+      }
     });
     (0, _defineProperty2.default)(_this, "wasPlayedOnce", false);
     (0, _defineProperty2.default)(_this, "lastCurrentTime", 0);
     (0, _defineProperty2.default)(_this, "timeSaver", new _timeSaver.TimeSaver(_this.props.lastWatchTimeConfig));
     (0, _defineProperty2.default)(_this, "state", {
       isFullScreenEnabled: false,
-      playerSize: 'large',
+      playerWidth: 100,
+      // initial value for playerSize: 'small', i.e. width < 260px
       playbackSpeed: 1,
       selectedTracksIndex: -1,
       areCaptionsEnabled: false,
@@ -133,8 +185,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         createAnalyticsEvent = _this$props.createAnalyticsEvent;
       var _this$state = _this.state,
         isFullScreenEnabled = _this$state.isFullScreenEnabled,
-        playerSize = _this$state.playerSize,
         playbackSpeed = _this$state.playbackSpeed;
+      var _this2 = _this,
+        playerSize = _this2.playerSize;
       (0, _analytics.fireAnalyticsEvent)((0, _analytics.createFirstPlayedTrackEvent)(type, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -180,22 +233,25 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.timeSaver.defaultTime = 0;
       }
     });
-    (0, _defineProperty2.default)(_this, "renderCurrentTime", function (_ref2) {
-      var currentTime = _ref2.currentTime,
-        duration = _ref2.duration;
+    (0, _defineProperty2.default)(_this, "shouldRenderCurrentTime", function () {
+      return breakpointControls.currentTime(_this.state.playerWidth);
+    });
+    (0, _defineProperty2.default)(_this, "renderCurrentTime", function () {
       return /*#__PURE__*/_react.default.createElement(_styled.CurrentTime, {
-        draggable: false
-      }, (0, _formatDuration.formatDuration)(currentTime), " / ", (0, _formatDuration.formatDuration)(duration));
+        draggable: false,
+        "data-testid": "current-time"
+      }, (0, _formatDuration.formatDuration)(_this.videoState.currentTime), " / ", (0, _formatDuration.formatDuration)(_this.videoState.duration));
     });
-    (0, _defineProperty2.default)(_this, "renderHDButton", function () {
+    (0, _defineProperty2.default)(_this, "shouldRenderHdButton", function () {
       var _this$props4 = _this.props,
         type = _this$props4.type,
-        isHDAvailable = _this$props4.isHDAvailable,
-        isHDActive = _this$props4.isHDActive,
-        onHDToggleClick = _this$props4.onHDToggleClick;
-      if (type === 'audio' || !isHDAvailable) {
-        return;
-      }
+        isHDAvailable = _this$props4.isHDAvailable;
+      return !(0, _platformFeatureFlags.fg)('platform_media_disable_video_640p_artifact_usage') && breakpointControls.hdButton(_this.state.playerWidth) && type !== 'audio' && !!isHDAvailable;
+    });
+    (0, _defineProperty2.default)(_this, "renderHDButton", function () {
+      var _this$props5 = _this.props,
+        isHDActive = _this$props5.isHDActive,
+        onHDToggleClick = _this$props5.onHDToggleClick;
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-hd-button",
         onClick: !!onHDToggleClick ? _this.getMediaButtonClickHandler(onHDToggleClick, 'HDButton') : undefined,
@@ -216,6 +272,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       });
       _this.createAndFireUIEvent('playbackSpeedChange');
     });
+    (0, _defineProperty2.default)(_this, "shouldRenderSpeedControls", function () {
+      return breakpointControls.speedControls(_this.state.playerWidth);
+    });
     (0, _defineProperty2.default)(_this, "renderSpeedControls", function () {
       var playbackSpeed = _this.state.playbackSpeed;
       var originalDimensions = _this.props.originalDimensions;
@@ -228,24 +287,38 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         }
       });
     });
-    (0, _defineProperty2.default)(_this, "renderVolume", function (videoState, actions, showSlider) {
+    (0, _defineProperty2.default)(_this, "shouldRenderVolume", function () {
+      return breakpointControls.volume(_this.state.playerWidth);
+    });
+    (0, _defineProperty2.default)(_this, "shouldRenderVolumeSLider", function () {
+      return breakpointControls.volumeSlider(_this.state.playerWidth);
+    });
+    (0, _defineProperty2.default)(_this, "renderVolume", function () {
+      var _this$actions, _this$actions2;
+      var showSlider = _this.shouldRenderVolumeSLider();
       return /*#__PURE__*/_react.default.createElement(_styled.VolumeWrapper, {
         showSlider: showSlider
       }, /*#__PURE__*/_react.default.createElement(_styled.VolumeToggleWrapper, {
-        isMuted: videoState.isMuted
+        isMuted: _this.videoState.isMuted
       }, /*#__PURE__*/_react.default.createElement(_styled.MutedIndicator, {
-        isMuted: videoState.isMuted
+        isMuted: _this.videoState.isMuted
       }), /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-volume-toggle-button",
-        onClick: _this.getMediaButtonClickHandler(actions.toggleMute, 'muteButton'),
+        onClick: _this.getMediaButtonClickHandler(((_this$actions = _this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.toggleMute) || function () {
+          return undefined;
+        }, 'muteButton'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_volumeHighHipchatOutgoingSound.default, {
           color: "currentColor",
           label: _this.props.intl.formatMessage(_messages.messages.volumeMuteButtonAria)
         }),
-        "aria-pressed": videoState.isMuted
-      })), showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, null, /*#__PURE__*/_react.default.createElement(_volumeRange.default, {
-        onChange: actions.setVolume,
-        currentVolume: videoState.volume,
+        "aria-pressed": _this.videoState.isMuted
+      })), showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, {
+        "data-testid": "volume-time-range-wrapper"
+      }, /*#__PURE__*/_react.default.createElement(_volumeRange.default, {
+        onChange: ((_this$actions2 = _this.actions) === null || _this$actions2 === void 0 ? void 0 : _this$actions2.setVolume) || function () {
+          return undefined;
+        },
+        currentVolume: _this.videoState.volume,
         isAlwaysActive: true,
         onChanged: _this.onVolumeChanged,
         ariaLabel: _this.props.intl.formatMessage(_messages.messages.volumeLevelControlAria)
@@ -259,24 +332,17 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       _this.createAndFireUIEvent('mediaButtonClick', 'fullScreenButton');
     });
     (0, _defineProperty2.default)(_this, "onResize", function (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
+      });
+    });
+    (0, _defineProperty2.default)(_this, "shouldRenderFullScreenButton", function () {
+      return breakpointControls.fullScreenButton(_this.state.playerWidth);
     });
     (0, _defineProperty2.default)(_this, "renderFullScreenButton", function () {
-      var _this$props5 = _this.props,
-        formatMessage = _this$props5.intl.formatMessage,
-        type = _this$props5.type;
+      var _this$props6 = _this.props,
+        formatMessage = _this$props6.intl.formatMessage,
+        type = _this$props6.type;
       if (type === 'audio') {
         return;
       }
@@ -294,25 +360,24 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         iconBefore: icon
       });
     });
+    (0, _defineProperty2.default)(_this, "shouldRenderDownloadButton", function () {
+      return breakpointControls.downloadButton(_this.state.playerWidth);
+    });
     (0, _defineProperty2.default)(_this, "renderDownloadButton", function () {
-      var onDownloadClick = _this.props.onDownloadClick;
-      if (!onDownloadClick) {
-        return;
-      }
-      return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
+      return _this.props.onDownloadClick && /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-download-button",
-        onClick: _this.getMediaButtonClickHandler(onDownloadClick, 'downloadButton'),
+        onClick: _this.getMediaButtonClickHandler(_this.props.onDownloadClick, 'downloadButton'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_download.default, {
           color: "currentColor",
           label: "download"
         })
       });
     });
-    (0, _defineProperty2.default)(_this, "renderShortcuts", function (_ref3) {
-      var togglePlayPauseAction = _ref3.togglePlayPauseAction,
-        toggleMute = _ref3.toggleMute,
-        skipBackward = _ref3.skipBackward,
-        skipForward = _ref3.skipForward;
+    (0, _defineProperty2.default)(_this, "renderShortcuts", function (_ref2) {
+      var togglePlayPauseAction = _ref2.togglePlayPauseAction,
+        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.default.createElement(_shortcut.Shortcut, {
@@ -339,9 +404,12 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       return shortcuts;
     });
-    (0, _defineProperty2.default)(_this, "renderPlayPauseButton", function (isPlaying) {
+    (0, _defineProperty2.default)(_this, "shouldRenderPlayPauseButton", function () {
+      return breakpointControls.playPauseButton(_this.state.playerWidth);
+    });
+    (0, _defineProperty2.default)(_this, "renderPlayPauseButton", function () {
       var formatMessage = _this.props.intl.formatMessage;
-      var toggleButtonIcon = isPlaying ? /*#__PURE__*/_react.default.createElement(_videoPauseVidPause.default, {
+      var toggleButtonIcon = _this.isPlaying ? /*#__PURE__*/_react.default.createElement(_videoPauseVidPause.default, {
         spacing: "spacious",
         color: "currentColor",
         label: formatMessage(_messages.messages.pause)
@@ -351,16 +419,31 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         label: formatMessage(_messages.messages.play)
       });
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: formatMessage(isPlaying ? _messages.messages.pause : _messages.messages.play),
+        content: formatMessage(_this.isPlaying ? _messages.messages.pause : _messages.messages.play),
         position: "top"
       }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         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
       }));
     });
-    (0, _defineProperty2.default)(_this, "renderSkipBackwardButton", function (skipBackward) {
+    (0, _defineProperty2.default)(_this, "defaultSkipAmount", 10);
+    (0, _defineProperty2.default)(_this, "skipBackward", function () {
+      var _this$actions3, _this$props$onTimeCha2, _this$props7;
+      var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.defaultSkipAmount;
+      var newTime = _this.videoState.currentTime - skipAmount;
+      (_this$actions3 = _this.actions) === null || _this$actions3 === void 0 || _this$actions3.navigate(Math.max(newTime, 0));
+      (_this$props$onTimeCha2 = (_this$props7 = _this.props).onTimeChanged) === null || _this$props$onTimeCha2 === void 0 || _this$props$onTimeCha2.call(_this$props7);
+    });
+    (0, _defineProperty2.default)(_this, "skipForward", function () {
+      var _this$actions4, _this$props$onTimeCha3, _this$props8;
+      var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.defaultSkipAmount;
+      var newTime = _this.videoState.currentTime + skipAmount;
+      (_this$actions4 = _this.actions) === null || _this$actions4 === void 0 || _this$actions4.navigate(Math.min(newTime, _this.videoState.duration));
+      (_this$props$onTimeCha3 = (_this$props8 = _this.props).onTimeChanged) === null || _this$props$onTimeCha3 === void 0 || _this$props$onTimeCha3.call(_this$props8);
+    });
+    (0, _defineProperty2.default)(_this, "renderSkipBackwardButton", function () {
       var formatMessage = _this.props.intl.formatMessage;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: formatMessage(_messages.messages.skipBackward),
@@ -372,10 +455,10 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
           LEGACY_fallbackIcon: _legacyCustomIcons.SkipTenBackwardIcon,
           label: formatMessage(_messages.messages.skipBackward)
         }),
-        onClick: _this.getMediaButtonClickHandler(skipBackward, 'skipBackwardButton')
+        onClick: _this.getMediaButtonClickHandler(_this.skipBackward, 'skipBackwardButton')
       }));
     });
-    (0, _defineProperty2.default)(_this, "renderSkipForwardButton", function (skipForward) {
+    (0, _defineProperty2.default)(_this, "renderSkipForwardButton", function () {
       var formatMessage = _this.props.intl.formatMessage;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: formatMessage(_messages.messages.skipForward),
@@ -387,11 +470,20 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
           LEGACY_fallbackIcon: _legacyCustomIcons.SkipTenForwardIcon,
           label: formatMessage(_messages.messages.skipForward)
         }),
-        onClick: _this.getMediaButtonClickHandler(skipForward, 'skipForwardButton')
+        onClick: _this.getMediaButtonClickHandler(_this.skipForward, 'skipForwardButton')
       }));
     });
+    (0, _defineProperty2.default)(_this, "shouldRenderSkipButtons", function () {
+      return breakpointControls.skipButtons(_this.state.playerWidth);
+    });
+    (0, _defineProperty2.default)(_this, "renderSkipButtons", function () {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        direction: "row"
+      }, _this.renderSkipBackwardButton(), _this.renderSkipForwardButton());
+    });
     (0, _defineProperty2.default)(_this, "renderSpinner", function () {
       return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        testId: "spinner",
         direction: "column",
         alignItems: "center",
         justifyContent: "center",
@@ -402,11 +494,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     });
     (0, _defineProperty2.default)(_this, "pause", function () {
-      var _this$props$onPause, _this$props6;
+      var _this$props$onPause, _this$props9;
       if (_this.actions) {
         _this.actions.pause();
       }
-      (_this$props$onPause = (_this$props6 = _this.props).onPause) === null || _this$props$onPause === void 0 || _this$props$onPause.call(_this$props6);
+      (_this$props$onPause = (_this$props9 = _this.props).onPause) === null || _this$props$onPause === void 0 || _this$props$onPause.call(_this$props9);
     });
     (0, _defineProperty2.default)(_this, "play", function () {
       var onFirstPlay = _this.props.onFirstPlay;
@@ -443,17 +535,18 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     (0, _defineProperty2.default)(_this, "onViewed", function (videoState) {
-      var _this$props7 = _this.props,
-        createAnalyticsEvent = _this$props7.createAnalyticsEvent,
-        identifier = _this$props7.identifier,
-        isAutoPlay = _this$props7.isAutoPlay,
-        isHDAvailable = _this$props7.isHDAvailable,
-        isHDActive = _this$props7.isHDActive,
-        type = _this$props7.type;
+      var _this$props0 = _this.props,
+        createAnalyticsEvent = _this$props0.createAnalyticsEvent,
+        identifier = _this$props0.identifier,
+        isAutoPlay = _this$props0.isAutoPlay,
+        isHDAvailable = _this$props0.isHDAvailable,
+        isHDActive = _this$props0.isHDActive,
+        type = _this$props0.type;
       var _this$state2 = _this.state,
         isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-        playerSize = _this$state2.playerSize,
         playbackSpeed = _this$state2.playbackSpeed;
+      var _this3 = _this,
+        playerSize = _this3.playerSize;
       var status = videoState.status,
         currentTime = videoState.currentTime;
       if (status === 'playing' && (currentTime < _this.lastCurrentTime || currentTime >= _this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
@@ -533,6 +626,78 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       return undefined;
     });
+    (0, _defineProperty2.default)(_this, "shouldRenderCaptionsControls", function () {
+      var textTracks = _this.props.textTracks;
+      var playerWidth = _this.state.playerWidth;
+      return breakpointControls.captionsControls(playerWidth) && !!textTracks;
+    });
+    (0, _defineProperty2.default)(_this, "renderCaptionsControls", function () {
+      var textTracks = _this.props.textTracks;
+      var areCaptionsEnabled = _this.state.areCaptionsEnabled;
+      return textTracks && /*#__PURE__*/_react.default.createElement(_captionsSelectControls.CaptionsSelectControls, {
+        textTracks: textTracks,
+        onSelected: _this.onTextTracksSelected,
+        areCaptionsEnabled: !!areCaptionsEnabled,
+        onCaptionsEnabledChange: _this.onCaptionsEnabledChange,
+        selectedTracksIndex: _this.resolveSelectedTracksIndex()
+      });
+    });
+    (0, _defineProperty2.default)(_this, "shouldRenderCaptionsAdminControls", function () {
+      var _this$props$mediaSett;
+      var playerWidth = _this.state.playerWidth;
+      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);
+    });
+    (0, _defineProperty2.default)(_this, "renderCaptionsAdminControls", function () {
+      var _this$state4 = _this.state,
+        isArtifactUploaderOpen = _this$state4.isArtifactUploaderOpen,
+        artifactToDelete = _this$state4.artifactToDelete;
+      var _this$props1 = _this.props,
+        textTracks = _this$props1.textTracks,
+        identifier = _this$props1.identifier;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_captionsAdminControls.CaptionsAdminControls, {
+        textTracks: textTracks,
+        onUpload: function onUpload() {
+          return _this.setState({
+            isArtifactUploaderOpen: true
+          });
+        },
+        onDelete: _this.onCaptionDelete
+      }), /*#__PURE__*/_react.default.createElement(_artifactUploader.CaptionsUploaderBrowser, {
+        identifier: identifier,
+        isOpen: isArtifactUploaderOpen,
+        onClose: function onClose() {
+          return _this.setState({
+            isArtifactUploaderOpen: false
+          });
+        },
+        onEnd: function onEnd(metadata, context) {
+          _this.fireCaptionUploadSucceededEvent(context.traceId);
+        },
+        onError: function onError(err, context) {
+          _this.fireCaptionUploadFailedEvent(context.traceId, err);
+        }
+      }), /*#__PURE__*/_react.default.createElement(_captionDeleteConfirmationModal.default, {
+        identifier: identifier,
+        artifactName: artifactToDelete,
+        onClose: function onClose() {
+          return _this.setState({
+            artifactToDelete: ''
+          });
+        },
+        onEnd: function onEnd(context) {
+          _this.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
+          _this.setState({
+            artifactToDelete: ''
+          });
+        },
+        onError: function onError(err, context) {
+          _this.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
+          _this.setState({
+            artifactToDelete: ''
+          });
+        }
+      }));
+    });
     _this.state.selectedTracksIndex = _this.findPreselectedTrackIndex(_this.props);
     if (_this.mediaUserPreferences) {
       var userCaptionsEnabled = (0, _captions.getUserCaptionsEnabled)(_this.mediaUserPreferences);
@@ -545,9 +710,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _prevTextTracks$capti, _textTracks$captions2;
-      var _this$props8 = this.props,
-        intl = _this$props8.intl,
-        textTracks = _this$props8.textTracks;
+      var _this$props10 = this.props,
+        intl = _this$props10.intl,
+        textTracks = _this$props10.textTracks;
       var prevIntl = prevProps.intl,
         prevTextTracks = prevProps.textTracks;
       var didLocaleChange = prevIntl.locale !== intl.locale;
@@ -564,27 +729,27 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "mediaUserPreferences",
     get: function get() {
-      var _this$props$mediaSett = this.props.mediaSettings,
-        _this$props$mediaSett2 = _this$props$mediaSett === void 0 ? {} : _this$props$mediaSett,
-        _this$props$mediaSett3 = _this$props$mediaSett2.mediaUserPreferences,
-        mediaUserPreferences = _this$props$mediaSett3 === void 0 ? undefined : _this$props$mediaSett3;
+      var _this$props$mediaSett2 = this.props.mediaSettings,
+        _this$props$mediaSett3 = _this$props$mediaSett2 === void 0 ? {} : _this$props$mediaSett2,
+        _this$props$mediaSett4 = _this$props$mediaSett3.mediaUserPreferences,
+        mediaUserPreferences = _this$props$mediaSett4 === void 0 ? undefined : _this$props$mediaSett4;
       return mediaUserPreferences;
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props9 = this.props,
-        type = _this$props9.type,
-        identifier = _this$props9.identifier,
-        isAutoPlay = _this$props9.isAutoPlay,
-        isHDAvailable = _this$props9.isHDAvailable,
-        isHDActive = _this$props9.isHDActive,
-        onFirstPlay = _this$props9.onFirstPlay,
-        createAnalyticsEvent = _this$props9.createAnalyticsEvent;
-      var _this$state4 = this.state,
-        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
-        playerSize = _this$state4.playerSize,
-        playbackSpeed = _this$state4.playbackSpeed;
+      var _this$props11 = this.props,
+        type = _this$props11.type,
+        identifier = _this$props11.identifier,
+        isAutoPlay = _this$props11.isAutoPlay,
+        isHDAvailable = _this$props11.isHDAvailable,
+        isHDActive = _this$props11.isHDActive,
+        onFirstPlay = _this$props11.onFirstPlay,
+        createAnalyticsEvent = _this$props11.createAnalyticsEvent;
+      var _this$state5 = this.state,
+        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
+        playbackSpeed = _this$state5.playbackSpeed;
+      var playerSize = this.playerSize;
       (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCustomMediaPlayerScreenEvent)(type, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -595,17 +760,18 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }, identifier.id), createAnalyticsEvent);
       if (this.videoWrapperRef.current) {
         this.videoWrapperRef.current.addEventListener('fullscreenchange', this.onFullScreenChange);
+        this.onResize(this.videoWrapperRef.current.getBoundingClientRect().width);
       }
       _simultaneousPlayManager.default.subscribe(this);
       if (isAutoPlay) {
-        var _this$props$onPlay, _this$props0;
+        var _this$props$onPlay, _this$props12;
         _simultaneousPlayManager.default.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
-        (_this$props$onPlay = (_this$props0 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props0);
+        (_this$props$onPlay = (_this$props12 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props12);
       }
     }
   }, {
@@ -615,11 +781,16 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props1;
-        (_this$props$onFullscr2 = (_this$props1 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props1, false);
+        var _this$props$onFullscr2, _this$props13;
+        (_this$props$onFullscr2 = (_this$props13 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props13, false);
       }
       _simultaneousPlayManager.default.unsubscribe(this);
     }
+  }, {
+    key: "playerSize",
+    get: function get() {
+      return getPlayerSize(this.state.playerWidth);
+    }
   }, {
     key: "setActions",
     value: function setActions(actions) {
@@ -632,17 +803,17 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props10 = this.props,
-        type = _this$props10.type,
-        identifier = _this$props10.identifier,
-        isHDActive = _this$props10.isHDActive,
-        isHDAvailable = _this$props10.isHDAvailable,
-        isAutoPlay = _this$props10.isAutoPlay,
-        createAnalyticsEvent = _this$props10.createAnalyticsEvent;
-      var _this$state5 = this.state,
-        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
-        playerSize = _this$state5.playerSize,
-        playbackSpeed = _this$state5.playbackSpeed;
+      var _this$props14 = this.props,
+        type = _this$props14.type,
+        identifier = _this$props14.identifier,
+        isHDActive = _this$props14.isHDActive,
+        isHDAvailable = _this$props14.isHDAvailable,
+        isAutoPlay = _this$props14.isAutoPlay,
+        createAnalyticsEvent = _this$props14.createAnalyticsEvent;
+      var _this$state6 = this.state,
+        isFullScreenEnabled = _this$state6.isFullScreenEnabled,
+        playbackSpeed = _this$state6.playbackSpeed;
+      var playerSize = this.playerSize;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -723,29 +894,24 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         artifactName: artifactName
       }), this.props.identifier.id, traceId, error));
     }
+  }, {
+    key: "isPlaying",
+    get: function get() {
+      return this.videoState.status === 'playing';
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var _this$props11 = this.props,
-        type = _this$props11.type,
-        src = _this$props11.src,
-        isAutoPlay = _this$props11.isAutoPlay,
-        onCanPlay = _this$props11.onCanPlay,
-        onError = _this$props11.onError,
-        poster = _this$props11.poster,
-        videoControlsWrapperRef = _this$props11.videoControlsWrapperRef,
-        textTracks = _this$props11.textTracks,
-        areControlsVisible = _this$props11.areControlsVisible,
-        identifier = _this$props11.identifier,
-        _this$props11$mediaSe = _this$props11.mediaSettings,
-        _this$props11$mediaSe2 = _this$props11$mediaSe === void 0 ? {} : _this$props11$mediaSe,
-        _this$props11$mediaSe3 = _this$props11$mediaSe2.canUpdateVideoCaptions,
-        canUpdateVideoCaptions = _this$props11$mediaSe3 === void 0 ? false : _this$props11$mediaSe3;
-      var _this$state6 = this.state,
-        areCaptionsEnabled = _this$state6.areCaptionsEnabled,
-        isArtifactUploaderOpen = _this$state6.isArtifactUploaderOpen,
-        artifactToDelete = _this$state6.artifactToDelete;
+      var _this4 = this;
+      var _this$props15 = this.props,
+        type = _this$props15.type,
+        src = _this$props15.src,
+        isAutoPlay = _this$props15.isAutoPlay,
+        onCanPlay = _this$props15.onCanPlay,
+        onError = _this$props15.onError,
+        poster = _this$props15.poster,
+        videoControlsWrapperRef = _this$props15.videoControlsWrapperRef,
+        areControlsVisible = _this$props15.areControlsVisible;
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         xcss: customVideoWrapperStyles.root,
         ref: this.videoWrapperRef,
@@ -762,52 +928,32 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         textTracks: this.resolveTextTracks(),
         textTracksPosition: areControlsVisible ? -3.7 : undefined
       }, function (video, videoState, actions) {
-        _this2.onViewed(videoState);
-        _this2.setActions(actions);
+        _this4.onViewed(videoState);
+        _this4.setActions(actions);
         //Video State(either prop or variable) is ReadOnly
-        _this2.videoState = videoState;
-        var status = videoState.status,
-          currentTime = videoState.currentTime,
+        _this4.videoState = videoState;
+        var 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 defaultSkipAmount = 10;
-        var skipBackward = function skipBackward() {
-          var _this2$props$onTimeCh, _this2$props;
-          var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
-          var newTime = videoState.currentTime - skipAmount;
-          actions.navigate(Math.max(newTime, 0));
-          (_this2$props$onTimeCh = (_this2$props = _this2.props).onTimeChanged) === null || _this2$props$onTimeCh === void 0 || _this2$props$onTimeCh.call(_this2$props);
-        };
-        var skipForward = function skipForward() {
-          var _this2$props$onTimeCh2, _this2$props2;
-          var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
-          var newTime = videoState.currentTime + skipAmount;
-          actions.navigate(Math.min(newTime, videoState.duration));
-          (_this2$props$onTimeCh2 = (_this2$props2 = _this2.props).onTimeChanged) === null || _this2$props$onTimeCh2 === void 0 || _this2$props$onTimeCh2.call(_this2$props2);
-        };
-        var shortcuts = _this2.renderShortcuts({
-          togglePlayPauseAction: isPlaying ? _this2.pause : _this2.play,
+        var shortcuts = _this4.renderShortcuts({
+          togglePlayPauseAction: _this4.isPlaying ? _this4.pause : _this4.play,
           toggleMute: actions.toggleMute,
-          skipBackward: skipBackward,
-          skipForward: skipForward
+          skipBackward: _this4.skipBackward,
+          skipForward: _this4.skipForward
         });
         return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           direction: "column",
           xcss: videoWrapperStyles.root
         }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
-          setWidth: _this2.onResize
-        }), shortcuts, isLoading && _this2.renderSpinner(), /*#__PURE__*/_react.default.createElement(_playPauseBlanket.PlayPauseBlanket, {
-          onDoubleClick: _this2.doubleClickToFullscreen,
-          onClick: isPlaying ? _this2.pausePlayByBlanketClick : _this2.startPlayByBlanketClick,
+          setWidth: _this4.onResize
+        }), shortcuts, isLoading && _this4.renderSpinner(), /*#__PURE__*/_react.default.createElement(_playPauseBlanket.PlayPauseBlanket, {
+          onDoubleClick: _this4.doubleClickToFullscreen,
+          onClick: _this4.isPlaying ? _this4.pausePlayByBlanketClick : _this4.startPlayByBlanketClick,
           "data-testid": "play-pause-blanket"
         }, video), /*#__PURE__*/_react.default.createElement(_styledCompiled.ControlsWrapper, {
           ref: videoControlsWrapperRef,
-          controlsHidden: _this2.wasPlayedOnce
+          controlsHidden: _this4.wasPlayedOnce
         }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
           xcss: timeWrapperStyles.root
         }, /*#__PURE__*/_react.default.createElement(_timeRange.TimeRange, {
@@ -815,66 +961,18 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
           bufferedTime: buffered,
           duration: duration,
           onChange: actions.navigate,
-          onChanged: _this2.onTimeChanged,
+          onChanged: _this4.onTimeChanged,
           disableThumbTooltip: true,
-          skipBackward: skipBackward,
-          skipForward: skipForward,
+          skipBackward: _this4.skipBackward,
+          skipForward: _this4.skipForward,
           isAlwaysActive: false
         })), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
           alignItems: "center",
           justifyContent: "space-between",
           xcss: timebarWrapperStyles.root
-        }, /*#__PURE__*/_react.default.createElement(_styled.LeftControls, null, _this2.renderPlayPauseButton(isPlaying), isLargePlayer && _this2.renderSkipBackwardButton(skipBackward), isLargePlayer && _this2.renderSkipForwardButton(skipForward), _this2.renderVolume(videoState, actions, isLargePlayer)), /*#__PURE__*/_react.default.createElement(_styled.RightControls, null, (isMediumPlayer || isLargePlayer) && _this2.renderCurrentTime(videoState), isLargePlayer && !(0, _platformFeatureFlags.fg)('platform_media_disable_video_640p_artifact_usage') && _this2.renderHDButton(), isLargePlayer && _this2.renderSpeedControls(), textTracks && /*#__PURE__*/_react.default.createElement(_captionsSelectControls.CaptionsSelectControls, {
-          textTracks: textTracks,
-          onSelected: _this2.onTextTracksSelected,
-          areCaptionsEnabled: !!areCaptionsEnabled,
-          onCaptionsEnabledChange: _this2.onCaptionsEnabledChange,
-          selectedTracksIndex: _this2.resolveSelectedTracksIndex()
-        }), _this2.renderFullScreenButton(), isLargePlayer && _this2.renderDownloadButton(), isMediumPlayer || isLargePlayer && canUpdateVideoCaptions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_captionsAdminControls.CaptionsAdminControls, {
-          textTracks: textTracks,
-          onUpload: function onUpload() {
-            return _this2.setState({
-              isArtifactUploaderOpen: true
-            });
-          },
-          onDelete: _this2.onCaptionDelete
-        }), /*#__PURE__*/_react.default.createElement(_artifactUploader.CaptionsUploaderBrowser, {
-          identifier: identifier,
-          isOpen: isArtifactUploaderOpen,
-          onClose: function onClose() {
-            return _this2.setState({
-              isArtifactUploaderOpen: false
-            });
-          },
-          onEnd: function onEnd(metadata, context) {
-            _this2.fireCaptionUploadSucceededEvent(context.traceId);
-          },
-          onError: function onError(err, context) {
-            _this2.fireCaptionUploadFailedEvent(context.traceId, err);
-          }
-        }), /*#__PURE__*/_react.default.createElement(_captionDeleteConfirmationModal.default, {
-          identifier: identifier,
-          artifactName: artifactToDelete,
-          onClose: function onClose() {
-            return _this2.setState({
-              artifactToDelete: ''
-            });
-          },
-          onEnd: function onEnd(context) {
-            _this2.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
-            _this2.setState({
-              artifactToDelete: ''
-            });
-          },
-          onError: function onError(err, context) {
-            _this2.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
-            _this2.setState({
-              artifactToDelete: ''
-            });
-          }
-        }))))));
+        }, /*#__PURE__*/_react.default.createElement(_styled.LeftControls, null, _this4.shouldRenderPlayPauseButton() && _this4.renderPlayPauseButton(), _this4.shouldRenderSkipButtons() && _this4.renderSkipButtons(), _this4.shouldRenderVolume() && _this4.renderVolume()), /*#__PURE__*/_react.default.createElement(_styled.RightControls, null, _this4.shouldRenderCurrentTime() && _this4.renderCurrentTime(), _this4.shouldRenderCaptionsControls() && _this4.renderCaptionsControls(), _this4.shouldRenderSpeedControls() && _this4.renderSpeedControls(), _this4.shouldRenderHdButton() && _this4.renderHDButton(), _this4.shouldRenderDownloadButton() && _this4.renderDownloadButton(), _this4.shouldRenderFullScreenButton() && _this4.renderFullScreenButton(), _this4.shouldRenderCaptionsAdminControls() && _this4.renderCaptionsAdminControls()))));
       }));
     }
   }]);
 }(_react.Component);
-var MediaPlayerBase = exports.MediaPlayerBase = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(_MediaPlayerBase));
+var MediaPlayerBase = exports.MediaPlayerBase = (0, _reactIntlNext.injectIntl)(_MediaPlayerBase);