@atlaskit/media-card 74.0.0 → 74.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-card
 
+## 74.1.0
+
+### Minor Changes
+
+- [`a332288b5ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a332288b5ea) - Added analytics for media-card memoryCacheLogging and added relevant featureFlag keys for media-common package.
+
+### Patch Changes
+
+- [`baece961cdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/baece961cdd) - Add media-card example for use by media-pollinator-test
+- [`2285a60dc65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2285a60dc65) - Logs events when status is error, even if there is no error data
+- [`196bfa84bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/196bfa84bfd) - Removed custom anchors from ViewportObserver in favour of IntersectionObserver's rootMargin
+- Updated dependencies
+
 ## 74.0.0
 
 ### Major Changes

package/dist/cjs/errors.js

@@ -29,6 +29,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
+ */
 var MediaCardError = /*#__PURE__*/function (_Error) {
   (0, _inherits2.default)(MediaCardError, _Error);
 

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

@@ -7,7 +7,11 @@ exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent
 
 var _analytics = require("../../utils/analytics");
 
-var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
+var _errors = require("./../../errors");
+
+var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
   };
@@ -22,7 +26,7 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
       break;
 
     case 'error':
-      error && fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

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

@@ -54,6 +54,8 @@ var _dimensionComparer = require("../../../utils/dimensionComparer");
 
 var _filePreviewStatus = require("./filePreviewStatus");
 
+var _imageRefetchingAnalytics = require("../imageRefetchingAnalytics");
+
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -124,48 +126,57 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
 
 var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.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 _regenerator.default.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 = _cache.default.get(id, mode);
             dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
             if (!(cachedPreview && !dimensionsAreBigger)) {
-              _context.next = 6;
+              _context.next = 7;
               break;
             }
 
+            if ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && (0, _imageRefetchingAnalytics.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 (0, _helpers.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:
@@ -187,29 +198,45 @@ 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 _errors.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 ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && (0, _imageRefetchingAnalytics.fireImageFetchingOperationalEvent)(createAnalyticsEvent, 'remote-success', {
+                fileId: id,
+                prevDimensions: cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions,
+                currentDimensions: dimensions,
+                dimensionsPercentageDiff: (0, _imageRefetchingAnalytics.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/cjs/root/card/imageRefetchingAnalytics.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireImageFetchingOperationalEvent = exports.calculatePercentageDifference = void 0;
+
+var _analytics = require("../../utils/analytics");
+
+var fireImageFetchingOperationalEvent = function fireImageFetchingOperationalEvent(createAnalyticsEvent, action, cardPreviewAttributes) {
+  var fireEvent = function fireEvent(payload) {
+    return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+  };
+
+  switch (action) {
+    case 'cache-hit':
+      fireEvent((0, _analytics.getCacheHitEventPayload)(cardPreviewAttributes));
+      break;
+
+    case 'remote-success':
+      fireEvent((0, _analytics.getRemoteSuccessEventPayload)(cardPreviewAttributes));
+      break;
+  }
+};
+
+exports.fireImageFetchingOperationalEvent = fireImageFetchingOperationalEvent;
+
+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
+  };
+};
+
+exports.calculatePercentageDifference = calculatePercentageDifference;

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

@@ -90,7 +90,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; } }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.0.0";
+var packageVersion = "74.1.0";
 
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
@@ -112,8 +112,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
       server: {
         status: 'unknown'
@@ -162,7 +160,8 @@ 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,
@@ -171,7 +170,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
         filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
         isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
-        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
+        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
+        createAnalyticsEvent: createAnalyticsEvent,
+        featureFlags: _this.props.featureFlags
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCacheSSRPreview", function (identifier) {
@@ -624,16 +625,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
         cardEl: cardRef,
-        preAnchorRef: _this.viewportPreAnchorRef,
-        postAnchorRef: _this.viewportPostAnchorRef,
         onVisible: _this.onCardInViewport
-      }, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
-        ref: _this.viewportPreAnchorRef,
-        offsetTop: -_viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      }), card, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
-        ref: _this.viewportPostAnchorRef,
-        offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      })) : card;
+      }, card) : card;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "storeSSRData", function () {
       var _this$ssrReliability$;
@@ -762,6 +755,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(CardBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _getDocument;
+
       this.hasBeenMounted = true;
       var _this$state3 = this.state,
           isCardVisible = _this$state3.isCardVisible,
@@ -795,7 +790,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       // won't work in IE11
 
 
-      (0, _document.default)().addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
@@ -890,9 +885,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _getDocument2;
+
       this.hasBeenMounted = false;
       this.unsubscribe();
-      (0, _document.default)().removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",

package/dist/cjs/utils/analytics.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -30,7 +30,8 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true
+  mediaUploadApiV2: true,
+  memoryCacheLogging: true
 };
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
 exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
@@ -94,6 +95,32 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
 
 exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
 
+var getCacheHitEventPayload = function getCacheHitEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'cache-hit',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
+
+exports.getCacheHitEventPayload = getCacheHitEventPayload;
+
+var getRemoteSuccessEventPayload = function getRemoteSuccessEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'Remote-success',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
+
+exports.getRemoteSuccessEventPayload = getRemoteSuccessEventPayload;
+
 var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',

package/dist/cjs/utils/document.js

@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 
 var _default = function _default() {
-  return document;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+
+  return window.document;
 };
 
 exports.default = _default;

package/dist/cjs/utils/ufoExperiences.js

@@ -13,6 +13,8 @@ var _ufo = require("@atlaskit/ufo");
 
 var _analytics = require("./analytics");
 
+var _errors = require("../errors");
+
 var _mediaClient = require("@atlaskit/media-client");
 
 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; }
