@atlaskit/media-card 73.1.1 → 73.2.0

package/dist/cjs/root/cardView.js

@@ -83,6 +83,8 @@ var _cardConstants = require("./card/cardConstants");
 
 var _errors = require("../errors");
 
+var _types = require("../types");
+
 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; }
@@ -114,30 +116,37 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       didImageRender: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
-      var onImageLoad = _this.props.onImageLoad; // We render the icon & icon message always, even if there is dataURI available.
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (prevCardPreview) {
+      var _this$props = _this.props,
+          onImageLoad = _this$props.onImageLoad,
+          cardPreview = _this$props.cardPreview;
+
+      if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      } // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
       // behind the thumbnail in case the image has transparency.
-      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
 
+
       _this.setState({
         didImageRender: true
       });
 
-      onImageLoad && onImageLoad();
+      onImageLoad && onImageLoad(cardPreview);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (cardPreview) {
       var onImageError = _this.props.onImageError;
 
       _this.setState({
         didImageRender: false
       });
 
-      onImageError && onImageError();
+      onImageError && onImageError(cardPreview);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
       var dimensions = _this.props.dimensions;
@@ -157,24 +166,24 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFileNewExperience", function () {
-      var _this$props = _this.props,
-          dimensions = _this$props.dimensions,
-          appearance = _this$props.appearance,
-          onClick = _this$props.onClick,
-          onMouseEnter = _this$props.onMouseEnter,
-          testId = _this$props.testId,
-          metadata = _this$props.metadata,
-          status = _this$props.status,
-          selected = _this$props.selected,
-          selectable = _this$props.selectable,
-          disableOverlay = _this$props.disableOverlay,
-          dataURI = _this$props.dataURI;
+      var _this$props2 = _this.props,
+          dimensions = _this$props2.dimensions,
+          appearance = _this$props2.appearance,
+          onClick = _this$props2.onClick,
+          onMouseEnter = _this$props2.onMouseEnter,
+          testId = _this$props2.testId,
+          metadata = _this$props2.metadata,
+          status = _this$props2.status,
+          selected = _this$props2.selected,
+          selectable = _this$props2.selectable,
+          disableOverlay = _this$props2.disableOverlay,
+          cardPreview = _this$props2.cardPreview,
+          mediaCardCursor = _this$props2.mediaCardCursor;
 
       var _ref = metadata || {},
           name = _ref.name;
 
-      var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      var shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
+      var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
@@ -188,7 +197,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: onMouseEnter,
         innerRef: _this.divRef,
         breakpoint: _this.breakpoint,
-        shouldUsePointerCursor: shouldUsePointerCursor,
+        mediaCardCursor: mediaCardCursor,
         disableOverlay: !!disableOverlay,
         selected: !!selected,
         displayBackground: shouldDisplayBackground,
@@ -202,27 +211,30 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       }, _this.renderNewExperienceCard()) : _this.renderNewExperienceCard());
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFile", function () {
-      var _this$props2 = _this.props,
-          status = _this$props2.status,
-          mediaItemType = _this$props2.mediaItemType,
-          metadata = _this$props2.metadata,
-          dataURI = _this$props2.dataURI,
-          progress = _this$props2.progress,
-          resizeMode = _this$props2.resizeMode,
-          dimensions = _this$props2.dimensions,
-          selectable = _this$props2.selectable,
-          selected = _this$props2.selected,
-          disableOverlay = _this$props2.disableOverlay,
-          previewOrientation = _this$props2.previewOrientation,
-          alt = _this$props2.alt,
-          onDisplayImage = _this$props2.onDisplayImage,
-          actions = _this$props2.actions;
+      var _this$props3 = _this.props,
+          cardPreview = _this$props3.cardPreview,
+          status = _this$props3.status,
+          mediaItemType = _this$props3.mediaItemType,
+          metadata = _this$props3.metadata,
+          progress = _this$props3.progress,
+          resizeMode = _this$props3.resizeMode,
+          dimensions = _this$props3.dimensions,
+          selectable = _this$props3.selectable,
+          selected = _this$props3.selected,
+          disableOverlay = _this$props3.disableOverlay,
+          alt = _this$props3.alt,
+          onDisplayImage = _this$props3.onDisplayImage,
+          actions = _this$props3.actions;
+
+      var _ref2 = cardPreview || {},
+          dataURI = _ref2.dataURI,
+          orientation = _ref2.orientation;
 
