@atlaskit/media-card 77.12.4 → 78.0.0

package/dist/esm/card/cardView.js

@@ -1,29 +1,18 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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
 import { jsx } from '@emotion/react';
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
-import { defaultImageCardDimensions } from '../utils/cardDimensions';
-import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
-import { getElementDimension } from '../utils/getElementDimension';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from './actions';
-import { calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -35,416 +24,262 @@ import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isUploadError, isRateLimitedError, isPollingError } from '../errors';
-import { ImageContainer, Wrapper } from './ui/wrapper';
+import { Wrapper, ImageContainer } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
+import { useBreakpoint } from './useBreakpoint';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
-/**
- * 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.
- */
-export var CardViewBase = /*#__PURE__*/function (_React$Component) {
-  _inherits(CardViewBase, _React$Component);
-  var _super = _createSuper(CardViewBase);
-  function CardViewBase() {
-    var _this;
-    _classCallCheck(this, CardViewBase);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didImageRender = _useState2[0],
+    setDidImageRender = _useState2[1];
+  var divRef = useRef(null);
+  var prevCardPreviewRef = useRef();
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  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));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      didImageRender: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "divRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_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);
-    });
-    _defineProperty(_assertThisInitialized(_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.
-    _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
-      var dimensions = _this.props.dimensions;
-      if (!dimensions) {
-        return;
-      }
-      var width = dimensions.width;
-      if (width && isValidPercentageUnit(width) && !!_this.divRef.current) {
-        var elementWidth = getElementDimension(_this.divRef.current, 'width');
-        _this.setState({
-          elementWidth: elementWidth
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_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 ? jsx(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 (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-            iconMessage = jsx(PreviewCurrentlyUnavailable, null);
-          } else if (isUploadError(error)) {
-            iconMessage = jsx(FailedToUpload, null);
-            customTitleMessage = messages.failed_to_upload;
-          } else if (!metadata) {
-            iconMessage = jsx(FailedToLoad, null);
-          } else {
-            iconMessage = jsx(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
-          });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_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 jsx(React.Fragment, null, jsx(ImageContainer, {
-        testId: 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;
-  }
-  _createClass(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 : '') || defaultImageCardDimensions.width;
-      return calcBreakpointSize(parseInt("".concat(width), 10));
-    }
-  }, {
-    key: "renderSpinner",
-    value: function renderSpinner(hasTitleBox) {
-      return jsx(IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, jsx(SpinnerIcon, {
-        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 jsx(IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, jsx(PlayButton, null));
-    }
-
-    //This Blanket will provide a shadow backround for uploading status by
-    //setting isFixed.
-  }, {
-    key: "renderBlanket",
-    value: function renderBlanket(isFixed) {
-      return jsx(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 && jsx(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 jsx(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 jsx(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 && jsx(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 jsx(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 jsx(IconWrapper, {
-        breakpoint: this.breakpoint,
-        hasTitleBox: hasTitleBox
-      }, jsx(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 ? attachDetailsToActions(actions, metadata) : [];
-      if (disableOverlay || !actions || actions.length === 0) {
-        return null;
-      }
-      return jsx(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 jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
-        fileName: name !== null && name !== void 0 ? name : '',
-        innerRef: openMediaViewerButtonRef,
-        onClick: onClick
-      }), jsx(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 ? jsx(Tooltip, {
-        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 ? jsx(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 (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+          _iconMessage = jsx(PreviewCurrentlyUnavailable, null);
+        } else if (isUploadError(error)) {
+          _iconMessage = jsx(FailedToUpload, null);
+          _customTitleMessage = messages.failed_to_upload;
+        } else if (!metadata) {
+          _iconMessage = jsx(FailedToLoad, null);
+        } else {
+          _iconMessage = jsx(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;
-}(React.Component);
-_defineProperty(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 ? attachDetailsToActions(actions, metadata) : [];
+  var contents = jsx(React.Fragment, null, jsx(ImageContainer, {
+    testId: fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  }, renderTypeIcon && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), iconMessage), renderSpinner && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(SpinnerIcon, {
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
+  })), renderImageRenderer && !!cardPreview && jsx(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 && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)), renderBlanket && jsx(Blanket, {
+    isFixed: isFixedBlanket
+  }), renderTitleBox && name && jsx(TitleBox, {
+    name: name,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  }), renderFailedTitleBox && jsx(FailedTitleBox, {
+    breakpoint: breakpoint,
+    customMessage: customTitleMessage
+  }), renderProgressBar && jsx(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: !hasTitleBox
+  }), renderTickBox && jsx(TickBox, {
+    selected: selected
+  })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {
+    filename: name,
+    actions: actionsWithDetails
+  }));
+  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+    fileName: name !== null && name !== void 0 ? name : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), jsx(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 ? jsx(Tooltip, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, contents) : contents));
+};
 export var CardView = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({
     eventType: 'ui',