@atlaskit/media-card 77.5.2 → 77.6.1

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

@@ -0,0 +1,282 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+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;
+  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
+    };
+    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/v2/cardviews/loadingCardView.js

@@ -0,0 +1,53 @@
+"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");
+/** @jsx jsx */
+
+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"
+  })));
+};
+
+// 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/v2/cardviews/processingCardView.js

@@ -0,0 +1,65 @@
+"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");
+/** @jsx jsx */
+
+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/v2/cardviews/videoCardView.js

@@ -0,0 +1,94 @@
+"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");
+/** @jsx jsx */
+
+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);

package/dist/cjs/card/v2/fileCard.js

@@ -9,6 +9,7 @@ exports.FileCard = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
@@ -31,12 +32,14 @@ var _cardDimensions = require("../../utils/cardDimensions");
 var _cardAnalytics = require("../cardAnalytics");
 var _getCardPreview = require("../getCardPreview");
 var _cardViewV = require("./cardViewV2");
+var _cardviews = require("./cardviews");
 var _inlinePlayerLazyV = require("./inlinePlayerLazyV2");
 var _useFilePreview2 = require("./useFilePreview");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LoadedCardView = (0, _platformFeatureFlags.getBooleanFF)('platform.media-experience.card-views-refactor_b91lr') ? _cardviews.CardViews : _cardViewV.CardViewV2;
 var FileCard = exports.FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
@@ -519,7 +522,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
     var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
-    var card = /*#__PURE__*/_react.default.createElement(_cardViewV.CardViewV2, {
+    var card = /*#__PURE__*/_react.default.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
       mediaItemType: mediaItemType,

package/dist/cjs/card/v2/useFilePreview/analytics.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRenderErrorFailReason = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getErrorTraceContext = exports.extractErrorInfo = void 0;
+var _mediaClient = require("@atlaskit/media-client");
+var _errors = require("./errors");
+var getErrorTraceContext = exports.getErrorTraceContext = function getErrorTraceContext(error) {
+  if ((0, _errors.isMediaFilePreviewError)(error) && !!error.secondaryError) {
+    if ((0, _mediaClient.isRequestError)(error.secondaryError)) {
+      var _error$secondaryError;
+      return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+    } else if ((0, _errors.isMediaFileStateError)(error.secondaryError)) {
+      var _error$secondaryError2;
+      return (_error$secondaryError2 = error.secondaryError.details) === null || _error$secondaryError2 === void 0 || (_error$secondaryError2 = _error$secondaryError2.metadata) === null || _error$secondaryError2 === void 0 ? void 0 : _error$secondaryError2.traceContext;
+    }
+  }
+};
+var getRenderErrorFailReason = exports.getRenderErrorFailReason = function getRenderErrorFailReason(error) {
+  if ((0, _errors.isMediaFilePreviewError)(error)) {
+    return error.primaryReason;
+  } else {
+    return 'nativeError';
+  }
+};
+var getRenderErrorErrorReason = exports.getRenderErrorErrorReason = function getRenderErrorErrorReason(error) {
+  if ((0, _errors.isMediaFilePreviewError)(error) && error.secondaryError) {
+    var mediaClientReason = (0, _errors.isMediaFileStateError)(error.secondaryError) ? (0, _errors.getFileStateErrorReason)(error.secondaryError) : (0, _mediaClient.getMediaClientErrorReason)(error.secondaryError);
+    if (mediaClientReason !== 'unknown') {
+      return mediaClientReason;
+    }
+  }
+  return 'nativeError';
+};
+var getRenderErrorErrorDetail = exports.getRenderErrorErrorDetail = function getRenderErrorErrorDetail(error) {
+  if ((0, _errors.isMediaFilePreviewError)(error) && error.secondaryError) {
+    return error.secondaryError.message;
+  } else {
+    return error.message;
+  }
+};
+var extractErrorInfo = exports.extractErrorInfo = function extractErrorInfo(error, metadataTraceContext) {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
+  };
+};

package/dist/cjs/card/v2/useFilePreview/errors.js

@@ -4,8 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLocalPreviewError = exports.ensureMediaFilePreviewError = exports.SsrPreviewError = exports.RemotePreviewError = exports.MediaFilePreviewError = exports.LocalPreviewError = exports.ImageLoadError = void 0;
+exports.ensureMediaFilePreviewError = exports.SsrPreviewError = exports.RemotePreviewError = exports.MediaFilePreviewError = exports.LocalPreviewError = exports.ImageLoadError = void 0;
+exports.getFileStateErrorReason = getFileStateErrorReason;
+exports.isLocalPreviewError = void 0;
 exports.isMediaFilePreviewError = isMediaFilePreviewError;
+exports.isMediaFileStateError = isMediaFileStateError;
 exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = void 0;
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -14,6 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /**
@@ -129,4 +133,11 @@ var ensureMediaFilePreviewError = exports.ensureMediaFilePreviewError = function
     return error;
   }
   return new MediaFilePreviewError(primaryReason, error);
-};
+};
+function isMediaFileStateError(err) {
+  return err instanceof _mediaClientReact.MediaFileStateError;
+}
+function getFileStateErrorReason(err) {
+  var _err$details$reason, _err$details;
+  return (_err$details$reason = (_err$details = err.details) === null || _err$details === void 0 ? void 0 : _err$details.reason) !== null && _err$details$reason !== void 0 ? _err$details$reason : 'unknown';
+}

package/dist/cjs/card/v2/useFilePreview/helpers.js

@@ -49,7 +49,7 @@ var createRequestDimensions = exports.createRequestDimensions = function createR
   return result;
 };
 
-/** Stores the provided value in a   */
+/** Stores the provided value in a ref object to avoid "component rerenders" when the value is used as a hook dependency */
 function useCurrentValueRef(value) {
   var ref = (0, _react.useRef)(value);
   ref.current = value;

package/dist/cjs/card/v2/useFilePreview/useFilePreview.js

@@ -14,7 +14,7 @@ var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaCommon = require("@atlaskit/media-common");
 var _react = require("react");
 var _errors = require("./errors");
-var _analytics = require("../../../utils/analytics");
+var _analytics = require("./analytics");
 var _helpers = require("./helpers");
 var _globalScope = require("./globalScope");
 var _getPreview = require("./getPreview");

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.5.2",
+        packageName: "77.6.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.2";
+var packageVersion = "77.6.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.5.2";
+const packageVersion = "77.6.1";
 export class CardBase extends Component {
   constructor(props) {
     super(props);