@atlaskit/media-ui 28.2.2 → 28.2.3

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

@@ -157,7 +157,8 @@ export class CustomMediaPlayerBase extends Component {
       currentTime,
       duration
     }) => /*#__PURE__*/React.createElement(CurrentTime, {
-      draggable: false
+      draggable: false,
+      "data-testid": "current-time"
     }, formatDuration(currentTime), " / ", formatDuration(duration)));
     _defineProperty(this, "renderHDButton", () => {
       const {
@@ -217,7 +218,9 @@ export class CustomMediaPlayerBase extends 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,
@@ -386,6 +389,7 @@ export class CustomMediaPlayerBase extends Component {
       }));
     });
     _defineProperty(this, "renderSpinner", () => /*#__PURE__*/React.createElement(Flex, {
+      testId: "spinner",
       direction: "column",
       alignItems: "center",
       justifyContent: "center",
@@ -618,7 +622,8 @@ export class CustomMediaPlayerBase extends Component {
       defaultTime: this.getDefaultTime,
       onTimeChange: this.onCurrentTimeChange,
       onError: onError,
-      poster: poster
+      poster: poster,
+      "data-testid": "media-player"
     }, (video, videoState, actions) => {
       this.onViewed(videoState);
       this.setActions(actions);

package/dist/es2019/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.2.2";
+const packageVersion = "28.2.3";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export const CustomMediaPlayer = withMediaAnalyticsContext({

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

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

package/dist/es2019/customMediaPlayer/volumeRange.js

@@ -129,7 +129,8 @@ const VolumeRange = props => {
   return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTimeRangeWrapper, {
     onMouseDown: onThumbMouseDown,
     onKeyDown: onThumbKeyDown,
-    ref: wrapperElement
+    ref: wrapperElement,
+    "data-testid": "volume-range"
   }, /*#__PURE__*/React.createElement(Range, {
     tabIndex: 0,
     step: 1,
@@ -149,7 +150,8 @@ const VolumeRange = props => {
     showAsActive: isAlwaysActive,
     onMouseDown: onThumbMouseDown,
     onKeyDown: onThumbKeyDown,
-    ref: wrapperElement
+    ref: wrapperElement,
+    "data-testid": "volume-range"
   }, /*#__PURE__*/React.createElement(Range, {
     tabIndex: 0,
     step: 1,

package/dist/es2019/mediaImage/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { ImageComponent } from './styled';
 import { getCssFromImageOrientation, isRotated } from '../imageMetaData';
 import { useMergeRefs } from 'use-callback-ref';
@@ -344,7 +345,11 @@ export const MediaImage = /*#__PURE__*/forwardRef(({
     const transform = getCssFromImageOrientation(previewOrientation);
     style.transform += ` ${transform}`;
   }
-  return /*#__PURE__*/React.createElement(ImageComponent, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_media_add_ufo_custom_data') ? /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }) : null, /*#__PURE__*/React.createElement(ImageComponent, _extends({
     loading: loading,
     "data-testid": "media-image",
     "data-vc": "media-image",
@@ -358,5 +363,5 @@ export const MediaImage = /*#__PURE__*/forwardRef(({
     imageRef: mergedRef,
     src: dataURI,
     crossOrigin: crossOrigin
-  }, fg('platform_exclude_media_offender_from_vc') && VcMediaWrapperProps));
+  }, fg('platform_exclude_media_offender_from_vc') && VcMediaWrapperProps)));
 });

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

@@ -156,7 +156,8 @@ 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 () {
@@ -215,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,
@@ -364,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",
@@ -493,14 +497,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
-        var _this$props10, _this$props10$onPlay;
+        var _this$props0, _this$props0$onPlay;
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
-        (_this$props10 = this.props) === null || _this$props10 === void 0 || (_this$props10$onPlay = _this$props10.onPlay) === null || _this$props10$onPlay === void 0 || _this$props10$onPlay.call(_this$props10);
+        (_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);
       }
     }
   }, {
@@ -510,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$props11;
-        (_this$props$onFullscr2 = (_this$props11 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props11, 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);
     }
@@ -527,13 +531,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props12 = this.props,
-        type = _this$props12.type,
-        fileId = _this$props12.fileId,
-        isHDActive = _this$props12.isHDActive,
-        isHDAvailable = _this$props12.isHDAvailable,
-        isAutoPlay = _this$props12.isAutoPlay,
-        createAnalyticsEvent = _this$props12.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,
@@ -580,19 +584,20 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      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;
+      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,

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

@@ -167,7 +167,8 @@ 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 () {
@@ -226,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,
@@ -375,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",
@@ -504,14 +508,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
-        var _this$props10, _this$props10$onPlay;
+        var _this$props0, _this$props0$onPlay;
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
-        (_this$props10 = this.props) === null || _this$props10 === void 0 || (_this$props10$onPlay = _this$props10.onPlay) === null || _this$props10$onPlay === void 0 || _this$props10$onPlay.call(_this$props10);
+        (_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);
       }
     }
   }, {
@@ -521,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$props11;
-        (_this$props$onFullscr2 = (_this$props11 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props11, 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);
     }
@@ -538,13 +542,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props12 = this.props,
-        type = _this$props12.type,
-        fileId = _this$props12.fileId,
-        isHDActive = _this$props12.isHDActive,
-        isHDAvailable = _this$props12.isHDAvailable,
-        isAutoPlay = _this$props12.isAutoPlay,
-        createAnalyticsEvent = _this$props12.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,
@@ -591,14 +595,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      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;
+      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,
@@ -611,7 +615,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         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);

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.2";
+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.2";
+var packageVersion = "28.2.3";
 var MediaPlayerBaseWithContext = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -580,14 +580,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
-        var _this$props$onPlay, _this$props10;
+        var _this$props$onPlay, _this$props0;
         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);
+        (_this$props$onPlay = (_this$props0 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props0);
       }
     }
   }, {
@@ -597,8 +597,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        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);
+        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);
     }
