@atlaskit/media-card 79.0.12 → 79.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/media-card
 
+## 79.1.0
+
+### Minor Changes
+
+- [#123268](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123268)
+  [`f47a830143188`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f47a830143188) -
+  Allow for passing in a resolved media provider to enable SSR'ing media in the editor
+
+### Patch Changes
+
+- Updated dependencies
+
+## 79.0.13
+
+### Patch Changes
+
+- [#127167](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127167)
+  [`08efe402190f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08efe402190f3) -
+  Replaced internal image rendering component - Behind feature gate platform_media_card_image_render
+
 ## 79.0.12
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
 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 && {}.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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.12";
+var packageVersion = "79.1.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -9,6 +9,7 @@ exports.CardViewBase = exports.CardView = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -16,7 +17,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useCallbackRef = require("use-callback-ref");
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../utils/analytics");
-var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
+var _imageRenderer = require("./ui/imageRenderer");
 var _titleBox = require("./ui/titleBox/titleBox");
 var _failedTitleBox = require("./ui/titleBox/failedTitleBox");
 var _progressBar = require("./ui/progressBar/progressBar");
@@ -33,6 +34,7 @@ var _useBreakpoint = require("./useBreakpoint");
 var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewerButton/openMediaViewerButton"));
 var _useCurrentValueRef = require("../utils/useCurrentValueRef");
 var _svgView = require("./svgView");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 && {}.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; }
@@ -245,7 +247,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
   var contents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_wrapper.ImageContainer, {
-    centerElements: didSvgRender,
+    centerElements: didSvgRender && !(0, _platformFeatureFlags.fg)('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
+    ,
     testId: _classnames.fileCardImageViewSelector,
     mediaName: name,
     status: status,
@@ -266,13 +269,13 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
+  })), renderSvgView && identifier && (0, _mediaClient.isFileIdentifier)(identifier) && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
     wrapperRef: divRef
-  }), renderImageRenderer && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
+  }), renderImageRenderer && identifier && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,
@@ -281,7 +284,9 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     onImageLoad: handleOnImageLoad,
     onImageError: handleOnImageError,
     nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    identifier: identifier,
+    wrapperRef: divRef
   }), renderPlayButton && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/cjs/card/externalImageCard.js

@@ -201,6 +201,7 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
 
   var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
+    identifier: identifier,
     status: status,
     error: error,
     mediaItemType: identifier.mediaItemType,

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

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.12";
+var packageVersion = "79.1.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _svgImageCompiled = require("./svgImage-compiled");
 var _svgImageEmotion = require("./svgImage-emotion");
+var _svgViewV = require("./svgViewV2");
 var SvgView = exports.SvgView = function SvgView(props) {
-  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_svgImageCompiled.SvgView, props) : /*#__PURE__*/_react.default.createElement(_svgImageEmotion.SvgView, props);
+  return (0, _platformFeatureFlags.fg)('platform_media_card_image_render') ? /*#__PURE__*/_react.default.createElement(_svgViewV.SvgView, props) : (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_svgImageCompiled.SvgView, props) : /*#__PURE__*/_react.default.createElement(_svgImageEmotion.SvgView, props);
 };

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SvgView = void 0;
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _errors = require("../../errors");
+var _mediaSvg = require("@atlaskit/media-svg");
+var _imageRendererV = require("../ui/imageRenderer/imageRendererV2");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    case 'blob-to-datauri':
+      return 'svg-blob-to-datauri';
+    default:
+      return 'svg-unknown-error';
+  }
+};
+var SvgView = exports.SvgView = function SvgView(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    wrapperRef = _ref.wrapperRef,
+    alt = _ref.alt;
+  var onSvgError = function onSvgError(err) {
+    var error = new _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 || onError(error);
+  };
+  var _useResolveSvg = (0, _mediaSvg.useResolveSvg)(identifier, onSvgError),
+    svgUrl = _useResolveSvg.svgUrl,
+    source = _useResolveSvg.source;
+  var cardPreview = (0, _react2.useMemo)(function () {
+    return svgUrl && source ? {
+      dataURI: svgUrl,
+      source: source
+    } : undefined;
+  }, [svgUrl, source]);
+  return cardPreview ? (0, _react.jsx)(_imageRendererV.ImageRenderer, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    cardPreview: cardPreview,
+    alt: alt,
+    resizeMode: resizeMode,
+    onImageLoad: onLoad,
+    onImageError: function onImageError() {
+      onSvgError(new _mediaSvg.MediaSVGError('img-error'));
+    },
+    wrapperRef: wrapperRef,
+    mediaType: "image",
+    useWhiteBackground: true
+  }) : null;
+};

package/dist/cjs/card/ui/imageRenderer/helpers.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateInitialDimensions = exports.calculateDimensions = void 0;
+var calculateDimensions = exports.calculateDimensions = function calculateDimensions(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 {};
+};
+var calculateInitialDimensions = exports.calculateInitialDimensions = function calculateInitialDimensions(resizeMode) {
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "100%",
+      maxHeight: "100%"
+    };
+  }
+  if (resizeMode === 'stretchy-fit') {
+    // assume the image is landscape
+    return {
+      width: '100%',
+      maxHeight: '100%'
+    };
+  }
+
+  // resizeMode === 'crop'
+  // assume the image is landscape
+  return {
+    width: '100%'
+  };
+};

package/dist/cjs/card/ui/imageRenderer/imageRendererV2.compiled.css

@@ -0,0 +1,2 @@
+._5ral1f51{object-fit:contain}
+._bfhku67f{background-color:#fff}

package/dist/cjs/card/ui/imageRenderer/imageRendererV2.js

@@ -0,0 +1,87 @@
+/* imageRendererV2.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageRenderer = void 0;
+require("./imageRendererV2.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("./helpers");
+var _useCurrentValueRef = require("../../../utils/useCurrentValueRef");
+var _wrapper = require("./wrapper");
+var _mediaClient = require("@atlaskit/media-client");
+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 && {}.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 baseStyles = null;
+var backgroundStyles = null;
+var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
+  var cardPreview = _ref.cardPreview,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    onImageLoad = _ref.onImageLoad,
+    onImageError = _ref.onImageError,
+    onDisplayImage = _ref.onDisplayImage,
+    mediaType = _ref.mediaType,
+    nativeLazyLoad = _ref.nativeLazyLoad,
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    identifier = _ref.identifier,
+    wrapperRef = _ref.wrapperRef,
+    useWhiteBackground = _ref.useWhiteBackground,
+    testId = _ref.testId;
+  var onDisplayImageRef = (0, _useCurrentValueRef.useCurrentValueRef)(onDisplayImage);
+  (0, _react.useEffect)(function () {
+    if (mediaType === 'image') {
+      var _onDisplayImageRef$cu;
+      (_onDisplayImageRef$cu = onDisplayImageRef.current) === null || _onDisplayImageRef$cu === void 0 || _onDisplayImageRef$cu.call(onDisplayImageRef);
+    }
+  }, [mediaType, onDisplayImageRef]);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    didRender = _useState2[0],
+    setDidRender = _useState2[1];
+  var _useState3 = (0, _react.useState)((0, _helpers.calculateInitialDimensions)(resizeMode)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    resolvedDimensions = _useState4[0],
+    setResolvedDimensions = _useState4[1];
+  var imgRef = (0, _react.useRef)(null);
+  var onLoad = function onLoad(evt) {
+    wrapperRef.current && setResolvedDimensions((0, _helpers.calculateDimensions)(evt.currentTarget, wrapperRef.current, resizeMode));
+    setDidRender(true);
+    cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
+  };
+  var onError = function onError() {
+    onImageError && cardPreview && onImageError(cardPreview);
+  };
+  (0, _react.useEffect)(function () {
+    if (imgRef.current && wrapperRef.current && imgRef.current) {
+      setResolvedDimensions((0, _helpers.calculateDimensions)(imgRef.current, wrapperRef.current, resizeMode));
+    }
+  }, [resizeMode, wrapperRef]);
+  return cardPreview ? /*#__PURE__*/_react.default.createElement(_wrapper.ImageRendererWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    ref: imgRef,
+    "data-testid": testId,
+    "data-fileid": (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : null,
+    "data-filecollection": (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : null,
+    "data-resizemode": resizeMode,
+    "data-source": cardPreview.source,
+    src: cardPreview.dataURI,
+    alt: alt,
+    onLoad: onLoad,
+    onError: onError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    style: _objectSpread({
+      visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden'
+    }, resolvedDimensions),
+    className: (0, _runtime.ax)(["_5ral1f51", useWhiteBackground && "_bfhku67f"])
+  })) : null;
+};

package/dist/cjs/card/ui/imageRenderer/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageRenderer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _imageRenderer = require("./imageRenderer");
+var _imageRendererV = require("./imageRendererV2");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var ImageRenderer = exports.ImageRenderer = function ImageRenderer(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_card_image_render') ? /*#__PURE__*/_react.default.createElement(_imageRendererV.ImageRenderer, props) : /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, props);
+};

package/dist/cjs/card/ui/imageRenderer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/card/ui/imageRenderer/wrapper.compiled.css

@@ -0,0 +1,7 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}

package/dist/cjs/card/ui/imageRenderer/wrapper.js

@@ -0,0 +1,21 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageRendererWrapper = void 0;
+require("./wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 && {}.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; }
+var wrapperStyles = null;
+var ImageRendererWrapper = exports.ImageRendererWrapper = function ImageRendererWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ImageRendererWrapper",
+    className: (0, _runtime.ax)(["_kqswstnw _1bsb1osq _4t3i1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, children);
+};

package/dist/cjs/inline/loader.js

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

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 = "79.0.12";
+var packageVersion = "79.1.0";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.0.12";
+const packageVersion = "79.1.0";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { isFileIdentifier } from '@atlaskit/media-client';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
@@ -6,7 +7,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMergeRefs } from 'use-callback-ref';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
-import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
+import { ImageRenderer } from './ui/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
@@ -23,6 +24,7 @@ import { useBreakpoint } from './useBreakpoint';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { SvgView } from './svgView';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const CardViewBase = ({
   identifier,
   innerRef = null,
@@ -233,7 +235,8 @@ export const CardViewBase = ({
     onSvgLoad === null || onSvgLoad === void 0 ? void 0 : onSvgLoad();
   };
   const contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
-    centerElements: didSvgRender,
+    centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
+    ,
     testId: fileCardImageViewSelector,
     mediaName: name,
     status: status,
@@ -254,13 +257,13 @@ export const CardViewBase = ({
   }, /*#__PURE__*/React.createElement(SpinnerIcon, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && /*#__PURE__*/React.createElement(SvgView, {
+  })), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
     wrapperRef: divRef
-  }), renderImageRenderer && /*#__PURE__*/React.createElement(ImageRenderer, {
+  }), renderImageRenderer && identifier && /*#__PURE__*/React.createElement(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,
@@ -269,7 +272,9 @@ export const CardViewBase = ({
     onImageLoad: handleOnImageLoad,
     onImageError: handleOnImageError,
     nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    identifier: identifier,
+    wrapperRef: divRef
   }), renderPlayButton && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/es2019/card/externalImageCard.js

@@ -166,6 +166,7 @@ export const ExternalImageCard = ({
 
   const mediaCardCursor = getMediaCardCursor(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardView, {
+    identifier: identifier,
     status: status,
     error: error,
     mediaItemType: identifier.mediaItemType,

package/dist/es2019/card/inlinePlayerWrapper-compiled.js

@@ -35,10 +35,7 @@ export const InlinePlayerWrapper = props => {
     style: {
       width: getDimensionsWithDefault(dimensions).width || '100%',
       height: getDimensionsWithDefault(dimensions).height || 'auto'
-    }
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-
+    },
     onClick: onClick,
     ref: innerRef
   }, VcMediaWrapperProps), props.children);

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 = "79.0.12";
+const packageVersion = "79.1.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SvgView as SvgViewCompiled } from './svgImage-compiled';
 import { SvgView as SvgViewEmotion } from './svgImage-emotion';
+import { SvgView as SvgViewV2 } from './svgViewV2';
 export const SvgView = props => {
-  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(SvgViewCompiled, props) : /*#__PURE__*/React.createElement(SvgViewEmotion, props);
+  return fg('platform_media_card_image_render') ? /*#__PURE__*/React.createElement(SvgViewV2, props) : fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(SvgViewCompiled, props) : /*#__PURE__*/React.createElement(SvgViewEmotion, props);
 };

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

@@ -0,0 +1,57 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useMemo } from 'react';
+import { MediaCardError } from '../../errors';
+import { useResolveSvg, MediaSVGError } from '@atlaskit/media-svg';
+import { ImageRenderer } from '../ui/imageRenderer/imageRendererV2';
+const getErrorReason = svgReason => {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    case 'blob-to-datauri':
+      return 'svg-blob-to-datauri';
+    default:
+      return 'svg-unknown-error';
+  }
+};
+export const SvgView = ({
+  identifier,
+  resizeMode,
+  onLoad,
+  onError,
+  wrapperRef,
+  alt
+}) => {
+  const onSvgError = err => {
+    const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 ? void 0 : onError(error);
+  };
+  const {
+    svgUrl,
+    source
+  } = useResolveSvg(identifier, onSvgError);
+  const cardPreview = useMemo(() => svgUrl && source ? {
+    dataURI: svgUrl,
+    source
+  } : undefined, [svgUrl, source]);
+  return cardPreview ? jsx(ImageRenderer, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    cardPreview: cardPreview,
+    alt: alt,
+    resizeMode: resizeMode,
+    onImageLoad: onLoad,
+    onImageError: () => {
+      onSvgError(new MediaSVGError('img-error'));
+    },
+    wrapperRef: wrapperRef,
+    mediaType: "image",
+    useWhiteBackground: true
+  }) : null;
+};