@atlaskit/media-card 71.0.0 → 73.1.0

package/dist/es2019/root/ui/imageRenderer/imageRenderer.js

@@ -1,95 +1,42 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../../utils/analytics';
-import { withFileAttributes } from '../../../utils/fileAttributesContext';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
-export class ImageRendererBase extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes,
-        timeElapsedTillCommenced
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        const timeElapsedTillSucceeded = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced
-          }
-        };
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        onImageError,
-        fileAttributes
-      } = this.props;
-      onImageError && onImageError();
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType,
-          timeElapsedTillCommenced
-        } = this.props;
-        const timeElapsedTillFailed = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-  }
-
-  componentDidMount() {
+import styled from 'styled-components';
+export const ImageRendererBase = ({
+  dataURI,
+  previewOrientation,
+  alt,
+  resizeMode,
+  onImageLoad,
+  onImageError,
+  onDisplayImage,
+  mediaType,
+  nativeLazyLoad,
+  forceSyncDisplay,
+  className = 'media-card-image-renderer'
+}) => {
+  useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-    const {
-      onDisplayImage,
-      mediaType
-    } = this.props;
-
     if (mediaType === 'image' && onDisplayImage) {
       onDisplayImage();
     }
-  }
-
-  render() {
-    const {
-      dataURI,
-      previewOrientation,
-      alt,
-      resizeMode
-    } = this.props;
-    return /*#__PURE__*/React.createElement(MediaImage, _extends({
-      dataURI: dataURI,
-      alt: alt,
-      previewOrientation: previewOrientation,
-      onImageLoad: this.onImageLoad,
-      onImageError: this.onImageError
-    }, resizeModeToMediaImageProps(resizeMode)));
-  }
-
-}
-export const ImageRenderer = withAnalyticsEvents()(withFileAttributes(ImageRendererBase));
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/React.createElement(MediaImage, _extends({
+    className: className,
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
+  }, resizeModeToMediaImageProps(resizeMode)));
+};
+export const ImageRenderer = styled(ImageRendererBase)`
+  ${({
+  isImageVisible
+}) => `
+    visibility: ${isImageVisible ? 'visible' : 'hidden'};
+`}
+`;

package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
+import { FormattedMessageWrapper } from '../../styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../Breakpoint';
+import { FormattedMessage } from 'react-intl-next';
+import { Breakpoint } from '../common';
 export const LoadingRateLimited = ({
   breakpoint = Breakpoint.SMALL,
   positionBottom = true
@@ -11,5 +12,5 @@ export const LoadingRateLimited = ({
   return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file)), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429))));
+  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
 };

package/dist/es2019/root/ui/loadingRateLimited/styled.js

@@ -31,7 +31,7 @@ export const LoadingRateLimitedTextWrapper = styled.div`
     display: block;
     width:100%;
     text-align:center;
-    ${generateResponsiveStyles(breakpoint, positionBottom, 1)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
   `}
 `;
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';

package/dist/es2019/root/ui/progressBar/progressBar.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,
-  positionBottom = false
+  positionBottom = false,
+  showOnTop = false
 }) => {
   const normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

package/dist/es2019/root/ui/progressBar/styled.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { getTitleBoxHeight, responsiveSettings } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;
 const padding = 1;
 const width = 95; // %
@@ -16,19 +15,20 @@ const smallSizeSettings = {
 const largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom, multiplier = 1) {
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
   const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
   return `
-    bottom: ${marginBottom}px
+    ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
 export const StyledBar = styled.div`
   ${({
   progress,
   breakpoint,
-  positionBottom
+  positionBottom,
+  showOnTop
 }) => `
     ${borderRadius}
     overflow: hidden;
@@ -38,6 +38,7 @@ export const StyledBar = styled.div`
     background-color: ${rgba(N0, 0.8)};
     height: ${height + padding * 2}px;
     padding: ${padding}px;
+    box-sizing: border-box;
 
     ::before {
       content: '';
@@ -48,7 +49,7 @@ export const StyledBar = styled.div`
       display: block;
     }
 