@@ -614,13 +614,13 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      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$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,
@@ -667,21 +667,21 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      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$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;

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

@@ -10,12 +10,12 @@ var _excluded = ["showSlider", "children"],
   _excluded7 = ["children"],
   _excluded8 = ["children"],
   _excluded9 = ["children"],
-  _excluded10 = ["children", "controlsHidden"],
+  _excluded0 = ["children", "controlsHidden"],
+  _excluded1 = ["isMuted", "children"],
+  _excluded10 = ["children"],
   _excluded11 = ["isMuted", "children"],
-  _excluded12 = ["children"],
-  _excluded13 = ["isMuted", "children"],
-  _excluded14 = ["isDragging", "timeLineThumbIsHover", "timeLineThumbIsFocus", "children"],
-  _excluded15 = ["children"];
+  _excluded12 = ["isDragging", "timeLineThumbIsHover", "timeLineThumbIsFocus", "children"],
+  _excluded13 = ["children"];
 import "./styled-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -106,10 +106,10 @@ export var RightControls = function RightControls(_ref9) {
 };
 var controlsWrapperStyles = null;
 var hiddenControlsWrapperStyles = null;
-export var ControlsWrapper = /*#__PURE__*/forwardRef(function (_ref10, ref) {
-  var children = _ref10.children,
-    controlsHidden = _ref10.controlsHidden,
-    props = _objectWithoutProperties(_ref10, _excluded10);
+export var ControlsWrapper = /*#__PURE__*/forwardRef(function (_ref0, ref) {
+  var children = _ref0.children,
+    controlsHidden = _ref0.controlsHidden,
+    props = _objectWithoutProperties(_ref0, _excluded0);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -119,28 +119,28 @@ export var ControlsWrapper = /*#__PURE__*/forwardRef(function (_ref10, ref) {
 });
 var volumeToggleWrapperStyles = null;
 var mutedVolumeToggleWrapperStyles = null;
-export var VolumeToggleWrapper = function VolumeToggleWrapper(_ref11) {
-  var isMuted = _ref11.isMuted,
-    children = _ref11.children,
-    props = _objectWithoutProperties(_ref11, _excluded11);
+export var VolumeToggleWrapper = function VolumeToggleWrapper(_ref1) {
+  var isMuted = _ref1.isMuted,
+    children = _ref1.children,
+    props = _objectWithoutProperties(_ref1, _excluded1);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: ax(["_kqswh2mm _2hwxw1gv _14hp1j2z", isMuted && "_d32vqb75"])
   }), children);
 };
 var volumeTimeRangeWrapperStyles = null;
-export var VolumeTimeRangeWrapper = function VolumeTimeRangeWrapper(_ref12) {
-  var children = _ref12.children,
-    props = _objectWithoutProperties(_ref12, _excluded12);
+export var VolumeTimeRangeWrapper = function VolumeTimeRangeWrapper(_ref10) {
+  var children = _ref10.children,
+    props = _objectWithoutProperties(_ref10, _excluded10);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: ax(["_1bsb1osq _2hwxv47k"])
   }), children);
 };
 var mutedIndicatorStyles = null;
 var isMutedStyles = null;
-export var MutedIndicator = function MutedIndicator(_ref13) {
-  var isMuted = _ref13.isMuted,
-    children = _ref13.children,
-    props = _objectWithoutProperties(_ref13, _excluded13);
+export var MutedIndicator = function MutedIndicator(_ref11) {
+  var isMuted = _ref11.isMuted,
+    children = _ref11.children,
+    props = _objectWithoutProperties(_ref11, _excluded11);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: ax(["_bfhk18rw _1bsb1pa9 _4t3iyh40 _kqswstnw _154iu2gc _1ltvu2gc _1pbycs5v _t9ec17wz _tzy4idpf _lcxvglyw", isMuted && "_tzy4kb7n"])
   }), children);
