@atlaskit/media-card 74.0.0 → 74.1.2

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

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, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -8,11 +8,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, fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
@@ -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.2";
 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
       };
     });
 
@@ -400,7 +399,10 @@ export class CardBase extends Component {
         shouldAutoplay,
         cardPreview
       } = this.state;
-      return /*#__PURE__*/React.createElement(InlinePlayer, {
+      const card = this.renderCard(false, 'loading', false);
+      return /*#__PURE__*/React.createElement(Suspense, {
+        fallback: card
+      }, /*#__PURE__*/React.createElement(InlinePlayerLazy, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
@@ -413,7 +415,7 @@ export class CardBase extends Component {
         ref: this.setRef,
         testId: testId,
         cardPreview: cardPreview
-      });
+      }));
     });
 
     _defineProperty(this, "onMediaViewerClose", () => {
@@ -477,7 +479,7 @@ export class CardBase extends Component {
       }), document.body);
     });
 
-    _defineProperty(this, "renderCard", () => {
+    _defineProperty(this, "renderCard", (withCallbacks = true, cardStatusOverride, izLazyOverride) => {
       const {
         identifier,
         isLazy,
@@ -515,15 +517,16 @@ export class CardBase extends Component {
         onDisplayImage,
         actions,
         onMouseEnter
-      } = this; // Card can be artificially turned visible before entering the viewport
+      } = this;
+      const isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride; // Card can be artificially turned visible before entering the viewport
       // For example, when we have the image in cache
 
-      const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+      const nativeLazyLoad = isLazyWithOverride && !isCardVisible; // Force Media Image to always display img for SSR
 
       const forceSyncDisplay = !!ssr;
       const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
       const card = /*#__PURE__*/React.createElement(CardView, {
-        status: status,
+        status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
@@ -535,34 +538,26 @@ export class CardBase extends 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(this, "storeSSRData", () => {
@@ -706,6 +701,8 @@ export class CardBase extends Component {
   }
 
   componentDidMount() {
+    var _getDocument;
+
     this.hasBeenMounted = true;
     const {
       isCardVisible,
@@ -741,7 +738,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 +839,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/root/inlinePlayerLazy.js

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+export const InlinePlayerLazy = /*#__PURE__*/lazy(async () => {
+  const {
+    InlinePlayer
+  } = await import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer" */
+  './inlinePlayer');
+  return {
+    default: InlinePlayer
+  };
+});

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