-    ${generateResponsiveStyles(breakpoint, positionBottom)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `}
 `;
 StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/root/ui/styled.js

@@ -1,11 +1,30 @@
 import styled from 'styled-components';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20, N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../styles';
 import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
+import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
 import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
 import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { SSRFileExperienceWrapper } from './styledSSR';
+import { Breakpoint, responsiveSettings } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};
+
+const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};
 
 const getWrapperDimensions = (dimensions, appearance) => {
   const {
@@ -22,8 +41,19 @@ const getWrapperDimensions = (dimensions, appearance) => {
     height: ${getCSSUnitValue(height || defaultHeight)};
     max-height: 100%;
   `;
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
 };
 
+const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
     return '';
@@ -48,26 +78,57 @@ const getSelectableTickBoxStyles = isTickBoxSelectable => {
   `;
 };
 
-export const NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)`
+export const NewFileExperienceWrapper = styled.div`
   ${({
+  breakpoint,
   dimensions,
   appearance,
+  shouldUsePointerCursor,
+  disableOverlay,
+  displayBackground,
+  selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip
 }) => `
+    ${transition()}
+    box-sizing: border-box;
+    * {
+      box-sizing: border-box;
+    }
+    position: relative;
+    font-family: ${fontFamily()};
+    ${getWrapperDimensions(dimensions, appearance)}
+    ${displayBackground ? `background-color: ${N20};` : ''}
+    ${borderRadius}
+    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getWrapperShadow(disableOverlay, selected)}
+    ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}
 
     /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
     ${getClickablePlayButtonStyles(isPlayButtonClickable)}
     ${getSelectableTickBoxStyles(isTickBoxSelectable)}
+    &:hover .${blanketClassName} {
+      ${fixedBlanketStyles}
+    }
 
     &:hover .${actionsBarClassName} {
       ${fixedActionBarStyles}
     }
 
     /* Tooltip does not support percentage dimensions. We enforce them here */
-    ${shouldDisplayTooltip ? `> div { ${getWrapperDimensions(dimensions, appearance)} }` : ''}
+    ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
 `}
 `;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+export const CardImageContainer = styled.div`
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  ${borderRadius}
+`;

package/dist/es2019/root/ui/titleBox/failedTitleBox.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { getErrorMessage } from '../../../utils/getErrorMessage';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const FailedTitleBox = ({
-  breakpoint
+  breakpoint,
+  customMessage = messages.failed_to_load
 }) => {
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
@@ -12,5 +15,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), getErrorMessage('error')));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/es2019/root/ui/titleBox/styled.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

package/dist/es2019/root/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';

package/dist/es2019/utils/analytics.js

@@ -2,14 +2,6 @@ import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-clien
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
-export let RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (RenderEventAction = {}));
-
 export const getFileAttributes = (metadata, fileStatus) => ({
   fileMediatype: metadata.mediaType,
   fileMimetype: metadata.mimeType,
@@ -30,7 +22,7 @@ export const getRenderPreviewableCardPayload = fileAttributes => ({
 export const getRenderCommencedEventPayload = (fileAttributes, performanceAttributes) => {
   return {
     eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes,
@@ -40,7 +32,7 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
 };
 export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.SUCCEEDED,
+  action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -48,30 +40,9 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     status: 'success'
   }
 });
-export const getFailedFileUriFailReason = fileStatus => {
-  if (!fileStatus) {
-    // This fail reason will come from a bug, most likely.
-    return `unknown-uri`;
-  } else if (fileStatus === 'uploading') {
-    return 'local-uri';
-  }
-
-  return 'remote-uri';
-};
-export const getRenderFailedFileUriPayload = (fileAttributes, performanceAttributes) => ({
-  eventType: 'operational',
-  action: RenderEventAction.FAILED,
-  actionSubject: 'mediaCardRender',
-  attributes: {
-    fileAttributes,
-    performanceAttributes,
-    status: 'fail',
-    failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
-  }
-});
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -112,7 +83,7 @@ export const getRenderErrorRequestMetadata = error => {
 };
 export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -126,7 +97,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
 });
 export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -57,14 +57,18 @@ export class CardActionsDropdownMenu extends Component {
 
     if (actions.length > 0) {
       return /*#__PURE__*/React.createElement(DropdownMenu, {
-        "data-testid": "media-card-actions-menu",
+        testId: "media-card-actions-menu",
         onOpenChange: onOpenChange,
-        trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
+        trigger: ({
+          triggerRef,
+          ...providedProps
+        }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
           variant: triggerVariant,
           style: {
             color: triggerColor
-          }
-        }, /*#__PURE__*/React.createElement(MoreIcon, {
+          },
+          ref: triggerRef
+        }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
           label: "more"
         }))
       }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));

package/dist/es2019/utils/dimensionComparer.js

@@ -20,7 +20,7 @@ export const canCompareDimension = (current, next) => {
   return false;
 };
 export const isBigger = (current, next) => {
-  if (canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
+  if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
     const nextIsHigher = parseInt(`${current.width}`, 10) < parseInt(`${next.width}`, 10);
     const nextIsWider = parseInt(`${current.height}`, 10) < parseInt(`${next.height}`, 10);
     return nextIsHigher || nextIsWider;

package/dist/es2019/utils/getErrorMessage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export const getErrorMessage = status => status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/es2019/utils/metadata.js

@@ -1,4 +1,4 @@
-import { isErrorFileState } from '@atlaskit/media-client';
+import { isErrorFileState, isFileIdentifier } from '@atlaskit/media-client';
 
 const getProcessingStatusFromFileState = status => {
   switch (status) {
@@ -13,7 +13,7 @@ const getProcessingStatusFromFileState = status => {
   }
 };
 
-export const getFileDetails = state => !isErrorFileState(state) ? {
+const getFileDetailsFromFileState = state => ({
   id: state.id,
   name: state.name,
   size: state.size,
@@ -21,6 +21,14 @@ export const getFileDetails = state => !isErrorFileState(state) ? {
   createdAt: state.createdAt,
   mediaType: state.mediaType,
   processingStatus: getProcessingStatusFromFileState(state.status)
-} : {
-  id: state.id
+});
+
+export const getFileDetails = (identifier, fileState) => {
+  return isFileIdentifier(identifier) ? fileState && !isErrorFileState(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
+  } : {
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
+  };
 };

package/dist/es2019/utils/objectURLCache.js

@@ -42,5 +42,10 @@ export class ObjectURLCache {
     this.cache.set(key, value);
   }
 
+  remove(key) {
+    const removed = this.cache.remove(key);
+    removed && URL.revokeObjectURL(removed.dataURI);
+  }
+
 }
 export const createObjectURLCache = () => new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);

package/dist/es2019/utils/shouldDisplayImageThumbnail.js

@@ -5,7 +5,7 @@ export const shouldDisplayImageThumbnail = (cardStatus, mediaItemType, dataURI,
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/es2019/utils/viewportDetector.js

@@ -1,5 +1,25 @@
-import React, { useEffect } from 'react';
-import { LazyContent } from './lazyContent';
+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`
+    }
+  });
+});
 
 const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   for (let entry of entries) {
@@ -11,31 +31,41 @@ const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   }
 };
 
-const Observer = ({
+const ViewportObserver = ({
   onVisible,
+  cardEl,
   children,
-  targetRef
+  preAnchorRef,
+  postAnchorRef
 }) => {
   useEffect(() => {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (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);
+    cardEl && intersectionObserver.observe(cardEl);
     return () => {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-export const createViewportDetector = isIntersectionObserverSupported => ({
-  children,
-  targetRef,
-  onVisible
-}) => isIntersectionObserverSupported ? /*#__PURE__*/React.createElement(Observer, {
-  targetRef: targetRef,
-  onVisible: onVisible
-}, children) : /*#__PURE__*/React.createElement(LazyContent, {
-  placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, children),
-  onRender: onVisible
-}, children);
-export const ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export const ViewportDetector = ({
+  cardEl,
+  preAnchorRef,
+  postAnchorRef,
+  onVisible,
+  children
+}) => {
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+
+  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": "71.0.0",
+	"version": "73.1.0",
 	"sideEffects": false
 }