@atlaskit/media-card 77.5.2 → 77.6.0

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);

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

@@ -0,0 +1,60 @@
+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 { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { CreatingPreview } from '../../ui/iconMessage';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+const ProcessingCardViewBase = props => {
+  const {
+    disableAnimation,
+    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,
+    size,
+    mediaType,
+    mimeType
+  } = metadata || {};
+  const isZeroSize = size === 0;
+  const hasTitleBox = !disableOverlay && !!name;
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": "processing",
+    ref: divRef
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), !isZeroSize && jsx(CreatingPreview, {
+    disableAnimation: disableAnimation
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export const ProcessingCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ProcessingCardViewBase);

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

@@ -0,0 +1,80 @@
+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 { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { PlayButton } from '../../ui/playButton/playButton';
+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 VideoCardViewBase = 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: () => disableOverlay ? null : 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
+  }), cardPreview && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)));
+};
+
+// TODO: check if analytics is correct
+
+export const VideoCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(VideoCardViewBase);