@atlaskit/media-card 78.1.2 → 78.2.1

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

@@ -1,93 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageCardView = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../utils/analytics");
-var _imageRenderer = require("../ui/imageRenderer/imageRenderer");
-var _useBreakpoint = require("../useBreakpoint");
-var _cardViewWrapper = require("./cardViewWrapper");
-var _progressBar = require("../ui/progressBar/progressBar");
-var _blanket = require("../ui/blanket/blanket");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var ImageCardViewBase = function ImageCardViewBase(props) {
-  var status = props.status,
-    dimensions = props.dimensions,
-    metadata = props.metadata,
-    disableOverlay = props.disableOverlay,
-    innerRef = props.innerRef,
-    progress = props.progress,
-    cardPreview = props.cardPreview,
-    alt = props.alt,
-    resizeMode = props.resizeMode,
-    onDisplayImage = props.onDisplayImage,
-    nativeLazyLoad = props.nativeLazyLoad,
-    forceSyncDisplay = props.forceSyncDisplay,
-    _onImageLoad = props.onImageLoad,
-    _onImageError = props.onImageError;
-  var divRef = (0, _react2.useRef)(null);
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  var _ref = metadata || {},
-    name = _ref.name,
-    _ref$mediaType = _ref.mediaType,
-    mediaType = _ref$mediaType === void 0 ? 'unknown' : _ref$mediaType;
-  var hasTitleBox = !disableOverlay && !!name;
-  var isUploading = status === 'uploading';
-  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
-    breakpoint: breakpoint,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    ref: divRef,
-    customBlanket: function customBlanket() {
-      return (0, _react.jsx)(_blanket.Blanket, {
-        isFixed: isUploading
-      });
-    },
-    progressBar: isUploading ? function () {
-      return (0, _react.jsx)(_progressBar.ProgressBar, {
-        progress: progress,
-        breakpoint: breakpoint,
-        positionBottom: !hasTitleBox
-      });
-    } : undefined
-  }), (0, _react.jsx)(_imageRenderer.ImageRenderer, {
-    cardPreview: cardPreview,
-    mediaType: mediaType,
-    alt: alt,
-    resizeMode: resizeMode,
-    onDisplayImage: onDisplayImage,
-    onImageLoad: function onImageLoad() {
-      return _onImageLoad === null || _onImageLoad === void 0 ? void 0 : _onImageLoad(cardPreview);
-    },
-    onImageError: function onImageError() {
-      return _onImageError === null || _onImageError === void 0 ? void 0 : _onImageError(cardPreview);
-    },
-    nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
-  }));
-};
-
-// TODO: check if analytics is correct
-
-var ImageCardView = exports.ImageCardView = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(ImageCardViewBase);

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

