@atlaskit/media-card 77.12.4 → 78.0.1

package/dist/cjs/card/cardView.js

@@ -1,30 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardViewBase = exports.CardView = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
-var _cardDimensions = require("../utils/cardDimensions");
-var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
-var _getElementDimension = require("../utils/getElementDimension");
 var _analytics = require("../utils/analytics");
 var _actions = require("./actions");
-var _styles = require("./ui/styles");
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
 var _titleBox = require("./ui/titleBox/titleBox");
 var _failedTitleBox = require("./ui/titleBox/failedTitleBox");
@@ -34,422 +26,268 @@ var _tickBox = require("./ui/tickBox/tickBox");
 var _blanket = require("./ui/blanket/blanket");
 var _actionsBar = require("./ui/actionsBar/actionsBar");
 var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
-var _iconMessage = require("./ui/iconMessage");
+var _iconMessage2 = require("./ui/iconMessage");
 var _errors = require("../errors");
 var _wrapper = require("./ui/wrapper");
 var _classnames = require("./classnames");
+var _useBreakpoint = require("./useBreakpoint");
 var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewerButton/openMediaViewerButton"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-/**
- * This is classic vanilla CardView class. To create an instance of class one would need to supply
- * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
- */
-var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(CardViewBase, _React$Component);
-  var _super = _createSuper(CardViewBase);
-  function CardViewBase() {
-    var _this;
-    (0, _classCallCheck2.default)(this, CardViewBase);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
+  var innerRef = _ref.innerRef,
+    onImageLoad = _ref.onImageLoad,
+    onImageError = _ref.onImageError,
+    dimensions = _ref.dimensions,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    testId = _ref.testId,
+    metadata = _ref.metadata,
+    status = _ref.status,
+    selected = _ref.selected,
+    selectable = _ref.selectable,
+    cardPreview = _ref.cardPreview,
+    mediaCardCursor = _ref.mediaCardCursor,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    progress = _ref.progress,
+    alt = _ref.alt,
+    resizeMode = _ref.resizeMode,
+    onDisplayImage = _ref.onDisplayImage,
+    nativeLazyLoad = _ref.nativeLazyLoad,
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    actions = _ref.actions,
+    disableOverlay = _ref.disableOverlay,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    error = _ref.error,
+    disableAnimation = _ref.disableAnimation,
+    _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    overriddenCreationDate = _ref.overriddenCreationDate;
+  var _useState = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    didImageRender = _useState2[0],
+    setDidImageRender = _useState2[1];
+  var divRef = (0, _react2.useRef)(null);
+  var prevCardPreviewRef = (0, _react2.useRef)();
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  (0, _react2.useEffect)(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  (0, _react2.useEffect)(function () {
+    // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
+    if (prevCardPreviewRef.current && !cardPreview) {
+      setDidImageRender(false);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      didImageRender: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react2.default.createRef());
-    (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 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(cardPreview);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (cardPreview) {
-      var onImageError = _this.props.onImageError;
-      _this.setState({
-        didImageRender: false
-      });
-      onImageError && onImageError(cardPreview);
-    });
-    // If the dimensions.width is a percentage, we need to transform it
-    // into a pixel value in order to get the right breakpoints applied.
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
-      var dimensions = _this.props.dimensions;
-      if (!dimensions) {
-        return;
-      }
-      var width = dimensions.width;
-      if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!_this.divRef.current) {
-        var elementWidth = (0, _getElementDimension.getElementDimension)(_this.divRef.current, 'width');
-        _this.setState({
-          elementWidth: elementWidth
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRenderConfigByStatus", function () {
-      var _this$props2 = _this.props,
-        cardPreview = _this$props2.cardPreview,
-        status = _this$props2.status,
-        metadata = _this$props2.metadata,
-        disableOverlay = _this$props2.disableOverlay,
-        error = _this$props2.error,
-        selectable = _this$props2.selectable,
-        disableAnimation = _this$props2.disableAnimation;
-      var _ref = metadata || {},
-        name = _ref.name,
-        mediaType = _ref.mediaType;
-      var didImageRender = _this.state.didImageRender;
-      var isZeroSize = !!(metadata && metadata.size === 0);
-      var defaultConfig = {
-        renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!cardPreview,
-        renderPlayButton: !!cardPreview && mediaType === 'video',
-        renderBlanket: !disableOverlay,
-        renderTitleBox: !disableOverlay && !!name,
-        renderTickBox: !disableOverlay && !!selectable
-      };
-      switch (status) {
-        case 'uploading':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderBlanket: !disableOverlay || mediaType !== 'video',
-            isFixedBlanket: true,
-            renderProgressBar: true
-          });
-        case 'processing':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage.CreatingPreview, {
-              disableAnimation: disableAnimation
-            }) : undefined
-          });
-        case 'complete':
-          return defaultConfig;
-        case 'error':
-        case 'failed-processing':
-          var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderTypeIcon: true,
-            renderImageRenderer: false,
-            renderTitleBox: false,
-            renderPlayButton: false
-          });
-          var iconMessage;
-          var customTitleMessage;
-          var _ref2 = error || {},
-            secondaryError = _ref2.secondaryError;
-          if ((0, _errors.isRateLimitedError)(secondaryError) || (0, _errors.isPollingError)(secondaryError)) {
-            iconMessage = (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
-          } else if ((0, _errors.isUploadError)(error)) {
-            iconMessage = (0, _react.jsx)(_iconMessage.FailedToUpload, null);
-            customTitleMessage = _mediaUi.messages.failed_to_upload;
-          } else if (!metadata) {
-            iconMessage = (0, _react.jsx)(_iconMessage.FailedToLoad, null);
-          } else {
-            iconMessage = (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
-          }
-          if (!disableOverlay) {
-            var renderFailedTitleBox = !name || !!customTitleMessage;
-            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !!name && !customTitleMessage,
-              renderFailedTitleBox: renderFailedTitleBox,
-              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
-              customTitleMessage: customTitleMessage
-            });
-          }
-          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-            iconMessage: iconMessage
-          });
-        case 'loading-preview':
-        case 'loading':
-        default:
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderPlayButton: false,
-            renderTypeIcon: false,
-            renderSpinner: !didImageRender
-          });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderContents", function () {
-      var _this$getRenderConfig = _this.getRenderConfigByStatus(),
-        renderTypeIcon = _this$getRenderConfig.renderTypeIcon,
-        iconMessage = _this$getRenderConfig.iconMessage,
-        renderImageRenderer = _this$getRenderConfig.renderImageRenderer,
-        renderSpinner = _this$getRenderConfig.renderSpinner,
-        renderPlayButton = _this$getRenderConfig.renderPlayButton,
-        renderBlanket = _this$getRenderConfig.renderBlanket,
-        renderProgressBar = _this$getRenderConfig.renderProgressBar,
-        renderTitleBox = _this$getRenderConfig.renderTitleBox,
-        renderFailedTitleBox = _this$getRenderConfig.renderFailedTitleBox,
-        renderTickBox = _this$getRenderConfig.renderTickBox,
-        isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
-        customTitleMessage = _this$getRenderConfig.customTitleMessage;
-      var _this$props3 = _this.props,
-        progress = _this$props3.progress,
-        selected = _this$props3.selected,
-        status = _this$props3.status,
-        metadata = _this$props3.metadata;
-      var _ref3 = metadata || {},
-        name = _ref3.name;
-      var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
-        testId: _classnames.fileCardImageViewSelector,
-        mediaName: name,
-        status: status,
-        progress: progress,
-        selected: selected ? true : undefined
-      }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(customTitleMessage), renderProgressBar && _this.renderProgressBar(!hasTitleBox), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(CardViewBase, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.saveElementWidth();
-      var innerRef = this.props.innerRef;
-      !!innerRef && !!this.divRef.current && innerRef(this.divRef.current);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref4) {
-      var prevCardPreview = _ref4.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
-      !!prevCardPreview && !cardPreview && this.setState({
-        didImageRender: false
-      });
-    }
-  }, {
-    key: "breakpoint",
-    get: function get() {
-      var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
-      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
-    }
-  }, {
-    key: "renderSpinner",
-    value: function renderSpinner(hasTitleBox) {
-      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, (0, _react.jsx)(_spinner.default, {
-        testId: 'media-card-loading',
-        interactionName: 'media-card-loading'
-      }));
-    }
-  }, {
-    key: "shouldRenderPlayButton",
-    value: function shouldRenderPlayButton() {
-      var _this$props4 = this.props,
-        metadata = _this$props4.metadata,
-        cardPreview = _this$props4.cardPreview;
-      var _ref5 = metadata || {},
-        mediaType = _ref5.mediaType;
-      if (mediaType !== 'video' || !cardPreview) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "renderPlayButton",
-    value: function renderPlayButton(hasTitleBox) {
-      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, (0, _react.jsx)(_playButton.PlayButton, null));
-    }
-
-    //This Blanket will provide a shadow backround for uploading status by
-    //setting isFixed.
-  }, {
-    key: "renderBlanket",
-    value: function renderBlanket(isFixed) {
-      return (0, _react.jsx)(_blanket.Blanket, {
-        isFixed: isFixed
-      });
+    prevCardPreviewRef.current = cardPreview;
+  }, [cardPreview]);
+  var handleOnImageLoad = function handleOnImageLoad(prevCardPreview) {
+    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
     }
