@atlaskit/media-card 77.4.7 → 77.4.9

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

@@ -1,24 +1,12 @@
 import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
+import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
-  dimensions,
-  theme
+  dimensions
 }) => css`
   ${center}
-  background: ${themed({
-  light: `var(--ds-background-neutral, ${N20})`,
-  dark: `var(--ds-background-neutral, ${DN50})`
-})({
-  theme
-})};
-  color: ${themed({
-  light: `var(--ds-icon, ${N50})`,
-  dark: `var(--ds-icon, ${DN100})`
-})({
-  theme
-})};
+  background: ${`var(--ds-background-neutral, ${N20})`};
+  color: ${`var(--ds-icon, ${N50})`};
   ${borderRadius}
   max-height: 100%;
   max-width: 100%;

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.7";
+const packageVersion = "77.4.9";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ 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.7";
+var packageVersion = "77.4.9";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

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.7";
+var packageVersion = "77.4.9";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -4,7 +4,6 @@ import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../styles';
-import { themed } from '@atlaskit/theme/components';
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
   var setting = responsiveSettings[breakpoint];
@@ -14,25 +13,10 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
   return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
 };
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
-var BACKGROUND_COLOR_DARK = '#161a1d';
-var TEXT_COLOR_DARK = '#C7D1DB';
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-    titleBoxBgColor = _ref.titleBoxBgColor,
-    theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), themed({
-    light: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
-    dark: "var(--ds-surface, ".concat(rgba(
-    // theme does not contain this color, use constant instead
-    titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
-  })({
-    theme: theme
-  }), themed({
-    light: "var(--ds-text, ".concat(N800, ")"),
-    dark: "var(--ds-text, ".concat(TEXT_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), generateResponsiveStyles(breakpoint));
+    titleBoxBgColor = _ref.titleBoxBgColor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"), "var(--ds-text, ".concat(N800, ")"), generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";

package/dist/esm/card/ui/titleBox/titleBoxComponents.js

@@ -1,18 +1,15 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor;
-  var theme = useGlobalTheme();
   return jsx("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box",
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor,
-      theme: theme
+      titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };

package/dist/esm/card/ui/wrapper/styles.js

@@ -5,12 +5,10 @@ import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-import { themed } from '@atlaskit/theme/components';
 import { transition } from '../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
 import { fixedActionBarStyles, actionsBarClassName } from '../actionsBar/styles';
 import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
-var BACKGROUND_COLOR_DARK = '#22272C';
 export var wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
@@ -21,13 +19,7 @@ export var wrapperStyles = function wrapperStyles(_ref) {
     isPlayButtonClickable = _ref.isPlayButtonClickable,
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-    mediaCardCursor = _ref.mediaCardCursor,
-    theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat(themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+    mediaCardCursor = _ref.mediaCardCursor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/esm/card/ui/wrapper/wrapper.js

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export var Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
@@ -18,7 +17,6 @@ export var Wrapper = function Wrapper(props) {
     isPlayButtonClickable = props.isPlayButtonClickable,
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
-  var theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -33,8 +31,7 @@ export var Wrapper = function Wrapper(props) {
       isPlayButtonClickable: isPlayButtonClickable,
       isTickBoxSelectable: isTickBoxSelectable,
       shouldDisplayTooltip: shouldDisplayTooltip,
-      mediaCardCursor: mediaCardCursor,
-      theme: theme
+      mediaCardCursor: mediaCardCursor
     }),
     ref: innerRef,
     onClick: onClick,

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

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.7";
+var packageVersion = "77.4.9";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

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

@@ -32,8 +32,6 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     onImageLoad = _ref.onImageLoad,
     onImageError = _ref.onImageError,
     dimensions = _ref.dimensions,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     testId = _ref.testId,
@@ -254,7 +252,6 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
   return jsx(Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
-    appearance: appearance,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     innerRef: divRef,

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

@@ -13,6 +13,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';
@@ -42,6 +43,7 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     _onClick = _ref.onClick,
     _onMouseEnter = _ref.onMouseEnter,
     createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var cardDimensions = dimensions || getDefaultCardDimensions(appearance);
   var internalOccurrenceKey = useMemo(function () {
     return generateUniqueId();
   }, []);
@@ -223,9 +225,8 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     metadata: metadata,
     cardPreview: cardPreview,
     alt: alt,
-    appearance: appearance,
     resizeMode: resizeMode,
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     actions: actions,
     selectable: selectable,
     selected: selected,
@@ -263,7 +264,6 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     },
     innerRef: setCardElement,
     testId: testId,
-    featureFlags: featureFlags,
     titleBoxBgColor: titleBoxBgColor,
     titleBoxIcon: titleBoxIcon,
     onImageError: function onImageError(newCardPreview) {

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

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isImageRepresentationReady, RECENTS_COLLECTION } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+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';
@@ -13,7 +13,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';
@@ -21,6 +21,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';
@@ -39,7 +40,6 @@ export var FileCard = function FileCard(_ref) {
     featureFlags = _ref$featureFlags === void 0 ? {} : _ref$featureFlags,
     identifier = _ref.identifier,
     ssr = _ref.ssr,
-    mediaClient = _ref.mediaClient,
     dimensions = _ref.dimensions,
     originalDimensions = _ref.originalDimensions,
     contextId = _ref.contextId,
@@ -63,19 +63,24 @@ export var FileCard = function FileCard(_ref) {
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  var mediaClient = useMediaClient();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     cardElement = _useState2[0],
     setCardElement = _useState2[1];
-  var requestedDimensions = useMemo(function () {
+  var cardDimensions = dimensions || getDefaultCardDimensions(appearance);
+
+  // Calculate the preview dimensions if card dimensions are "percentage" based
+  var previewDimensions = useMemo(function () {
     return (
-      // requested dimensions is eventually an expensive operation if the dimensions are a percentage
-      getRequestedDimensions({
-        dimensions: dimensions,
+      // 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]);
   var _useState3 = useState(!isLazy),
     _useState4 = _slicedToArray(_useState3, 2),
     isCardVisible = _useState4[0],
@@ -154,18 +159,16 @@ export var FileCard = function FileCard(_ref) {
       mimeType: mimeType,
       name: name,
       size: size
-    }, originalDimensions || requestedDimensions), {}, {
+    }, originalDimensions || previewDimensions), {}, {
       alt: alt
     }) : undefined;
-  }, [alt, requestedDimensions, contextId, fileStateValue, identifier, originalDimensions]);
+  }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   var _useFilePreview = useFilePreview({
       mediaBlobUrlAttrs: mediaBlobUrlAttrs,
       resizeMode: resizeMode,
       identifier: identifier,
       ssr: ssr,
-      mediaClient: mediaClient,
-      dimensions: dimensions,
-      requestedDimensions: requestedDimensions,
+      dimensions: previewDimensions,
       traceContext: traceContext,
       previewDidRender: previewDidRender,
       skipRemote: !isCardVisible
@@ -513,9 +516,8 @@ export var FileCard = function FileCard(_ref) {
       metadata: metadata,
       cardPreview: cardPreview,
       alt: alt,
-      appearance: appearance,
       resizeMode: resizeMode,
-      dimensions: dimensions,
+      dimensions: cardDimensions,
       actions: computedActions,
       selectable: selectable,
       selected: selected,
@@ -539,7 +541,6 @@ export var FileCard = function FileCard(_ref) {
       } : undefined,
       innerRef: setCardElement,
       testId: testId,
-      featureFlags: featureFlags,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
       onImageError: withCallbacks ? onImageError : undefined,
@@ -566,7 +567,7 @@ export var FileCard = function FileCard(_ref) {
   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,

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

@@ -5,13 +5,14 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 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 { ensureMediaCardError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, LocalPreviewError, MediaCardError } from '../../errors';
 import { extractErrorInfo } from '../../utils/analytics';
 import { isBigger } from '../../utils/dimensionComparer';
+import { isRetina } from '../../utils/isRetina';
 import { generateScriptProps, getSSRData } from '../../utils/globalScope';
 import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
 import { usePrevious } from '../../utils/usePrevious';
@@ -23,13 +24,12 @@ export var useFilePreview = function useFilePreview(_ref) {
     resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
     identifier = _ref.identifier,
     ssr = _ref.ssr,
-    mediaClient = _ref.mediaClient,
     dimensions = _ref.dimensions,
-    requestedDimensions = _ref.requestedDimensions,
     traceContext = _ref.traceContext,
     previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+  var mediaClient = useMediaClient();
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     error = _useState2[0],
@@ -38,6 +38,10 @@ export var useFilePreview = function useFilePreview(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     nonCriticalError = _useState4[0],
     setNonCriticalError = _useState4[1];
+  var requestDimensions = useMemo(function () {
+    return dimensions ? createRequestDimensions(dimensions) : undefined;
+  }, [dimensions]);
+
   //----------------------------------------------------------------//
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
@@ -55,10 +59,10 @@ export var useFilePreview = function useFilePreview(_ref) {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
       mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestedDimensions), {}, {
+    }, requestDimensions), {}, {
       allowAnimated: true
     });
-  }, [requestedDimensions, identifier.collectionName, resizeMode]);
+  }, [requestDimensions, identifier.collectionName, resizeMode]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = getSSRData(identifier);
@@ -76,8 +80,12 @@ export var useFilePreview = function useFilePreview(_ref) {
         }, extractErrorInfo(e));
       }
     } else {
+      var _ssrDataRef$current3 = ssrDataRef.current,
+        _dimensions = _ssrDataRef$current3.dimensions,
+        dataURI = _ssrDataRef$current3.dataURI;
       return {
-        dataURI: ssrDataRef.current.dataURI,
+        dataURI: dataURI,
+        dimensions: _dimensions,
         source: 'ssr-data'
       };
     }
@@ -125,7 +133,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------//
 
   var fetchRemotePreviewRef = useCurrentValueRef(function (identifier) {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
   var resolvePreviewRef = useCurrentValueRef( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
@@ -138,7 +146,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             _context.prev = 2;
             mode = imageURLParams.mode;
             cachedPreview = cardPreviewCache.get(identifier.id, mode);
-            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
             if (!(cachedPreview && !dimensionsAreBigger)) {
               _context.next = 8;
               break;
@@ -232,7 +240,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             throw new LocalPreviewError('local-preview-unsupported');
           case 57:
             preview = _objectSpread(_objectSpread({}, localPreview), {}, {
-              dimensions: dimensions
+              dimensions: requestDimensions
             });
             _context.t4 = preview.source;
             _context.next = _context.t4 === 'local' ? 61 : _context.t4 === 'remote' ? 63 : _context.t4 === 'ssr-server' ? 65 : _context.t4 === 'ssr-client' ? 67 : 69;
@@ -299,7 +307,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             throw new MediaCardError('remote-preview-not-ready');
           case 83:
             _context.next = 85;
-            return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+            return fetchRemotePreviewRef.current(identifier);
           case 85:
             remotePreview = _context.sent;
             setCardPreview(remotePreview);
@@ -335,7 +343,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //------------ resolveUpfrontPreview useEffect -------------------//
   //----------------------------------------------------------------//
   var prevCardPreview = usePrevious(cardPreview);
-  var dimensionsRef = useCurrentValueRef(dimensions);
+  var requestDimensionsRef = useCurrentValueRef(requestDimensions);
   useEffect(function () {
     var resolveUpfrontPreview = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
@@ -347,12 +355,12 @@ export var useFilePreview = function useFilePreview(_ref) {
               // If it fails, the normal preview fetch should occur after the file state is fetched anyways
               wasResolvedUpfrontPreviewRef.current = true;
               _context2.prev = 1;
-              fetchedDimensions = _objectSpread({}, dimensions);
+              fetchedDimensions = _objectSpread({}, requestDimensions);
               _context2.next = 5;
               return fetchRemotePreviewRef.current(identifier);
             case 5:
               newCardPreview = _context2.sent;
-              areValidFetchedDimensions = !isBigger(fetchedDimensions, dimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              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
               if (areValidFetchedDimensions) {
                 setCardPreview(newCardPreview);
@@ -378,16 +386,16 @@ export var useFilePreview = function useFilePreview(_ref) {
     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 ----------------//
   //----------------------------------------------------------------//
 
-  var prevDimensions = usePrevious(dimensions);
+  var prevRequestDimensions = usePrevious(requestDimensions);
   useEffect(function () {
-    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(function (e) {
@@ -402,8 +410,8 @@ export var useFilePreview = function useFilePreview(_ref) {
     if (fileState && shouldResolvePreview({
       status: status,
       fileState: fileState,
-      prevDimensions: prevDimensions,
-      dimensions: dimensions,
+      prevDimensions: prevRequestDimensions,
+      dimensions: requestDimensions,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview: isBannedLocalPreview,
       wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
@@ -420,7 +428,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         // 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 --------------------------//
@@ -561,7 +569,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   // FOR SSR
   var getScriptProps = function getScriptProps() {
     var _ssrReliabilityRef$cu;
-    return generateScriptProps(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestedDimensions, ((_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
@@ -575,4 +583,20 @@ export var useFilePreview = function useFilePreview(_ref) {
     onImageLoad: onImageLoad,
     getScriptProps: getScriptProps
   };
+};
+var createRequestDimensions = function createRequestDimensions(dimensions) {
+  if (!dimensions) {
+    return;
+  }
+  var retinaFactor = isRetina() ? 2 : 1;
+  var width = dimensions.width,
+    height = dimensions.height;
+  var result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
 };

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.7",
+        packageName: "77.4.9",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };