@atlaskit/media-card 78.1.2 → 78.2.1

package/dist/es2019/card/cardviews/cardViewWrapper.js

@@ -1,103 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @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 Tooltip from '@atlaskit/tooltip';
-import { ImageContainer, Wrapper } from '../ui/wrapper';
-import { attachDetailsToActions } from '../actions';
-import { TitleBox } from '../ui/titleBox/titleBox';
-import { TickBox } from '../ui/tickBox/tickBox';
-import { Blanket } from '../ui/blanket/blanket';
-import { ActionsBar } from '../ui/actionsBar/actionsBar';
-import { fileCardImageViewSelector } from '../classnames';
-import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
-export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
-  cardPreview,
-  testId,
-  dimensions,
-  appearance = 'auto',
-  metadata,
-  selected,
-  selectable,
-  actions,
-  breakpoint,
-  disableOverlay,
-  titleBoxBgColor,
-  titleBoxIcon,
-  shouldHideTooltip,
-  children,
-  onClick,
-  onMouseEnter,
-  mediaCardCursor,
-  customBlanket,
-  customTitleBox,
-  progressBar,
-  shouldOpenMediaViewer,
-  openMediaViewerButtonRef = null,
-  overriddenCreationDate,
-  ...props
-}, ref) => {
-  const {
-    name,
-    createdAt,
-    mediaType
-  } = metadata || {};
-  const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  const defaultBlanket = !disableOverlay && jsx(Blanket, null);
-  const defaultTitleBox = !disableOverlay && !!name && jsx(TitleBox, {
-    name: name,
-    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
-    breakpoint: breakpoint,
-    titleBoxIcon: titleBoxIcon,
-    titleBoxBgColor: titleBoxBgColor
-  });
-  const contents = jsx(React.Fragment, null, jsx(ImageContainer, _extends({
-    testId: fileCardImageViewSelector,
-    mediaName: name,
-    status: status,
-    selected: selected ? true : undefined
-  }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && jsx(TickBox, {
-    selected: selected
-  }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && jsx(ActionsBar, {
-    filename: name,
-    actions: actionsWithDetails
-  }));
-  const shouldRenderPlayButton = () => {
-    if (mediaType !== 'video' || !cardPreview) {
-      return false;
-    }
-    return true;
-  };
-  const isPlayButtonClickable = shouldRenderPlayButton() && disableOverlay;
-  const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-  const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-  const shouldDisplayBackground = !cardPreview || !disableOverlay;
-  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: ref,
-    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));
-});

package/dist/es2019/card/cardviews/errorCardView.js

@@ -1,86 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useRef } from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../utils/analytics';
-import { useBreakpoint } from '../useBreakpoint';
-import { CardViewWrapper } from './cardViewWrapper';
-import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
-import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
-import { PreviewUnavailable, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
-import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
-import { messages } from '@atlaskit/media-ui';
-const IconMessage = ({
-  error,
-  metadata
-}) => {
-  const {
-    secondaryError
-  } = error || {};
-  if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-    return jsx(PreviewCurrentlyUnavailable, null);
-  } else if (isUploadError(error)) {
-    return jsx(FailedToUpload, null);
-  } else if (!metadata) {
-    return jsx(FailedToLoad, null);
-  } else {
-    return jsx(PreviewUnavailable, null);
-  }
-};
-const ErrorCardViewBase = props => {
-  const {
-    error,
-    metadata,
-    dimensions,
-    disableOverlay
-  } = props;
-  const {
-    name,
-    mediaType,
-    mimeType
-  } = metadata || {};
-  const divRef = useRef(null);
-  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  const customMessage = isUploadError(props.error) ? messages.failed_to_upload : undefined;
-  const renderFailedTitleBox = !disableOverlay && (!name || !!customMessage);
-  const renderTitleBox = !disableOverlay && !!name && !customMessage;
-  const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-  return jsx(CardViewWrapper, _extends({}, props, {
-    metadata: metadata,
-    breakpoint: breakpoint,
-    "data-test-status": "error",
-    ref: divRef,
-    customTitleBox: renderFailedTitleBox ? () => jsx(FailedTitleBox, {
-      breakpoint: breakpoint,
-      customMessage: customMessage
-    }) : undefined
-  }), jsx(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, jsx(MimeTypeIcon, {
-    testId: "media-card-file-type-icon",
-    mediaType: mediaType,
-    mimeType: mimeType,
-    name: name
-  }), !renderFailedTitleBox && jsx(IconMessage, {
-    error: error,
-    metadata: metadata
-  })));
-};
-
-// TODO: check if analytics is correct
-
-export const ErrorCardView = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(ErrorCardViewBase);