@@ -1,292 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardViewsBase = exports.CardViews = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../utils/analytics");
-var _useBreakpoint = require("../useBreakpoint");
-var _processingCardView = require("./processingCardView");
-var _errorCardView = require("./errorCardView");
-var _videoCardView = require("./videoCardView");
-var _imageCardView = require("./imageCardView");
-var _iconCardView = require("./iconCardView");
-var _loadingCardView = require("./loadingCardView");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
-  var innerRef = _ref.innerRef,
-    onImageLoad = _ref.onImageLoad,
-    onImageError = _ref.onImageError,
-    dimensions = _ref.dimensions,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
-    onClick = _ref.onClick,
-    onMouseEnter = _ref.onMouseEnter,
-    testId = _ref.testId,
-    metadata = _ref.metadata,
-    status = _ref.status,
-    selected = _ref.selected,
-    selectable = _ref.selectable,
-    cardPreview = _ref.cardPreview,
-    mediaCardCursor = _ref.mediaCardCursor,
-    shouldHideTooltip = _ref.shouldHideTooltip,
-    progress = _ref.progress,
-    alt = _ref.alt,
-    resizeMode = _ref.resizeMode,
-    onDisplayImage = _ref.onDisplayImage,
-    nativeLazyLoad = _ref.nativeLazyLoad,
-    forceSyncDisplay = _ref.forceSyncDisplay,
-    actions = _ref.actions,
-    disableOverlay = _ref.disableOverlay,
-    titleBoxBgColor = _ref.titleBoxBgColor,
-    titleBoxIcon = _ref.titleBoxIcon,
-    error = _ref.error,
-    disableAnimation = _ref.disableAnimation,
-    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef,
-    overriddenCreationDate = _ref.overriddenCreationDate;
-  var _useState = (0, _react2.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    didImageRender = _useState2[0],
-    setDidImageRender = _useState2[1];
-  var divRef = (0, _react2.useRef)(null);
-  var prevCardPreviewRef = (0, _react2.useRef)();
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-
-  /* didImageRender movements */
-
-  (0, _react2.useEffect)(function () {
-    // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
-    if (prevCardPreviewRef.current && !cardPreview) {
-      setDidImageRender(false);
-    }
-    prevCardPreviewRef.current = cardPreview;
-  }, [cardPreview]);
-  var handleOnImageLoad = function handleOnImageLoad(prevCardPreview) {
-    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
-      return;
-    }
-    setDidImageRender(true);
-    onImageLoad === null || onImageLoad === void 0 || onImageLoad(cardPreview);
-  };
-  var handleOnImageError = function handleOnImageError(prevCardPreview) {
-    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
-      return;
-    }
-    setDidImageRender(false);
-    onImageError === null || onImageError === void 0 || onImageError(cardPreview);
-  };
-  var getRenderConfigByStatus = function getRenderConfigByStatus() {
-    var _ref2 = metadata || {},
-      mediaType = _ref2.mediaType;
-
-    // TODO: figure out if data-test-progress for all the card views
-
-    var baseProps = {
-      testId: testId,
-      dimensions: dimensions,
-      appearance: appearance,
-      metadata: metadata,
-      selected: selected,
-      selectable: selectable,
-      actions: actions,
-      breakpoint: breakpoint,
-      disableOverlay: disableOverlay,
-      titleBoxBgColor: titleBoxBgColor,
-      titleBoxIcon: titleBoxIcon,
-      shouldHideTooltip: shouldHideTooltip,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      mediaCardCursor: mediaCardCursor,
-      innerRef: innerRef,
-      shouldOpenMediaViewer: shouldOpenMediaViewer,
-      openMediaViewerButtonRef: openMediaViewerButtonRef,
-      overriddenCreationDate: overriddenCreationDate
-    };
-    switch (status) {
-      case 'uploading':
-        if (cardPreview) {
-          return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? (0, _react.jsx)(_videoCardView.VideoCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          })) : (0, _react.jsx)(_imageCardView.ImageCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), (0, _react.jsx)("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, (0, _react.jsx)(_iconCardView.IconCardView, (0, _extends2.default)({
-            status: status,
-            progress: progress
-          }, baseProps))));
-        } else {
-          return (0, _react.jsx)(_iconCardView.IconCardView, (0, _extends2.default)({
-            status: status,
-            progress: progress
-          }, baseProps));
-        }
-      case 'processing':
-        if (cardPreview) {
-          return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? (0, _react.jsx)(_videoCardView.VideoCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          })) : (0, _react.jsx)(_imageCardView.ImageCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), (0, _react.jsx)("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, (0, _react.jsx)(_processingCardView.ProcessingCardView, (0, _extends2.default)({
-            disableAnimation: disableAnimation
-          }, baseProps))));
-        } else {
-          return (0, _react.jsx)(_processingCardView.ProcessingCardView, (0, _extends2.default)({
-            disableAnimation: disableAnimation
-          }, baseProps));
-        }
-      case 'complete':
-        if (cardPreview) {
-          return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, mediaType === 'video' ? (0, _react.jsx)(_videoCardView.VideoCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay
-          })) : (0, _react.jsx)(_imageCardView.ImageCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay
-          }))), (0, _react.jsx)("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, (0, _react.jsx)(_iconCardView.IconCardView, (0, _extends2.default)({
-            status: status
-          }, baseProps))));
-        } else {
-          return (0, _react.jsx)(_iconCardView.IconCardView, (0, _extends2.default)({
-            status: status
-          }, baseProps));
-        }
-      case 'error':
-      case 'failed-processing':
-        return (0, _react.jsx)(_errorCardView.ErrorCardView, (0, _extends2.default)({
-          disableAnimation: disableAnimation,
-          error: error
-        }, baseProps));
-      case 'loading-preview':
-      case 'loading':
-      default:
-        if (cardPreview) {
-          return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-            style: {
-              display: !didImageRender ? 'none' : 'inline'
-            }
-          }, (0, _react.jsx)(_imageCardView.ImageCardView, (0, _extends2.default)({}, baseProps, {
-            status: status,
-            cardPreview: cardPreview,
-            alt: alt,
-            resizeMode: resizeMode,
-            onDisplayImage: onDisplayImage,
-            onImageLoad: handleOnImageLoad,
-            onImageError: handleOnImageError,
-            nativeLazyLoad: nativeLazyLoad,
-            forceSyncDisplay: forceSyncDisplay,
-            progress: progress
-          }))), (0, _react.jsx)("div", {
-            style: {
-              display: didImageRender ? 'none' : 'inline'
-            }
-          }, (0, _react.jsx)(_loadingCardView.LoadingCardView, (0, _extends2.default)({}, baseProps, {
-            disableAnimation: disableAnimation
-          }))));
-        } else {
-          return (0, _react.jsx)(_loadingCardView.LoadingCardView, (0, _extends2.default)({}, baseProps, {
-            disableAnimation: disableAnimation
-          }));
-        }
-    }
-  };
-  return getRenderConfigByStatus();
-};
-var CardViews = exports.CardViews = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(CardViewsBase);

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

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LoadingCardView = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../utils/analytics");
-var _iconWrapper = require("../ui/iconWrapper/iconWrapper");
-var _useBreakpoint = require("../useBreakpoint");
-var _cardViewWrapper = require("./cardViewWrapper");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var LoadingCardViewBase = function LoadingCardViewBase(props) {
-  var dimensions = props.dimensions,
-    metadata = props.metadata,
-    disableOverlay = props.disableOverlay,
-    innerRef = props.innerRef;
-  var divRef = (0, _react2.useRef)(null);
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  var _ref = metadata || {},
-    name = _ref.name;
-  var hasTitleBox = !disableOverlay && !!name;
-  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
-    metadata: metadata,
-    breakpoint: breakpoint,
-    ref: divRef
-  }), (0, _react.jsx)(_iconWrapper.IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, (0, _react.jsx)(_spinner.default, {
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  })));
-};
-
-// TODO: check if analytics is correct
-
-var LoadingCardView = exports.LoadingCardView = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(LoadingCardViewBase);