-      var _ref2 = metadata || {},
-          name = _ref2.name,
-          mediaType = _ref2.mediaType,
-          mimeType = _ref2.mimeType,
-          size = _ref2.size;
+      var _ref3 = metadata || {},
+          name = _ref3.name,
+          mediaType = _ref3.mediaType,
+          mimeType = _ref3.mimeType,
+          size = _ref3.size;
 
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
       var errorMessage = (0, _getErrorMessage.getErrorMessage)(status);
@@ -244,32 +256,33 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onDisplayImage: onDisplayImage,
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
-        previewOrientation: previewOrientation,
+        previewOrientation: orientation,
         alt: alt,
         onImageLoad: _this.onImageLoad,
-        onImageError: _this.onImageError
+        onImageError: _this.onImageError,
+        cardPreview: cardPreview
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRenderConfigByStatus", function () {
-      var _this$props3 = _this.props,
-          dataURI = _this$props3.dataURI,
-          status = _this$props3.status,
-          metadata = _this$props3.metadata,
-          disableOverlay = _this$props3.disableOverlay,
-          error = _this$props3.error,
-          selectable = _this$props3.selectable,
-          disableAnimation = _this$props3.disableAnimation;
+      var _this$props4 = _this.props,
+          cardPreview = _this$props4.cardPreview,
+          status = _this$props4.status,
+          metadata = _this$props4.metadata,
+          disableOverlay = _this$props4.disableOverlay,
+          error = _this$props4.error,
+          selectable = _this$props4.selectable,
+          disableAnimation = _this$props4.disableAnimation;
 
-      var _ref3 = metadata || {},
-          name = _ref3.name,
-          mediaType = _ref3.mediaType;
+      var _ref4 = metadata || {},
+          name = _ref4.name,
+          mediaType = _ref4.mediaType;
 
       var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
         renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!dataURI,
-        renderPlayButton: !!dataURI && mediaType === 'video',
+        renderImageRenderer: !!cardPreview,
+        renderPlayButton: !!cardPreview && mediaType === 'video',
         renderBlanket: !disableOverlay,
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
@@ -306,8 +319,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           var iconMessage;
           var customTitleMessage;
 
-          var _ref4 = error || {},
-              secondaryError = _ref4.secondaryError;
+          var _ref5 = error || {},
+              secondaryError = _ref5.secondaryError;
 
           if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
             iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
@@ -358,14 +371,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
           customTitleMessage = _this$getRenderConfig.customTitleMessage;
 
-      var _this$props4 = _this.props,
-          progress = _this$props4.progress,
-          selected = _this$props4.selected,
-          status = _this$props4.status,
-          metadata = _this$props4.metadata;
+      var _this$props5 = _this.props,
+          progress = _this$props5.progress,
+          selected = _this$props5.selected,
+          status = _this$props5.status,
+          metadata = _this$props5.metadata;
 