-  }, {
-    key: "renderTitleBox",
-    value: function renderTitleBox() {
-      var _this$props5 = this.props,
-        metadata = _this$props5.metadata,
-        titleBoxBgColor = _this$props5.titleBoxBgColor,
-        titleBoxIcon = _this$props5.titleBoxIcon,
-        overriddenCreationDate = _this$props5.overriddenCreationDate;
-      var _ref6 = metadata || {},
-        name = _ref6.name,
-        createdAt = _ref6.createdAt;
-      return !!name && (0, _react.jsx)(_titleBox.TitleBox, {
-        name: name,
-        createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
-        breakpoint: this.breakpoint,
-        titleBoxIcon: titleBoxIcon,
-        titleBoxBgColor: titleBoxBgColor
-      });
+    /*
+        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 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
+      */
+    setDidImageRender(true);
+    onImageLoad === null || onImageLoad === void 0 || onImageLoad(cardPreview);
+  };
+  var handleOnImageError = function handleOnImageError(prevCardPreview) {
+    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
     }
-  }, {
-    key: "renderFailedTitleBox",
-    value: function renderFailedTitleBox(customMessage) {
-      return (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
-        breakpoint: this.breakpoint,
-        customMessage: customMessage
-      });
+    setDidImageRender(false);
+    onImageError === null || onImageError === void 0 || onImageError(cardPreview);
+  };
+  var shouldRenderPlayButton = function shouldRenderPlayButton() {
+    var _ref2 = metadata || {},
+      mediaType = _ref2.mediaType;
+    if (mediaType !== 'video' || !cardPreview) {
+      return false;
     }
-  }, {
-    key: "renderProgressBar",
-    value: function renderProgressBar(positionBottom) {
-      var progress = this.props.progress;
-      return (0, _react.jsx)(_progressBar.ProgressBar, {
-        progress: progress,
-        breakpoint: this.breakpoint,
-        positionBottom: positionBottom
-      });
-    }
-  }, {
-    key: "renderImageRenderer",
-    value: function renderImageRenderer() {
-      var _this$props6 = this.props,
-        cardPreview = _this$props6.cardPreview,
-        _this$props6$metadata = _this$props6.metadata,
-        _this$props6$metadata2 = _this$props6$metadata === void 0 ? {} : _this$props6$metadata,
-        _this$props6$metadata3 = _this$props6$metadata2.mediaType,
-        mediaType = _this$props6$metadata3 === void 0 ? 'unknown' : _this$props6$metadata3,
-        alt = _this$props6.alt,
-        resizeMode = _this$props6.resizeMode,
-        onDisplayImage = _this$props6.onDisplayImage,
-        nativeLazyLoad = _this$props6.nativeLazyLoad,
-        forceSyncDisplay = _this$props6.forceSyncDisplay;
-      var _ref7 = this.props.metadata || {},
-        name = _ref7.name;
-      var altText = alt || name;
-      return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
-        cardPreview: cardPreview,
-        mediaType: mediaType,
-        alt: altText,
-        resizeMode: resizeMode,
-        onDisplayImage: onDisplayImage,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError,
-        nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay
-      });
-    }
-  }, {
-    key: "renderTickBox",
-    value: function renderTickBox() {
-      var selected = this.props.selected;
-      return (0, _react.jsx)(_tickBox.TickBox, {
-        selected: selected
-      });
-    }
-  }, {
-    key: "renderMediaTypeIcon",
-    value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
-      var metadata = this.props.metadata;
-      var _ref8 = metadata || {},
-        mediaType = _ref8.mediaType,
-        mimeType = _ref8.mimeType,
-        name = _ref8.name;
-      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
-        testId: 'media-card-file-type-icon',
-        mediaType: mediaType,
-        mimeType: mimeType,
-        name: name
-      }), iconMessage);
-    }
-  }, {
-    key: "renderActionsBar",
-    value: function renderActionsBar() {
-      var _this$props7 = this.props,
-        disableOverlay = _this$props7.disableOverlay,
-        actions = _this$props7.actions,
-        metadata = _this$props7.metadata;
-      var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
-      if (disableOverlay || !actions || actions.length === 0) {
-        return null;
-      }
-      return (0, _react.jsx)(_actionsBar.ActionsBar, {
-        filename: metadata === null || metadata === void 0 ? void 0 : metadata.name,
-        actions: actionsWithDetails
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props8 = this.props,
-        dimensions = _this$props8.dimensions,
-        appearance = _this$props8.appearance,
-        onClick = _this$props8.onClick,
-        onMouseEnter = _this$props8.onMouseEnter,
-        testId = _this$props8.testId,
-        metadata = _this$props8.metadata,
-        status = _this$props8.status,
-        selected = _this$props8.selected,
-        selectable = _this$props8.selectable,
-        disableOverlay = _this$props8.disableOverlay,
-        cardPreview = _this$props8.cardPreview,
-        mediaCardCursor = _this$props8.mediaCardCursor,
-        shouldHideTooltip = _this$props8.shouldHideTooltip,
-        _this$props8$openMedi = _this$props8.openMediaViewerButtonRef,
-        openMediaViewerButtonRef = _this$props8$openMedi === void 0 ? null : _this$props8$openMedi,
-        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer;
-      var _ref9 = metadata || {},
-        name = _ref9.name;
-      var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
-      var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-      // Disable tooltip for Media Single
-      var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-      return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
-        fileName: name !== null && name !== void 0 ? name : '',
-        innerRef: openMediaViewerButtonRef,
-        onClick: onClick
-      }), (0, _react.jsx)(_wrapper.Wrapper, {
-        testId: testId || 'media-card-view',
-        dimensions: dimensions,
-        appearance: appearance,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        innerRef: this.divRef,
-        breakpoint: this.breakpoint,
-        mediaCardCursor: mediaCardCursor,
-        disableOverlay: !!disableOverlay,
-        selected: !!selected,
-        displayBackground: shouldDisplayBackground,
-        isPlayButtonClickable: isPlayButtonClickable,
-        isTickBoxSelectable: isTickBoxSelectable,
-        shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
-        content: name,
-        position: "bottom",
-        tag: 'div'
-      }, this.renderContents()) : this.renderContents()));
+    return true;
+  };
+  var getRenderConfigByStatus = function getRenderConfigByStatus() {
+    var _ref3 = metadata || {},
+      name = _ref3.name,
+      mediaType = _ref3.mediaType;
+    var isZeroSize = metadata && metadata.size === 0;
+    var defaultConfig = {
+      renderTypeIcon: !didImageRender,
+      renderImageRenderer: !!cardPreview,
+      renderPlayButton: !!cardPreview && mediaType === 'video',
+      renderBlanket: !disableOverlay,
+      renderTitleBox: !disableOverlay && !!name,
+      renderTickBox: !disableOverlay && !!selectable
+    };
+    switch (status) {
+      case 'uploading':
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderBlanket: !disableOverlay || mediaType !== 'video',
+          isFixedBlanket: true,
+          renderProgressBar: true
+        });
+      case 'processing':
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage2.CreatingPreview, {
+            disableAnimation: disableAnimation
+          }) : undefined
+        });
+      case 'complete':
+        return defaultConfig;
+      case 'error':
+      case 'failed-processing':
+        var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderTypeIcon: true,
+          renderImageRenderer: false,
+          renderTitleBox: false,
+          renderPlayButton: false
+        });
+        var _iconMessage;
+        var _customTitleMessage;
+        var _ref4 = error || {},
+          secondaryError = _ref4.secondaryError;
+        if ((0, _errors.isRateLimitedError)(secondaryError) || (0, _errors.isPollingError)(secondaryError)) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.PreviewCurrentlyUnavailable, null);
+        } else if ((0, _errors.isUploadError)(error)) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToUpload, null);
+          _customTitleMessage = _mediaUi.messages.failed_to_upload;
+        } else if (!metadata) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToLoad, null);
+        } else {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.PreviewUnavailable, null);
+        }
+        if (!disableOverlay) {
+          var _renderFailedTitleBox = !name || !!_customTitleMessage;
+          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+            renderTitleBox: !!name && !_customTitleMessage,
+            renderFailedTitleBox: _renderFailedTitleBox,
+            iconMessage: !_renderFailedTitleBox ? _iconMessage : undefined,
+            customTitleMessage: _customTitleMessage
+          });
+        }
+        return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+          iconMessage: _iconMessage
+        });
+      case 'loading-preview':
+      case 'loading':
+      default:
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderPlayButton: false,
+          renderTypeIcon: false,
+          renderSpinner: !didImageRender
+        });
     }
