@atlaskit/media-card 77.12.4 → 78.0.1

package/dist/es2019/card/cardView.js

@@ -1,19 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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';
@@ -25,234 +20,76 @@ 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 class CardViewBase extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      didImageRender: false
-    });
-    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "onImageLoad", prevCardPreview => {
-      const {
-        onImageLoad,
-        cardPreview
-      } = this.props;
-      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(this, "onImageError", cardPreview => {
-      const {
-        onImageError
-      } = this.props;
-      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(this, "saveElementWidth", () => {
-      const {
-        dimensions
-      } = this.props;
-      if (!dimensions) {
-        return;
-      }
-      const {
-        width
-      } = dimensions;
-      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
-        const elementWidth = getElementDimension(this.divRef.current, 'width');
-        this.setState({
-          elementWidth
-        });
-      }
-    });
-    _defineProperty(this, "getRenderConfigByStatus", () => {
-      const {
-        cardPreview,
-        status,
-        metadata,
-        disableOverlay,
-        error,
-        selectable,
-        disableAnimation
-      } = this.props;
-      const {
-        name,
-        mediaType
-      } = metadata || {};
-      const {
-        didImageRender
-      } = this.state;
-      const isZeroSize = !!(metadata && metadata.size === 0);
-      const defaultConfig = {
-        renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!cardPreview,
-        renderPlayButton: !!cardPreview && mediaType === 'video',
-        renderBlanket: !disableOverlay,
-        renderTitleBox: !disableOverlay && !!name,
-        renderTickBox: !disableOverlay && !!selectable
-      };
-      switch (status) {
-        case 'uploading':
-          return {
-            ...defaultConfig,
-            renderBlanket: !disableOverlay || mediaType !== 'video',
-            isFixedBlanket: true,
-            renderProgressBar: true
-          };
-        case 'processing':
-          return {
-            ...defaultConfig,
-            iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
-              disableAnimation: disableAnimation
-            }) : undefined
-          };
-        case 'complete':
-          return defaultConfig;
-        case 'error':
-        case 'failed-processing':
-          const baseErrorConfig = {
-            ...defaultConfig,
-            renderTypeIcon: true,
-            renderImageRenderer: false,
-            renderTitleBox: false,
-            renderPlayButton: false
-          };
-          let iconMessage;
-          let customTitleMessage;
-          const {
-            secondaryError
-          } = error || {};
-          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) {
-            const renderFailedTitleBox = !name || !!customTitleMessage;
-            return {
-              ...baseErrorConfig,
-              renderTitleBox: !!name && !customTitleMessage,
-              renderFailedTitleBox,
-              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
-              customTitleMessage
-            };
-          }
-          return {
-            ...baseErrorConfig,
-            iconMessage
-          };
-        case 'loading-preview':
-        case 'loading':
-        default:
-          return {
-            ...defaultConfig,
-            renderPlayButton: false,
-            renderTypeIcon: false,
-            renderSpinner: !didImageRender
-          };
-      }
-    });
-    _defineProperty(this, "renderContents", () => {
-      const {
-        renderTypeIcon,
-        iconMessage,
-        renderImageRenderer,
-        renderSpinner,
-        renderPlayButton,
-        renderBlanket,
-        renderProgressBar,
-        renderTitleBox,
-        renderFailedTitleBox,
-        renderTickBox,
-        isFixedBlanket,
-        customTitleMessage
-      } = this.getRenderConfigByStatus();
-      const {
-        progress,
-        selected,
-        status,
-        metadata
-      } = this.props;
-      const {
-        name
-      } = metadata || {};
-      const 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());
-    });
-  }
-  componentDidMount() {
-    this.saveElementWidth();
-    const {
-      innerRef
-    } = this.props;
-    !!innerRef && !!this.divRef.current && innerRef(this.divRef.current);
-  }
-  componentDidUpdate({
-    cardPreview: prevCardPreview
-  }) {
-    const {
-      cardPreview
-    } = this.props;
-    // 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
-    });
-  }
-  get breakpoint() {
-    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
-    return calcBreakpointSize(parseInt(`${width}`, 10));
-  }
-  renderSpinner(hasTitleBox) {
-    return jsx(IconWrapper, {
-      breakpoint: this.breakpoint,
-      hasTitleBox: hasTitleBox
-    }, jsx(SpinnerIcon, {
-      testId: 'media-card-loading',
-      interactionName: 'media-card-loading'
-    }));
-  }
-  shouldRenderPlayButton() {
-    const {
-      metadata,
-      cardPreview
-    } = this.props;
+export const CardViewBase = ({
+  innerRef,
+  onImageLoad,
+  onImageError,
+  dimensions,
+  onClick,
+  onMouseEnter,
+  testId,
+  metadata,
+  status,
+  selected,
+  selectable,
+  cardPreview,
+  mediaCardCursor,
+  shouldHideTooltip,
+  progress,
+  alt,
+  resizeMode,
+  onDisplayImage,
+  nativeLazyLoad,
+  forceSyncDisplay,
+  actions,
+  disableOverlay,
+  titleBoxBgColor,
+  titleBoxIcon,
+  error,
+  disableAnimation,
+  openMediaViewerButtonRef = null,
+  shouldOpenMediaViewer,
+  overriddenCreationDate
+}) => {
+  const [didImageRender, setDidImageRender] = useState(false);
+  const divRef = useRef(null);
+  const prevCardPreviewRef = useRef();
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(() => {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  useEffect(() => {
+    // 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);
+    }
+    prevCardPreviewRef.current = cardPreview;
+  }, [cardPreview]);
+  const handleOnImageLoad = prevCardPreview => {
+    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
+      */
+    setDidImageRender(true);
+    onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview);
+  };
+  const handleOnImageError = prevCardPreview => {
+    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+    setDidImageRender(false);
+    onImageError === null || onImageError === void 0 ? void 0 : onImageError(cardPreview);
+  };
+  const shouldRenderPlayButton = () => {
     const {
       mediaType
     } = metadata || {};
@@ -260,181 +97,193 @@ export class CardViewBase extends React.Component {
       return false;
     }
     return true;
-  }
-  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.
-  renderBlanket(isFixed) {
-    return jsx(Blanket, {
-      isFixed: isFixed
-    });
-  }
-  renderTitleBox() {
-    const {
-      metadata,
-      titleBoxBgColor,
-      titleBoxIcon,
-      overriddenCreationDate
-    } = this.props;
+  };
+  const getRenderConfigByStatus = () => {
     const {
       name,
-      createdAt
-    } = metadata || {};
-    return !!name && jsx(TitleBox, {
-      name: name,
-      createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
-      breakpoint: this.breakpoint,
-      titleBoxIcon: titleBoxIcon,
-      titleBoxBgColor: titleBoxBgColor
-    });
-  }
-  renderFailedTitleBox(customMessage) {
-    return jsx(FailedTitleBox, {
-      breakpoint: this.breakpoint,
-      customMessage: customMessage
-    });
-  }
-  renderProgressBar(positionBottom) {
-    const {
-      progress
-    } = this.props;
-    return jsx(ProgressBar, {
-      progress: progress,
-      breakpoint: this.breakpoint,
-      positionBottom: positionBottom
-    });
-  }
-  renderImageRenderer() {
-    const {
-      cardPreview,
-      metadata: {
-        mediaType = 'unknown'
-      } = {},
-      alt,
-      resizeMode,
-      onDisplayImage,
-      nativeLazyLoad,
-      forceSyncDisplay
-    } = this.props;
-    const {
-      name
-    } = this.props.metadata || {};
-    const 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
-    });
-  }
-  renderTickBox() {
-    const {
-      selected
-    } = this.props;
-    return jsx(TickBox, {
-      selected: selected
-    });
-  }
-  renderMediaTypeIcon(hasTitleBox, iconMessage) {
-    const {
-      metadata
-    } = this.props;
-    const {
-      mediaType,
-      mimeType,
-      name
+      mediaType
     } = metadata || {};
-    return jsx(IconWrapper, {
-      breakpoint: this.breakpoint,
-      hasTitleBox: hasTitleBox
-    }, jsx(MimeTypeIcon, {
-      testId: 'media-card-file-type-icon',
-      mediaType: mediaType,
-      mimeType: mimeType,
-      name: name
-    }), iconMessage);
-  }
-  renderActionsBar() {
-    const {
-      disableOverlay,
-      actions,
-      metadata
-    } = this.props;
-    const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-    if (disableOverlay || !actions || actions.length === 0) {
-      return null;
+    const isZeroSize = metadata && metadata.size === 0;
+    const defaultConfig = {
+      renderTypeIcon: !didImageRender,
+      renderImageRenderer: !!cardPreview,
+      renderPlayButton: !!cardPreview && mediaType === 'video',
+      renderBlanket: !disableOverlay,
+      renderTitleBox: !disableOverlay && !!name,
+      renderTickBox: !disableOverlay && !!selectable
+    };
+    switch (status) {
+      case 'uploading':
+        return {
+          ...defaultConfig,
+          renderBlanket: !disableOverlay || mediaType !== 'video',
+          isFixedBlanket: true,
+          renderProgressBar: true
+        };
+      case 'processing':
+        return {
+          ...defaultConfig,
+          iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
+            disableAnimation: disableAnimation
+          }) : undefined
+        };
+      case 'complete':
+        return defaultConfig;
+      case 'error':
+      case 'failed-processing':
+        const baseErrorConfig = {
+          ...defaultConfig,
+          renderTypeIcon: true,
+          renderImageRenderer: false,
+          renderTitleBox: false,
+          renderPlayButton: false
+        };
+        let iconMessage;
+        let customTitleMessage;
+        const {
+          secondaryError
+        } = error || {};
+        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) {
+          const renderFailedTitleBox = !name || !!customTitleMessage;
+          return {
+            ...baseErrorConfig,
+            renderTitleBox: !!name && !customTitleMessage,
+            renderFailedTitleBox,
+            iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+            customTitleMessage
+          };
+        }
+        return {
+          ...baseErrorConfig,
+          iconMessage
+        };
+      case 'loading-preview':
+      case 'loading':
+      default:
+        return {
+          ...defaultConfig,
+          renderPlayButton: false,
+          renderTypeIcon: false,
+          renderSpinner: !didImageRender
+        };
     }
