@atlaskit/media-card 70.9.0 → 72.0.0

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

@@ -1,109 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../../utils/analytics';
-import { withFileAttributes } from '../../../utils/fileAttributesContext';
-export var resizeModeToMediaImageProps = function resizeModeToMediaImageProps(resizeMode) {
-  return {
-    crop: resizeMode === 'crop',
-    stretch: resizeMode === 'stretchy-fit'
-  };
-};
-export var ImageRendererBase = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageRendererBase, _React$Component);
-
-  var _super = _createSuper(ImageRendererBase);
-
-  function ImageRendererBase() {
-    var _this;
-
-    _classCallCheck(this, ImageRendererBase);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
+export 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;
+  useEffect(function () {
+    // TODO: trigger accordingly with the succeeded event. This could be a breaking change
+    if (mediaType === 'image' && onDisplayImage) {
+      onDisplayImage();
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          fileAttributes = _this$props.fileAttributes;
-
-      if (fileAttributes && _this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
-      var _this$props2 = _this.props,
-          onImageError = _this$props2.onImageError,
-          fileAttributes = _this$props2.fileAttributes;
-      onImageError && onImageError();
-
-      if (fileAttributes && _this.shouldFireEvent(RenderEventAction.FAILED)) {
-        var _this$props3 = _this.props,
-            createAnalyticsEvent = _this$props3.createAnalyticsEvent,
-            mediaItemType = _this$props3.mediaItemType;
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "shouldFireEvent", function (action) {
-      return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
-    });
-
-    return _this;
-  }
-
-  _createClass(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.createElement(MediaImage, _extends({
-        dataURI: dataURI,
-        alt: alt,
-        previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
-      }, resizeModeToMediaImageProps(resizeMode)));
-    }
-  }]);
-
-  return ImageRendererBase;
-}(React.Component);
-export var ImageRenderer = withAnalyticsEvents()(withFileAttributes(ImageRendererBase));
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/React.createElement(MediaImage, _extends({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError
+  }, resizeModeToMediaImageProps(resizeMode)));
+};

package/dist/esm/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -3,7 +3,7 @@ import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../common';
+import { Breakpoint } from '../Breakpoint';
 export var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,

package/dist/esm/root/ui/progressBar/progressBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../common';
+import { Breakpoint } from '../Breakpoint';
 export var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,

package/dist/esm/root/ui/progressBar/styled.js

@@ -6,7 +6,8 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+import { getTitleBoxHeight, responsiveSettings } from '../common';
+import { Breakpoint } from '../Breakpoint';
 var height = 3;
 var padding = 1;
 var width = 95; // %

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

@@ -1,68 +1,26 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 import styled from 'styled-components';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
-import { fontFamily } from '@atlaskit/theme/constants';
-import { borderRadius } from '@atlaskit/media-ui';
-import { N20, N60A } from '@atlaskit/theme/colors';
-import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-import { transition } from '../../styles';
 import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
-import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
 import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
 import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { Breakpoint, responsiveSettings } from './common';
-var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
-export var calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  var _ref = breakpointSizes.find(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        _breakpoint = _ref4[0],
-        limit = _ref4[1];
-
-    return wrapperWidth <= limit;
-  }) || [Breakpoint.SMALL],
-      _ref2 = _slicedToArray(_ref, 1),
-      breakpoint = _ref2[0];
-
-  return breakpoint;
-};
-
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
-  var setting = responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
+import { SSRFileExperienceWrapper } from './styledSSR';
 
 var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref5 = dimensions || {},
-      width = _ref5.width,
-      height = _ref5.height;
+  var _ref = dimensions || {},
+      width = _ref.width,
+      height = _ref.height;
 
   var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
       defaultWidth = _getDefaultCardDimens.width,
       defaultHeight = _getDefaultCardDimens.height;
 
   return "\n    width: ".concat(getCSSUnitValue(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-}; // This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
-
-
-var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A) : '';
-  var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -81,18 +39,12 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
 