-      var _ref5 = metadata || {},
-          name = _ref5.name;
+      var _ref6 = metadata || {},
+          name = _ref6.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.CardImageContainer, {
@@ -389,14 +402,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref6) {
-      var prevDataURI = _ref6.dataURI;
-      var dataURI = this.props.dataURI; // We should only switch didImageRender to false
-      // when dataURI goes undefined, not when it is updated.
+    value: function componentDidUpdate(_ref7) {
+      var prevCardPreview = _ref7.cardPreview;
+      var cardPreview = this.props.cardPreview; // We should only switch didImageRender to false
+      // when cardPreview goes undefined, not when it is updated.
       // as this method could be triggered after onImageLoad callback,
       // falling on a race condition
 
-      prevDataURI && !dataURI && this.setState({
+      !!prevCardPreview && !cardPreview && this.setState({
         didImageRender: false
       });
     }
@@ -411,10 +424,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return elementWidth;
       }
 
-      var _ref7 = this.props.dimensions || {
+      var _ref8 = this.props.dimensions || {
         width: undefined
       },
-          width = _ref7.width;
+          width = _ref8.width;
 
       if (!width) {
         return _cardDimensions.defaultImageCardDimensions.width;
@@ -439,12 +452,12 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return this.renderFileNewExperience();
       }
 
-      var _this$props5 = this.props,
-          dimensions = _this$props5.dimensions,
-          appearance = _this$props5.appearance,
-          onClick = _this$props5.onClick,
-          onMouseEnter = _this$props5.onMouseEnter,
-          testId = _this$props5.testId;
+      var _this$props6 = this.props,
+          dimensions = _this$props6.dimensions,
+          appearance = _this$props6.appearance,
+          onClick = _this$props6.onClick,
+          onMouseEnter = _this$props6.onMouseEnter,
+          testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : (0, _cardDimensions.getDefaultCardDimensions)(appearance);
       return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
         "data-testid": testId || 'media-card-view',
@@ -467,14 +480,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "shouldRenderPlayButton",
     value: function shouldRenderPlayButton() {
-      var _this$props6 = this.props,
-          metadata = _this$props6.metadata,
-          dataURI = _this$props6.dataURI;
+      var _this$props7 = this.props,
+          metadata = _this$props7.metadata,
+          cardPreview = _this$props7.cardPreview;
 
-      var _ref8 = metadata || {},
-          mediaType = _ref8.mediaType;
+      var _ref9 = metadata || {},
+          mediaType = _ref9.mediaType;
 
-      if (mediaType !== 'video' || !dataURI) {
+      if (mediaType !== 'video' || !cardPreview) {
         return false;
       }
 
@@ -500,14 +513,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTitleBox",
     value: function renderTitleBox() {
-      var _this$props7 = this.props,
-          metadata = _this$props7.metadata,
-          titleBoxBgColor = _this$props7.titleBoxBgColor,
-          titleBoxIcon = _this$props7.titleBoxIcon;
+      var _this$props8 = this.props,
+          metadata = _this$props8.metadata,
+          titleBoxBgColor = _this$props8.titleBoxBgColor,
+          titleBoxIcon = _this$props8.titleBoxIcon;
 
-      var _ref9 = metadata || {},
-          name = _ref9.name,
-          createdAt = _ref9.createdAt;
+      var _ref10 = metadata || {},
+          name = _ref10.name,
+          createdAt = _ref10.createdAt;
 
       return !!name && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
         name: name,
@@ -538,22 +551,20 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderImageRenderer",
     value: function renderImageRenderer() {
-      var _this$props8 = this.props,
-          dataURI = _this$props8.dataURI,
-          _this$props8$metadata = _this$props8.metadata;
-      _this$props8$metadata = _this$props8$metadata === void 0 ? {} : _this$props8$metadata;
-      var _this$props8$metadata2 = _this$props8$metadata.mediaType,
-          mediaType = _this$props8$metadata2 === void 0 ? 'unknown' : _this$props8$metadata2,
-          previewOrientation = _this$props8.previewOrientation,
-          alt = _this$props8.alt,
-          resizeMode = _this$props8.resizeMode,
-          onDisplayImage = _this$props8.onDisplayImage,
-          nativeLazyLoad = _this$props8.nativeLazyLoad,
-          forceSyncDisplay = _this$props8.forceSyncDisplay;
-      return !!dataURI && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
-        dataURI: dataURI,
+      var _this$props9 = this.props,
+          cardPreview = _this$props9.cardPreview,
+          _this$props9$metadata = _this$props9.metadata;
+      _this$props9$metadata = _this$props9$metadata === void 0 ? {} : _this$props9$metadata;
+      var _this$props9$metadata2 = _this$props9$metadata.mediaType,
+          mediaType = _this$props9$metadata2 === void 0 ? 'unknown' : _this$props9$metadata2,
+          alt = _this$props9.alt,
+          resizeMode = _this$props9.resizeMode,
+          onDisplayImage = _this$props9.onDisplayImage,
+          nativeLazyLoad = _this$props9.nativeLazyLoad,
+          forceSyncDisplay = _this$props9.forceSyncDisplay;
+      return !!cardPreview && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
+        cardPreview: cardPreview,
         mediaType: mediaType,
-        previewOrientation: previewOrientation,
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
@@ -576,10 +587,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
 
-      var _ref10 = metadata || {},
-          mediaType = _ref10.mediaType,
-          mimeType = _ref10.mimeType,
-          name = _ref10.name;
+      var _ref11 = metadata || {},
+          mediaType = _ref11.mediaType,
+          mimeType = _ref11.mimeType,
+          name = _ref11.name;
 
       return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
         breakpoint: this.breakpoint,
@@ -594,10 +605,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderActionsBar",
     value: function renderActionsBar() {
-      var _this$props9 = this.props,
-          disableOverlay = _this$props9.disableOverlay,
-          actions = _this$props9.actions,
-          metadata = _this$props9.metadata;
+      var _this$props10 = this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          actions = _this$props10.actions,
+          metadata = _this$props10.metadata;
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
 
       if (disableOverlay || !actions || actions.length === 0) {
@@ -614,7 +625,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
 exports.CardViewBase = CardViewBase;
 (0, _defineProperty2.default)(CardViewBase, "defaultProps", {
-  appearance: 'auto'
+  appearance: 'auto',
+  mediaCardCursor: _types.MediaCardCursor.NoAction
 });
 var CardView = (0, _analyticsNext.withAnalyticsEvents)({
   onClick: (0, _analytics.createAndFireMediaCardEvent)({

package/dist/cjs/root/inlinePlayer.js

@@ -331,7 +331,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           testId = _this$props4.testId,
           identifier = _this$props4.identifier,
           forwardRef = _this$props4.forwardRef,
-          autoplay = _this$props4.autoplay;
+          autoplay = _this$props4.autoplay,
+          cardPreview = _this$props4.cardPreview;
       var _this$state = this.state,
           fileSrc = _this$state.fileSrc,
           isUploading = _this$state.isUploading,
@@ -364,7 +365,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
             contentId: identifier.id
           },
           originalDimensions: originalDimensions,
-          showControls: checkMouseMovement
+          showControls: checkMouseMovement,
+          poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
         });
       }), isUploading ? /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
         progress: progress,

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

@@ -22,8 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var ImageRenderer = function ImageRenderer(_ref) {
-  var dataURI = _ref.dataURI,
-      previewOrientation = _ref.previewOrientation,
+  var cardPreview = _ref.cardPreview,
       alt = _ref.alt,
       resizeMode = _ref.resizeMode,
       onImageLoad = _ref.onImageLoad,
@@ -38,12 +37,21 @@ var ImageRenderer = function ImageRenderer(_ref) {
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  var onLoad = function onLoad() {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  var onError = function onError() {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));

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

@@ -88,8 +88,8 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';
 };
 
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
+var getCursorStyle = function getCursorStyle(cursor) {
+  return "cursor: ".concat(cursor, ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -112,14 +112,14 @@ var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject ||
   var breakpoint = _ref6.breakpoint,
       dimensions = _ref6.dimensions,
       appearance = _ref6.appearance,
-      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
       disableOverlay = _ref6.disableOverlay,
       displayBackground = _ref6.displayBackground,
       selected = _ref6.selected,
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
+      shouldDisplayTooltip = _ref6.shouldDisplayTooltip,
+      mediaCardCursor = _ref6.mediaCardCursor;
+  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(mediaCardCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
 
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;

package/dist/cjs/types.js

@@ -2,4 +2,13 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.MediaCardCursor = void 0;
+var MediaCardCursor;
+exports.MediaCardCursor = MediaCardCursor;
+
+(function (MediaCardCursor) {
+  MediaCardCursor["Action"] = "pointer";
+  MediaCardCursor["NoAction"] = "default";
+  MediaCardCursor["NotReady"] = "wait";
+})(MediaCardCursor || (exports.MediaCardCursor = MediaCardCursor = {}));

package/dist/cjs/utils/analytics.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAndFireMediaCardEvent = void 0;
+exports.extractErrorInfo = exports.createAndFireMediaCardEvent = 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;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaCommon = require("@atlaskit/media-common");
@@ -15,6 +19,10 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _errors = require("../errors");
 
+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; }
+
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -129,20 +137,28 @@ var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error
 
 exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 
+var extractErrorInfo = function extractErrorInfo(error) {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error)
+  };
+};
+
+exports.extractErrorInfo = extractErrorInfo;
+
 var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
     action: 'failed',
     actionSubject: 'mediaCardRender',
-    attributes: {
+    attributes: _objectSpread(_objectSpread({
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
-      status: 'fail',
-      failReason: getRenderErrorFailReason(error),
-      error: getRenderErrorErrorReason(error),
-      errorDetail: getRenderErrorErrorDetail(error),
+      status: 'fail'
+    }, extractErrorInfo(error)), {}, {
       request: getRenderErrorRequestMetadata(error)
-    }
+    })
   };
 };
 

package/dist/cjs/utils/dimensionComparer.js

@@ -9,24 +9,18 @@ var _isValidPercentageUnit = require("./isValidPercentageUnit");
 
 var _containsPixelUnit = require("./containsPixelUnit");
 
+var isPixelEquivalent = function isPixelEquivalent(dimension) {
+  return typeof dimension === 'number' || (0, _containsPixelUnit.containsPixelUnit)("".concat(dimension));
+};
+
 var canCompareDimension = function canCompareDimension(current, next) {
   if (!current || !next) {
     return false;
   }
 
-  if ((0, _isValidPercentageUnit.isValidPercentageUnit)(current) && (0, _isValidPercentageUnit.isValidPercentageUnit)(next)) {
-    return true;
-  }
-
-  if ((0, _containsPixelUnit.containsPixelUnit)("".concat(current)) && (0, _containsPixelUnit.containsPixelUnit)("".concat(next))) {
-    return true;
-  }
-
-  if (typeof current === 'number' && typeof next === 'number') {
-    return true;
-  }
-
-  return false;
+  var bothPixelEquivalent = isPixelEquivalent(current) && isPixelEquivalent(next);
+  var bothPercentage = (0, _isValidPercentageUnit.isValidPercentageUnit)(current) && (0, _isValidPercentageUnit.isValidPercentageUnit)(next);
+  return bothPixelEquivalent || bothPercentage;
 };
 
 exports.canCompareDimension = canCompareDimension;

package/dist/cjs/utils/getMediaCardCursor.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaCardCursor = void 0;
+
+var _types = require("../types");
+
+var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) {
+  // If error status or no action is requested = NoAction
+  if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
+    return _types.MediaCardCursor.NoAction;
+  }
+
+  if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
+    return _types.MediaCardCursor.NotReady;
+  } else if (mediaType === 'video' && hasCardPreview && useInlinePlayer) {
+    return _types.MediaCardCursor.Action;
+  }
+
+  if (useMediaViewer) {
+    return _types.MediaCardCursor.Action;
+  }
+
+  return _types.MediaCardCursor.NoAction;
+};
+
+exports.getMediaCardCursor = getMediaCardCursor;