package/dist/es2019/card/cardviews/iconCardView.js

@@ -1,74 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useEffect, useRef } from 'react';
-import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../utils/analytics';
-import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
-import { useBreakpoint } from '../useBreakpoint';
-import { CardViewWrapper } from './cardViewWrapper';
-import { ProgressBar } from '../ui/progressBar/progressBar';
-import { Blanket } from '../ui/blanket/blanket';
-// NOTE: should we call this Icon or UploadingCardView since we now have ProgressBar?
-
-const IconCardViewBase = props => {
-  const {
-    dimensions,
-    metadata,
-    disableOverlay,
-    innerRef,
-    progress,
-    status
-  } = props;
-  const divRef = useRef(null);
-  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  useEffect(() => {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  const {
-    name,
-    mediaType,
-    mimeType
-  } = metadata || {};
-  const hasTitleBox = !disableOverlay && !!name;
-  const isUploading = status === 'uploading';
-  return jsx(CardViewWrapper, _extends({}, props, {
-    metadata: metadata,
-    breakpoint: breakpoint,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    ref: divRef,
-    customBlanket: () => jsx(Blanket, {
-      isFixed: isUploading
-    }),
-    progressBar: isUploading ? () => jsx(ProgressBar, {
-      progress: progress,
-      breakpoint: breakpoint,
-      positionBottom: !hasTitleBox
-    }) : undefined
-  }), jsx(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, jsx(MimeTypeIcon, {
-    testId: "media-card-file-type-icon",
-    mediaType: mediaType,
-    mimeType: mimeType,
-    name: name
-  })));
-};
-
-// TODO: check if analytics is correct
-
-export const IconCardView = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(IconCardViewBase);

package/dist/es2019/card/cardviews/imageCardView.js

@@ -1,79 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useEffect, useRef } from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../utils/analytics';
-import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
-import { useBreakpoint } from '../useBreakpoint';
-import { CardViewWrapper } from './cardViewWrapper';
-import { ProgressBar } from '../ui/progressBar/progressBar';
-import { Blanket } from '../ui/blanket/blanket';
-const ImageCardViewBase = props => {
-  const {
-    status,
-    dimensions,
-    metadata,
-    disableOverlay,
-    innerRef,
-    progress,
-    cardPreview,
-    alt,
-    resizeMode,
-    onDisplayImage,
-    nativeLazyLoad,
-    forceSyncDisplay,
-    onImageLoad,
-    onImageError
-  } = props;
-  const divRef = useRef(null);
-  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  useEffect(() => {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  const {
-    name,
-    mediaType = 'unknown'
-  } = metadata || {};
-  const hasTitleBox = !disableOverlay && !!name;
-  const isUploading = status === 'uploading';
-  return jsx(CardViewWrapper, _extends({}, props, {
-    breakpoint: breakpoint,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    ref: divRef,
-    customBlanket: () => jsx(Blanket, {
-      isFixed: isUploading
-    }),
-    progressBar: isUploading ? () => jsx(ProgressBar, {
-      progress: progress,
-      breakpoint: breakpoint,
-      positionBottom: !hasTitleBox
-    }) : undefined
-  }), jsx(ImageRenderer, {
-    cardPreview: cardPreview,
-    mediaType: mediaType,
-    alt: alt,
-    resizeMode: resizeMode,
-    onDisplayImage: onDisplayImage,
-    onImageLoad: () => onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview),
-    onImageError: () => onImageError === null || onImageError === void 0 ? void 0 : onImageError(cardPreview),
-    nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
-  }));
-};
-
-// TODO: check if analytics is correct
-
-export const ImageCardView = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(ImageCardViewBase);

package/dist/es2019/card/cardviews/index.js

@@ -1,278 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import React, { useEffect, useState, useRef } from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../utils/analytics';
-import { useBreakpoint } from '../useBreakpoint';
-import { ProcessingCardView } from './processingCardView';
-import { ErrorCardView } from './errorCardView';
-import { VideoCardView } from './videoCardView';
-import { ImageCardView } from './imageCardView';
-import { IconCardView } from './iconCardView';
-import { LoadingCardView } from './loadingCardView';
-export const CardViewsBase = ({
-  innerRef,
-  onImageLoad,
-  onImageError,
-  dimensions,
-  appearance = 'auto',
-  onClick,
-  onMouseEnter,
-  testId,
-  metadata,
-  status,
-  selected,
-  selectable,
-  cardPreview,
-  mediaCardCursor,
-  shouldHideTooltip,
-  progress,
-  alt,
-  resizeMode,
-  onDisplayImage,
-  nativeLazyLoad,
-  forceSyncDisplay,
-  actions,
-  disableOverlay,
-  titleBoxBgColor,
-  titleBoxIcon,
-  error,
-  disableAnimation,
-  shouldOpenMediaViewer,
-  openMediaViewerButtonRef,
-  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]);
-
-  /* didImageRender movements */
-
-  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;
-    }
-    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 getRenderConfigByStatus = () => {
-    const {
-      mediaType
-    } = metadata || {};
-
-    // TODO: figure out if data-test-progress for all the card views
-
-    const baseProps = {
-      testId,
-      dimensions,
-      appearance,
-      metadata,
-      selected,
-      selectable,
-      actions,
-      breakpoint,
-      disableOverlay,
-      titleBoxBgColor,
-      titleBoxIcon,
-      shouldHideTooltip,
-      onClick,
-      onMouseEnter,
-      mediaCardCursor,
-      innerRef,
-      shouldOpenMediaViewer,
-      openMediaViewerButtonRef,
-      overriddenCreationDate
-    };
-    switch (status) {
-      case 'uploading':
-        if (cardPreview) {
-          return jsx(React.Fragment, null, jsx("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? jsx(VideoCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          })) : jsx(ImageCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), jsx("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, jsx(IconCardView, _extends({
-            status: status,
-            progress: progress
-          }, baseProps))));
-        } else {
-          return jsx(IconCardView, _extends({
-            status: status,
-            progress: progress
-          }, baseProps));
-        }
-      case 'processing':
-        if (cardPreview) {
-          return jsx(React.Fragment, null, jsx("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? jsx(VideoCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          })) : jsx(ImageCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), jsx("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, jsx(ProcessingCardView, _extends({
-            disableAnimation: disableAnimation
-          }, baseProps))));
-        } else {
-          return jsx(ProcessingCardView, _extends({
-            disableAnimation: disableAnimation
-          }, baseProps));
-        }
-      case 'complete':
-        if (cardPreview) {
-          return jsx(React.Fragment, null, jsx("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? jsx(VideoCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay
-          })) : jsx(ImageCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay
-          }))), jsx("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, jsx(IconCardView, _extends({
-            status: status
-          }, baseProps))));
-        } else {
-          return jsx(IconCardView, _extends({
-            status: status
-          }, baseProps));
-        }
-      case 'error':
-      case 'failed-processing':
-        return jsx(ErrorCardView, _extends({
-          disableAnimation: disableAnimation,
-          error: error
-        }, baseProps));
-      case 'loading-preview':
-      case 'loading':
-      default:
-        if (cardPreview) {
-          return jsx(React.Fragment, null, jsx("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, jsx(ImageCardView, _extends({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), jsx("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, jsx(LoadingCardView, _extends({}, baseProps, {
-            disableAnimation: disableAnimation
-          }))));
-        } else {
-          return jsx(LoadingCardView, _extends({}, baseProps, {
-            disableAnimation: disableAnimation
-          }));
-        }
-    }
-  };
-  return getRenderConfigByStatus();
-};
-export const CardViews = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(CardViewsBase);

package/dist/es2019/card/cardviews/loadingCardView.js

@@ -1,53 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useEffect, useRef } from 'react';
-import SpinnerIcon from '@atlaskit/spinner';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../../utils/analytics';
-import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
-import { useBreakpoint } from '../useBreakpoint';
-import { CardViewWrapper } from './cardViewWrapper';
-const LoadingCardViewBase = props => {
-  const {
-    dimensions,
-    metadata,
-    disableOverlay,
-    innerRef
-  } = props;
-  const divRef = useRef(null);
-  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  useEffect(() => {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  const {
-    name
-  } = metadata || {};
-  const hasTitleBox = !disableOverlay && !!name;
-  return jsx(CardViewWrapper, _extends({}, props, {
-    metadata: metadata,
-    breakpoint: breakpoint,
-    ref: divRef
-  }), jsx(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, jsx(SpinnerIcon, {
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  })));
-};
-
-// TODO: check if analytics is correct
-
-export const LoadingCardView = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(LoadingCardViewBase);