@atlaskit/media-ui 28.2.1 → 28.2.3

package/dist/esm/customMediaPlayer/index-compiled.js

@@ -131,13 +131,22 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "onTimeChanged", function () {
+      var _this$props3, _this$props3$onTimeCh;
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
+      (_this$props3 = _this.props) === null || _this$props3 === void 0 || (_this$props3$onTimeCh = _this$props3.onTimeChanged) === null || _this$props3$onTimeCh === void 0 || _this$props3$onTimeCh.call(_this$props3);
     });
     _defineProperty(_this, "onVolumeChanged", function () {
       _this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
     });
+    _defineProperty(_this, "getDefaultTime", function () {
+      return _this.timeSaver.defaultTime;
+    });
     _defineProperty(_this, "onCurrentTimeChange", function (currentTime, duration) {
-      if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
+      // We rely on the saved time when switching to the new source URL
+      // so we need to save it irrespective of elapsed time or video length
+      if (fg('platform_media_resume_video_on_token_expiry')) {
+        _this.timeSaver.defaultTime = currentTime;
+      } else if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
         _this.timeSaver.defaultTime = currentTime;
       } else {
         _this.timeSaver.defaultTime = 0;
@@ -147,15 +156,16 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       var currentTime = _ref.currentTime,
         duration = _ref.duration;
       return /*#__PURE__*/React.createElement(CurrentTime, {
-        draggable: false
+        draggable: false,
+        "data-testid": "current-time"
       }, formatDuration(currentTime), " / ", formatDuration(duration));
     });
     _defineProperty(_this, "renderHDButton", function () {
-      var _this$props3 = _this.props,
-        type = _this$props3.type,
-        isHDAvailable = _this$props3.isHDAvailable,
-        isHDActive = _this$props3.isHDActive,
-        onHDToggleClick = _this$props3.onHDToggleClick;
+      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;
       }
@@ -206,7 +216,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           label: _this.props.intl.formatMessage(messages.volumeMuteButtonAria)
         }),
         "aria-pressed": videoState.isMuted
