@atlaskit/media-card 78.0.2 → 78.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-card
 
+## 78.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 78.0.3
+
+### Patch Changes
+
+- [#116684](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116684)
+  [`72f1da4341a27`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/72f1da4341a27) -
+  Fixes sizing modes for SVG native rendering integration
+
 ## 78.0.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.2";
+var packageVersion = "78.0.4";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/fileCard.js

@@ -41,7 +41,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LoadedCardView = (0, _platformFeatureFlags.getBooleanFF)('platform.media-experience.card-views-refactor_b91lr') ? _cardviews.CardViews : _cardView.CardView;
+var LoadedCardView = (0, _platformFeatureFlags.fg)('platform.media-experience.card-views-refactor_b91lr') ? _cardviews.CardViews : _cardView.CardView;
 var FileCard = exports.FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
@@ -327,7 +327,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setShouldRenderSVG(false);
   };
   var onImageError = function onImageError(newCardPreview) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageErrorBase(newCardPreview);
@@ -336,7 +336,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setPreviewDidRender(true);
   };
   var onImageLoad = function onImageLoad(newCardPreview) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageLoadBase(newCardPreview);
@@ -463,14 +463,15 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
+    if (finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
      * it is able to set isCardVisible to true.
      */
-    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
-    ) {
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay &&
+    // SVG won't be supported when overlay is on
+    (0, _platformFeatureFlags.fg)('platform.media-card-svg-rendering_6tdbv')) {
       setShouldRenderSVG(true);
     }
   }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
@@ -653,7 +654,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     cardPreview: preview,
     alt: alt,
     resizeMode: resizeMode,
-    dimensions: cardDimensions,
+    cardDimensions: cardDimensions,
     selected: selected,
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.2";
+var packageVersion = "78.0.4";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/svgView/helpers.js

@@ -4,13 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateSvgDimensions = void 0;
-var calculateSvgDimensions = exports.calculateSvgDimensions = function calculateSvgDimensions(img, resizeMode) {
-  var naturalWidth = img.naturalWidth,
-    naturalHeight = img.naturalHeight;
-  var isLadscape = naturalWidth / naturalHeight > 1;
-  return resizeMode === 'crop' ? isLadscape ? {
-    height: '100%'
-  } : {
-    width: '100%'
-  } : {};
+var calculateSvgDimensions = exports.calculateSvgDimensions = function calculateSvgDimensions(imgElement, parentElement, resizeMode) {
+  var naturalWidth = imgElement.naturalWidth,
+    width = imgElement.width,
+    naturalHeight = imgElement.naturalHeight,
+    height = imgElement.height;
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  var imgWidth = naturalWidth || width;
+  var imgHeight = naturalHeight || height;
+  var _parentElement$getBou = parentElement.getBoundingClientRect(),
+    parentWidth = _parentElement$getBou.width,
+    parentHeight = _parentElement$getBou.height;
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "min(100%, ".concat(imgWidth, "px"),
+      maxHeight: "min(100%, ".concat(imgHeight, "px")
+    };
+  }
+  var imgRatio = imgWidth / imgHeight;
+  var cardRatio = parentWidth / parentHeight;
+  var isImageLandscapier = imgRatio > cardRatio;
+  if (resizeMode === 'stretchy-fit') {
+    if (isImageLandscapier) {
+      return {
+        width: '100%',
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        height: '100%',
+        maxWidth: '100%'
+      };
+    }
+  }
+  if (resizeMode === 'crop') {
+    if (isImageLandscapier) {
+      return {
+        height: imgHeight,
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        width: imgWidth,
+        maxWidth: '100%'
+      };
+    }
+  }
+  return {};
 };

package/dist/cjs/card/svgView/svgView.js

@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertResizeMode = exports.SvgViewBase = exports.SvgView = void 0;
+exports.SvgViewBase = exports.SvgView = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
@@ -24,25 +25,11 @@ var _errors = require("../../errors");
 var _errors2 = require("./errors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var convertResizeMode = exports.convertResizeMode = function convertResizeMode(resizeMode) {
-  switch (resizeMode) {
-    case 'crop':
-      return 'cover';
-    case 'fit':
-    case 'full-fit':
-      return 'scale-down';
-    case 'stretchy-fit':
-      return 'contain';
-    default:
-      return;
-  }
-};
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
   var identifier = _ref.identifier,
-    dimensions = _ref.dimensions,
+    cardDimensions = _ref.cardDimensions,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     testId = _ref.testId,
@@ -71,10 +58,17 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     svgDimensions = _useState6[0],
     setSvgDimensions = _useState6[1];
-  var divRef = (0, _react2.useRef)(null);
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var imgRef = (0, _react2.useRef)(null);
+  var wrapperRef = (0, _react2.useRef)(null);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(cardDimensions.width, wrapperRef);
+  var calculateDimensions = (0, _react2.useCallback)(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions((0, _helpers.calculateSvgDimensions)(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode]);
   var onSvgLoad = function onSvgLoad(evt) {
-    setSvgDimensions((0, _helpers.calculateSvgDimensions)(evt.currentTarget, resizeMode));
+    calculateDimensions(evt.currentTarget);
     setDidSvgRender(true);
     onLoad();
   };
@@ -85,16 +79,21 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
   };
+  (0, _react2.useEffect)(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
   return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
     fileName: fileName !== null && fileName !== void 0 ? fileName : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
   }), (0, _react.jsx)(_wrapper.Wrapper, {
     testId: testId || 'media-card-svg-wrapper',
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: wrapperRef,
     mediaCardCursor: mediaCardCursor,
     selected: !!selected,
     breakpoint: breakpoint,
@@ -114,13 +113,12 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
   }, (0, _react.jsx)(_mediaSvg.default, {
     testId: "media-card-svg",
     identifier: identifier,
-    dimensions: svgDimensions,
     onLoad: onSvgLoad,
     onError: onSvgError,
-    style: {
-      visibility: didSvgRender ? 'visible' : 'hidden',
-      objectFit: convertResizeMode(resizeMode)
-    }
+    style: _objectSpread({
+      visibility: didSvgRender ? 'visible' : 'hidden'
+    }, svgDimensions),
+    ref: imgRef
   }), !!cardPreview && !didSvgRender && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,

package/dist/cjs/card/ui/actionsBar/cardActions/styles.js

@@ -11,7 +11,7 @@ var _styles = require("../../styles");
 var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
   boxSizing: 'border-box',
   fontFamily: (0, _constants.fontFamily)(),

package/dist/cjs/card/ui/playButton/styles.js

@@ -14,7 +14,7 @@ var discSize = 48;
 var discSizeHover = 56;
 var fixedPlayButtonStyles = exports.fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)({
   position: 'absolute',
   top: 0,
@@ -31,7 +31,7 @@ var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)(
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var backgroundStyles = exports.backgroundStyles = (0, _react.css)({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

package/dist/cjs/card/ui/titleBox/styles.js

@@ -65,14 +65,14 @@ var titleBoxFooterStyles = exports.titleBoxFooterStyles = function titleBoxFoote
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.css)({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var errorMessageWrapperStyles = exports.errorMessageWrapperStyles = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.0.2",
+        packageName: "78.0.4",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/lightCards/errorIcon/styles.js

@@ -7,7 +7,7 @@ exports.errorIconWrapperStyles = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.2";
+var packageVersion = "78.0.4";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.0.2";
+const packageVersion = "78.0.4";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/fileCard.js

@@ -1,4 +1,4 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
@@ -27,7 +27,7 @@ import { performanceNow } from './performance';
 import { useContext } from 'react';
 import { DateOverrideContext } from '../dateOverrideContext';
 import { SvgView } from './svgView';
-const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
+const LoadedCardView = fg('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
 export const FileCard = ({
   appearance = 'auto',
   resizeMode = 'crop',
@@ -277,7 +277,7 @@ export const FileCard = ({
     setShouldRenderSVG(false);
   };
   const onImageError = newCardPreview => {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageErrorBase(newCardPreview);
@@ -286,7 +286,7 @@ export const FileCard = ({
     setPreviewDidRender(true);
   };
   const onImageLoad = newCardPreview => {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageLoadBase(newCardPreview);
@@ -414,14 +414,15 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   useEffect(() => {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
+    if (finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
      * it is able to set isCardVisible to true.
      */
-    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
-    ) {
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay &&
+    // SVG won't be supported when overlay is on
+    fg('platform.media-card-svg-rendering_6tdbv')) {
       setShouldRenderSVG(true);
     }
   }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
@@ -604,7 +605,7 @@ export const FileCard = ({
     cardPreview: preview,
     alt: alt,
     resizeMode: resizeMode,
-    dimensions: cardDimensions,
+    cardDimensions: cardDimensions,
     selected: selected,
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.0.2";
+const packageVersion = "78.0.4";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/svgView/helpers.js

@@ -1,12 +1,52 @@
-export const calculateSvgDimensions = (img, resizeMode) => {
+export const calculateSvgDimensions = (imgElement, parentElement, resizeMode) => {
   const {
     naturalWidth,
-    naturalHeight
-  } = img;
-  const isLadscape = naturalWidth / naturalHeight > 1;
-  return resizeMode === 'crop' ? isLadscape ? {
-    height: '100%'
-  } : {
-    width: '100%'
-  } : {};
+    width,
+    naturalHeight,
+    height
+  } = imgElement;
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  const imgWidth = naturalWidth || width;
+  const imgHeight = naturalHeight || height;
+  const {
+    width: parentWidth,
+    height: parentHeight
+  } = parentElement.getBoundingClientRect();
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: `min(100%, ${imgWidth}px`,
+      maxHeight: `min(100%, ${imgHeight}px`
+    };
+  }
+  const imgRatio = imgWidth / imgHeight;
+  const cardRatio = parentWidth / parentHeight;
+  const isImageLandscapier = imgRatio > cardRatio;
+  if (resizeMode === 'stretchy-fit') {
+    if (isImageLandscapier) {
+      return {
+        width: '100%',
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        height: '100%',
+        maxWidth: '100%'
+      };
+    }
+  }
+  if (resizeMode === 'crop') {
+    if (isImageLandscapier) {
+      return {
+        height: imgHeight,
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        width: imgWidth,
+        maxWidth: '100%'
+      };
+    }
+  }
+  return {};
 };

package/dist/es2019/card/svgView/svgView.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
@@ -15,22 +15,9 @@ import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
 import { MediaCardError } from '../../errors';
 import { getErrorReason } from './errors';
-export const convertResizeMode = resizeMode => {
-  switch (resizeMode) {
-    case 'crop':
-      return 'cover';
-    case 'fit':
-    case 'full-fit':
-      return 'scale-down';
-    case 'stretchy-fit':
-      return 'contain';
-    default:
-      return;
-  }
-};
 export const SvgViewBase = ({
   identifier,
-  dimensions,
+  cardDimensions,
   onClick,
   onMouseEnter,
   testId,
@@ -50,10 +37,17 @@ export const SvgViewBase = ({
   const [didSvgRender, setDidSvgRender] = useState(false);
   const [didPreviewRender, setDidPreviewRender] = useState(false);
   const [svgDimensions, setSvgDimensions] = useState();
-  const divRef = useRef(null);
-  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  const imgRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const breakpoint = useBreakpoint(cardDimensions.width, wrapperRef);
+  const calculateDimensions = useCallback(targetImgElem => {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode]);
   const onSvgLoad = evt => {
-    setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
+    calculateDimensions(evt.currentTarget);
     setDidSvgRender(true);
     onLoad();
   };
@@ -64,16 +58,21 @@ export const SvgViewBase = ({
   const onPreviewLoad = () => {
     setDidPreviewRender(true);
   };
+  useEffect(() => {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
   return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
     fileName: fileName !== null && fileName !== void 0 ? fileName : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
   }), jsx(Wrapper, {
     testId: testId || 'media-card-svg-wrapper',
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: wrapperRef,
     mediaCardCursor: mediaCardCursor,
     selected: !!selected,
     breakpoint: breakpoint,
@@ -93,13 +92,14 @@ export const SvgViewBase = ({
   }, jsx(MediaSvg, {
     testId: "media-card-svg",
     identifier: identifier,
-    dimensions: svgDimensions,
     onLoad: onSvgLoad,
     onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
-      objectFit: convertResizeMode(resizeMode)
-    }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...svgDimensions
+    },
+    ref: imgRef
   }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,

package/dist/es2019/card/ui/actionsBar/cardActions/styles.js

@@ -5,7 +5,7 @@ import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperStyles = css({
   boxSizing: 'border-box',
   fontFamily: fontFamily(),

package/dist/es2019/card/ui/playButton/styles.js

@@ -12,7 +12,7 @@ export const fixedPlayButtonStyles = `
   }
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -29,7 +29,7 @@ export const playButtonWrapperStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

package/dist/es2019/card/ui/titleBox/styles.js

@@ -55,14 +55,14 @@ infoStyles,
 hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "78.0.2",
+      packageName: "78.0.4",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/errorIcon/styles.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"