@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/cjs/root/inlinePlayer.js

@@ -41,10 +41,6 @@ var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = require("../utils/analytics");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -307,10 +303,11 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function () {
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function (checkMouseMovement) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
+          fileId: identifier.id,
           isAutoPlay: true,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
@@ -318,7 +315,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           lastWatchTimeConfig: {
             contentId: identifier.id
           },
-          originalDimensions: originalDimensions
+          originalDimensions: originalDimensions,
+          showControls: checkMouseMovement
         });
       }));
     }
@@ -337,13 +335,5 @@ var InlinePlayerForwardRef = /*#__PURE__*/_react.default.forwardRef(function (pr
   }));
 });
 
-var InlinePlayer = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    actionSubjectId: 'mediaCardInlinePlayer',
-    attributes: {}
-  })
-})(InlinePlayerForwardRef);
+var InlinePlayer = InlinePlayerForwardRef;
 exports.InlinePlayer = InlinePlayer;

package/dist/cjs/root/ui/iconMessage/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewCurrentlyUnavailable = exports.RateLimited = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
+exports.PreviewCurrentlyUnavailable = exports.FailedToUpload = exports.FailedToLoad = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,11 +31,12 @@ var IconMessage = function IconMessage(_ref) {
 
 exports.IconMessage = IconMessage;
 
-var CreatingPreview = function CreatingPreview(props) {
-  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+var CreatingPreview = function CreatingPreview(_ref2) {
+  var disableAnimation = _ref2.disableAnimation;
+  return /*#__PURE__*/_react.default.createElement(IconMessage, {
     messageDescriptor: _mediaUi.messages.creating_preview,
-    animated: true
-  }));
+    animated: !disableAnimation
+  });
 };
 
 exports.CreatingPreview = CreatingPreview;
@@ -48,14 +49,21 @@ var PreviewUnavailable = function PreviewUnavailable(props) {
 
 exports.PreviewUnavailable = PreviewUnavailable;
 
-var RateLimited = function RateLimited(props) {
+var FailedToLoad = function FailedToLoad(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
-    messageDescriptor: _mediaUi.messages.preview_rateLimited,
-    reducedFont: true
+    messageDescriptor: _mediaUi.messages.failed_to_load
+  }));
+};
+
+exports.FailedToLoad = FailedToLoad;
+
+var FailedToUpload = function FailedToUpload(props) {
+  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _mediaUi.messages.failed_to_upload
   }));
 };
 
