@atlaskit/media-card 74.0.0 → 74.1.0

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component, createRef } from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -8,7 +8,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';
@@ -25,7 +25,7 @@ import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.0.0";
+const packageVersion = "74.1.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -43,10 +43,6 @@ export class CardBase extends Component {
       wasStatusProcessing: false
     });
 
-    _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
-
-    _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
-
     _defineProperty(this, "ssrReliability", {
       server: {
         status: 'unknown'
@@ -103,7 +99,8 @@ export class CardBase extends Component {
       } = identifier;
       const {
         dimensions = {},
-        mediaClient
+        mediaClient,
+        createAnalyticsEvent
       } = this.props;
       return {
         mediaClient,
@@ -113,7 +110,9 @@ export class CardBase extends Component {
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: this.getImageURLParams(identifier),
-        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState)
+        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
+        createAnalyticsEvent,
+        featureFlags: this.props.featureFlags
       };
     });
 
@@ -553,16 +552,8 @@ export class CardBase extends 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(this, "storeSSRData", () => {
@@ -706,6 +697,8 @@ export class CardBase extends Component {
   }
 
   componentDidMount() {
+    var _getDocument;
+
     this.hasBeenMounted = true;
     const {
       isCardVisible,
@@ -741,7 +734,7 @@ export class CardBase extends Component {
     // won't work in IE11
 
 
-    getDocument().addEventListener('copy', this.fireCopiedEvent);
+    (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -842,9 +835,11 @@ export class CardBase extends Component {
   }
 
   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);
   }
 
   updateStateForIdentifier(identifier) {

package/dist/es2019/utils/analytics.js

@@ -9,7 +9,8 @@ const relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true
+  mediaUploadApiV2: true,
+  memoryCacheLogging: true
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
 export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
@@ -52,6 +53,22 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     ssrReliability
   }
 });
+export const getCacheHitEventPayload = cardPreviewAttributes => ({
+  eventType: 'operational',
+  action: 'cache-hit',
+  actionSubject: 'mediaCardCache',
+  attributes: {
+    cardPreviewAttributes
+  }
+});
+export const getRemoteSuccessEventPayload = cardPreviewAttributes => ({
+  eventType: 'operational',
+  action: 'Remote-success',
+  actionSubject: 'mediaCardCache',
+  attributes: {
+    cardPreviewAttributes
+  }
+});
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
   action: 'failed',

package/dist/es2019/utils/document.js

@@ -1 +1,11 @@
-export default (() => document);
+export default (() => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+
+  return window.document;
+});

package/dist/es2019/utils/ufoExperiences.js

@@ -1,8 +1,9 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
+import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.0.0";
+const packageVersion = "74.1.0";
 let concurrentExperience;
 
 const getExperience = id => {
@@ -24,7 +25,7 @@ const getExperience = id => {
 export const startUfoExperience = id => {
   getExperience(id).start();
 };
-export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error) => {
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data')) => {
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
@@ -44,7 +45,7 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
 
     case 'error':
-      error && failUfoExperience(id, {
+      failUfoExperience(id, {
         fileAttributes,
         ...extractErrorInfo(error),
         request: getRenderErrorRequestMetadata(error),

package/dist/es2019/utils/viewportDetector.js

@@ -1,27 +1,6 @@
-import React, { useEffect, forwardRef } from 'react';
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
-
-export const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
-
-export const ViewportAnchor = /*#__PURE__*/forwardRef((props, ref) => {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: `${props.offsetTop}px`,
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
+import React, { useEffect } from 'react';
+import getDocument from './document';
+const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
 const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   for (let entry of entries) {
@@ -36,27 +15,23 @@ const createIntersectionObserverCallback = onVisible => (entries, observer) => {
 const ViewportObserver = ({
   onVisible,
   cardEl,
-  children,
-  preAnchorRef,
-  postAnchorRef
+  children
 }) => {
   useEffect(() => {
-    // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
-    const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
-    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      root: getDocument(),
+      rootMargin: `${ABS_VIEWPORT_ANCHOR_OFFSET_TOP}px`
+    });
     cardEl && intersectionObserver.observe(cardEl);
     return () => {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
+  }, [cardEl, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export const ViewportDetector = ({
   cardEl,
-  preAnchorRef,
-  postAnchorRef,
   onVisible,
   children
 }) => {
@@ -66,8 +41,6 @@ export const ViewportDetector = ({
 
   return /*#__PURE__*/React.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.0.0",
+	"version": "74.1.0",
 	"sideEffects": false
 }

package/dist/esm/errors.js

@@ -10,6 +10,10 @@ 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; } }
 
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
 export var MediaCardError = /*#__PURE__*/function (_Error) {
   _inherits(MediaCardError, _Error);
 

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/index.js

@@ -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;
@@ -75,48 +77,57 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
 
 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, mode, cachedPreview, dimensionsAreBigger, 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;
+            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 && !dimensionsAreBigger)) {
-              _context.next = 6;
+              _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 6:
-            _context.prev = 6;
+          case 7:
+            _context.prev = 7;
 
             if (!filePreview) {
-              _context.next = 12;
+              _context.next = 13;
               break;
             }
 
-            _context.next = 10;
+            _context.next = 11;
             return getCardPreviewFromFilePreview(filePreview);
 
-          case 10:
+          case 11:
             localPreview = _context.sent;
             return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
               dimensions: dimensions
             }), mediaBlobUrlAttrs));
 
-          case 12:
-            _context.next = 19;
+          case 13:
+            _context.next = 20;
             break;
 
-          case 14:
-            _context.prev = 14;
-            _context.t0 = _context["catch"](6);
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](7);
 
             /**
              * We report the error if:
@@ -138,29 +149,45 @@ export var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 20;
               break;
             }
 
             throw _context.t0;
 
-          case 19:
+          case 20:
             if (isRemotePreviewReady) {
-              _context.next = 21;
+              _context.next = 22;
               break;
             }
 
             throw new MediaCardError('remote-preview-not-ready');
 
-          case 21:
-            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 27:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[6, 14]]);
+    }, _callee, null, [[7, 15]]);
   }));
 
   return function getCardPreview(_x) {

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

@@ -17,7 +17,7 @@ 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 { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -26,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,7 +43,7 @@ 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";
+var packageVersion = "74.1.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -69,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'
@@ -125,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,
@@ -134,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
       };
     });
 
@@ -605,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 () {
@@ -748,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,
@@ -781,7 +774,7 @@ 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",
@@ -876,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",

package/dist/esm/utils/analytics.js

@@ -15,7 +15,8 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true
+  mediaUploadApiV2: true,
+  memoryCacheLogging: true
 };
 export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
 export var LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
@@ -64,6 +65,26 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
     }
   };
 };
+export var getCacheHitEventPayload = function getCacheHitEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'cache-hit',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
+export var getRemoteSuccessEventPayload = function getRemoteSuccessEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'Remote-success',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
 export var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',

package/dist/esm/utils/document.js

@@ -1,3 +1,11 @@
 export default (function () {
-  return document;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+
+  return window.document;
 });

package/dist/esm/utils/ufoExperiences.js

@@ -6,9 +6,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
+import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.0.0";
+var packageVersion = "74.1.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {
@@ -30,7 +31,9 @@ var getExperience = function getExperience(id) {
 export var startUfoExperience = function startUfoExperience(id) {
   getExperience(id).start();
 };
-export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
+export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
+
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
@@ -50,7 +53,7 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
       break;
 
     case 'error':
-      error && failUfoExperience(id, _objectSpread(_objectSpread({
+      failUfoExperience(id, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, extractErrorInfo(error)), {}, {
         request: getRenderErrorRequestMetadata(error),