@atlaskit/media-ui 23.1.0 → 23.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 23.2.0
+
+### Minor Changes
+
+- [`f486dbd535c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f486dbd535c) - MEX-2481 Fix minor gap between image and border
+
+## 23.1.1
+
+### Patch Changes
+
+- [`183fdc63b26`](https://bitbucket.org/atlassian/atlassian-frontend/commits/183fdc63b26) - MEX-2467 Fix firstPlayed track event firing when autoPlay is false
+
 ## 23.1.0
 
 ### Minor Changes

package/dist/cjs/customMediaPlayer/index.js

@@ -51,7 +51,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* 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 packageName = "@atlaskit/media-ui";
-var packageVersion = "23.1.0";
+var packageVersion = "23.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -84,6 +84,27 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       playerSize: 'large',
       playbackSpeed: 1
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireFirstPlayedTrackEvent", function () {
+      var _this$props = _this.props,
+        type = _this$props.type,
+        fileId = _this$props.fileId,
+        isHDActive = _this$props.isHDActive,
+        isHDAvailable = _this$props.isHDAvailable,
+        isAutoPlay = _this$props.isAutoPlay,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      var _this$state = _this.state,
+        isFullScreenEnabled = _this$state.isFullScreenEnabled,
+        playerSize = _this$state.playerSize,
+        playbackSpeed = _this$state.playbackSpeed;
+      (0, _analytics.fireAnalyticsEvent)((0, _analytics.createFirstPlayedTrackEvent)(type, {
+        isAutoPlay: isAutoPlay,
+        isHDAvailable: isHDAvailable,
+        isHDActive: isHDActive,
+        isFullScreenEnabled: isFullScreenEnabled,
+        playerSize: playerSize,
+        playbackSpeed: playbackSpeed
+      }, fileId), createAnalyticsEvent);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullScreenChange", function (e) {
       if (e.target !== _this.videoWrapperRef.current) {
         return;
@@ -91,8 +112,8 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       var currentFullScreenMode = _this.state.isFullScreenEnabled;
       var isFullScreenEnabled = !!(0, _fullscreen.getFullscreenElement)();
       if (currentFullScreenMode !== isFullScreenEnabled) {
-        var _this$props$onFullscr, _this$props;
-        (_this$props$onFullscr = (_this$props = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
+        var _this$props$onFullscr, _this$props2;
+        (_this$props$onFullscr = (_this$props2 = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props2, isFullScreenEnabled);
         _this.setState({
           isFullScreenEnabled: isFullScreenEnabled
         });
@@ -119,11 +140,11 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }, (0, _formatDuration.formatDuration)(currentTime), " / ", (0, _formatDuration.formatDuration)(duration));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderHDButton", function () {
-      var _this$props2 = _this.props,
-        type = _this$props2.type,
-        isHDAvailable = _this$props2.isHDAvailable,
-        isHDActive = _this$props2.isHDActive,
-        onHDToggleClick = _this$props2.onHDToggleClick;
+      var _this$props3 = _this.props,
+        type = _this$props3.type,
+        isHDAvailable = _this$props3.isHDAvailable,
+        isHDActive = _this$props3.isHDActive,
+        onHDToggleClick = _this$props3.onHDToggleClick;
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
@@ -207,9 +228,9 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFullScreenButton", function () {
-      var _this$props3 = _this.props,
-        formatMessage = _this$props3.intl.formatMessage,
-        type = _this$props3.type;
+      var _this$props4 = _this.props,
+        formatMessage = _this$props4.intl.formatMessage,
+        type = _this$props4.type;
       if (type === 'audio') {
         return;
       }
@@ -330,6 +351,7 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       _simultaneousPlayManager.default.pauseOthers((0, _assertThisInitialized2.default)(_this));
       if (!_this.wasPlayedOnce && onFirstPlay) {
+        _this.fireFirstPlayedTrackEvent();
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
@@ -351,17 +373,17 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onViewed", function (videoState) {
-      var _this$props4 = _this.props,
-        createAnalyticsEvent = _this$props4.createAnalyticsEvent,
-        fileId = _this$props4.fileId,
-        isAutoPlay = _this$props4.isAutoPlay,
-        isHDAvailable = _this$props4.isHDAvailable,
-        isHDActive = _this$props4.isHDActive,
-        type = _this$props4.type;
-      var _this$state = _this.state,
-        isFullScreenEnabled = _this$state.isFullScreenEnabled,
-        playerSize = _this$state.playerSize,
-        playbackSpeed = _this$state.playbackSpeed;
+      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$state2 = _this.state,
+        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
+        playerSize = _this$state2.playerSize,
+        playbackSpeed = _this$state2.playbackSpeed;
       var status = videoState.status,
         currentTime = videoState.currentTime;
       if (status === 'playing' && (currentTime < _this.lastCurrentTime || currentTime >= _this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
@@ -406,18 +428,18 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props5 = this.props,
-        type = _this$props5.type,
-        fileId = _this$props5.fileId,
-        isAutoPlay = _this$props5.isAutoPlay,
-        isHDAvailable = _this$props5.isHDAvailable,
-        isHDActive = _this$props5.isHDActive,
-        onFirstPlay = _this$props5.onFirstPlay,
-        createAnalyticsEvent = _this$props5.createAnalyticsEvent;
-      var _this$state2 = this.state,
-        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-        playerSize = _this$state2.playerSize,
-        playbackSpeed = _this$state2.playbackSpeed;
+      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$state3 = this.state,
+        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+        playerSize = _this$state3.playerSize,
+        playbackSpeed = _this$state3.playbackSpeed;
       (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCustomMediaPlayerScreenEvent)(type, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -433,14 +455,7 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       if (isAutoPlay) {
         _simultaneousPlayManager.default.pauseOthers(this);
         if (onFirstPlay) {
-          (0, _analytics.fireAnalyticsEvent)((0, _analytics.createFirstPlayedTrackEvent)(type, {
-            isAutoPlay: isAutoPlay,
-            isHDAvailable: isHDAvailable,
-            isHDActive: isHDActive,
-            isFullScreenEnabled: isFullScreenEnabled,
-            playerSize: playerSize,
-            playbackSpeed: playbackSpeed
-          }, fileId), createAnalyticsEvent);
+          this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
@@ -453,8 +468,8 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props6;
-        (_this$props$onFullscr2 = (_this$props6 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props6, false);
+        var _this$props$onFullscr2, _this$props7;
+        (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props7, false);
       }
       _simultaneousPlayManager.default.unsubscribe(this);
     }
@@ -470,17 +485,17 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props7 = this.props,
-        type = _this$props7.type,
-        fileId = _this$props7.fileId,
-        isHDActive = _this$props7.isHDActive,
-        isHDAvailable = _this$props7.isHDAvailable,
-        isAutoPlay = _this$props7.isAutoPlay,
-        createAnalyticsEvent = _this$props7.createAnalyticsEvent;
-      var _this$state3 = this.state,
-        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
-        playerSize = _this$state3.playerSize,
-        playbackSpeed = _this$state3.playbackSpeed;
+      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$state4 = this.state,
+        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
+        playerSize = _this$state4.playerSize,
+        playbackSpeed = _this$state4.playbackSpeed;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -523,13 +538,13 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        type = _this$props8.type,
-        src = _this$props8.src,
-        isAutoPlay = _this$props8.isAutoPlay,
-        onCanPlay = _this$props8.onCanPlay,
-        onError = _this$props8.onError,
-        poster = _this$props8.poster;
+      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;
       return /*#__PURE__*/_react.default.createElement(_styled.CustomVideoWrapper, {
         ref: this.videoWrapperRef,
         "data-testid": "custom-media-player"

package/dist/cjs/customMediaPlayer/styled.js

@@ -14,20 +14,20 @@ var CustomVideoWrapper = _styled.default.div(_templateObject || (_templateObject
 exports.CustomVideoWrapper = CustomVideoWrapper;
 var VideoWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VideoWrapper = VideoWrapper;
 var TimebarWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
 exports.TimebarWrapper = TimebarWrapper;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var VolumeWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VolumeWrapper = VolumeWrapper;
 var TimeWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.TimeWrapper = TimeWrapper;
 var CurrentTime = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 exports.CurrentTime = CurrentTime;
@@ -39,17 +39,17 @@ var Thumb = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 exports.Thumb = Thumb;
 var BufferedTime = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.BufferedTime = BufferedTime;
 var LeftControls = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 10px;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.LeftControls = LeftControls;
 var RightControls = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 exports.RightControls = RightControls;
 var ControlsWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.ControlsWrapper = ControlsWrapper;
 var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
@@ -58,13 +58,13 @@ var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObj
 exports.VolumeToggleWrapper = VolumeToggleWrapper;
 var VolumeTimeRangeWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VolumeTimeRangeWrapper = VolumeTimeRangeWrapper;
 var MutedIndicator = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), _colors.R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
 exports.MutedIndicator = MutedIndicator;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var CurrentTimeTooltip = _styled.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/cjs/i18n/en.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/cjs/i18n/en_GB.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/cjs/i18n/en_ZZ.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/cjs/mediaImage/index.js

@@ -270,6 +270,16 @@ var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
+      /*
+        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+      */
+
+      if (this.props.expandByPixel !== undefined) {
+        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
+      }
+
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.0",
+	"version": "23.2.0",
 	"sideEffects": false
 }

package/dist/es2019/customMediaPlayer/index.js

@@ -34,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "23.1.0";
+const packageVersion = "23.2.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -60,6 +60,29 @@ export class CustomMediaPlayerBase extends Component {
       playerSize: 'large',
       playbackSpeed: 1
     });
+    _defineProperty(this, "fireFirstPlayedTrackEvent", () => {
+      const {
+        type,
+        fileId,
+        isHDActive,
+        isHDAvailable,
+        isAutoPlay,
+        createAnalyticsEvent
+      } = this.props;
+      const {
+        isFullScreenEnabled,
+        playerSize,
+        playbackSpeed
+      } = this.state;
+      fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
+        isAutoPlay,
+        isHDAvailable,
+        isHDActive,
+        isFullScreenEnabled,
+        playerSize,
+        playbackSpeed
+      }, fileId), createAnalyticsEvent);
+    });
     _defineProperty(this, "onFullScreenChange", e => {
       if (e.target !== this.videoWrapperRef.current) {
         return;
@@ -332,6 +355,7 @@ export class CustomMediaPlayerBase extends Component {
       }
       simultaneousPlayManager.pauseOthers(this);
       if (!this.wasPlayedOnce && onFirstPlay) {
+        this.fireFirstPlayedTrackEvent();
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
@@ -437,14 +461,7 @@ export class CustomMediaPlayerBase extends Component {
     if (isAutoPlay) {
       simultaneousPlayManager.pauseOthers(this);
       if (onFirstPlay) {
-        fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
-          isAutoPlay,
-          isHDAvailable,
-          isHDActive,
-          isFullScreenEnabled,
-          playerSize,
-          playbackSpeed
-        }, fileId), createAnalyticsEvent);
+        this.fireFirstPlayedTrackEvent();
         this.wasPlayedOnce = true;
         onFirstPlay();
       }

package/dist/es2019/customMediaPlayer/styled.js

@@ -13,7 +13,7 @@ export const VideoWrapper = styled.div`
   flex-direction: column;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const TimebarWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -23,7 +23,7 @@ export const TimebarWrapper = styled.div`
   width: 100%;
   bottom: 10px;
 `;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const VolumeWrapper = styled.div`
   display: flex;
   width: 35px;
@@ -42,13 +42,13 @@ export const VolumeWrapper = styled.div`
   ` : ''}
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const TimeWrapper = styled.div`
   margin: 0 ${"var(--ds-space-250, 20px)"} 10px ${"var(--ds-space-250, 20px)"};
   margin-bottom: 44px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CurrentTime = styled.div`
   color: #c7d1db;
   user-select: none;
@@ -98,13 +98,13 @@ export const BufferedTime = styled.div`
   width: 0;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const LeftControls = styled.div`
   display: flex;
   margin-left: 10px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const RightControls = styled.div`
   display: flex;
   align-items: center;
@@ -120,7 +120,7 @@ export const ControlsWrapper = styled.div`
   position: absolute;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const VolumeToggleWrapper = styled.div`
   position: relative;
   margin-right: 13px;
@@ -137,7 +137,7 @@ export const VolumeTimeRangeWrapper = styled.div`
   margin-right: ${"var(--ds-space-250, 20px)"};
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const MutedIndicator = styled.div`
   width: 29px;
   height: 2px;
@@ -154,7 +154,7 @@ export const MutedIndicator = styled.div`
     opacity: 1;
   ` : ''};
 `;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CurrentTimeTooltip = styled.div`
   position: absolute;
   user-select: none;

package/dist/es2019/i18n/en.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/es2019/i18n/en_GB.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/es2019/i18n/en_ZZ.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/es2019/mediaImage/index.js

@@ -248,6 +248,16 @@ export class MediaImage extends Component {
       }
     }
 
+    /*
+      For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+      Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+       Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+    */
+
+    if (this.props.expandByPixel !== undefined) {
+      percentSize = `calc(${percentSize} + ${this.props.expandByPixel}px)`;
+    }
+
     /*
       When isStretchingAllowed is false image is as big as it is, but as small as container
       (according to strategy - cover or fit).

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.0",
+	"version": "23.2.0",
 	"sideEffects": false
 }

package/dist/esm/customMediaPlayer/index.js

@@ -44,7 +44,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "23.1.0";
+var packageVersion = "23.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -77,6 +77,27 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       playerSize: 'large',
       playbackSpeed: 1
     });
+    _defineProperty(_assertThisInitialized(_this), "fireFirstPlayedTrackEvent", function () {
+      var _this$props = _this.props,
+        type = _this$props.type,
+        fileId = _this$props.fileId,
+        isHDActive = _this$props.isHDActive,
+        isHDAvailable = _this$props.isHDAvailable,
+        isAutoPlay = _this$props.isAutoPlay,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      var _this$state = _this.state,
+        isFullScreenEnabled = _this$state.isFullScreenEnabled,
+        playerSize = _this$state.playerSize,
+        playbackSpeed = _this$state.playbackSpeed;
+      fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
+        isAutoPlay: isAutoPlay,
+        isHDAvailable: isHDAvailable,
+        isHDActive: isHDActive,
+        isFullScreenEnabled: isFullScreenEnabled,
+        playerSize: playerSize,
+        playbackSpeed: playbackSpeed
+      }, fileId), createAnalyticsEvent);
+    });
     _defineProperty(_assertThisInitialized(_this), "onFullScreenChange", function (e) {
       if (e.target !== _this.videoWrapperRef.current) {
         return;
@@ -84,8 +105,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       var currentFullScreenMode = _this.state.isFullScreenEnabled;
       var isFullScreenEnabled = !!getFullscreenElement();
       if (currentFullScreenMode !== isFullScreenEnabled) {
-        var _this$props$onFullscr, _this$props;
-        (_this$props$onFullscr = (_this$props = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
+        var _this$props$onFullscr, _this$props2;
+        (_this$props$onFullscr = (_this$props2 = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props2, isFullScreenEnabled);
         _this.setState({
           isFullScreenEnabled: isFullScreenEnabled
         });
@@ -112,11 +133,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }, formatDuration(currentTime), " / ", formatDuration(duration));
     });
     _defineProperty(_assertThisInitialized(_this), "renderHDButton", function () {
-      var _this$props2 = _this.props,
-        type = _this$props2.type,
-        isHDAvailable = _this$props2.isHDAvailable,
-        isHDActive = _this$props2.isHDActive,
-        onHDToggleClick = _this$props2.onHDToggleClick;
+      var _this$props3 = _this.props,
+        type = _this$props3.type,
+        isHDAvailable = _this$props3.isHDAvailable,
+        isHDActive = _this$props3.isHDActive,
+        onHDToggleClick = _this$props3.onHDToggleClick;
       if (type === 'audio' || !isHDAvailable) {
         return;
       }
@@ -200,9 +221,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "renderFullScreenButton", function () {
-      var _this$props3 = _this.props,
-        formatMessage = _this$props3.intl.formatMessage,
-        type = _this$props3.type;
+      var _this$props4 = _this.props,
+        formatMessage = _this$props4.intl.formatMessage,
+        type = _this$props4.type;
       if (type === 'audio') {
         return;
       }
@@ -323,6 +344,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.pauseOthers(_assertThisInitialized(_this));
       if (!_this.wasPlayedOnce && onFirstPlay) {
+        _this.fireFirstPlayedTrackEvent();
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
@@ -344,17 +366,17 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "onViewed", function (videoState) {
-      var _this$props4 = _this.props,
-        createAnalyticsEvent = _this$props4.createAnalyticsEvent,
-        fileId = _this$props4.fileId,
-        isAutoPlay = _this$props4.isAutoPlay,
-        isHDAvailable = _this$props4.isHDAvailable,
-        isHDActive = _this$props4.isHDActive,
-        type = _this$props4.type;
-      var _this$state = _this.state,
-        isFullScreenEnabled = _this$state.isFullScreenEnabled,
-        playerSize = _this$state.playerSize,
-        playbackSpeed = _this$state.playbackSpeed;
+      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$state2 = _this.state,
+        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
+        playerSize = _this$state2.playerSize,
+        playbackSpeed = _this$state2.playbackSpeed;
       var status = videoState.status,
         currentTime = videoState.currentTime;
       if (status === 'playing' && (currentTime < _this.lastCurrentTime || currentTime >= _this.lastCurrentTime + VIEWED_TRACKING_SECS)) {
@@ -399,18 +421,18 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   _createClass(CustomMediaPlayerBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props5 = this.props,
-        type = _this$props5.type,
-        fileId = _this$props5.fileId,
-        isAutoPlay = _this$props5.isAutoPlay,
-        isHDAvailable = _this$props5.isHDAvailable,
-        isHDActive = _this$props5.isHDActive,
-        onFirstPlay = _this$props5.onFirstPlay,
-        createAnalyticsEvent = _this$props5.createAnalyticsEvent;
-      var _this$state2 = this.state,
-        isFullScreenEnabled = _this$state2.isFullScreenEnabled,
-        playerSize = _this$state2.playerSize,
-        playbackSpeed = _this$state2.playbackSpeed;
+      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$state3 = this.state,
+        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
+        playerSize = _this$state3.playerSize,
+        playbackSpeed = _this$state3.playbackSpeed;
       fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -426,14 +448,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
       if (isAutoPlay) {
         simultaneousPlayManager.pauseOthers(this);
         if (onFirstPlay) {
-          fireAnalyticsEvent(createFirstPlayedTrackEvent(type, {
-            isAutoPlay: isAutoPlay,
-            isHDAvailable: isHDAvailable,
-            isHDActive: isHDActive,
-            isFullScreenEnabled: isFullScreenEnabled,
-            playerSize: playerSize,
-            playbackSpeed: playbackSpeed
-          }, fileId), createAnalyticsEvent);
+          this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
@@ -446,8 +461,8 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props6;
-        (_this$props$onFullscr2 = (_this$props6 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props6, false);
+        var _this$props$onFullscr2, _this$props7;
+        (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props7, false);
       }
       simultaneousPlayManager.unsubscribe(this);
     }
@@ -463,17 +478,17 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props7 = this.props,
-        type = _this$props7.type,
-        fileId = _this$props7.fileId,
-        isHDActive = _this$props7.isHDActive,
-        isHDAvailable = _this$props7.isHDAvailable,
-        isAutoPlay = _this$props7.isAutoPlay,
-        createAnalyticsEvent = _this$props7.createAnalyticsEvent;
-      var _this$state3 = this.state,
-        isFullScreenEnabled = _this$state3.isFullScreenEnabled,
-        playerSize = _this$state3.playerSize,
-        playbackSpeed = _this$state3.playbackSpeed;
+      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$state4 = this.state,
+        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
+        playerSize = _this$state4.playerSize,
+        playbackSpeed = _this$state4.playbackSpeed;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,
         isHDAvailable: isHDAvailable,
@@ -516,13 +531,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        type = _this$props8.type,
-        src = _this$props8.src,
-        isAutoPlay = _this$props8.isAutoPlay,
-        onCanPlay = _this$props8.onCanPlay,
-        onError = _this$props8.onError,
-        poster = _this$props8.poster;
+      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;
       return /*#__PURE__*/React.createElement(CustomVideoWrapper, {
         ref: this.videoWrapperRef,
         "data-testid": "custom-media-player"

package/dist/esm/customMediaPlayer/styled.js

@@ -6,42 +6,42 @@ import { R300 } from '@atlaskit/theme/colors';
 export var CustomVideoWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  user-select: none;\n"])));
 export var VideoWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var TimebarWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var VolumeWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var TimeWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var CurrentTime = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 export var TimeLine = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #596773;\n  border-radius: 5px;\n  position: relative;\n"])));
 export var CurrentTimeLine = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #05c;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
 export var Thumb = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 100%;\n  background-color: white;\n  border: 1px solid #666;\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  transform: translate(7px, -50%) scale(0);\n  transition: all 0.1s;\n  transition-delay: 1s;\n\n  &:hover .current-time-tooltip {\n    opacity: 1;\n  }\n"])));
 export var BufferedTime = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var LeftControls = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var RightControls = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 export var ControlsWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var VolumeToggleWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
   return isMuted ? "#EF5C48 !important;" : '';
 });
 export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var MutedIndicator = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var CurrentTimeTooltip = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/esm/i18n/en.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/esm/i18n/en_GB.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/esm/i18n/en_ZZ.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/esm/mediaImage/index.js

@@ -261,6 +261,16 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
+      /*
+        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+      */
+
+      if (this.props.expandByPixel !== undefined) {
+        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
+      }
+
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.0",
+	"version": "23.2.0",
 	"sideEffects": false
 }

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

@@ -37,6 +37,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private clickToTogglePlayTimoutId;
     state: CustomMediaPlayerState;
     componentDidMount(): void;
+    private fireFirstPlayedTrackEvent;
     componentWillUnmount(): void;
     private onFullScreenChange;
     private onTimeChanged;

package/dist/types/i18n/en.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/i18n/en_GB.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/i18n/en_ZZ.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/mediaImage/index.d.ts

@@ -11,6 +11,7 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'auto' | 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
+    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

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

@@ -37,6 +37,7 @@ export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerPr
     private clickToTogglePlayTimoutId;
     state: CustomMediaPlayerState;
     componentDidMount(): void;
+    private fireFirstPlayedTrackEvent;
     componentWillUnmount(): void;
     private onFullScreenChange;
     private onTimeChanged;

package/dist/types-ts4.5/i18n/en.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/i18n/en_GB.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/i18n/en_ZZ.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/mediaImage/index.d.ts

@@ -11,6 +11,7 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'auto' | 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
+    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/example-helpers/styled.ts

@@ -16,7 +16,7 @@ export const PreviewInfo = styled.pre`
   font-size: 80%;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const PreviewItem = styled.li`
   border-radius: 10px;
   border: 1px solid ${token('color.border', '#ccc')};
