@atlaskit/media-card 78.12.1 → 78.14.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/media-card
 
+## 78.14.0
+
+### Minor Changes
+
+- [#162568](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162568)
+  [`bdec058ec8fe8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bdec058ec8fe8) -
+  Added support for navite SVG rendering when overlay is enabled (Media Group)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 78.13.0
+
+### Minor Changes
+
+- [#163838](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163838)
+  [`c3fcf9a7c2028`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3fcf9a7c2028) -
+  Logging good/bad events from file downloads
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 78.12.1
 
 ### Patch Changes

package/dist/cjs/card/actions.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.attachDetailsToActions = attachDetailsToActions;
+exports.createDownloadAction = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 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; }
 function attachDetailsToActions(actions, details) {
@@ -19,4 +22,15 @@ function attachDetailsToActions(actions, details) {
       }
     });
   });
-}
+}
+var createDownloadAction = exports.createDownloadAction = function createDownloadAction(handler) {
+  return {
+    label: 'Download',
+    icon: /*#__PURE__*/_react.default.createElement(_download.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "Download"
+    }),
+    handler: handler
+  };
+};

package/dist/cjs/card/card.js

@@ -22,7 +22,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 = "78.12.1";
+var packageVersion = "78.14.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardAnalytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireCopiedEvent = void 0;
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireDownloadSucceededEvent = exports.fireDownloadFailedEvent = exports.fireCopiedEvent = void 0;
 var _analytics = require("../utils/analytics");
 var _errors = require("../errors");
 var fireOperationalEvent = exports.fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
@@ -43,4 +43,15 @@ var fireNonCriticalErrorEvent = exports.fireNonCriticalErrorEvent = function fir
   var metadataTraceContext = arguments.length > 6 ? arguments[6] : undefined;
   var errorPayload = (0, _analytics.getErrorEventPayload)(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
   (0, _analytics.fireMediaCardEvent)(errorPayload, createAnalyticsEvent);
+};
+var fireDownloadSucceededEvent = exports.fireDownloadSucceededEvent = function fireDownloadSucceededEvent(createAnalyticsEvent, fileAttributes, traceContext, metadataTraceContext) {
+  var payload = (0, _analytics.getDownloadSucceededEventPayload)(fileAttributes, traceContext, metadataTraceContext);
+  (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+};
+var fireDownloadFailedEvent = exports.fireDownloadFailedEvent = function fireDownloadFailedEvent(createAnalyticsEvent, fileAttributes) {
+  var error = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new _errors.MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 3 ? arguments[3] : undefined;
+  var metadataTraceContext = arguments.length > 4 ? arguments[4] : undefined;
+  var payload = (0, _analytics.getDownloadFailedEventPayload)(fileAttributes, error, traceContext, metadataTraceContext);
+  (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
 };

package/dist/cjs/card/cardView.js

@@ -32,6 +32,8 @@ var _classnames = require("./classnames");
 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; }
@@ -40,7 +42,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
-  var innerRef = _ref.innerRef,
+  var identifier = _ref.identifier,
+    innerRef = _ref.innerRef,
     onImageLoad = _ref.onImageLoad,
     onImageError = _ref.onImageError,
     dimensions = _ref.dimensions,
@@ -69,11 +72,17 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-    overriddenCreationDate = _ref.overriddenCreationDate;
+    overriddenCreationDate = _ref.overriddenCreationDate,
+    onSvgError = _ref.onSvgError,
+    onSvgLoad = _ref.onSvgLoad;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    didImageRender = _useState2[0],
-    setDidImageRender = _useState2[1];
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    didImageRender = _useState4[0],
+    setDidImageRender = _useState4[1];
   var divRef = (0, _react2.useRef)(null);
   var prevCardPreviewRef = (0, _react2.useRef)();
   var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
@@ -118,16 +127,23 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var getRenderConfigByStatus = function getRenderConfigByStatus() {
     var _ref3 = metadata || {},
       name = _ref3.name,
-      mediaType = _ref3.mediaType;
+      mediaType = _ref3.mediaType,
+      mimeType = _ref3.mimeType;
     var isZeroSize = metadata && metadata.size === 0;
     var defaultConfig = {
-      renderTypeIcon: !didImageRender,
-      renderImageRenderer: true,
+      renderTypeIcon: !didImageRender && !didSvgRender,
+      renderImageRenderer: !didSvgRender,
+      renderSvgView: mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform_media_group_svg'),
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
       renderTitleBox: !disableOverlay,
       renderTickBox: !disableOverlay && !!selectable
     };
+    var loadingConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+      renderPlayButton: false,
+      renderTypeIcon: false,
+      renderSpinner: !didImageRender && !didSvgRender
+    });
     switch (status) {
       case 'uploading':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
@@ -145,9 +161,13 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
         return defaultConfig;
       case 'error':
       case 'failed-processing':
+        if (status === 'failed-processing' && mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform_media_group_svg')) {
+          return loadingConfig;
+        }
         var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
           renderTypeIcon: true,
           renderImageRenderer: false,
+          renderSvgView: false,
           renderTitleBox: false,
           renderPlayButton: false
         });
@@ -176,17 +196,14 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
       case 'loading-preview':
       case 'loading':
       default:
-        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          renderPlayButton: false,
-          renderTypeIcon: false,
-          renderSpinner: !didImageRender
-        });
+        return loadingConfig;
     }
   };
   var _getRenderConfigBySta = getRenderConfigByStatus(),
     renderTypeIcon = _getRenderConfigBySta.renderTypeIcon,
     iconMessage = _getRenderConfigBySta.iconMessage,
     renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
+    renderSvgView = _getRenderConfigBySta.renderSvgView,
     renderSpinner = _getRenderConfigBySta.renderSpinner,
     renderPlayButton = _getRenderConfigBySta.renderPlayButton,
     renderBlanket = _getRenderConfigBySta.renderBlanket,
@@ -228,7 +245,12 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
       });
     });
   }, [actions, metadataRef]);
+  var onSvgLoadBase = function onSvgLoadBase() {
+    setDidSvgRender(true);
+    onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
+  };
   var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
+    centerElements: didSvgRender,
     testId: _classnames.fileCardImageViewSelector,
     mediaName: name,
     status: status,
@@ -249,7 +271,13 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   }, (0, _react.jsx)(_spinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderImageRenderer && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+  })), renderSvgView && identifier && (0, _react.jsx)(_svgView.SvgView, {
+    identifier: identifier,
+    resizeMode: resizeMode || 'crop',
+    onError: onSvgError,
+    onLoad: onSvgLoadBase,
+    wrapperRef: divRef
+  }), renderImageRenderer && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,

package/dist/cjs/card/fileCard.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileCard = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaCommon = require("@atlaskit/media-common");
@@ -33,9 +34,10 @@ var _cardAnalytics = require("./cardAnalytics");
 var _cardView = require("./cardView");
 var _inlinePlayerLazy = require("./inlinePlayerLazy");
 var _mediaFilePreview = require("@atlaskit/media-file-preview");
+var _actions = require("./actions");
 var _performance = require("./performance");
 var _dateOverrideContext = require("../dateOverrideContext");
-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; }
@@ -107,9 +109,9 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       occurrenceKey: identifier.occurrenceKey
     }),
     fileState = _useFileState.fileState;
-  var prevFileState = (0, _usePrevious.usePrevious)(fileState);
+  var prevFileState = (0, _usePrevious.usePrevious)(fileState && (0, _mediaClient.isErrorFileState)(fileState) ? undefined : fileState);
   var fileStateValue = (0, _react.useMemo)(function () {
-    if (fileState && (fileState === null || fileState === void 0 ? void 0 : fileState.status) !== 'error') {
+    if (fileState && !(0, _mediaClient.isErrorFileState)(fileState)) {
       return fileState;
     }
     return prevFileState;
@@ -150,16 +152,12 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setIsPlayingFile = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    shouldRenderSVG = _useState10[0],
-    setShouldRenderSVG = _useState10[1];
+    shouldAutoplay = _useState10[0],
+    setShouldAutoplay = _useState10[1];
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    shouldAutoplay = _useState12[0],
-    setShouldAutoplay = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    previewDidRender = _useState14[0],
-    setPreviewDidRender = _useState14[1];
+    previewDidRender = _useState12[0],
+    setPreviewDidRender = _useState12[1];
   var mediaBlobUrlAttrs = (0, _react.useMemo)(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -196,18 +194,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     onImageErrorBase = _useFilePreview.onImageError,
     onImageLoadBase = _useFilePreview.onImageLoad,
     getSsrScriptProps = _useFilePreview.getSsrScriptProps;
-  var _useState15 = (0, _react.useState)(),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    error = _useState16[0],
-    setError = _useState16[1];
+  var _useState13 = (0, _react.useState)(),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    error = _useState14[0],
+    setError = _useState14[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
-  var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' ? previewError : undefined);
-  var finalStatus = finalError ? 'error' : status;
-  var _useState17 = (0, _react.useState)(null),
-    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    mediaViewerSelectedItem = _useState18[0],
-    setMediaViewerSelectedItem = _useState18[1];
+  var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && ((fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' || !(0, _platformFeatureFlags.fg)('platform_media_group_svg')) ? previewError : undefined);
+  var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform_media_group_svg') ? 'loading-preview' : status;
+  var _useState15 = (0, _react.useState)(null),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    mediaViewerSelectedItem = _useState16[0],
+    setMediaViewerSelectedItem = _useState16[1];
   var uploadProgressRef = (0, _react.useRef)();
   var metadata = (0, _react.useMemo)(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
@@ -220,7 +218,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           return 'failed';
       }
     };
-    if (fileStateValue && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status) !== 'error') {
+    if (fileStateValue) {
       return {
         id: fileStateValue.id,
         name: fileStateValue.name,
@@ -247,22 +245,40 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status, metadata.id, metadata.mediaType, metadata.mimeType, metadata.size]);
   var computedActions = (0, _react.useMemo)(function () {
     if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
-      var downloadAction = {
-        label: 'Download',
-        icon: /*#__PURE__*/_react.default.createElement(_download.default, {
-          color: "currentColor",
-          spacing: "spacious",
-          label: "Download"
-        }),
-        handler: function handler() {
-          return mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName);
-        }
-      };
+      var downloadHandler = /*#__PURE__*/function () {
+        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var _error;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName, traceContext);
+              case 3:
+                (0, _cardAnalytics.fireDownloadSucceededEvent)(createAnalyticsEvent, fileAttributes, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+                _context.next = 10;
+                break;
+              case 6:
+                _context.prev = 6;
+                _context.t0 = _context["catch"](0);
+                _error = new _errors.MediaCardError('download', _context.t0);
+                (0, _cardAnalytics.fireDownloadFailedEvent)(createAnalyticsEvent, fileAttributes, _error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[0, 6]]);
+        }));
+        return function downloadHandler() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      var downloadAction = (0, _actions.createDownloadAction)(downloadHandler);
       return [downloadAction].concat((0, _toConsumableArray2.default)(actions !== null && actions !== void 0 ? actions : []));
     } else {
       return actions;
     }
-  }, [actions, identifier.collectionName, identifier.id, mediaClient.file, metadata.name, shouldEnableDownloadButton, finalStatus]);
+  }, [actions, identifier.collectionName, identifier.id, mediaClient.file, metadata.name, shouldEnableDownloadButton, finalStatus, createAnalyticsEvent, fileAttributes, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext, traceContext]);
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -322,10 +338,9 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   var onSvgError = function onSvgError(error) {
     setError(error);
     setStatus('error');
-    setShouldRenderSVG(false);
   };
   var onImageError = function onImageError(newCardPreview) {
-    if (metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform_media_group_svg')) {
       return;
     }
     onImageErrorBase(newCardPreview);
@@ -334,7 +349,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setPreviewDidRender(true);
   };
   var onImageLoad = function onImageLoad(newCardPreview) {
-    if (metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && (0, _platformFeatureFlags.fg)('platform_media_group_svg')) {
       return;
     }
     onImageLoadBase(newCardPreview);
@@ -423,19 +438,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   }, [startUfoExperienceRef, isCardVisible, prevIsCardVisible]);
 
-  //----------------------------------------------------------------//
-  //----------------- set complete status --------------------------//
-  //----------------------------------------------------------------//
-
-  (0, _react.useEffect)(function () {
-    if (previewDidRender &&
-    // We should't complete if status is uploading
-    ['loading-preview', 'processing'].includes(finalStatus)) {
-      setStatus('complete');
-      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
-    }
-  }, [previewDidRender, finalStatus]);
-
   //----------------------------------------------------------------//
   //----------------- set isPlayingFile state ----------------------//
   //----------------------------------------------------------------//
@@ -456,23 +458,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isPlayingFile, finalStatus, useInlinePlayer]);
 
-  //----------------------------------------------------------------//
-  // Switch to SVG
-  //----------------------------------------------------------------//
-
-  (0, _react.useEffect)(function () {
-    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
-    ) {
-      setShouldRenderSVG(true);
-    }
-  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
-
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
   //----------------------------------------------------------------//
@@ -497,15 +482,22 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   }, [fireAbortedEventRef]);
 
   //----------------------------------------------------------------//
-  //------------------ Subscribe to file state ---------------------//
+  // Update Status
   //----------------------------------------------------------------//
 
   var updateFileStateRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
-    if (fileState) {
-      // do not update the card status if the status is final
-      if (['complete', 'error', 'failed-processing'].includes(finalStatus)) {
-        return;
-      }
+    // This effect has race condition with Complete effect. We share the same check to ovid status overrides
+
+    // do not update the card status if the status is final
+    if (['complete', 'error', 'failed-processing'].includes(finalStatus)) {
+      return;
+    }
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(finalStatus)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
+    } else if (fileState) {
       if (fileState.status !== 'error') {
         var newStatus;
         switch (fileState.status) {
@@ -538,7 +530,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   });
   (0, _react.useEffect)(function () {
     updateFileStateRef.current();
-  }, [fileState, preview, previewStatus, updateFileStateRef]);
+  }, [fileState, preview, previewStatus, updateFileStateRef, previewDidRender, finalStatus]);
 
   //----------------------------------------------------------------//
   // Shared Card View & SVG View resources
@@ -572,6 +564,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
     var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
+      identifier: identifier,
       status: cardStatusOverride || finalStatus,
       error: finalError,
       mediaItemType: mediaItemType,
@@ -604,6 +597,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       titleBoxIcon: titleBoxIcon,
       onImageError: withCallbacks ? onImageError : undefined,
       onImageLoad: withCallbacks ? onImageLoad : undefined,
+      onSvgError: onSvgError,
+      onSvgLoad: onSvgLoad,
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
       mediaCardCursor: mediaCardCursor,
@@ -622,7 +617,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //-------------------------- RENDER ------------------------------//
   //----------------------------------------------------------------//
 
-  var inlinePlayerFallback = renderCard(false, 'loading', false);
+  var inlinePlayerFallback = isPlayingFile ? renderCard(false, 'loading', false) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   var collectionName = identifier.collectionName || '';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: inlinePlayerFallback
@@ -643,25 +638,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     testId: testId,
     cardPreview: preview,
     videoControlsWrapperRef: videoControlsWrapperRef
-  })) : shouldRenderSVG ? /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
-    testId: testId,
-    identifier: identifier,
-    status: finalStatus,
-    fileName: metadata.name,
-    cardPreview: preview,
-    alt: alt,
-    resizeMode: resizeMode,
-    cardDimensions: cardDimensions,
-    selected: selected,
-    onClick: onCardViewClick,
-    onMouseEnter: onImageMouseEnter,
-    progress: uploadProgressRef.current,
-    onError: onSvgError,
-    onLoad: onSvgLoad,
-    mediaCardCursor: mediaCardCursor,
-    shouldOpenMediaViewer: shouldOpenMediaViewer,
-    openMediaViewerButtonRef: mediaViewerButtonRef
-  }) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+  })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
     collectionName: collectionName,
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,

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.12.1";
+var packageVersion = "78.14.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/errors.js

@@ -1,9 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getErrorReason = void 0;
+exports.getErrorReason = exports.createUnexpectedErrorCallback = exports.MediaSVGError = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var getErrorReason = exports.getErrorReason = function getErrorReason(svgReason) {
   switch (svgReason) {
     case 'img-error':
@@ -13,4 +23,30 @@ var getErrorReason = exports.getErrorReason = function getErrorReason(svgReason)
     default:
       return 'svg-unknown-error';
   }
+};
+var MediaSVGError = exports.MediaSVGError = /*#__PURE__*/function (_Error) {
+  (0, _inherits2.default)(MediaSVGError, _Error);
+  var _super = _createSuper(MediaSVGError);
+  function MediaSVGError(primaryReason, secondaryError) {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaSVGError);
+    _this = _super.call(this, primaryReason);
+
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    Object.setPrototypeOf((0, _assertThisInitialized2.default)(_this), (this instanceof MediaSVGError ? this.constructor : void 0).prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace((0, _assertThisInitialized2.default)(_this), this instanceof MediaSVGError ? this.constructor : void 0);
+    }
+    return _this;
+  }
+  return (0, _createClass2.default)(MediaSVGError);
+}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
+var createUnexpectedErrorCallback = exports.createUnexpectedErrorCallback = function createUnexpectedErrorCallback(onError) {
+  return function (e) {
+    onError === null || onError === void 0 || onError(new MediaSVGError('unexpected', e));
+  };
 };