@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/esm/files/cardImageView/cardOverlay/styles.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+/**
+ * Everything about this file change is just wrong.
+ * Mostly because we do bad things with classes.
+ * This is all wrong and hopefully will be removed from existence with card v3,
+ * so please don’t be too sad about all this!
+ */
+import { css } from '@emotion/react';
+import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import * as colors from '@atlaskit/theme/colors';
+import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
+export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: #798599; /* TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: white;\n    background-color: #0052cc; /* TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), rgba('#ffffff', 0.5));
+
+var getOverlayStyles = function getOverlayStyles(_ref) {
+  var hasError = _ref.hasError,
+      noHover = _ref.noHover;
+
+  if (hasError || noHover) {
+    return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
+  }
+};
+
+export var overlayStyles = function overlayStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n\n    .bottom-row {\n      .delete-btn {\n        display: flex;\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n        }\n\n        .title,\n        .bottom-row,\n        .file-size,\n        .more-btn {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: white;\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: white;\n        display: none;\n      }\n\n      .more-btn {\n        color: ", ";\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n\n      .delete-btn {\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .more-btn {\n        ", " color: ", ";\n      }\n\n      .delete-btn {\n        display: flex;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          border-color: ", " !important;\n          color: white;\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), colors.B400, colors.N800, rgba(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, rgba(colors.N900, 0.5), centerX, colors.N0, colors.B200, colors.B200, colors.N800);
+};
+export var errorLineStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
+export var leftColumnStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
+export var topRowStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+export var bottomRowStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
+export var rightColumnStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, colors.N70);
+export var altWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
+export var titleWrapperStyles = function titleWrapperStyles(theme) {
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
+    light: colors.N800,
+    dark: colors.DN900
+  })({
+    theme: theme
+  }));
+};
+export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), ellipsis('100px'));
+export var metadataStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/files/cardImageView/index.js

@@ -10,17 +10,19 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
-import { PlayIconWrapper, Wrapper, ProgressBarWrapper, Body, CardActionsWrapper, Overlay, ProgressWrapper, Title, PlayIconBackground } from './styled';
+import { bodyStyles, cardActionsWrapperStyles, overlayStyles, progressWrapperStyles, titleStyles, playIconBackgroundStyles } from './styles';
 import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
+import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
 export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _inherits(FileCardImageView, _Component);
 
@@ -63,11 +65,11 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderLoadingContents", function () {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
-      }, /*#__PURE__*/React.createElement(CardLoading, null)));
+      }, jsx(CardLoading, null)));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderErrorContents", function () {
@@ -79,9 +81,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props2.mediaType,
           actions = _this$props2.actions,
           fileSize = _this$props2.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         error: error,
         persistent: true,
@@ -100,9 +102,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props3.mediaType,
           actions = _this$props3.actions,
           fileSize = _this$props3.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         noHover: true,
         persistent: true,
@@ -122,7 +124,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selectable = _this$props4.selectable,
           selected = _this$props4.selected;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -148,7 +150,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(PlayIconWrapper, null, /*#__PURE__*/React.createElement(PlayIconBackground, null, /*#__PURE__*/React.createElement(VidPlayIcon, {
+      return jsx(PlayIconWrapper, null, jsx("div", {
+        css: playIconBackgroundStyles
+      }, jsx(VidPlayIcon, {
         testId: "media-card-play-button",
         label: "play",
         size: "large"
@@ -189,7 +193,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         _this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/React.createElement(MediaImage, {
+      return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: _this.isCropped,
@@ -211,13 +215,23 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ProgressBarWrapper, null, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(Ellipsify, {
+      return jsx(ProgressBarWrapper, null, jsx("div", {
+        css: overlayStyles
+      }, jsx("div", {
+        css: titleStyles
+      }, jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: mediaName || '',
         lines: 2
-      })), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement(ProgressBar, {
+      })), jsx("div", {
+        css: bodyStyles
+      }, jsx("div", {
+        css: progressWrapperStyles
+      }, jsx(ProgressBar, {
         progress: progress
-      })), /*#__PURE__*/React.createElement(CardActionsWrapper, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      })), jsx("div", {
+        css: cardActionsWrapperStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         triggerColor: "white"
       }) : null))));
@@ -240,9 +254,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
@@ -258,7 +272,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selected = _this$props11.selected,
           actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -284,17 +298,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           progress = _this$props12.progress,
           status = _this$props12.status,
           mediaName = _this$props12.mediaName;
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        "data-testid": "media-file-card-view",
-        "data-test-media-name": mediaName,
-        "data-test-status": status,
-        "data-test-progress": progress,
-        "data-test-selected": selected ? true : undefined,
+      return jsx(CardImageViewWrapper, {
+        mediaName: mediaName,
+        status: status,
+        progress: progress,
         disableOverlay: disableOverlay,
         selectable: selectable,
         selected: selected,
-        mediaType: mediaType,
-        className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+        mediaType: mediaType
       }, this.renderCardContents());
     }
   }, {

package/dist/esm/files/cardImageView/styles.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import { css } from '@emotion/react';
+import { absolute, borderRadius, size } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import { N20, DN50, N0 } from '@atlaskit/theme/colors';
+import { rootStyles, cardShadow } from '../../styles';
+import { getSelectedBorderStyle } from '../../styles/getSelectedBorderStyle';
+
+var getShadowAttribute = function getShadowAttribute(props) {
+  var disableOverlay = props.disableOverlay;
+  return disableOverlay ? '' : cardShadow;
+};
+
+var getBackgroundColor = function getBackgroundColor(props) {
+  var mediaType = props.mediaType;
+  return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
+    light: N20,
+    dark: DN50
+  })(props), ";");
+};
+
+export var wrapperStyles = function wrapperStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), rootStyles(), getShadowAttribute(props), borderRadius, getBackgroundColor(props), getSelectedBorderStyle(props), size(), borderRadius, borderRadius);
+};
+export var playIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])));
+export var playIconBackgroundStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: rgba(23, 43, 77, 0.7);\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])));
+var bodyHeight = 26;
+export var progressBarWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
+export var overlayStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: rgba(9, 30, 66, 0.5);\n"])), absolute(), size());
+export var titleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), N0);
+export var bodyStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), N0);
+export var progressWrapperStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);
+export var cardActionsWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));