-exports.RateLimited = RateLimited;
+exports.FailedToUpload = FailedToUpload;
 
 var PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {

package/dist/cjs/root/ui/imageRenderer/imageRenderer.js

@@ -2,130 +2,51 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageRenderer = exports.ImageRendererBase = exports.resizeModeToMediaImageProps = void 0;
+exports.ImageRenderer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = require("../../../utils/analytics");
-
-var _fileAttributesContext = require("../../../utils/fileAttributesContext");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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; } }
-
-var resizeModeToMediaImageProps = function resizeModeToMediaImageProps(resizeMode) {
-  return {
-    crop: resizeMode === 'crop',
-    stretch: resizeMode === 'stretchy-fit'
-  };
-};
-
-exports.resizeModeToMediaImageProps = resizeModeToMediaImageProps;
-
-var ImageRendererBase = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ImageRendererBase, _React$Component);
-
-  var _super = _createSuper(ImageRendererBase);
-
-  function ImageRendererBase() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ImageRendererBase);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          fileAttributes = _this$props.fileAttributes;
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.SUCCEEDED)) {
-        (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderSucceededEventPayload)(fileAttributes), createAnalyticsEvent);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
-      var _this$props2 = _this.props,
-          onImageError = _this$props2.onImageError,
-          fileAttributes = _this$props2.fileAttributes;
-      onImageError && onImageError();
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.FAILED)) {
-        var _this$props3 = _this.props,
-            createAnalyticsEvent = _this$props3.createAnalyticsEvent,
-            mediaItemType = _this$props3.mediaItemType;
-
-        if (mediaItemType === 'file') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedFileUriPayload)(fileAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedExternalUriPayload)(fileAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldFireEvent", function (action) {
-      return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ImageRendererBase, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-      var _this$props4 = this.props,
-          onDisplayImage = _this$props4.onDisplayImage,
-          mediaType = _this$props4.mediaType;
-
-      if (mediaType === 'image' && onDisplayImage) {
-        onDisplayImage();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          dataURI = _this$props5.dataURI,
-          previewOrientation = _this$props5.previewOrientation,
-          alt = _this$props5.alt,
-          resizeMode = _this$props5.resizeMode;
-      return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-        dataURI: dataURI,
-        alt: alt,
-        previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
-      }, resizeModeToMediaImageProps(resizeMode)));
+var _resizeModeToMediaImageProps = require("../../../utils/resizeModeToMediaImageProps");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageRenderer = function ImageRenderer(_ref) {
+  var dataURI = _ref.dataURI,
+      previewOrientation = _ref.previewOrientation,
+      alt = _ref.alt,
+      resizeMode = _ref.resizeMode,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      onDisplayImage = _ref.onDisplayImage,
+      mediaType = _ref.mediaType,
+      nativeLazyLoad = _ref.nativeLazyLoad,
+      forceSyncDisplay = _ref.forceSyncDisplay;
+  (0, _react.useEffect)(function () {
+    // TODO: trigger accordingly with the succeeded event. This could be a breaking change
+    if (mediaType === 'image' && onDisplayImage) {
+      onDisplayImage();
     }
-  }]);
-  return ImageRendererBase;
-}(_react.default.Component);
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
+  }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
+};
 
-exports.ImageRendererBase = ImageRendererBase;
-var ImageRenderer = (0, _analyticsNext.withAnalyticsEvents)()((0, _fileAttributesContext.withFileAttributes)(ImageRendererBase));
 exports.ImageRenderer = ImageRenderer;

package/dist/cjs/root/ui/styled.js

@@ -119,7 +119,7 @@ var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject ||
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
       shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
 });
 
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;

package/dist/cjs/root/ui/titleBox/failedTitleBox.js

@@ -13,19 +13,23 @@ var _styled = require("./styled");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _getErrorMessage = require("../../../utils/getErrorMessage");
+var _reactIntl = require("react-intl");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), (0, _getErrorMessage.getErrorMessage)('error')));
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, customMessage)));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

package/dist/cjs/utils/analytics.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderFailedFileUriPayload = exports.getFailedFileUriFailReason = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.RenderEventAction = void 0;
+exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getRenderPreviewableCardPayload = exports.getFileAttributes = void 0;
 
 var _mediaClient = require("@atlaskit/media-client");
 
@@ -14,15 +14,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _errors = require("../errors");
 
-var RenderEventAction;
-exports.RenderEventAction = RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (exports.RenderEventAction = RenderEventAction = {}));
-
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -35,68 +26,58 @@ var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
 
 exports.getFileAttributes = getFileAttributes;
 
-var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes) {
+var getRenderPreviewableCardPayload = function getRenderPreviewableCardPayload(fileAttributes) {
   return {
-    eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
-    actionSubject: 'mediaCardRender',
+    eventType: 'screen',
+    action: 'viewed',
+    actionSubject: 'mediaCardRenderScreen',
+    name: 'mediaCardRenderScreen',
     attributes: {
+      type: fileAttributes.fileMediatype,
       fileAttributes: fileAttributes
     }
   };
 };
 
-exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
+exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes) {
+var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      status: 'success'
+      performanceAttributes: performanceAttributes
     }
   };
 };
 
-exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
-
-var getFailedFileUriFailReason = function getFailedFileUriFailReason(fileStatus) {
-  if (!fileStatus) {
-    // This fail reason will come from a bug, most likely.
-    return "unknown-uri";
-  } else if (fileStatus === 'uploading') {
-    return 'local-uri';
-  }
-
-  return 'remote-uri';
-};
-
-exports.getFailedFileUriFailReason = getFailedFileUriFailReason;
+exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      status: 'fail',
-      failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
+      performanceAttributes: performanceAttributes,
+      status: 'success'
     }
   };
 };
 
-exports.getRenderFailedFileUriPayload = getRenderFailedFileUriPayload;
+exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
 
-var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes) {
+var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'external-uri'
     }
@@ -147,13 +128,14 @@ var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error
 
 exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, error) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: getRenderErrorFailReason(error),
       error: getRenderErrorErrorReason(error),
@@ -165,13 +147,14 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes) {
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'failed-processing'
     }

package/dist/cjs/utils/cardActions/cardActionsDropdownMenu.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardActionsDropdownMenu = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -103,16 +105,21 @@ var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/_react.default.createElement(_more.default, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = (0, _objectWithoutProperties2.default)(_ref, ["triggerRef"]);
+            return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/_react.default.createElement(_more.default, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/cjs/utils/dimensionComparer.js

@@ -32,7 +32,7 @@ var canCompareDimension = function canCompareDimension(current, next) {
 exports.canCompareDimension = canCompareDimension;
 
 var isBigger = function isBigger(current, next) {
-  if (canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
+  if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
     var nextIsHigher = parseInt("".concat(current.width), 10) < parseInt("".concat(next.width), 10);
     var nextIsWider = parseInt("".concat(current.height), 10) < parseInt("".concat(next.height), 10);
     return nextIsHigher || nextIsWider;

package/dist/cjs/utils/document.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _default = function _default() {
+  return document;
+};
+
+exports.default = _default;

package/dist/cjs/utils/getDataURIDimension.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDataURIDimension = void 0;
+exports.getRequestedDimensions = exports.getDataURIDimension = void 0;
 
 var _isRetina = require("./isRetina");
 
@@ -34,4 +34,15 @@ var getDataURIDimension = function getDataURIDimension(dimension, options) {
   return _cardDimensions.defaultImageCardDimensions[dimension] * retinaFactor;
 };
 
-exports.getDataURIDimension = getDataURIDimension;
+exports.getDataURIDimension = getDataURIDimension;
+
+var getRequestedDimensions = function getRequestedDimensions(options) {
+  var width = getDataURIDimension('width', options);
+  var height = getDataURIDimension('height', options);
+  return {
+    width: width,
+    height: height
+  };
+};
+
+exports.getRequestedDimensions = getRequestedDimensions;

package/dist/cjs/utils/metadata.js

@@ -20,8 +20,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-var getFileDetails = function getFileDetails(state) {
-  return !(0, _mediaClient.isErrorFileState)(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -29,8 +29,16 @@ var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+var getFileDetails = function getFileDetails(identifier, fileState) {
+  return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };
 

package/dist/cjs/utils/objectURLCache.js

@@ -86,6 +86,12 @@ var ObjectURLCache = /*#__PURE__*/function () {
     value: function set(key, value) {
       this.cache.set(key, value);
     }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var removed = this.cache.remove(key);
+      removed && URL.revokeObjectURL(removed.dataURI);
+    }
   }]);
   return ObjectURLCache;
 }();

package/dist/cjs/utils/resizeModeToMediaImageProps.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeModeToMediaImageProps = resizeModeToMediaImageProps;
+
+function resizeModeToMediaImageProps(resizeMode) {
+  return {
+    crop: resizeMode === 'crop',
+    stretch: resizeMode === 'stretchy-fit'
+  };
+}

package/dist/cjs/utils/shouldDisplayImageThumbnail.js

@@ -13,7 +13,7 @@ var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatu
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "70.10.0",
+	"version": "72.1.0",
 	"sideEffects": false
 }