-export var NewFileExperienceWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
-  var breakpoint = _ref6.breakpoint,
-      dimensions = _ref6.dimensions,
-      appearance = _ref6.appearance,
-      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
-      disableOverlay = _ref6.disableOverlay,
-      displayBackground = _ref6.displayBackground,
-      selected = _ref6.selected,
-      isPlayButtonClickable = _ref6.isPlayButtonClickable,
-      isTickBoxSelectable = _ref6.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(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(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+export var NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var dimensions = _ref2.dimensions,
+      appearance = _ref2.appearance,
+      isPlayButtonClickable = _ref2.isPlayButtonClickable,
+      isTickBoxSelectable = _ref2.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref2.shouldDisplayTooltip;
+  return "\n    ".concat(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\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
 });
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
-export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';

package/dist/esm/root/ui/styledSSR.js

@@ -0,0 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import styled from 'styled-components';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
+import { N20, N60A } from '@atlaskit/theme/colors';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { borderRadius } from '@atlaskit/media-ui';
+import { transition } from '../../styles';
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
+import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
+import { responsiveSettings } from './common';
+import { Breakpoint } from './Breakpoint';
+export var SSRFileExperienceWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  &:hover .", " {\n    ", "\n  }\n"])), function (_ref) {
+  var breakpoint = _ref.breakpoint,
+      dimensions = _ref.dimensions,
+      appearance = _ref.appearance,
+      shouldUsePointerCursor = _ref.shouldUsePointerCursor,
+      displayBackground = _ref.displayBackground,
+      disableOverlay = _ref.disableOverlay,
+      selected = _ref.selected;
+  return "\n  ".concat(transition(), "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ").concat(fontFamily(), ";\n  ").concat(getWrapperDimensions(dimensions, appearance), "\n  ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n  ").concat(borderRadius, "\n  ").concat(getCursorStyle(shouldUsePointerCursor), "\n  ").concat(generateResponsiveStyles(breakpoint), "\n  ").concat(hideNativeBrowserTextSelectionStyles, "\n  ").concat(getWrapperShadow(disableOverlay, selected), "\n  ");
+}, blanketClassName, fixedBlanketStyles);
+SSRFileExperienceWrapper.displayName = 'SSRFileExperienceWrapper';
+export var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
+  var _ref2 = dimensions || {},
+      width = _ref2.width,
+      height = _ref2.height;
+
+  var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
+      defaultWidth = _getDefaultCardDimens.width,
+      defaultHeight = _getDefaultCardDimens.height;
+
+  return "\n    width: ".concat(getCSSUnitValue(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
+};
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
+  var setting = responsiveSettings[breakpoint];
+  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
+};
+
+var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
+  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A) : '';
+  var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
+};
+
+export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export var calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  var _ref3 = breakpointSizes.find(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        _breakpoint = _ref6[0],
+        limit = _ref6[1];
+
+    return wrapperWidth <= limit;
+  }) || [Breakpoint.SMALL],
+      _ref4 = _slicedToArray(_ref3, 1),
+      breakpoint = _ref4[0];
+
+  return breakpoint;
+};

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

@@ -1,15 +1,18 @@
 import React from 'react';
 import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { getErrorMessage } from '../../../utils/getErrorMessage';
+import { FormattedMessage } from 'react-intl';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), getErrorMessage('error')));
+  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
 };

package/dist/esm/root/ui/titleBox/styled.js

@@ -3,7 +3,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
+import { responsiveSettings, getTitleBoxHeight } from '../common';
+import { Breakpoint } from '../Breakpoint';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

package/dist/esm/utils/analytics.js

@@ -2,14 +2,6 @@ import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-clien
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
-export var RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (RenderEventAction = {}));
-
 export var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -19,56 +11,49 @@ export var getFileAttributes = function getFileAttributes(metadata, fileStatus)
     fileStatus: fileStatus
   };
 };
-export var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes) {
+export 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
     }
   };
 };
-export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes) {
+export var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      status: 'success'
+      performanceAttributes: performanceAttributes
     }
   };
 };
-export 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';
-};
-export var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes) {
+export 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'
     }
   };
 };
-export var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes) {
+export 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'
     }
@@ -104,13 +89,14 @@ export var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadat
     return error.secondaryError.metadata;
   }
 };
-export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, error) {
+export 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),
@@ -119,13 +105,14 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
     }
   };
 };
-export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes) {
+export 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/esm/utils/dimensionComparer.js

@@ -20,7 +20,7 @@ export var canCompareDimension = function canCompareDimension(current, next) {
   return false;
 };
 export 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/esm/utils/document.js

@@ -0,0 +1,3 @@
+export default (function () {
+  return document;
+});

package/dist/esm/utils/getDataURIDimension.js

@@ -20,4 +20,12 @@ export var getDataURIDimension = function getDataURIDimension(dimension, options
   }
 
   return defaultImageCardDimensions[dimension] * retinaFactor;
+};
+export var getRequestedDimensions = function getRequestedDimensions(options) {
+  var width = getDataURIDimension('width', options);
+  var height = getDataURIDimension('height', options);
+  return {
+    width: width,
+    height: height
+  };
 };

package/dist/esm/utils/metadata.js

@@ -1,4 +1,4 @@
-import { isErrorFileState } from '@atlaskit/media-client';
+import { isErrorFileState, isFileIdentifier } from '@atlaskit/media-client';
 
 var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
   switch (status) {
@@ -13,8 +13,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-export var getFileDetails = function getFileDetails(state) {
-  return !isErrorFileState(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -22,7 +22,15 @@ export var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+export var getFileDetails = function getFileDetails(identifier, fileState) {
+  return isFileIdentifier(identifier) ? fileState && !isErrorFileState(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };

package/dist/esm/utils/objectURLCache.js

@@ -73,6 +73,12 @@ export 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/esm/utils/resizeModeToMediaImageProps.js

@@ -0,0 +1,6 @@
+export function resizeModeToMediaImageProps(resizeMode) {
+  return {
+    crop: resizeMode === 'crop',
+    stretch: resizeMode === 'stretchy-fit'
+  };
+}

package/dist/esm/utils/shouldDisplayImageThumbnail.js

@@ -5,7 +5,7 @@ export var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(ca
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/esm/utils/videoSnapshot.js

@@ -0,0 +1,31 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import VideoSnapshot from 'video-snapshot';
+export var takeSnapshot = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {
+    var snapshooter, dataUri;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            snapshooter = new VideoSnapshot(blob);
+            _context.next = 3;
+            return snapshooter.takeSnapshot();
+
+          case 3:
+            dataUri = _context.sent;
+            snapshooter.end();
+            return _context.abrupt("return", dataUri);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function takeSnapshot(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/esm/version.json

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