-  }]);
-  return CardViewBase;
-}(_react2.default.Component);
-(0, _defineProperty2.default)(CardViewBase, "defaultProps", {
-  appearance: 'auto'
-});
+  };
+  var _getRenderConfigBySta = getRenderConfigByStatus(),
+    renderTypeIcon = _getRenderConfigBySta.renderTypeIcon,
+    iconMessage = _getRenderConfigBySta.iconMessage,
+    renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
+    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderPlayButton = _getRenderConfigBySta.renderPlayButton,
+    renderBlanket = _getRenderConfigBySta.renderBlanket,
+    renderProgressBar = _getRenderConfigBySta.renderProgressBar,
+    renderTitleBox = _getRenderConfigBySta.renderTitleBox,
+    renderFailedTitleBox = _getRenderConfigBySta.renderFailedTitleBox,
+    renderTickBox = _getRenderConfigBySta.renderTickBox,
+    isFixedBlanket = _getRenderConfigBySta.isFixedBlanket,
+    customTitleMessage = _getRenderConfigBySta.customTitleMessage;
+  var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
+  var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  // Disable tooltip for Media Single
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  var hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
+  var _ref5 = metadata || {},
+    mediaType = _ref5.mediaType,
+    mimeType = _ref5.mimeType,
+    name = _ref5.name,
+    createdAt = _ref5.createdAt;
+  var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
+  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
+    testId: _classnames.fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  }, renderTypeIcon && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_spinner.default, {
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
+  })), renderImageRenderer && !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
+    alt: alt || name,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: handleOnImageLoad,
+    onImageError: handleOnImageError,
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }), renderPlayButton && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_playButton.PlayButton, null)), renderBlanket && (0, _react.jsx)(_blanket.Blanket, {
+    isFixed: isFixedBlanket
+  }), renderTitleBox && name && (0, _react.jsx)(_titleBox.TitleBox, {
+    name: name,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  }), renderFailedTitleBox && (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
+    breakpoint: breakpoint,
+    customMessage: customTitleMessage
+  }), renderProgressBar && (0, _react.jsx)(_progressBar.ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: !hasTitleBox
+  }), renderTickBox && (0, _react.jsx)(_tickBox.TickBox, {
+    selected: selected
+  })), disableOverlay || !actions || actions.length === 0 ? null : (0, _react.jsx)(_actionsBar.ActionsBar, {
+    filename: name,
+    actions: actionsWithDetails
+  }));
+  return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), (0, _react.jsx)(_wrapper.Wrapper, {
+    testId: testId || 'media-card-view',
+    dimensions: dimensions,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: divRef,
+    breakpoint: breakpoint,
+    mediaCardCursor: mediaCardCursor,
+    disableOverlay: !!disableOverlay,
+    selected: !!selected,
+    displayBackground: shouldDisplayBackground,
+    isPlayButtonClickable: isPlayButtonClickable,
+    isTickBoxSelectable: isTickBoxSelectable,
+    shouldDisplayTooltip: shouldDisplayTooltip
+  }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, contents) : contents));
+};
 var CardView = exports.CardView = (0, _analyticsNext.withAnalyticsEvents)({
   onClick: (0, _analytics.createAndFireMediaCardEvent)({
     eventType: 'ui',