@atlaskit/media-card 78.13.0 → 78.14.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-card
 
+## 78.14.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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

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

@@ -37,7 +37,7 @@ 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; }
@@ -109,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;
@@ -152,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;
@@ -198,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) {
@@ -222,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,
@@ -342,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);
@@ -354,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);
@@ -443,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 ----------------------//
   //----------------------------------------------------------------//
@@ -476,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 ------------------------------//
   //----------------------------------------------------------------//
@@ -517,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) {
@@ -558,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
@@ -592,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,
@@ -624,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,
@@ -642,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
@@ -663,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/inlinePlayerWrapper.js

@@ -21,19 +21,22 @@ var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWra
     dimensions = props.dimensions,
     onClick = props.onClick,
     innerRef = props.innerRef;
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    id: "inlinePlayerWrapper",
-    "data-testid": testId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _inlinePlayerWrapperStyles.inlinePlayerClassName
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
-      selected: selected,
-      dimensions: dimensions
-    }),
-    onClick: onClick,
-    ref: innerRef
-  }, _vcMedia.VcMediaWrapperProps), props.children);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      id: "inlinePlayerWrapper",
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: _inlinePlayerWrapperStyles.inlinePlayerClassName
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
+        selected: selected,
+        dimensions: dimensions
+      }),
+      onClick: onClick,
+      ref: innerRef
+    }, _vcMedia.VcMediaWrapperProps), props.children)
+  );
 };

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.13.0";
+var packageVersion = "78.14.1";
 
 // @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));
+  };
 };