@@ -27,7 +27,7 @@ export const PreviewItem = styled.li`
   margin-bottom: 10px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Code = styled.code`
   padding: 5px;
   border-radius: 5px;
@@ -36,7 +36,7 @@ export const Code = styled.code`
   font-size: 80%;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CloseButton = styled.button`
   position: absolute;
   top: 5px;
@@ -44,7 +44,7 @@ export const CloseButton = styled.button`
   cursor: pointer;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const PreviewImageContainer = styled.div`
   margin-top: 10px;
   margin-bottom: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "23.1.0",
+  "version": "23.2.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,32 +12,8 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
-  "af:exports": {
-    "./classNames": "./src/classNames.ts",
-    "./media-type-icon": "./src/media-type-icon.tsx",
-    "./mime-type-icon": "./src/mime-type-icon.tsx",
-    "./truncateText": "./src/truncateText.tsx",
-    "./messages": "./src/messages.ts",
-    "./modalSpinner": "./src/modalSpinner.tsx",
-    "./browser": "./src/browser.tsx",
-    "./codeViewer": "./src/codeViewer.ts",
-    "./util": "./src/util.ts",
-    "./errorIcon": "./src/errorIcon.tsx",
-    "./types": "./src/types.ts",
-    "./formatDate": "./src/formatDate.ts",
-    "./locales": "./src/locales.ts",
-    ".": "./src/index.ts"
-  },
   "atlassian": {
     "team": "Media Experience",
     "inPublicMirror": true,
@@ -53,11 +29,11 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/locale": "^2.5.0",
-    "@atlaskit/media-common": "^7.0.0",
+    "@atlaskit/media-common": "^7.1.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -75,12 +51,10 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/button": "^16.8.0",
-    "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/page": "^12.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -111,5 +85,29 @@
       ]
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    "./classNames": "./src/classNames.ts",
+    "./media-type-icon": "./src/media-type-icon.tsx",
+    "./mime-type-icon": "./src/mime-type-icon.tsx",
+    "./truncateText": "./src/truncateText.tsx",
+    "./messages": "./src/messages.ts",
+    "./modalSpinner": "./src/modalSpinner.tsx",
+    "./browser": "./src/browser.tsx",
+    "./codeViewer": "./src/codeViewer.ts",
+    "./util": "./src/util.ts",
+    "./errorIcon": "./src/errorIcon.tsx",
+    "./types": "./src/types.ts",
+    "./formatDate": "./src/formatDate.ts",
+    "./locales": "./src/locales.ts",
+    ".": "./src/index.ts"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -439,6 +439,8 @@ export interface MediaImageProps {
   // (undocumented)
   dataURI: string;
   // (undocumented)
+  expandByPixel?: number;
+  // (undocumented)
   forceSyncDisplay?: boolean;
   // (undocumented)
   loading?: 'auto' | 'eager' | 'lazy';

package/tmp/api-report-tmp.d.ts

@@ -377,6 +377,8 @@ export interface MediaImageProps {
     // (undocumented)
     dataURI: string;
     // (undocumented)
+    expandByPixel?: number;
+    // (undocumented)
     forceSyncDisplay?: boolean;
     // (undocumented)
     loading?: 'auto' | 'eager' | 'lazy';