@atlaskit/media-ui 28.2.1 → 28.2.2

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

@@ -151,13 +151,22 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_this, "onTimeChanged", function () {
+      var _this$props$onTimeCha, _this$props3;
       _this.createAndFireUIEvent('timeRangeNavigate', 'time');
+      (_this$props$onTimeCha = (_this$props3 = _this.props).onTimeChanged) === null || _this$props$onTimeCha === void 0 || _this$props$onTimeCha.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;
@@ -171,11 +180,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }, 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;
       }
@@ -257,9 +266,9 @@ var _MediaPlayerBase = /*#__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;
       }
@@ -385,9 +394,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }));
     });
     _defineProperty(_this, "pause", function () {
+      var _this$props$onPause, _this$props6;
       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);
     });
     _defineProperty(_this, "play", function () {
       var onFirstPlay = _this.props.onFirstPlay;
@@ -424,13 +435,13 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_this, "onViewed", function (videoState) {
-      var _this$props5 = _this.props,
-        createAnalyticsEvent = _this$props5.createAnalyticsEvent,
-        identifier = _this$props5.identifier,
-        isAutoPlay = _this$props5.isAutoPlay,
-        isHDAvailable = _this$props5.isHDAvailable,
-        isHDActive = _this$props5.isHDActive,
-        type = _this$props5.type;
+      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$state2 = _this.state,
         isFullScreenEnabled = _this$state2.isFullScreenEnabled,
         playerSize = _this$state2.playerSize,
@@ -516,9 +527,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _prevTextTracks$capti, _textTracks$captions2;
-      var _this$props6 = this.props,
-        intl = _this$props6.intl,
-        textTracks = _this$props6.textTracks;
+      var _this$props8 = this.props,
+        intl = _this$props8.intl,
+        textTracks = _this$props8.textTracks;
       var prevIntl = prevProps.intl,
         prevTextTracks = prevProps.textTracks;
       var didLocaleChange = prevIntl.locale !== intl.locale;
@@ -544,14 +555,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props7 = this.props,
-        type = _this$props7.type,
-        identifier = _this$props7.identifier,
-        isAutoPlay = _this$props7.isAutoPlay,
-        isHDAvailable = _this$props7.isHDAvailable,
-        isHDActive = _this$props7.isHDActive,
-        onFirstPlay = _this$props7.onFirstPlay,
-        createAnalyticsEvent = _this$props7.createAnalyticsEvent;
+      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,
@@ -569,12 +580,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
+        var _this$props$onPlay, _this$props10;
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
+        (_this$props$onPlay = (_this$props10 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props10);
       }
     }
   }, {
@@ -584,8 +597,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props8;
-        (_this$props$onFullscr2 = (_this$props8 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props8, false);
+        var _this$props$onFullscr2, _this$props11;
+        (_this$props$onFullscr2 = (_this$props11 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props11, false);
       }
       simultaneousPlayManager.unsubscribe(this);
     }
@@ -601,13 +614,13 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props9 = this.props,
-        type = _this$props9.type,
-        identifier = _this$props9.identifier,
-        isHDActive = _this$props9.isHDActive,
-        isHDAvailable = _this$props9.isHDAvailable,
-        isAutoPlay = _this$props9.isAutoPlay,
-        createAnalyticsEvent = _this$props9.createAnalyticsEvent;
+      var _this$props12 = this.props,
+        type = _this$props12.type,
+        identifier = _this$props12.identifier,
+        isHDActive = _this$props12.isHDActive,
+        isHDAvailable = _this$props12.isHDAvailable,
+        isAutoPlay = _this$props12.isAutoPlay,
+        createAnalyticsEvent = _this$props12.createAnalyticsEvent;
       var _this$state5 = this.state,
         isFullScreenEnabled = _this$state5.isFullScreenEnabled,
         playerSize = _this$state5.playerSize,
@@ -654,21 +667,21 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props10 = this.props,
-        type = _this$props10.type,
-        src = _this$props10.src,
-        isAutoPlay = _this$props10.isAutoPlay,
-        onCanPlay = _this$props10.onCanPlay,
-        onError = _this$props10.onError,
-        poster = _this$props10.poster,
-        videoControlsWrapperRef = _this$props10.videoControlsWrapperRef,
-        textTracks = _this$props10.textTracks,
-        areControlsVisible = _this$props10.areControlsVisible,
-        identifier = _this$props10.identifier,
-        _this$props10$mediaSe = _this$props10.mediaSettings,
-        _this$props10$mediaSe2 = _this$props10$mediaSe === void 0 ? {} : _this$props10$mediaSe,
-        _this$props10$mediaSe3 = _this$props10$mediaSe2.canUpdateVideoCaptions,
-        canUpdateVideoCaptions = _this$props10$mediaSe3 === void 0 ? false : _this$props10$mediaSe3;
+      var _this$props13 = this.props,
+        type = _this$props13.type,
+        src = _this$props13.src,
+        isAutoPlay = _this$props13.isAutoPlay,
+        onCanPlay = _this$props13.onCanPlay,
+        onError = _this$props13.onError,
+        poster = _this$props13.poster,
+        videoControlsWrapperRef = _this$props13.videoControlsWrapperRef,
+        textTracks = _this$props13.textTracks,
+        areControlsVisible = _this$props13.areControlsVisible,
+        identifier = _this$props13.identifier,
+        _this$props13$mediaSe = _this$props13.mediaSettings,
+        _this$props13$mediaSe2 = _this$props13$mediaSe === void 0 ? {} : _this$props13$mediaSe,
+        _this$props13$mediaSe3 = _this$props13$mediaSe2.canUpdateVideoCaptions,
+        canUpdateVideoCaptions = _this$props13$mediaSe3 === void 0 ? false : _this$props13$mediaSe3;
       var _this$state6 = this.state,
         areCaptionsEnabled = _this$state6.areCaptionsEnabled,
         isArtifactUploaderOpen = _this$state6.isArtifactUploaderOpen;
@@ -681,7 +694,7 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         src: src,
         autoPlay: isAutoPlay,
         onCanPlay: onCanPlay,
-        defaultTime: this.timeSaver.defaultTime,
+        defaultTime: this.getDefaultTime,
         onTimeChange: this.onCurrentTimeChange,
         onError: onError,
         poster: poster,
@@ -703,14 +716,18 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         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,

package/dist/esm/customMediaPlayer/react-video-renderer/video.js

@@ -48,7 +48,7 @@ export var Video = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "onLoadedData", function () {
       var defaultTime = _this.props.defaultTime;
       if (_this.currentElement) {
-        _this.currentElement.currentTime = defaultTime;
+        _this.currentElement.currentTime = defaultTime();
       }
     });
     _defineProperty(_this, "onVolumeChange", function (event) {
@@ -310,7 +310,9 @@ export var Video = /*#__PURE__*/function (_Component) {
   }]);
 }(Component);
 _defineProperty(Video, "defaultProps", {
-  defaultTime: 0,
+  defaultTime: function defaultTime() {
+    return 0;
+  },
   sourceType: 'video',
   autoPlay: false,
   controls: false,

package/dist/types/customMediaPlayer/index-compiled.d.ts

@@ -16,6 +16,9 @@ export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowContr
     readonly lastWatchTimeConfig?: TimeSaverConfig;
     readonly onCanPlay?: () => void;
     readonly onError?: () => void;
+    readonly onPlay?: () => void;
+    readonly onPause?: () => void;
+    readonly onTimeChanged?: () => void;
     readonly onDownloadClick?: () => void;
     readonly onFirstPlay?: () => void;
     readonly onFullscreenChange?: (fullscreen: boolean) => void;
@@ -42,6 +45,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private onFullScreenChange;
     private onTimeChanged;
     private onVolumeChanged;
+    private getDefaultTime;
     private onCurrentTimeChange;
     private renderCurrentTime;
     private renderHDButton;

package/dist/types/customMediaPlayer/index-emotion.d.ts

@@ -19,6 +19,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private onTimeChanged;
     private onVolumeChanged;
     private onCurrentTimeChange;
+    private getDefaultTime;
     private renderCurrentTime;
     private renderHDButton;
     private onPlaybackSpeedChange;

package/dist/types/customMediaPlayer/mediaPlayer/mediaPlayerBase.d.ts

@@ -17,6 +17,9 @@ export interface MediaPlayerBaseProps extends WithPlaybackProps, WithShowControl
     readonly isShortcutEnabled?: boolean;
     readonly lastWatchTimeConfig?: TimeSaverConfig;
     readonly onCanPlay?: () => void;
+    readonly onPlay?: () => void;
+    readonly onPause?: () => void;
+    readonly onTimeChanged?: () => void;
     readonly onError?: () => void;
     readonly onDownloadClick?: () => void;
     readonly onFirstPlay?: () => void;

package/dist/types/customMediaPlayer/react-video-renderer/video.d.ts

@@ -36,7 +36,12 @@ export type RenderCallback = (reactElement: ReactElement<SourceElement>, state:
 export interface VideoProps {
     src: string;
     children: RenderCallback;
-    defaultTime: number;
+    /**
+     * `defaultTime` is a getter function to ensure we're always
+     * getting the latest value from TimeSaver even if a render hasn't
+     * occurred to provide the latest value from the parent component.
+     */
+    defaultTime: () => number;
     sourceType: 'video' | 'audio';
     controls: boolean;
     autoPlay: boolean;
@@ -68,7 +73,7 @@ export declare class Video extends Component<VideoProps, VideoComponentState> {
     hasCanPlayTriggered: boolean;
     state: VideoComponentState;
     static defaultProps: {
-        defaultTime: number;
+        defaultTime: () => number;
         sourceType: string;
         autoPlay: boolean;
         controls: boolean;

package/dist/types-ts4.5/customMediaPlayer/index-compiled.d.ts

@@ -16,6 +16,9 @@ export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowContr
     readonly lastWatchTimeConfig?: TimeSaverConfig;
     readonly onCanPlay?: () => void;
     readonly onError?: () => void;
+    readonly onPlay?: () => void;
+    readonly onPause?: () => void;
+    readonly onTimeChanged?: () => void;
     readonly onDownloadClick?: () => void;
     readonly onFirstPlay?: () => void;
     readonly onFullscreenChange?: (fullscreen: boolean) => void;
@@ -42,6 +45,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private onFullScreenChange;
     private onTimeChanged;
     private onVolumeChanged;
+    private getDefaultTime;
     private onCurrentTimeChange;
     private renderCurrentTime;
     private renderHDButton;

package/dist/types-ts4.5/customMediaPlayer/index-emotion.d.ts

@@ -19,6 +19,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private onTimeChanged;
     private onVolumeChanged;
     private onCurrentTimeChange;
+    private getDefaultTime;
     private renderCurrentTime;
     private renderHDButton;
     private onPlaybackSpeedChange;

package/dist/types-ts4.5/customMediaPlayer/mediaPlayer/mediaPlayerBase.d.ts

@@ -17,6 +17,9 @@ export interface MediaPlayerBaseProps extends WithPlaybackProps, WithShowControl
     readonly isShortcutEnabled?: boolean;
     readonly lastWatchTimeConfig?: TimeSaverConfig;
     readonly onCanPlay?: () => void;
+    readonly onPlay?: () => void;
+    readonly onPause?: () => void;
+    readonly onTimeChanged?: () => void;
     readonly onError?: () => void;
     readonly onDownloadClick?: () => void;
     readonly onFirstPlay?: () => void;

package/dist/types-ts4.5/customMediaPlayer/react-video-renderer/video.d.ts

@@ -36,7 +36,12 @@ export type RenderCallback = (reactElement: ReactElement<SourceElement>, state:
 export interface VideoProps {
     src: string;
     children: RenderCallback;
-    defaultTime: number;
+    /**
+     * `defaultTime` is a getter function to ensure we're always
+     * getting the latest value from TimeSaver even if a render hasn't
+     * occurred to provide the latest value from the parent component.
+     */
+    defaultTime: () => number;
     sourceType: 'video' | 'audio';
     controls: boolean;
     autoPlay: boolean;
@@ -68,7 +73,7 @@ export declare class Video extends Component<VideoProps, VideoComponentState> {
     hasCanPlayTriggered: boolean;
     state: VideoComponentState;
     static defaultProps: {
-        defaultTime: number;
+        defaultTime: () => number;
         sourceType: string;
         autoPlay: boolean;
         controls: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "28.2.1",
+	"version": "28.2.2",
 	"description": "Includes common components and utilities used by other media packages",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,9 +30,9 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/dropdown-menu": "^16.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^26.1.0",
+		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.13.0",
+		"@atlaskit/icon-lab": "^4.17.0",
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
 		"@atlaskit/locale": "^3.0.0",
 		"@atlaskit/media-client": "^33.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.9.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/tooltip": "^20.2.0",
 		"@atlaskit/width-detector": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -97,6 +97,9 @@
 		},
 		"platform_exclude_media_offender_from_vc": {
 			"type": "boolean"
+		},
+		"platform_media_resume_video_on_token_expiry": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {