@atlaskit/media-card 77.4.6 → 77.4.8

package/dist/es2019/card/card.js

@@ -20,14 +20,14 @@ import { getFileAttributes, extractErrorInfo } from '../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../errors';
 import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
-import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
+import { generateScriptProps, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
 import { isBigger } from '../utils/dimensionComparer';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.6";
+const packageVersion = "77.4.8";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -573,12 +573,9 @@ export class CardBase extends Component {
           dataURI
         } = {}
       } = this.state;
-      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
-        identifier: identifier,
-        dataURI: dataURI,
-        dimensions: this.requestedDimensions,
-        error: ((_this$ssrReliability$ = this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? this.ssrReliability.server : undefined
-      });
+      return isFileIdentifier(identifier) &&
+      // Print the SSR result to be used during hydration
+      ssr === 'server' && /*#__PURE__*/React.createElement("script", generateScriptProps(identifier, dataURI, this.requestedDimensions, ((_this$ssrReliability$ = this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? this.ssrReliability.server : undefined));
     });
     _defineProperty(this, "onCardInViewport", () => {
       this.setState({

package/dist/es2019/card/cardView.js

@@ -26,6 +26,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isUploadError, isRateLimitedError, isPollingError } from '../errors';
 import { Wrapper } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -320,10 +321,14 @@ export class CardViewBase extends React.Component {
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
+    const {
+      name
+    } = this.props.metadata || {};
+    const altText = getBooleanFF('platform.editor.a11y-media_er96o') ? alt || name : alt;
     return !!cardPreview && jsx(ImageRenderer, {
       cardPreview: cardPreview,
       mediaType: mediaType,
-      alt: alt,
+      alt: altText,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
       onImageLoad: this.onImageLoad,

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 = "77.4.6";
+const packageVersion = "77.4.8";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/v2/cardV2.js

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

package/dist/es2019/card/v2/cardViewV2.js

@@ -28,7 +28,6 @@ export const CardViewV2Base = ({
   onImageLoad,
   onImageError,
   dimensions,
-  appearance = 'auto',
   onClick,
   onMouseEnter,
   testId,
@@ -258,7 +257,6 @@ export const CardViewV2Base = ({
   return jsx(Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
-    appearance: appearance,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     innerRef: divRef,

package/dist/es2019/card/v2/externalImageCard.js

@@ -9,6 +9,7 @@ import { generateUniqueId } from '../../utils/generateUniqueId';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
 import { usePrevious } from '../../utils/usePrevious';
 import { fireCommencedEvent, fireCopiedEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
 import { CardViewV2 } from './cardViewV2';
@@ -36,6 +37,7 @@ export const ExternalImageCard = ({
   onMouseEnter,
   createAnalyticsEvent
 }) => {
+  const cardDimensions = dimensions || getDefaultCardDimensions(appearance);
   const internalOccurrenceKey = useMemo(() => generateUniqueId(), []);
   const timeElapsedTillCommenced = useMemo(() => performance.now(), []);
 
@@ -194,9 +196,8 @@ export const ExternalImageCard = ({
     metadata: metadata,
     cardPreview: cardPreview,
     alt: alt,
-    appearance: appearance,
     resizeMode: resizeMode,
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     actions: actions,
     selectable: selectable,
     selected: selected,
@@ -235,7 +236,6 @@ export const ExternalImageCard = ({
     },
     innerRef: setCardElement,
     testId: testId,
-    featureFlags: featureFlags,
     titleBoxBgColor: titleBoxBgColor,
     titleBoxIcon: titleBoxIcon,
     onImageError: newCardPreview => {

package/dist/es2019/card/v2/fileCard.js

@@ -1,6 +1,6 @@
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { RECENTS_COLLECTION, globalMediaEventEmitter, isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+import { globalMediaEventEmitter, isImageRepresentationReady, RECENTS_COLLECTION } from '@atlaskit/media-client';
+import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { getRandomHex, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 import { MediaCardError } from '../../errors';
 import getDocument from '../../utils/document';
 import { generateUniqueId } from '../../utils/generateUniqueId';
-import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+import { resolveCardPreviewDimensions } from '../../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { getFileDetails } from '../../utils/metadata';
 import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
@@ -16,6 +16,7 @@ import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
 import { usePrevious } from '../../utils/usePrevious';
 import { videoIsPlayable } from '../../utils/videoIsPlayable';
 import { ViewportDetector } from '../../utils/viewportDetector';
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
 import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
 import { isSSRPreview } from '../getCardPreview';
 import { CardViewV2 } from './cardViewV2';
@@ -30,7 +31,6 @@ export const FileCard = ({
   featureFlags = {},
   identifier,
   ssr,
-  mediaClient,
   dimensions,
   originalDimensions,
   contextId,
@@ -55,13 +55,18 @@ export const FileCard = ({
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  const mediaClient = useMediaClient();
   const [cardElement, setCardElement] = useState(null);
-  const requestedDimensions = useMemo(() =>
-  // requested dimensions is eventually an expensive operation if the dimensions are a percentage
-  getRequestedDimensions({
-    dimensions,
+  const cardDimensions = dimensions || getDefaultCardDimensions(appearance);
+
+  // Calculate the preview dimensions if card dimensions are "percentage" based
+  const previewDimensions = useMemo(() =>
+  // resolving dimensions is eventually an expensive operation if the dimensions are a percentage
+  // thus needs to be memoized
+  resolveCardPreviewDimensions({
+    dimensions: cardDimensions,
     element: cardElement
-  }), [dimensions, cardElement]);
+  }), [cardDimensions, cardElement]);
   const [isCardVisible, setIsCardVisible] = useState(!isLazy);
   const {
     fileState
@@ -120,10 +125,10 @@ export const FileCard = ({
       mimeType,
       name,
       size,
-      ...(originalDimensions || requestedDimensions),
+      ...(originalDimensions || previewDimensions),
       alt
     } : undefined;
-  }, [alt, requestedDimensions, contextId, fileStateValue, identifier, originalDimensions]);
+  }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   const {
     cardPreview,
     error: previewError,
@@ -131,15 +136,13 @@ export const FileCard = ({
     ssrReliabilityRef,
     onImageError: onImageErrorBase,
     onImageLoad: onImageLoadBase,
-    StoreSSRDataScript
+    getScriptProps
   } = useFilePreview({
     mediaBlobUrlAttrs,
     resizeMode,
     identifier,
     ssr,
-    mediaClient,
-    dimensions,
-    requestedDimensions,
+    dimensions: previewDimensions,
     traceContext,
     previewDidRender,
     skipRemote: !isCardVisible
@@ -472,9 +475,8 @@ export const FileCard = ({
       metadata: metadata,
       cardPreview: cardPreview,
       alt: alt,
-      appearance: appearance,
       resizeMode: resizeMode,
-      dimensions: dimensions,
+      dimensions: cardDimensions,
       actions: computedActions,
       selectable: selectable,
       selected: selected,
@@ -499,7 +501,6 @@ export const FileCard = ({
       } : undefined,
       innerRef: setCardElement,
       testId: testId,
-      featureFlags: featureFlags,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
       onImageError: withCallbacks ? onImageError : undefined,
@@ -526,7 +527,7 @@ export const FileCard = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? /*#__PURE__*/React.createElement(Suspense, {
     fallback: inlinePlayerFallback
   }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     originalDimensions: originalDimensions,
     identifier: identifier,
     autoplay: !!shouldAutoplay,
@@ -551,5 +552,5 @@ export const FileCard = ({
     },
     contextId: contextId,
     featureFlags: featureFlags
-  }), document.body) : null, ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, null));
+  }), document.body) : null, ssr === 'server' && /*#__PURE__*/React.createElement("script", getScriptProps()));
 };

package/dist/es2019/card/v2/useFilePreview.js

@@ -1,33 +1,33 @@
-import React from 'react';
 import { addFileAttrsToUrl, imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { getMediaTypeFromMimeType, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { ImageLoadError, LocalPreviewError, MediaCardError, ensureMediaCardError, isLocalPreviewError, isUnsupportedLocalPreviewError } from '../../errors';
+import { ensureMediaCardError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, LocalPreviewError, MediaCardError } from '../../errors';
 import { extractErrorInfo } from '../../utils/analytics';
 import { isBigger } from '../../utils/dimensionComparer';
-import { getSSRData } from '../../utils/globalScope';
+import { isRetina } from '../../utils/isRetina';
+import { generateScriptProps, getSSRData } from '../../utils/globalScope';
 import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
 import { usePrevious } from '../../utils/usePrevious';
 import { takeSnapshot } from '../../utils/videoSnapshot';
 import { fetchAndCacheRemotePreview, getCardPreviewFromCache, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, removeCardPreviewFromCache, shouldResolvePreview } from '../getCardPreview';
 import cardPreviewCache from '../getCardPreview/cache';
-import { StoreSSRDataScript } from '../../utils/globalScope';
 export const useFilePreview = ({
   resizeMode = 'crop',
   identifier,
   ssr,
-  mediaClient,
   dimensions,
-  requestedDimensions,
   traceContext,
   previewDidRender,
   skipRemote,
   mediaBlobUrlAttrs
 }) => {
+  const mediaClient = useMediaClient();
   const [error, setError] = useState();
   const [nonCriticalError, setNonCriticalError] = useState();
+  const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
+
   //----------------------------------------------------------------//
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
@@ -44,9 +44,9 @@ export const useFilePreview = ({
   const imageURLParams = useMemo(() => ({
     collection: identifier.collectionName,
     mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
-    ...requestedDimensions,
+    ...requestDimensions,
     allowAnimated: true
-  }), [requestedDimensions, identifier.collectionName, resizeMode]);
+  }), [requestDimensions, identifier.collectionName, resizeMode]);
   const getSSRPreview = (ssr, identifier, mediaClient) => {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = getSSRData(identifier);
@@ -66,8 +66,13 @@ export const useFilePreview = ({
         };
       }
     } else {
+      const {
+        dimensions,
+        dataURI
+      } = ssrDataRef.current;
       return {
-        dataURI: ssrDataRef.current.dataURI,
+        dataURI,
+        dimensions,
         source: 'ssr-data'
       };
     }
@@ -109,7 +114,7 @@ export const useFilePreview = ({
   //----------------------------------------------------------------//
 
   const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
   const resolvePreviewRef = useCurrentValueRef(async (identifier, fileState) => {
     const filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
@@ -117,7 +122,7 @@ export const useFilePreview = ({
     try {
       const mode = imageURLParams.mode;
       const cachedPreview = cardPreviewCache.get(identifier.id, mode);
-      const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+      const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
       if (cachedPreview && !dimensionsAreBigger) {
         return cachedPreview;
       }
@@ -176,7 +181,7 @@ export const useFilePreview = ({
           }
           const preview = {
             ...localPreview,
-            dimensions
+            dimensions: requestDimensions
           };
           let source;
           switch (preview.source) {
@@ -241,7 +246,7 @@ export const useFilePreview = ({
          */
         throw new MediaCardError('remote-preview-not-ready');
       }
-      const remotePreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+      const remotePreview = await fetchRemotePreviewRef.current(identifier);
       setCardPreview(remotePreview);
       return;
     } catch (e) {
@@ -266,7 +271,7 @@ export const useFilePreview = ({
   //------------ resolveUpfrontPreview useEffect -------------------//
   //----------------------------------------------------------------//
   const prevCardPreview = usePrevious(cardPreview);
-  const dimensionsRef = useCurrentValueRef(dimensions);
+  const requestDimensionsRef = useCurrentValueRef(requestDimensions);
   useEffect(() => {
     const resolveUpfrontPreview = async identifier => {
       // We block any possible future call to this method regardless of the outcome (success or fail)
@@ -274,10 +279,10 @@ export const useFilePreview = ({
       wasResolvedUpfrontPreviewRef.current = true;
       try {
         const fetchedDimensions = {
-          ...dimensions
+          ...requestDimensions
         };
         const newCardPreview = await fetchRemotePreviewRef.current(identifier);
-        const areValidFetchedDimensions = !isBigger(fetchedDimensions, dimensionsRef.current);
+        const areValidFetchedDimensions = !isBigger(fetchedDimensions, requestDimensionsRef.current);
 
         // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
         // the fetched preview is no longer valid, and thus, we dismiss it
@@ -294,16 +299,16 @@ export const useFilePreview = ({
     if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
       resolveUpfrontPreview(identifier);
     }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
+  }, [cardPreview, requestDimensions, requestDimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
 
   //----------------------------------------------------------------//
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  const prevDimensions = usePrevious(dimensions);
+  const prevRequestDimensions = usePrevious(requestDimensions);
   useEffect(() => {
-    var _ssrDataRef$current3;
-    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger(cardPreview.dimensions, requestDimensions)) {
       // refetchSRRPreview: If dimensions from Server have changed and are bigger,
       // we need to refetch
       fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(e => {
@@ -318,8 +323,8 @@ export const useFilePreview = ({
     if (fileState && shouldResolvePreview({
       status,
       fileState: fileState,
-      prevDimensions,
-      dimensions,
+      prevDimensions: prevRequestDimensions,
+      dimensions: requestDimensions,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview,
       wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
@@ -336,7 +341,7 @@ export const useFilePreview = ({
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     }
-  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevDimensions, resolvePreviewRef, skipRemote, ssr, status]);
+  }, [cardPreview, requestDimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevRequestDimensions, resolvePreviewRef, skipRemote, ssr, status]);
 
   //----------------------------------------------------------------//
   //----------------- set complete status --------------------------//
@@ -475,14 +480,10 @@ export const useFilePreview = ({
   // RETURN
   //----------------------------------------------------------------//
 
-  const StoreSSRDataScriptComponent = () => {
+  // FOR SSR
+  const getScriptProps = () => {
     var _ssrReliabilityRef$cu;
-    return /*#__PURE__*/React.createElement(StoreSSRDataScript, {
-      identifier: identifier,
-      dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-      dimensions: requestedDimensions,
-      error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
-    });
+    return generateScriptProps(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
   };
 
   // CXP-2723 TODO: should consider simplifying our analytics, and how
@@ -494,6 +495,24 @@ export const useFilePreview = ({
     ssrReliabilityRef,
     onImageError,
     onImageLoad,
-    StoreSSRDataScript: StoreSSRDataScriptComponent
+    getScriptProps
   };
+};
+const createRequestDimensions = dimensions => {
+  if (!dimensions) {
+    return;
+  }
+  const retinaFactor = isRetina() ? 2 : 1;
+  const {
+    width,
+    height
+  } = dimensions;
+  const result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
 };

package/dist/es2019/inline/loader.js

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

package/dist/es2019/utils/getDataURIDimension.js

@@ -3,6 +3,13 @@ import { getElementDimension } from './getElementDimension';
 import { defaultImageCardDimensions } from './cardDimensions';
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
+
 export const getDataURIDimension = (dimension, options) => {
   const retinaFactor = isRetina() ? 2 : 1;
   const dimensionValue = options.dimensions && options.dimensions[dimension] || '';
@@ -24,4 +31,36 @@ export const getRequestedDimensions = options => {
     width,
     height
   };
+};
+
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+
+// Same as getDataURIDimension but without Retina factor
+export const resolveCardPreviewDimension = (dimensionName, {
+  dimensions,
+  element
+}) => {
+  const dimensionValue = (dimensions === null || dimensions === void 0 ? void 0 : dimensions[dimensionName]) || '';
+  if (isValidPercentageUnit(dimensionValue) && element) {
+    return getElementDimension(element, dimensionName);
+  }
+  if (typeof dimensionValue === 'number') {
+    return dimensionValue;
+  }
+  if (containsPixelUnit(`${dimensionValue}`)) {
+    return parseInt(`${dimensionValue}`, 10);
+  }
+  return defaultImageCardDimensions[dimensionName];
+};
+export const resolveCardPreviewDimensions = options => {
+  const width = resolveCardPreviewDimension('width', options);
+  const height = resolveCardPreviewDimension('height', options);
+  return {
+    width,
+    height
+  };
 };

package/dist/es2019/utils/globalScope/globalScope.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { printFunctionCall, printScript } from '../printScript';
 // ----- WARNING -----
 // This is a very sensitive fraction of code.
@@ -42,12 +41,7 @@ const generateScript = (identifier, dataURI, dimensions, error) => {
   const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
   return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
 };
-export const StoreSSRDataScript = ({
-  dataURI,
-  identifier,
-  dimensions,
-  error
-}) => /*#__PURE__*/React.createElement("script", {
+export const generateScriptProps = (identifier, dataURI, dimensions, error) => ({
   dangerouslySetInnerHTML: {
     __html: generateScript(identifier, dataURI, dimensions, error)
   }

package/dist/es2019/utils/globalScope/index.js

@@ -1,2 +1,2 @@
-export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey } from './globalScope';
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey } from './globalScope';
 export { getSSRData } from './getSSRData';

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.6";
+const packageVersion = "77.4.8";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -33,14 +33,14 @@ import { getFileAttributes, extractErrorInfo } from '../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../errors';
 import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
-import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
+import { generateScriptProps, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
 import { isBigger } from '../utils/dimensionComparer';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.6";
+var packageVersion = "77.4.8";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -602,12 +602,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$state$cardPrevi = _this.state.cardPreview,
         _this$state$cardPrevi2 = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi,
         dataURI = _this$state$cardPrevi2.dataURI;
-      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
-        identifier: identifier,
-        dataURI: dataURI,
-        dimensions: _this.requestedDimensions,
-        error: ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined
-      });
+      return isFileIdentifier(identifier) &&
+      // Print the SSR result to be used during hydration
+      ssr === 'server' && /*#__PURE__*/React.createElement("script", generateScriptProps(identifier, dataURI, _this.requestedDimensions, ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined));
     });
     _defineProperty(_assertThisInitialized(_this), "onCardInViewport", function () {
       _this.setState({

package/dist/esm/card/cardView.js

@@ -36,6 +36,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isUploadError, isRateLimitedError, isPollingError } from '../errors';
 import { Wrapper } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -328,10 +329,13 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onDisplayImage = _this$props6.onDisplayImage,
         nativeLazyLoad = _this$props6.nativeLazyLoad,
         forceSyncDisplay = _this$props6.forceSyncDisplay;
+      var _ref7 = this.props.metadata || {},
+        name = _ref7.name;
+      var altText = getBooleanFF('platform.editor.a11y-media_er96o') ? alt || name : alt;
       return !!cardPreview && jsx(ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
-        alt: alt,
+        alt: altText,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
         onImageLoad: this.onImageLoad,
@@ -352,10 +356,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderMediaTypeIcon",
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
-      var _ref7 = metadata || {},
-        mediaType = _ref7.mediaType,
-        mimeType = _ref7.mimeType,
-        name = _ref7.name;
+      var _ref8 = metadata || {},
+        mediaType = _ref8.mediaType,
+        mimeType = _ref8.mimeType,
+        name = _ref8.name;
       return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
@@ -398,8 +402,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         cardPreview = _this$props8.cardPreview,
         mediaCardCursor = _this$props8.mediaCardCursor,
         shouldHideTooltip = _this$props8.shouldHideTooltip;
-      var _ref8 = metadata || {},
-        name = _ref8.name;
+      var _ref9 = metadata || {},
+        name = _ref9.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;

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

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.6";
+var packageVersion = "77.4.8";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,