@@ -20,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.0.0";
+var packageVersion = "74.1.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {
@@ -45,7 +47,9 @@ var startUfoExperience = function startUfoExperience(id) {
 
 exports.startUfoExperience = startUfoExperience;
 
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
@@ -65,7 +69,7 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       break;
 
     case 'error':
-      error && failUfoExperience(id, _objectSpread(_objectSpread({
+      failUfoExperience(id, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, (0, _analytics.extractErrorInfo)(error)), {}, {
         request: (0, _analytics.getRenderErrorRequestMetadata)(error),

package/dist/cjs/utils/viewportDetector.js

@@ -1,14 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
+exports.ViewportDetector = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _document = _interopRequireDefault(require("./document"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -19,31 +23,8 @@ 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; }
 
-/**
- * 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.
- */
 var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
-exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
-var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: "".concat(props.offsetTop, "px"),
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
-exports.ViewportAnchor = ViewportAnchor;
-
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -70,26 +51,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;
   (0, _react.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: (0, _document.default)(),
+      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.default.createElement(_react.default.Fragment, null, children);
 };
 
 var ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,
-      preAnchorRef = _ref2.preAnchorRef,
-      postAnchorRef = _ref2.postAnchorRef,
       onVisible = _ref2.onVisible,
       children = _ref2.children;
 
@@ -99,8 +76,6 @@ var ViewportDetector = function ViewportDetector(_ref2) {
 
   return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -1,3 +1,7 @@
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
 export class MediaCardError extends Error {
   constructor(primaryReason, secondaryError) {
     super(primaryReason); // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget

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

@@ -1,5 +1,6 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
+import { MediaCardError } from './../../errors';
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data')) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
@@ -12,7 +13,7 @@ export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttribute
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

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

@@ -5,6 +5,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 const getCardPreviewFromCache = cardPreviewCache.get;
@@ -71,13 +73,24 @@ export const getCardPreview = async ({
   onLocalPreviewError,
   isRemotePreviewReady,
   imageUrlParams,
-  mediaBlobUrlAttrs
+  mediaBlobUrlAttrs,
+  createAnalyticsEvent,
+  featureFlags
 }) => {
   const mode = imageUrlParams.mode;
   const cachedPreview = cardPreviewCache.get(id, mode);
   const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
   if (cachedPreview && !dimensionsAreBigger) {
+    if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
+      createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'cache-hit', {
+        fileId: id,
+        prevDimensions: cachedPreview.dimensions,
+        currentDimensions: dimensions,
+        source: cachedPreview.source
+      });
+    }
+
     return cachedPreview;
   }
 
@@ -123,7 +136,19 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+
+  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 remotePreview;
 };
 export const shouldResolvePreview = ({
   status,

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

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