@@ -150,21 +150,21 @@ var currentTimeToolTipDraggingStyles = null;
 var currentTimeToolTipNotDraggingStyles = null;
 var currentTimeTooltipThumbHoveredStyles = null;
 var currentTimeTooltipThumbFocusedStyles = null;
-export var CurrentTimeTooltip = function CurrentTimeTooltip(_ref14) {
-  var isDragging = _ref14.isDragging,
-    timeLineThumbIsHover = _ref14.timeLineThumbIsHover,
-    timeLineThumbIsFocus = _ref14.timeLineThumbIsFocus,
-    children = _ref14.children,
-    props = _objectWithoutProperties(_ref14, _excluded14);
+export var CurrentTimeTooltip = function CurrentTimeTooltip(_ref12) {
+  var isDragging = _ref12.isDragging,
+    timeLineThumbIsHover = _ref12.timeLineThumbIsHover,
+    timeLineThumbIsFocus = _ref12.timeLineThumbIsFocus,
+    children = _ref12.children,
+    props = _objectWithoutProperties(_ref12, _excluded12);
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_11c8dcr7 _2rko1b66 _v564g17y _kqswstnw _uiztglyw _154iukr8 _bfhk39qu _syaz1pcz _ca0q1b66 _u5f3u2gc _n3td1b66 _19bvu2gc _1ltv1ssb _t9eczr6s _1nmz16rz", isDragging && "_tzy4kb7n", !isDragging && "_tzy4idpf", timeLineThumbIsHover && "_tzy4kb7n", timeLineThumbIsFocus && "_tzy4kb7n", "current-time-tooltip"])
   }, props), children);
 };
 var timeRangeWrapperStyles = null;
-export var TimeRangeWrapper = /*#__PURE__*/forwardRef(function (_ref15, ref) {
-  var children = _ref15.children,
-    props = _objectWithoutProperties(_ref15, _excluded15);
+export var TimeRangeWrapper = /*#__PURE__*/forwardRef(function (_ref13, ref) {
+  var children = _ref13.children,
+    props = _objectWithoutProperties(_ref13, _excluded13);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, props, {

package/dist/esm/customMediaPlayer/volumeRange.js

@@ -128,7 +128,8 @@ var VolumeRange = function VolumeRange(props) {
   return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTimeRangeWrapper, {
     onMouseDown: onThumbMouseDown,
     onKeyDown: onThumbKeyDown,
-    ref: wrapperElement
+    ref: wrapperElement,
+    "data-testid": "volume-range"
   }, /*#__PURE__*/React.createElement(Range, {
     tabIndex: 0,
     step: 1,
@@ -148,7 +149,8 @@ var VolumeRange = function VolumeRange(props) {
     showAsActive: isAlwaysActive,
     onMouseDown: onThumbMouseDown,
     onKeyDown: onThumbKeyDown,
-    ref: wrapperElement
+    ref: wrapperElement,
+    "data-testid": "volume-range"
   }, /*#__PURE__*/React.createElement(Range, {
     tabIndex: 0,
     step: 1,

package/dist/esm/mediaImage/index.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { ImageComponent } from './styled';
 import { getCssFromImageOrientation, isRotated } from '../imageMetaData';
 import { useMergeRefs } from 'use-callback-ref';
@@ -355,7 +356,11 @@ export var MediaImage = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var transform = getCssFromImageOrientation(previewOrientation);
     style.transform += " ".concat(transform);
   }
-  return /*#__PURE__*/React.createElement(ImageComponent, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_media_add_ufo_custom_data') ? /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }) : null, /*#__PURE__*/React.createElement(ImageComponent, _extends({
     loading: loading,
     "data-testid": "media-image",
     "data-vc": "media-image",
@@ -369,5 +374,5 @@ export var MediaImage = /*#__PURE__*/forwardRef(function (_ref, ref) {
     imageRef: mergedRef,
     src: dataURI,
     crossOrigin: crossOrigin
-  }, fg('platform_exclude_media_offender_from_vc') && VcMediaWrapperProps));
+  }, fg('platform_exclude_media_offender_from_vc') && VcMediaWrapperProps)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "28.2.2",
+	"version": "28.2.3",
 	"description": "Includes common components and utilities used by other media packages",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -95,6 +95,9 @@
 		"platform_media_compiled": {
 			"type": "boolean"
 		},
+		"platform_media_add_ufo_custom_data": {
+			"type": "boolean"
+		},
 		"platform_exclude_media_offender_from_vc": {
 			"type": "boolean"
 		},