-      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, null, /*#__PURE__*/React.createElement(VolumeRange, {
+      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, {
+        "data-testid": "volume-time-range-wrapper"
+      }, /*#__PURE__*/React.createElement(VolumeRange, {
         onChange: actions.setVolume,
         currentVolume: videoState.volume,
         isAlwaysActive: true,
@@ -237,9 +249,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "renderFullScreenButton", function () {
-      var _this$props4 = _this.props,
-        formatMessage = _this$props4.intl.formatMessage,
-        type = _this$props4.type;
+      var _this$props5 = _this.props,
+        formatMessage = _this$props5.intl.formatMessage,
+        type = _this$props5.type;
       if (type === 'audio') {
         return;
       }
@@ -355,6 +367,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "renderSpinner", function () {
       return /*#__PURE__*/React.createElement(Flex, {
+        testId: "spinner",
         direction: "column",
         alignItems: "center",
         justifyContent: "center",
@@ -365,12 +378,16 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     });
     _defineProperty(_this, "pause", function () {
+      var _this$props6, _this$props6$onPause;
       if (_this.actions) {
         _this.actions.pause();
       }
+      (_this$props6 = _this.props) === null || _this$props6 === void 0 || (_this$props6$onPause = _this$props6.onPause) === null || _this$props6$onPause === void 0 || _this$props6$onPause.call(_this$props6);
     });
     _defineProperty(_this, "play", function () {
-      var onFirstPlay = _this.props.onFirstPlay;
+      var _this$props7 = _this.props,
+        onFirstPlay = _this$props7.onFirstPlay,
+        onPlay = _this$props7.onPlay;
       if (_this.actions) {
         _this.actions.play();
       }
@@ -380,6 +397,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
+      onPlay === null || onPlay === void 0 || onPlay();
     });
     _defineProperty(_this, "getMediaButtonClickHandler", function (action, buttonType) {
       return function () {
@@ -398,13 +416,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_this, "onViewed", function (videoState) {
-      var _this$props5 = _this.props,
-        createAnalyticsEvent = _this$props5.createAnalyticsEvent,
-        fileId = _this$props5.fileId,
-        isAutoPlay = _this$props5.isAutoPlay,
-        isHDAvailable = _this$props5.isHDAvailable,
-        isHDActive = _this$props5.isHDActive,
-        type = _this$props5.type;
+      var _this$props8 = _this.props,
+        createAnalyticsEvent = _this$props8.createAnalyticsEvent,
+        fileId = _this$props8.fileId,
+        isAutoPlay = _this$props8.isAutoPlay,
+        isHDAvailable = _this$props8.isHDAvailable,
+        isHDActive = _this$props8.isHDActive,
+        type = _this$props8.type;
       var _this$state2 = _this.state,
         isFullScreenEnabled = _this$state2.isFullScreenEnabled,
         playerSize = _this$state2.playerSize,
@@ -454,14 +472,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   return _createClass(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props6 = this.props,
-        type = _this$props6.type,
-        fileId = _this$props6.fileId,
-        isAutoPlay = _this$props6.isAutoPlay,
-        isHDAvailable = _this$props6.isHDAvailable,
-        isHDActive = _this$props6.isHDActive,
-        onFirstPlay = _this$props6.onFirstPlay,
-        createAnalyticsEvent = _this$props6.createAnalyticsEvent;
+      var _this$props9 = this.props,
+        type = _this$props9.type,
+        fileId = _this$props9.fileId,
+        isAutoPlay = _this$props9.isAutoPlay,
+        isHDAvailable = _this$props9.isHDAvailable,
+        isHDActive = _this$props9.isHDActive,
+        onFirstPlay = _this$props9.onFirstPlay,
+        createAnalyticsEvent = _this$props9.createAnalyticsEvent;
       var _this$state3 = this.state,
         isFullScreenEnabled = _this$state3.isFullScreenEnabled,
         playerSize = _this$state3.playerSize,
@@ -479,12 +497,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
+        var _this$props0, _this$props0$onPlay;
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
+        (_this$props0 = this.props) === null || _this$props0 === void 0 || (_this$props0$onPlay = _this$props0.onPlay) === null || _this$props0$onPlay === void 0 || _this$props0$onPlay.call(_this$props0);
       }
     }
   }, {
@@ -494,8 +514,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props7;
-        (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props7, false);
+        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);
       }
       simultaneousPlayManager.unsubscribe(this);
     }
@@ -511,13 +531,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props8 = this.props,
-        type = _this$props8.type,
-        fileId = _this$props8.fileId,
-        isHDActive = _this$props8.isHDActive,
-        isHDAvailable = _this$props8.isHDAvailable,
-        isAutoPlay = _this$props8.isAutoPlay,
-        createAnalyticsEvent = _this$props8.createAnalyticsEvent;
+      var _this$props10 = this.props,
+        type = _this$props10.type,
+        fileId = _this$props10.fileId,
+        isHDActive = _this$props10.isHDActive,
+        isHDAvailable = _this$props10.isHDAvailable,
+        isAutoPlay = _this$props10.isAutoPlay,
+        createAnalyticsEvent = _this$props10.createAnalyticsEvent;
       var _this$state4 = this.state,
         isFullScreenEnabled = _this$state4.isFullScreenEnabled,
         playerSize = _this$state4.playerSize,
@@ -564,24 +584,25 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props9 = this.props,
-        type = _this$props9.type,
-        src = _this$props9.src,
-        isAutoPlay = _this$props9.isAutoPlay,
-        onCanPlay = _this$props9.onCanPlay,
-        onError = _this$props9.onError,
-        poster = _this$props9.poster,
-        videoControlsWrapperRef = _this$props9.videoControlsWrapperRef;
+      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;
       return /*#__PURE__*/React.createElement(Box, {
         xcss: customVideoWrapperStyles.root,
         ref: this.videoWrapperRef,
         testId: "custom-media-player"
       }, /*#__PURE__*/React.createElement(MediaPlayer, {
+        "data-testid": "media-player",
         sourceType: type,
         src: src,
         autoPlay: isAutoPlay,
         onCanPlay: onCanPlay,
-        defaultTime: this.timeSaver.defaultTime,
+        defaultTime: this.getDefaultTime,
         onTimeChange: this.onCurrentTimeChange,
         onError: onError,
         poster: poster
@@ -604,11 +625,19 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
           var newTime = videoState.currentTime - skipAmount;
           actions.navigate(Math.max(newTime, 0));
+          if (fg('platform_media_resume_video_on_token_expiry')) {
+            var _this2$props, _this2$props$onTimeCh;
+            (_this2$props = _this2.props) === null || _this2$props === void 0 || (_this2$props$onTimeCh = _this2$props.onTimeChanged) === null || _this2$props$onTimeCh === void 0 || _this2$props$onTimeCh.call(_this2$props);
+          }
         };
         var skipForward = function skipForward() {
           var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
           var newTime = videoState.currentTime + skipAmount;
           actions.navigate(Math.min(newTime, videoState.duration));
+          if (fg('platform_media_resume_video_on_token_expiry')) {
+            var _this2$props2, _this2$props2$onTimeC;
+            (_this2$props2 = _this2.props) === null || _this2$props2 === void 0 || (_this2$props2$onTimeC = _this2$props2.onTimeChanged) === null || _this2$props2$onTimeC === void 0 || _this2$props2$onTimeC.call(_this2$props2);
+          }
         };
         var shortcuts = _this2.renderShortcuts({
           togglePlayPauseAction: isPlaying ? _this2.pause : _this2.play,

package/dist/esm/customMediaPlayer/index-emotion.js

@@ -21,6 +21,8 @@ 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';
+
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
 import { xcss, Box, Flex } from '@atlaskit/primitives';
 import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
@@ -140,31 +142,41 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "onTimeChanged", function () {
+      var _this$props3, _this$props3$onTimeCh;
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
+      (_this$props3 = _this.props) === null || _this$props3 === void 0 || (_this$props3$onTimeCh = _this$props3.onTimeChanged) === null || _this$props3$onTimeCh === void 0 || _this$props3$onTimeCh.call(_this$props3);
     });
     _defineProperty(_this, "onVolumeChanged", function () {
       _this.createAndFireUIEvent('volumeRangeNavigate', 'volume');
     });
     _defineProperty(_this, "onCurrentTimeChange", function (currentTime, duration) {
-      if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
+      // We rely on the saved time when switching to the new source URL
+      // so we need to save it irrespective of elapsed time or video length
+      if (fg('platform_media_resume_video_on_token_expiry')) {
+        _this.timeSaver.defaultTime = currentTime;
+      } else if (duration - currentTime > MINIMUM_DURATION_BEFORE_SAVING_TIME) {
         _this.timeSaver.defaultTime = currentTime;
       } else {
         _this.timeSaver.defaultTime = 0;
       }
     });
+    _defineProperty(_this, "getDefaultTime", function () {
+      return _this.timeSaver.defaultTime;
+    });
     _defineProperty(_this, "renderCurrentTime", function (_ref) {
       var currentTime = _ref.currentTime,
         duration = _ref.duration;
       return /*#__PURE__*/React.createElement(CurrentTime, {
-        draggable: false
+        draggable: false,
+        "data-testid": "current-time"
       }, formatDuration(currentTime), " / ", formatDuration(duration));
     });
     _defineProperty(_this, "renderHDButton", function () {
-      var _this$props3 = _this.props,
-        type = _this$props3.type,
-        isHDAvailable = _this$props3.isHDAvailable,
-        isHDActive = _this$props3.isHDActive,
-        onHDToggleClick = _this$props3.onHDToggleClick;
+      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;
       }
@@ -215,7 +227,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
           label: _this.props.intl.formatMessage(messages.volumeMuteButtonAria)
         }),
         "aria-pressed": videoState.isMuted
-      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, null, /*#__PURE__*/React.createElement(VolumeRange, {
+      })), showSlider && /*#__PURE__*/React.createElement(VolumeTimeRangeWrapper, {
+        "data-testid": "volume-time-range-wrapper"
+      }, /*#__PURE__*/React.createElement(VolumeRange, {
         onChange: actions.setVolume,
         currentVolume: videoState.volume,
         isAlwaysActive: true,
@@ -246,9 +260,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "renderFullScreenButton", function () {
-      var _this$props4 = _this.props,
-        formatMessage = _this$props4.intl.formatMessage,
-        type = _this$props4.type;
+      var _this$props5 = _this.props,
+        formatMessage = _this$props5.intl.formatMessage,
+        type = _this$props5.type;
       if (type === 'audio') {
         return;
       }
@@ -364,6 +378,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "renderSpinner", function () {
       return /*#__PURE__*/React.createElement(Flex, {
+        testId: "spinner",
         direction: "column",
         alignItems: "center",
         justifyContent: "center",
@@ -374,12 +389,16 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     });
     _defineProperty(_this, "pause", function () {
+      var _this$props6, _this$props6$onPause;
       if (_this.actions) {
         _this.actions.pause();
       }
+      (_this$props6 = _this.props) === null || _this$props6 === void 0 || (_this$props6$onPause = _this$props6.onPause) === null || _this$props6$onPause === void 0 || _this$props6$onPause.call(_this$props6);
     });
     _defineProperty(_this, "play", function () {
-      var onFirstPlay = _this.props.onFirstPlay;
+      var _this$props7 = _this.props,
+        onFirstPlay = _this$props7.onFirstPlay,
+        onPlay = _this$props7.onPlay;
       if (_this.actions) {
         _this.actions.play();
       }
@@ -389,6 +408,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
+      onPlay === null || onPlay === void 0 || onPlay();
     });
     _defineProperty(_this, "getMediaButtonClickHandler", function (action, buttonType) {
       return function () {
@@ -407,13 +427,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_this, "onViewed", function (videoState) {
-      var _this$props5 = _this.props,
-        createAnalyticsEvent = _this$props5.createAnalyticsEvent,
-        fileId = _this$props5.fileId,
-        isAutoPlay = _this$props5.isAutoPlay,
-        isHDAvailable = _this$props5.isHDAvailable,
-        isHDActive = _this$props5.isHDActive,
-        type = _this$props5.type;
+      var _this$props8 = _this.props,
+        createAnalyticsEvent = _this$props8.createAnalyticsEvent,
+        fileId = _this$props8.fileId,
+        isAutoPlay = _this$props8.isAutoPlay,
+        isHDAvailable = _this$props8.isHDAvailable,
+        isHDActive = _this$props8.isHDActive,
+        type = _this$props8.type;
       var _this$state2 = _this.state,
         isFullScreenEnabled = _this$state2.isFullScreenEnabled,
         playerSize = _this$state2.playerSize,
@@ -463,14 +483,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   return _createClass(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props6 = this.props,
-        type = _this$props6.type,
-        fileId = _this$props6.fileId,
-        isAutoPlay = _this$props6.isAutoPlay,
-        isHDAvailable = _this$props6.isHDAvailable,
-        isHDActive = _this$props6.isHDActive,
-        onFirstPlay = _this$props6.onFirstPlay,
-        createAnalyticsEvent = _this$props6.createAnalyticsEvent;
+      var _this$props9 = this.props,
+        type = _this$props9.type,
+        fileId = _this$props9.fileId,
+        isAutoPlay = _this$props9.isAutoPlay,
+        isHDAvailable = _this$props9.isHDAvailable,
+        isHDActive = _this$props9.isHDActive,
+        onFirstPlay = _this$props9.onFirstPlay,
+        createAnalyticsEvent = _this$props9.createAnalyticsEvent;
       var _this$state3 = this.state,
         isFullScreenEnabled = _this$state3.isFullScreenEnabled,
         playerSize = _this$state3.playerSize,
@@ -488,12 +508,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
+        var _this$props0, _this$props0$onPlay;
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
+        (_this$props0 = this.props) === null || _this$props0 === void 0 || (_this$props0$onPlay = _this$props0.onPlay) === null || _this$props0$onPlay === void 0 || _this$props0$onPlay.call(_this$props0);
       }
     }
   }, {
@@ -503,8 +525,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props7;
-        (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props7, false);
+        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);
       }
       simultaneousPlayManager.unsubscribe(this);
     }
@@ -520,13 +542,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props8 = this.props,
-        type = _this$props8.type,
-        fileId = _this$props8.fileId,
-        isHDActive = _this$props8.isHDActive,
-        isHDAvailable = _this$props8.isHDAvailable,
-        isAutoPlay = _this$props8.isAutoPlay,
-        createAnalyticsEvent = _this$props8.createAnalyticsEvent;
+      var _this$props10 = this.props,
+        type = _this$props10.type,
+        fileId = _this$props10.fileId,
+        isHDActive = _this$props10.isHDActive,
+        isHDAvailable = _this$props10.isHDAvailable,
+        isAutoPlay = _this$props10.isAutoPlay,
+        createAnalyticsEvent = _this$props10.createAnalyticsEvent;
       var _this$state4 = this.state,
         isFullScreenEnabled = _this$state4.isFullScreenEnabled,
         playerSize = _this$state4.playerSize,
@@ -573,14 +595,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props9 = this.props,
-        type = _this$props9.type,
-        src = _this$props9.src,
-        isAutoPlay = _this$props9.isAutoPlay,
-        onCanPlay = _this$props9.onCanPlay,
-        onError = _this$props9.onError,
-        poster = _this$props9.poster,
-        videoControlsWrapperRef = _this$props9.videoControlsWrapperRef;
+      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;
       return /*#__PURE__*/React.createElement(Box, {
         xcss: customVideoWrapperStyles,
         ref: this.videoWrapperRef,
@@ -590,10 +612,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         src: src,
         autoPlay: isAutoPlay,
         onCanPlay: onCanPlay,
-        defaultTime: this.timeSaver.defaultTime,
+        defaultTime: this.getDefaultTime,
         onTimeChange: this.onCurrentTimeChange,
         onError: onError,
-        poster: poster
+        poster: poster,
+        "data-testid": "media-player"
       }, function (video, videoState, actions) {
         _this2.onViewed(videoState);
         _this2.setActions(actions);
@@ -610,14 +633,18 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         var isMediumPlayer = playerSize === 'medium';
         var defaultSkipAmount = 10;
         var skipBackward = function skipBackward() {
+          var _this2$props, _this2$props$onTimeCh;
           var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
           var newTime = videoState.currentTime - skipAmount;
           actions.navigate(Math.max(newTime, 0));
+          (_this2$props = _this2.props) === null || _this2$props === void 0 || (_this2$props$onTimeCh = _this2$props.onTimeChanged) === null || _this2$props$onTimeCh === void 0 || _this2$props$onTimeCh.call(_this2$props);
         };
         var skipForward = function skipForward() {
+          var _this2$props2, _this2$props2$onTimeC;
           var skipAmount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSkipAmount;
           var newTime = videoState.currentTime + skipAmount;
           actions.navigate(Math.min(newTime, videoState.duration));
+          (_this2$props2 = _this2.props) === null || _this2$props2 === void 0 || (_this2$props2$onTimeC = _this2$props2.onTimeChanged) === null || _this2$props2$onTimeC === void 0 || _this2$props2$onTimeC.call(_this2$props2);
         };
         var shortcuts = _this2.renderShortcuts({
           togglePlayPauseAction: isPlaying ? _this2.pause : _this2.play,

package/dist/esm/customMediaPlayer/index.js

@@ -9,7 +9,7 @@ export var CustomMediaPlayerBase = function CustomMediaPlayerBase(props) {
   return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.2.1";
+var packageVersion = "28.2.3";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export var CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/esm/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -5,7 +5,7 @@ import { useFileState, useMediaClient, useMediaSettings } from '@atlaskit/media-
 import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.2.1";
+var packageVersion = "28.2.3";
 var MediaPlayerBaseWithContext = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,