package/dist/cjs/card/cardviews/processingCardView.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProcessingCardView = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-var _analytics = require("../../utils/analytics");
-var _iconWrapper = require("../ui/iconWrapper/iconWrapper");
-var _iconMessage = require("../ui/iconMessage");
-var _useBreakpoint = require("../useBreakpoint");
-var _cardViewWrapper = require("./cardViewWrapper");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var ProcessingCardViewBase = function ProcessingCardViewBase(props) {
-  var disableAnimation = props.disableAnimation,
-    dimensions = props.dimensions,
-    metadata = props.metadata,
-    disableOverlay = props.disableOverlay,
-    innerRef = props.innerRef;
-  var divRef = (0, _react2.useRef)(null);
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  var _ref = metadata || {},
-    name = _ref.name,
-    size = _ref.size,
-    mediaType = _ref.mediaType,
-    mimeType = _ref.mimeType;
-  var isZeroSize = size === 0;
-  var hasTitleBox = !disableOverlay && !!name;
-  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
-    metadata: metadata,
-    breakpoint: breakpoint,
-    "data-test-status": "processing",
-    ref: divRef
-  }), (0, _react.jsx)(_iconWrapper.IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
-    testId: "media-card-file-type-icon",
-    mediaType: mediaType,
-    mimeType: mimeType,
-    name: name
-  }), !isZeroSize && (0, _react.jsx)(_iconMessage.CreatingPreview, {
-    disableAnimation: disableAnimation
-  })));
-};
-
-// TODO: check if analytics is correct
-
-var ProcessingCardView = exports.ProcessingCardView = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(ProcessingCardViewBase);

