@atlaskit/media-card 74.0.0 → 74.1.2

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, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -26,11 +26,11 @@ 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';
-import { InlinePlayer } from '../inlinePlayer';
+import { InlinePlayerLazy } from '../inlinePlayerLazy';
 import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
@@ -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.2";
 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
       };
     });
 
@@ -461,7 +460,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$state = _this.state,
           shouldAutoplay = _this$state.shouldAutoplay,
           cardPreview = _this$state.cardPreview;
-      return /*#__PURE__*/React.createElement(InlinePlayer, {
+
+      var card = _this.renderCard(false, 'loading', false);
+
+      return /*#__PURE__*/React.createElement(Suspense, {
+        fallback: card
+      }, /*#__PURE__*/React.createElement(InlinePlayerLazy, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
@@ -474,7 +478,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         ref: _this.setRef,
         testId: testId,
         cardPreview: cardPreview
-      });
+      }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "onMediaViewerClose", function () {
@@ -533,6 +537,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
+      var withCallbacks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var cardStatusOverride = arguments.length > 1 ? arguments[1] : undefined;
+      var izLazyOverride = arguments.length > 2 ? arguments[2] : undefined;
       var _this$props9 = _this.props,
           identifier = _this$props9.identifier,
           isLazy = _this$props9.isLazy,
@@ -566,16 +573,17 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           onCardViewClick = _assertThisInitialize4.onCardViewClick,
           onDisplayImage = _assertThisInitialize4.onDisplayImage,
           actions = _assertThisInitialize4.actions,
-          onMouseEnter = _assertThisInitialize4.onMouseEnter; // Card can be artificially turned visible before entering the viewport
-      // For example, when we have the image in cache
+          onMouseEnter = _assertThisInitialize4.onMouseEnter;
 
+      var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
 
-      var nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+      var nativeLazyLoad = isLazyWithOverride && !isCardVisible; // Force Media Image to always display img for SSR
 
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
       var card = /*#__PURE__*/React.createElement(CardView, {
-        status: status,
+        status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
@@ -587,34 +595,26 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         actions: actions,
         selectable: selectable,
         selected: selected,
-        onClick: onCardViewClick,
-        onMouseEnter: onMouseEnter,
+        onClick: withCallbacks ? onCardViewClick : undefined,
+        onMouseEnter: withCallbacks ? onMouseEnter : undefined,
         disableOverlay: disableOverlay,
         progress: progress,
-        onDisplayImage: onDisplayImage,
+        onDisplayImage: withCallbacks ? onDisplayImage : undefined,
         innerRef: _this.setRef,
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
-        onImageError: _this.onImageError,
-        onImageLoad: _this.onImageLoad,
+        onImageError: withCallbacks ? _this.onImageError : undefined,
+        onImageLoad: withCallbacks ? _this.onImageLoad : undefined,
         nativeLazyLoad: nativeLazyLoad,
         forceSyncDisplay: forceSyncDisplay,
         mediaCardCursor: mediaCardCursor
       });
-      return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
+      return isLazyWithOverride ? /*#__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 +748,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 +783,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 +878,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/root/inlinePlayerLazy.js

@@ -0,0 +1,29 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { lazy } from 'react';
+export var InlinePlayerLazy = /*#__PURE__*/lazy( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _yield$import, InlinePlayer;
+
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return import(
+          /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer" */
+          './inlinePlayer');
+
+        case 2:
+          _yield$import = _context.sent;
+          InlinePlayer = _yield$import.InlinePlayer;
+          return _context.abrupt("return", {
+            default: InlinePlayer
+          });
+
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

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.2";
 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),

package/dist/esm/utils/viewportDetector.js

@@ -4,30 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-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 var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
-
-export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: "".concat(props.offsetTop, "px"),
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
+import React, { useEffect } from 'react';
+import getDocument from './document';
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
@@ -55,26 +34,22 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
 var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
       cardEl = _ref.cardEl,
-      children = _ref.children,
-      preAnchorRef = _ref.preAnchorRef,
-      postAnchorRef = _ref.postAnchorRef;
+      children = _ref.children;
   useEffect(function () {
-    // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
-    var 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);
+    var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      root: getDocument(),
+      rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
+    });
     cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
+  }, [cardEl, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export var ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,
-      preAnchorRef = _ref2.preAnchorRef,
-      postAnchorRef = _ref2.postAnchorRef,
       onVisible = _ref2.onVisible,
       children = _ref2.children;
 
@@ -84,8 +59,6 @@ export var ViewportDetector = function ViewportDetector(_ref2) {
 
   return /*#__PURE__*/React.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/esm/version.json

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

package/dist/types/errors.d.ts

@@ -1,5 +1,9 @@
 import { CardPreview } from '.';
-export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'preview-fetch';
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
+export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export declare type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export declare type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready';
 export declare type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';

package/dist/types/root/card/cardAnalytics.d.ts

@@ -3,7 +3,7 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

package/dist/types/root/card/getCardPreview/index.d.ts

@@ -1,6 +1,7 @@
 import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
 import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
 import { ImageResizeMode } from '@atlaskit/media-client';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions } from '../../../utils/cardDimensions';
 import { MediaCardError } from '../../../errors';
 import { CardStatus, CardPreview } from '../../../types';
@@ -22,6 +23,8 @@ export declare type CardPreviewParams = {
     isRemotePreviewReady: boolean;
     imageUrlParams: MediaStoreGetFileImageParams;
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    featureFlags?: MediaFeatureFlags;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -33,7 +36,7 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;

package/dist/types/root/card/imageRefetchingAnalytics.d.ts

@@ -0,0 +1,10 @@
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardDimensions } from '../../utils';
+import { CardPreviewAttributes } from '../../utils/analytics';
+declare type cardAction = 'cache-hit' | 'remote-success';
+export declare const fireImageFetchingOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, action: cardAction, cardPreviewAttributes: CardPreviewAttributes) => void;
+export declare const calculatePercentageDifference: (prevDimensions: CardDimensions | undefined, currentDimensions: CardDimensions | undefined) => {
+    width: string;
+    height: string;
+} | undefined;
+export {};

package/dist/types/root/card/index.d.ts

@@ -2,14 +2,12 @@ import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { FileIdentifier, FileState, MediaSubscription } from '@atlaskit/media-client';
 import { WrappedComponentProps } from 'react-intl-next';
-import { CardAction, CardProps, CardState } from '../..';
+import { CardAction, CardProps, CardState, CardStatus } from '../..';
 export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
     private fileStateFlags;
-    private viewportPreAnchorRef;
-    private viewportPostAnchorRef;
     private ssrReliability;
     private timeElapsedTillCommenced;
     subscription?: MediaSubscription;
@@ -50,7 +48,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     onMediaViewerClose: () => void;
     private onDisplayImage;
     renderMediaViewer: () => React.ReactPortal | undefined;
-    renderCard: () => JSX.Element;
+    renderCard: (withCallbacks?: boolean, cardStatusOverride?: CardStatus | undefined, izLazyOverride?: boolean | undefined) => JSX.Element;
     private storeSSRData;
     render(): JSX.Element;
     private onCardInViewport;

package/dist/types/root/inlinePlayerLazy.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InlinePlayerLazy: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("./inlinePlayer").InlinePlayerProps, "createAnalyticsEvent" | keyof import("./inlinePlayer").InlinePlayerOwnProps> & import("react").RefAttributes<HTMLDivElement>>>;