@atlaskit/media-card 77.5.2 → 77.6.1

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.5.2";
+const packageVersion = "77.6.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.5.2";
+const packageVersion = "77.6.1";
 export const CardV2Base = ({
   identifier,
   ...otherProps

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

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Wrapper } from '../../ui/wrapper';
+import { attachDetailsToActions } from '../../actions';
+import { cardImageContainerStyles } from '../../ui/styles';
+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';
+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,
+  ...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: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  });
+  const content = jsx(React.Fragment, null, jsx("div", _extends({
+    css: cardImageContainerStyles,
+    className: fileCardImageViewSelector,
+    "data-testid": fileCardImageViewSelector,
+    "data-test-media-name": name,
+    "data-test-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, {
+    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(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"
+  }, content) : content);
+});

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+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/v2/cardviews/iconCardView.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+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/v2/cardviews/imageCardView.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+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/v2/cardviews/index.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+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
+}) => {
+  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
+    };
+    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/v2/cardviews/loadingCardView.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+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"
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export const LoadingCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(LoadingCardViewBase);