@atlaskit/media-card 73.7.0 → 74.1.0

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;
@@ -16,7 +18,7 @@ export const removeCardPreviewFromCache = cardPreviewCache.remove;
 
 export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 
-const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
+const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
   let source;
 
   switch (preview.source) {
@@ -43,7 +45,7 @@ const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
 
   const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  cardPreviewCache.set(id, dimensions, { ...preview,
+  cardPreviewCache.set(id, mode, { ...preview,
     source,
     dataURI
   });
@@ -71,18 +73,33 @@ export const getCardPreview = async ({
   onLocalPreviewError,
   isRemotePreviewReady,
   imageUrlParams,
-  mediaBlobUrlAttrs
+  mediaBlobUrlAttrs,
+  createAnalyticsEvent,
+  featureFlags
 }) => {
-  const cachedPreview = cardPreviewCache.get(id, dimensions);
+  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
+      });
+    }
 
-  if (cachedPreview) {
     return cachedPreview;
   }
 
   try {
     if (filePreview) {
       const localPreview = await getCardPreviewFromFilePreview(filePreview);
-      return extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs);
+      return extendAndCachePreview(id, mode, { ...localPreview,
+        dimensions
+      }, mediaBlobUrlAttrs);
     }
   } catch (e) {
     /**
@@ -119,19 +136,33 @@ 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,
   fileState,
   dimensions,
-  prevDimensions,
+  identifier,
+  fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
   featureFlags
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
-  const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
+  const cardPreview = cardPreviewCache.get(identifier.id, fileImageMode);
+  const dimensionsAreBigger = isBigger(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
@@ -168,5 +199,7 @@ export const isSSRClientPreview = preview => {
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
   const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
-  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
+  return extendAndCachePreview(id, params.mode, { ...remotePreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
 };

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,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component, createRef } from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
@@ -9,7 +8,7 @@ import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECEN
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
-import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
+import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
@@ -25,6 +24,8 @@ import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.1.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -42,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'
@@ -102,7 +99,8 @@ export class CardBase extends Component {
       } = identifier;
       const {
         dimensions = {},
-        mediaClient
+        mediaClient,
+        createAnalyticsEvent
       } = this.props;
       return {
         mediaClient,
@@ -112,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
       };
     });
 
@@ -232,9 +232,10 @@ export class CardBase extends Component {
 
         const {
           identifier,
-          dimensions = {}
+          resizeMode
         } = this.props;
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+        const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
         this.safeSetState(updateState);
       } else {
         this.safeSetState({
@@ -551,16 +552,8 @@ export class CardBase extends Component {
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         cardEl: cardRef,
-        preAnchorRef: this.viewportPreAnchorRef,
-        postAnchorRef: this.viewportPostAnchorRef,
         onVisible: this.onCardInViewport
-      }, /*#__PURE__*/React.createElement(ViewportAnchor, {
-        ref: this.viewportPreAnchorRef,
-        offsetTop: -ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      }), card, /*#__PURE__*/React.createElement(ViewportAnchor, {
-        ref: this.viewportPostAnchorRef,
-        offsetTop: ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      })) : card;
+      }, card) : card;
     });
 
     _defineProperty(this, "storeSSRData", () => {
@@ -631,7 +624,7 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {},
+      resizeMode: _resizeMode,
       ssr: _ssr,
       mediaClient: _mediaClient
     } = this.props;
@@ -640,7 +633,8 @@ export class CardBase extends Component {
       const {
         id
       } = _identifier;
-      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+      const fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
+      _cardPreview = getCardPreviewFromCache(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -703,6 +697,8 @@ export class CardBase extends Component {
   }
 
   componentDidMount() {
+    var _getDocument;
+
     this.hasBeenMounted = true;
     const {
       isCardVisible,
@@ -738,14 +734,13 @@ 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) {
     const {
       mediaClient: prevMediaClient,
-      identifier: prevIdentifier,
-      dimensions: prevDimensions
+      identifier: prevIdentifier
     } = prevProps;
     const {
       isCardVisible: prevIsCardVisible
@@ -756,7 +751,8 @@ export class CardBase extends Component {
       dimensions,
       featureFlags,
       useInlinePlayer,
-      disableOverlay
+      disableOverlay,
+      resizeMode
     } = this.props;
     const {
       isCardVisible,
@@ -770,6 +766,7 @@ export class CardBase extends Component {
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const isNewMediaClient = prevMediaClient !== mediaClient;
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
@@ -804,7 +801,8 @@ export class CardBase extends Component {
       status,
       fileState,
       dimensions,
-      prevDimensions,
+      identifier,
+      fileImageMode,
       featureFlags,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview
@@ -837,9 +835,11 @@ export class CardBase extends Component {
   }
 
   componentWillUnmount() {
+    var _getDocument2;
+
     this.hasBeenMounted = false;
     this.unsubscribe();
-    getDocument().removeEventListener('copy', this.fireCopiedEvent);
+    (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
   }
 
   updateStateForIdentifier(identifier) {

package/dist/es2019/root/cardView.js

@@ -1,35 +1,38 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { FileCardImageView } from '../files';
 import { breakpointSize } from '../utils/breakpoint';
 import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
-import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
+import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
-import { Blanket } from './ui/blanket/styled';
+import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
-import Tooltip from '@atlaskit/tooltip';
-import { IconWrapper } from './ui/iconWrapper/styled';
-import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import SpinnerIcon from '@atlaskit/spinner';
+import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
-import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
+import { Wrapper } from './cardViewWrapper';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -123,9 +126,8 @@ export class CardViewBase extends React.Component {
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       const shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
-        className: newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return jsx(NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -139,7 +141,7 @@ export class CardViewBase extends React.Component {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+      }, shouldDisplayTooltip ? jsx(Tooltip, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -175,7 +177,7 @@ export class CardViewBase extends React.Component {
       const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       const errorMessage = getErrorMessage(status);
       const fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return /*#__PURE__*/React.createElement(FileCardImageView, {
+      return jsx(FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -237,7 +239,7 @@ export class CardViewBase extends React.Component {
 
         case 'processing':
           return { ...defaultConfig,
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
@@ -260,14 +262,14 @@ export class CardViewBase extends React.Component {
           } = error || {};
 
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+            iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            iconMessage = jsx(FailedToUpload, null);
             customTitleMessage = messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+            iconMessage = jsx(FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            iconMessage = jsx(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -320,7 +322,8 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -402,8 +405,8 @@ export class CardViewBase extends React.Component {
       testId
     } = this.props;
     const wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      "data-testid": testId || 'media-card-view',
+    return jsx(Wrapper, {
+      testId: testId || 'media-card-view',
       shouldUsePointerCursor: true,
       breakpointSize: breakpointSize(this.width),
       dimensions: wrapperDimensions,
@@ -414,10 +417,10 @@ export class CardViewBase extends React.Component {
   }
 
   renderSpinner(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+    }, jsx(SpinnerIcon, null));
   }
 
   shouldRenderPlayButton() {
@@ -437,16 +440,16 @@ export class CardViewBase extends React.Component {
   }
 
   renderPlayButton(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(PlayButton, null), ";");
+    }, jsx(PlayButton, null));
   } //This Blanket will provide a shadow backround for uploading status by
   //setting isFixed.
 
 
   renderBlanket(isFixed) {
-    return /*#__PURE__*/React.createElement(Blanket, {
+    return jsx(Blanket, {
       isFixed: isFixed
     });
   }
@@ -461,7 +464,7 @@ export class CardViewBase extends React.Component {
       name,
       createdAt
     } = metadata || {};
-    return !!name && /*#__PURE__*/React.createElement(TitleBox, {
+    return !!name && jsx(TitleBox, {
       name: name,
       createdAt: createdAt,
       breakpoint: this.breakpoint,
@@ -471,7 +474,7 @@ export class CardViewBase extends React.Component {
   }
 
   renderFailedTitleBox(customMessage) {
-    return /*#__PURE__*/React.createElement(FailedTitleBox, {
+    return jsx(FailedTitleBox, {
       breakpoint: this.breakpoint,
       customMessage: customMessage
     });
@@ -481,7 +484,7 @@ export class CardViewBase extends React.Component {
     const {
       progress
     } = this.props;
-    return /*#__PURE__*/React.createElement(ProgressBar, {
+    return jsx(ProgressBar, {
       progress: progress,
       breakpoint: this.breakpoint,
       positionBottom: positionBottom
@@ -500,7 +503,7 @@ export class CardViewBase extends React.Component {
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+    return !!cardPreview && jsx(ImageRenderer, {
       cardPreview: cardPreview,
       mediaType: mediaType,
       alt: alt,
@@ -517,7 +520,7 @@ export class CardViewBase extends React.Component {
     const {
       selected
     } = this.props;
-    return /*#__PURE__*/React.createElement(TickBox, {
+    return jsx(TickBox, {
       selected: selected
     });
   }
@@ -531,10 +534,10 @@ export class CardViewBase extends React.Component {
       mimeType,
       name
     } = metadata || {};
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+    }, jsx(MimeTypeIcon, {
       testId: 'media-card-file-type-icon',
       mediaType: mediaType,
       mimeType: mimeType,
@@ -554,7 +557,7 @@ export class CardViewBase extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ActionsBar, {
+    return jsx(ActionsBar, {
       actions: actionsWithDetails
     });
   }

package/dist/es2019/root/cardViewWrapper.js

@@ -0,0 +1,26 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles } from './styles';
+export const Wrapper = props => {
+  const {
+    testId,
+    shouldUsePointerCursor,
+    breakpointSize,
+    dimensions,
+    onClick,
+    onMouseEnter,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: wrapperStyles({
+      shouldUsePointerCursor,
+      breakpointSize,
+      dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};

package/dist/es2019/root/inlinePlayer.js

@@ -4,14 +4,13 @@ import React from 'react';
 import { Component } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
-import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
 import { ProgressBar } from './ui/progressBar/progressBar';
-import { calcBreakpointSize } from './ui/styled';
+import { calcBreakpointSize } from './ui/styles';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getElementDimension } from '../utils/getElementDimension';
-export const inlinePlayerClassName = 'media-card-inline-player';
+import { InlinePlayerWrapper } from './inlinePlayerWrapper';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     const {
@@ -234,9 +233,10 @@ export class InlinePlayerBase extends Component {
     }
 
     return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-      className: inlinePlayerClassName,
-      "data-testid": testId || 'media-card-inline-player',
-      selected: selected,
+      testId: testId || 'media-card-inline-player',
+      selected: {
+        selected
+      },
       onClick: onClick,
       innerRef: forwardRef || undefined,
       dimensions: dimensions

package/dist/es2019/root/inlinePlayerWrapper.js

@@ -0,0 +1,23 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles';
+export const InlinePlayerWrapper = props => {
+  const {
+    testId,
+    selected,
+    dimensions,
+    onClick,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: inlinePlayerClassName,
+    css: inlinePlayerWrapperStyles({
+      selected,
+      dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};