package/dist/cjs/card/cardviews/videoCardView.js

@@ -1,98 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoCardView = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../utils/analytics");
-var _iconWrapper = require("../ui/iconWrapper/iconWrapper");
-var _playButton = require("../ui/playButton/playButton");
-var _imageRenderer = require("../ui/imageRenderer/imageRenderer");
-var _useBreakpoint = require("../useBreakpoint");
-var _cardViewWrapper = require("./cardViewWrapper");
-var _progressBar = require("../ui/progressBar/progressBar");
-var _blanket = require("../ui/blanket/blanket");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var VideoCardViewBase = function VideoCardViewBase(props) {
-  var status = props.status,
-    dimensions = props.dimensions,
-    metadata = props.metadata,
-    disableOverlay = props.disableOverlay,
-    innerRef = props.innerRef,
-    progress = props.progress,
-    cardPreview = props.cardPreview,
-    alt = props.alt,
-    resizeMode = props.resizeMode,
-    onDisplayImage = props.onDisplayImage,
-    nativeLazyLoad = props.nativeLazyLoad,
-    forceSyncDisplay = props.forceSyncDisplay,
-    _onImageLoad = props.onImageLoad,
-    _onImageError = props.onImageError;
-  var divRef = (0, _react2.useRef)(null);
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
-  var _ref = metadata || {},
-    name = _ref.name,
-    _ref$mediaType = _ref.mediaType,
-    mediaType = _ref$mediaType === void 0 ? 'unknown' : _ref$mediaType;
-  var hasTitleBox = !disableOverlay && !!name;
-  var isUploading = status === 'uploading';
-  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
-    breakpoint: breakpoint,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    ref: divRef,
-    customBlanket: function customBlanket() {
-      return disableOverlay ? null : (0, _react.jsx)(_blanket.Blanket, {
-        isFixed: isUploading
-      });
-    },
-    progressBar: isUploading ? function () {
-      return (0, _react.jsx)(_progressBar.ProgressBar, {
-        progress: progress,
-        breakpoint: breakpoint,
-        positionBottom: !hasTitleBox
-      });
-    } : undefined
-  }), (0, _react.jsx)(_imageRenderer.ImageRenderer, {
-    cardPreview: cardPreview,
-    mediaType: mediaType,
-    alt: alt,
-    resizeMode: resizeMode,
-    onDisplayImage: onDisplayImage,
-    onImageLoad: function onImageLoad() {
-      return _onImageLoad === null || _onImageLoad === void 0 ? void 0 : _onImageLoad(cardPreview);
-    },
-    onImageError: function onImageError() {
-      return _onImageError === null || _onImageError === void 0 ? void 0 : _onImageError(cardPreview);
-    },
-    nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
-  }), cardPreview && (0, _react.jsx)(_iconWrapper.IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
-  }, (0, _react.jsx)(_playButton.PlayButton, null)));
-};
-
-// TODO: check if analytics is correct
-
-var VideoCardView = exports.VideoCardView = (0, _analyticsNext.withAnalyticsEvents)({
-  onClick: (0, _analytics.createAndFireMediaCardEvent)({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    attributes: {}
-  })
-})(VideoCardViewBase);