package/dist/esm/index.js

@@ -3,5 +3,5 @@ export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
 export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView/classnames';
-export { inlinePlayerClassName } from './root/inlinePlayer';
+export { inlinePlayerClassName } from './root/styles';
 export { newFileExperienceClassName } from './root/card/cardConstants';

package/dist/esm/root/card/cardAnalytics.js

@@ -1,19 +1,4 @@
-import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var REQUIRED_FEATURE_FLAGS = {
-  newCardExperience: true,
-  captions: true,
-  timestampOnVideo: true,
-  observedWidth: true,
-  mediaInline: false,
-  folderUploads: false
-};
-export var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
-  return filterFeatureFlagNames(REQUIRED_FEATURE_FLAGS);
-};
-export var getRelevantFeatureFlagKeysWithAllProducts = function getRelevantFeatureFlagKeysWithAllProducts() {
-  return filterFeatureFlagKeysAllProducts(REQUIRED_FEATURE_FLAGS);
-};
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);

package/dist/esm/root/card/getCardPreview/cache.js

@@ -2,29 +2,28 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createObjectURLCache } from '../../../utils/objectURLCache';
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-export var getCacheKey = function getCacheKey(id, dimensions) {
-  return [id, dimensions.height, dimensions.width].join('-');
+export var getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 export var CardPreviewCacheImpl = /*#__PURE__*/_createClass(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   _classCallCheck(this, CardPreviewCacheImpl);
 
-  _defineProperty(this, "get", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
     return _this.previewCache.get(cacheKey);
   });
 
-  _defineProperty(this, "set", function (id, dimensions, cardPreview) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
 
-  _defineProperty(this, "remove", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.remove(cacheKey);
   });

package/dist/esm/root/card/getCardPreview/helpers.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { takeSnapshot } from '../../../utils/videoSnapshot';
 import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';

package/dist/esm/root/card/getCardPreview/index.js

@@ -1,6 +1,6 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -26,7 +26,7 @@ export var getFilePreviewFromFileState = function getFilePreviewFromFileState(fi
   return 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 };
 
-var extendAndCachePreview = function extendAndCachePreview(id, dimensions, preview, mediaBlobUrlAttrs) {
+var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, mediaBlobUrlAttrs) {
   var source;
 
   switch (preview.source) {
@@ -53,7 +53,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
   var dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  cardPreviewCache.set(id, dimensions, _objectSpread(_objectSpread({}, preview), {}, {
+  cardPreviewCache.set(id, mode, _objectSpread(_objectSpread({}, preview), {}, {
     source: source,
     dataURI: dataURI
   }));
@@ -75,44 +75,48 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 export var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, mode, cachedPreview, dimensionsAreBigger, localPreview;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
-            cachedPreview = cardPreviewCache.get(id, dimensions);
+            mode = imageUrlParams.mode;
+            cachedPreview = cardPreviewCache.get(id, mode);
+            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-            if (!cachedPreview) {
-              _context.next = 4;
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 6;
               break;
             }
 
             return _context.abrupt("return", cachedPreview);
 
-          case 4:
-            _context.prev = 4;
+          case 6:
+            _context.prev = 6;
 
             if (!filePreview) {
-              _context.next = 10;
+              _context.next = 12;
               break;
             }
 
-            _context.next = 8;
+            _context.next = 10;
             return getCardPreviewFromFilePreview(filePreview);
 
-          case 8:
+          case 10:
             localPreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
-          case 10:
-            _context.next = 17;
+          case 12:
+            _context.next = 19;
             break;
 
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](4);
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](6);
 
             /**
              * We report the error if:
@@ -134,29 +138,29 @@ export var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 17;
+              _context.next = 19;
               break;
             }
 
             throw _context.t0;
 
-          case 17:
+          case 19:
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 21;
               break;
             }
 
             throw new MediaCardError('remote-preview-not-ready');
 
-          case 19:
+          case 21:
             return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
 
-          case 20:
+          case 22:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[4, 12]]);
+    }, _callee, null, [[6, 14]]);
   }));
 
   return function getCardPreview(_x) {
@@ -167,12 +171,14 @@ export var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   var status = _ref3.status,
       fileState = _ref3.fileState,
       dimensions = _ref3.dimensions,
-      prevDimensions = _ref3.prevDimensions,
+      identifier = _ref3.identifier,
+      fileImageMode = _ref3.fileImageMode,
       hasCardPreview = _ref3.hasCardPreview,
       isBannedLocalPreview = _ref3.isBannedLocalPreview,
       featureFlags = _ref3.featureFlags;
   var statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
-  var dimensionsAreBigger = isBigger(prevDimensions, dimensions);
+  var cardPreview = cardPreviewCache.get(identifier.id, fileImageMode);
+  var dimensionsAreBigger = isBigger(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
@@ -223,7 +229,9 @@ export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
 
           case 2:
             remotePreview = _context2.sent;
-            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
           case 4:
           case "end":

package/dist/esm/root/card/index.js

@@ -1,5 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,7 +19,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
-import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
@@ -32,9 +31,9 @@ import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
-import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, getRelevantFeatureFlagNames, getRelevantFeatureFlagKeysWithAllProducts, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -43,6 +42,8 @@ import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -304,9 +305,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
         var _this$props5 = _this.props,
             identifier = _this$props5.identifier,
-            _this$props5$dimensio = _this$props5.dimensions,
-            dimensions = _this$props5$dimensio === void 0 ? {} : _this$props5$dimensio;
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+            resizeMode = _this$props5.resizeMode;
+        var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
 
         _this.safeSetState(updateState);
       } else {
@@ -455,7 +456,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props7.dimensions,
           selected = _this$props7.selected,
           testId = _this$props7.testId,
-          originalDimensions = _this$props7.originalDimensions;
+          originalDimensions = _this$props7.originalDimensions,
+          onFullscreenChange = _this$props7.onFullscreenChange;
       var _this$state = _this.state,
           shouldAutoplay = _this$state.shouldAutoplay,
           cardPreview = _this$state.cardPreview;
@@ -465,6 +467,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -675,14 +678,14 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     var _this$props11 = _this.props,
         _identifier = _this$props11.identifier,
-        _this$props11$dimensi = _this$props11.dimensions,
-        _dimensions = _this$props11$dimensi === void 0 ? {} : _this$props11$dimensi,
+        _resizeMode = _this$props11.resizeMode,
         _ssr = _this$props11.ssr,
         _mediaClient = _this$props11.mediaClient;
 
     if (isFileIdentifier(_identifier)) {
       var id = _identifier.id;
-      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+      var fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
+      _cardPreview = getCardPreviewFromCache(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -784,8 +787,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var prevMediaClient = prevProps.mediaClient,
-          prevIdentifier = prevProps.identifier,
-          prevDimensions = prevProps.dimensions;
+          prevIdentifier = prevProps.identifier;
       var prevIsCardVisible = prevState.isCardVisible;
       var _this$props13 = this.props,
           mediaClient = _this$props13.mediaClient,
@@ -793,7 +795,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props13.dimensions,
           featureFlags = _this$props13.featureFlags,
           useInlinePlayer = _this$props13.useInlinePlayer,
-          disableOverlay = _this$props13.disableOverlay;
+          disableOverlay = _this$props13.disableOverlay,
+          resizeMode = _this$props13.resizeMode;
       var _this$state4 = this.state,
           isCardVisible = _this$state4.isCardVisible,
           cardPreview = _this$state4.cardPreview,
@@ -805,6 +808,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       this.updateFileStateFlag(fileState);
 
       if (isExternalImageIdentifier(identifier) && isDifferent) {
@@ -837,7 +841,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         status: status,
         fileState: fileState,
         dimensions: dimensions,
-        prevDimensions: prevDimensions,
+        identifier: identifier,
+        fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
         isBannedLocalPreview: isBannedLocalPreview
@@ -963,7 +968,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, getRelevantFeatureFlagKeysWithAllProducts(), error);
+      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -975,7 +980,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
-      startUfoExperience(this.internalOccurrenceKey, getRelevantFeatureFlagKeysWithAllProducts());
+      startUfoExperience(this.internalOccurrenceKey);
     }
   }, {
     key: "actions",
@@ -1036,7 +1041,7 @@ export var Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: getRelevantFeatureFlagNames()
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));