-    return jsx(ActionsBar, {
-      filename: metadata === null || metadata === void 0 ? void 0 : metadata.name,
-      actions: actionsWithDetails
-    });
-  }
-  render() {
-    const {
-      dimensions,
-      appearance,
-      onClick,
-      onMouseEnter,
-      testId,
-      metadata,
-      status,
-      selected,
-      selectable,
-      disableOverlay,
-      cardPreview,
-      mediaCardCursor,
-      shouldHideTooltip,
-      openMediaViewerButtonRef = null,
-      shouldOpenMediaViewer
-    } = this.props;
-    const {
-      name
-    } = metadata || {};
-    const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
-    const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-    const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-    // Disable tooltip for Media Single
-    const 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()));
-  }
-}
-_defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto'
-});
+  };
+  const {
+    renderTypeIcon,
+    iconMessage,
+    renderImageRenderer,
+    renderSpinner,
+    renderPlayButton,
+    renderBlanket,
+    renderProgressBar,
+    renderTitleBox,
+    renderFailedTitleBox,
+    renderTickBox,
+    isFixedBlanket,
+    customTitleMessage
+  } = getRenderConfigByStatus();
+  const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  const isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
+  const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  // Disable tooltip for Media Single
+  const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  const hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
+  const {
+    mediaType,
+    mimeType,
+    name,
+    createdAt
+  } = metadata || {};
+  const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
+  const 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 const CardView = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({
     eventType: 'ui',