@atlaskit/media-card 73.7.0 → 74.1.0

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,5 +1,8 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
+import { MediaCardError } from './../../errors';
+export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
+
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
   };
@@ -14,7 +17,7 @@ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsE
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

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; }
 
@@ -13,6 +13,8 @@ import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './help
 import { MediaCardError, SsrPreviewError, isUnsupportedLocalPreviewError } from '../../../errors';
 import { isBigger } from '../../../utils/dimensionComparer';
 import { extractFilePreviewStatus, isPreviewableStatus } from './filePreviewStatus';
+import { fireImageFetchingOperationalEvent, calculatePercentageDifference } from '../imageRefetchingAnalytics';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
 export { extractFilePreviewStatus } from './filePreviewStatus';
 export var getCardPreviewFromCache = cardPreviewCache.get;
@@ -26,7 +28,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 +55,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 +77,57 @@ 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, createAnalyticsEvent, featureFlags, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
 
     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);
+            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, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags;
+            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 = 7;
               break;
             }
 
+            if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'cache-hit', {
+                fileId: id,
+                prevDimensions: cachedPreview.dimensions,
+                currentDimensions: dimensions,
+                source: cachedPreview.source
+              });
+            }
+
             return _context.abrupt("return", cachedPreview);
 
-          case 4:
-            _context.prev = 4;
+          case 7:
+            _context.prev = 7;
 
             if (!filePreview) {
-              _context.next = 10;
+              _context.next = 13;
               break;
             }
 
-            _context.next = 8;
+            _context.next = 11;
             return getCardPreviewFromFilePreview(filePreview);
 
-          case 8:
+          case 11:
             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 13:
+            _context.next = 20;
             break;
 
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](4);
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](7);
 
             /**
              * We report the error if:
@@ -134,29 +149,45 @@ export var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 17;
+              _context.next = 20;
               break;
             }
 
             throw _context.t0;
 
-          case 17:
+          case 20:
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 22;
               break;
             }
 
             throw new MediaCardError('remote-preview-not-ready');
 
-          case 19:
-            return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
+          case 22:
+            _context.next = 24;
+            return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+
+          case 24:
+            remotePreview = _context.sent;
+
+            if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'remote-success', {
+                fileId: id,
+                prevDimensions: cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions,
+                currentDimensions: dimensions,
+                dimensionsPercentageDiff: calculatePercentageDifference(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions),
+                source: remotePreview.source
+              });
+            }
+
+            return _context.abrupt("return", remotePreview);
 
-          case 20:
+          case 27:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[4, 12]]);
+    }, _callee, null, [[7, 15]]);
   }));
 
   return function getCardPreview(_x) {
@@ -167,12 +198,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 +256,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/imageRefetchingAnalytics.js

@@ -0,0 +1,32 @@
+import { fireMediaCardEvent, getCacheHitEventPayload, getRemoteSuccessEventPayload } from '../../utils/analytics';
+export var fireImageFetchingOperationalEvent = function fireImageFetchingOperationalEvent(createAnalyticsEvent, action, cardPreviewAttributes) {
+  var fireEvent = function fireEvent(payload) {
+    return fireMediaCardEvent(payload, createAnalyticsEvent);
+  };
+
+  switch (action) {
+    case 'cache-hit':
+      fireEvent(getCacheHitEventPayload(cardPreviewAttributes));
+      break;
+
+    case 'remote-success':
+      fireEvent(getRemoteSuccessEventPayload(cardPreviewAttributes));
+      break;
+  }
+};
+export var calculatePercentageDifference = function calculatePercentageDifference(prevDimensions, currentDimensions) {
+  if (!prevDimensions) {
+    return undefined;
+  }
+
+  var prevWidth = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.width), 10);
+  var currWidth = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.width), 10);
+  var prevHeight = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.height), 10);
+  var currHeight = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.height), 10);
+  var percentageDiffInWidth = ((currWidth - prevWidth) / prevWidth * 100).toFixed(2);
+  var percentageDiffInHeight = ((currHeight - prevHeight) / prevHeight * 100).toFixed(2);
+  return {
+    width: percentageDiffInWidth,
+    height: percentageDiffInHeight
+  };
+};

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; }
 
@@ -17,9 +17,8 @@ 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; } }
 
-import React, { Component, createRef } from 'react';
+import React, { Component } 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';
@@ -27,7 +26,7 @@ import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECEN
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
-import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
+import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
@@ -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.1.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -68,10 +69,6 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       wasStatusProcessing: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "viewportPreAnchorRef", /*#__PURE__*/createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "viewportPostAnchorRef", /*#__PURE__*/createRef());
-
     _defineProperty(_assertThisInitialized(_this), "ssrReliability", {
       server: {
         status: 'unknown'
@@ -124,7 +121,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
           _this$props2$dimensio = _this$props2.dimensions,
           dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-          mediaClient = _this$props2.mediaClient;
+          mediaClient = _this$props2.mediaClient,
+          createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       return {
         mediaClient: mediaClient,
         id: id,
@@ -133,7 +131,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
-        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
+        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
+        createAnalyticsEvent: createAnalyticsEvent,
+        featureFlags: _this.props.featureFlags
       };
     });
 
@@ -304,9 +304,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 {
@@ -604,16 +604,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         cardEl: cardRef,
-        preAnchorRef: _this.viewportPreAnchorRef,
-        postAnchorRef: _this.viewportPostAnchorRef,
         onVisible: _this.onCardInViewport
-      }, /*#__PURE__*/React.createElement(ViewportAnchor, {
-        ref: _this.viewportPreAnchorRef,
-        offsetTop: -ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      }), card, /*#__PURE__*/React.createElement(ViewportAnchor, {
-        ref: _this.viewportPostAnchorRef,
-        offsetTop: ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      })) : card;
+      }, card) : card;
     });
 
     _defineProperty(_assertThisInitialized(_this), "storeSSRData", function () {
@@ -677,14 +669,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;
@@ -747,6 +739,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   _createClass(CardBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _getDocument;
+
       this.hasBeenMounted = true;
       var _this$state3 = this.state,
           isCardVisible = _this$state3.isCardVisible,
@@ -780,14 +774,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       // won't work in IE11
 
 
-      getDocument().addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     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,
@@ -795,7 +788,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,
@@ -807,6 +801,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) {
@@ -839,7 +834,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
@@ -873,9 +869,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _getDocument2;
+
       this.hasBeenMounted = false;
       this.unsubscribe();
-      getDocument().removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",