@atlaskit/media-card 77.0.3 → 77.1.1

package/dist/cjs/utils/metadata.js

@@ -26,7 +26,7 @@ var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
     processingStatus: getProcessingStatusFromFileState(state.status)
   };
 };
-var getFileDetails = function getFileDetails(identifier, fileState) {
+var getFileDetails = exports.getFileDetails = function getFileDetails(identifier, fileState) {
   return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
     id: identifier.id
   } : {
@@ -34,5 +34,4 @@ var getFileDetails = function getFileDetails(identifier, fileState) {
     name: identifier.name || identifier.dataURI,
     mediaType: 'image'
   };
-};
-exports.getFileDetails = getFileDetails;
+};

package/dist/cjs/utils/mockIntersectionObserver.js

@@ -9,7 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var noop = function noop() {};
-var MockIntersectionObserver = /*#__PURE__*/function () {
+var MockIntersectionObserver = exports.MockIntersectionObserver = /*#__PURE__*/function () {
   function MockIntersectionObserver() {
     (0, _classCallCheck2.default)(this, MockIntersectionObserver);
     (0, _defineProperty2.default)(this, "callback", noop);
@@ -22,15 +22,15 @@ var MockIntersectionObserver = /*#__PURE__*/function () {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       var outerThis = this;
       this.mockObserver = /*#__PURE__*/function () {
-        function _class2(callback) {
-          (0, _classCallCheck2.default)(this, _class2);
+        function _class3(callback) {
+          (0, _classCallCheck2.default)(this, _class3);
           (0, _defineProperty2.default)(this, "observe", observe !== null && observe !== void 0 ? observe : noop);
           (0, _defineProperty2.default)(this, "unobserve", noop);
           (0, _defineProperty2.default)(this, "disconnect", disconnect !== null && disconnect !== void 0 ? disconnect : noop);
           outerThis.callback = callback;
           outerThis.mockObserverInstance = this;
         }
-        return (0, _createClass2.default)(_class2);
+        return (0, _createClass2.default)(_class3);
       }();
     }
   }, {
@@ -64,5 +64,4 @@ var MockIntersectionObserver = /*#__PURE__*/function () {
     }
   }]);
   return MockIntersectionObserver;
-}();
-exports.MockIntersectionObserver = MockIntersectionObserver;
+}();

package/dist/cjs/utils/objectURLCache.js

@@ -15,8 +15,7 @@ var _lru_map = require("lru_map");
 var _eventemitter = require("eventemitter2");
 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; } }
-var PREVIEW_CACHE_LRU_SIZE = 50;
-exports.PREVIEW_CACHE_LRU_SIZE = PREVIEW_CACHE_LRU_SIZE;
+var PREVIEW_CACHE_LRU_SIZE = exports.PREVIEW_CACHE_LRU_SIZE = 50;
 var ExtendedLRUCache = /*#__PURE__*/function (_LRUMap) {
   (0, _inherits2.default)(ExtendedLRUCache, _LRUMap);
   var _super = _createSuper(ExtendedLRUCache);
@@ -42,7 +41,7 @@ var ExtendedLRUCache = /*#__PURE__*/function (_LRUMap) {
   }]);
   return ExtendedLRUCache;
 }(_lru_map.LRUMap);
-var ObjectURLCache = /*#__PURE__*/function () {
+var ObjectURLCache = exports.ObjectURLCache = /*#__PURE__*/function () {
   function ObjectURLCache(size) {
     (0, _classCallCheck2.default)(this, ObjectURLCache);
     this.cache = new ExtendedLRUCache(size);
@@ -81,8 +80,6 @@ var ObjectURLCache = /*#__PURE__*/function () {
   }]);
   return ObjectURLCache;
 }();
-exports.ObjectURLCache = ObjectURLCache;
-var createObjectURLCache = function createObjectURLCache() {
+var createObjectURLCache = exports.createObjectURLCache = function createObjectURLCache() {
   return new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);
-};
-exports.createObjectURLCache = createObjectURLCache;
+};

package/dist/cjs/utils/preventClickThrough.js

@@ -17,11 +17,10 @@ function PreventClickThrough(_ref) {
     "data-testid": "prevent-click-through"
   }, children);
 }
-var createPreventClickThrough = function createPreventClickThrough(onClick) {
+var createPreventClickThrough = exports.createPreventClickThrough = function createPreventClickThrough(onClick) {
   return function (event) {
     event.stopPropagation();
     event.preventDefault();
     onClick();
   };
-};
-exports.createPreventClickThrough = createPreventClickThrough;
+};

package/dist/cjs/utils/printScript.js

@@ -21,14 +21,12 @@ var printParams = function printParams(args) {
     return printParam(arg);
   }).join(',');
 };
-var printFunctionCall = function printFunctionCall(fn) {
+var printFunctionCall = exports.printFunctionCall = function printFunctionCall(fn) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
   return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
 };
-exports.printFunctionCall = printFunctionCall;
-var printScript = function printScript(statements) {
+var printScript = exports.printScript = function printScript(statements) {
   return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
-};
-exports.printScript = printScript;
+};

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.0.3";
+var packageVersion = "77.1.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
@@ -30,11 +30,10 @@ var getExperience = function getExperience(id) {
   }
   return concurrentExperience.getInstance(id);
 };
-var startUfoExperience = function startUfoExperience(id) {
+var startUfoExperience = exports.startUfoExperience = function startUfoExperience(id) {
   getExperience(id).start();
 };
-exports.startUfoExperience = startUfoExperience;
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
+var completeUfoExperience = exports.completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
   switch (status) {
     case 'complete':
@@ -63,7 +62,6 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       break;
   }
 };
-exports.completeUfoExperience = completeUfoExperience;
 var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {

package/dist/cjs/utils/videoIsPlayable.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.videoIsPlayable = void 0;
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
-var videoIsPlayable = function videoIsPlayable(isBannedLocalPreview, fileState, mimeType) {
+var videoIsPlayable = exports.videoIsPlayable = function videoIsPlayable(isBannedLocalPreview, fileState, mimeType) {
   var localPreviewAvailable = mimeType && !isBannedLocalPreview && (0, _mediaCommon.isVideoMimeTypeSupportedByBrowser)(mimeType);
   var videoProcessedByServer = fileState && (0, _mediaClient.isProcessedFileState)(fileState);
   return !!(localPreviewAvailable || videoProcessedByServer);
-};
-exports.videoIsPlayable = videoIsPlayable;
+};

package/dist/cjs/utils/videoSnapshot.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.takeSnapshot = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var takeSnapshot = /*#__PURE__*/function () {
+var takeSnapshot = exports.takeSnapshot = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -55,5 +55,4 @@ var takeSnapshot = /*#__PURE__*/function () {
   return function takeSnapshot(_x) {
     return _ref.apply(this, arguments);
   };
-}();
-exports.takeSnapshot = takeSnapshot;
+}();

package/dist/cjs/utils/viewportDetector.js

@@ -59,7 +59,7 @@ var ViewportObserver = function ViewportObserver(_ref) {
   }, [cardEl, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
-var ViewportDetector = function ViewportDetector(_ref2) {
+var ViewportDetector = exports.ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,
     onVisible = _ref2.onVisible,
     children = _ref2.children;
@@ -70,5 +70,4 @@ var ViewportDetector = function ViewportDetector(_ref2) {
     cardEl: cardEl,
     onVisible: onVisible
   }, children);
-};
-exports.ViewportDetector = ViewportDetector;
+};

package/dist/es2019/card/card.js

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

package/dist/es2019/card/cardSwitcher.js

@@ -1,4 +1,8 @@
+import React from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import CardLoader from './cardLoader';
 import CardV2Loader from './v2/cardV2Loader';
-export default getBooleanFF('platform.media-experience.cardv2_7zann') ? CardV2Loader : CardLoader;
+function CardSwitcher(props) {
+  return getBooleanFF('platform.media-experience.cardv2_7zann') ? /*#__PURE__*/React.createElement(CardV2Loader, props) : /*#__PURE__*/React.createElement(CardLoader, props);
+}
+export default CardSwitcher;

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.0.3";
+const packageVersion = "77.1.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/blanket/blanket.js

@@ -7,6 +7,7 @@ export const Blanket = props => {
   } = props;
   return jsx("div", {
     css: blanketStyles(isFixed),
-    className: blanketClassName
+    className: blanketClassName,
+    "data-testid": "media-card-blanket"
   });
 };

package/dist/es2019/card/ui/tickBox/styles.js

@@ -11,7 +11,7 @@ export const getSelectedStyles = selected => selected ? `background-color: ${`va
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const wrapperStyles = selected => css`
-  ${transition()}
+  ${transition && transition()}
   font-size: 14px;
   width: 14px;
   height: 14px;

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

@@ -9,7 +9,7 @@ import { getRandomHex } from '@atlaskit/media-common';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
-import { CardView } from '../cardView';
+import { CardViewV2 } from './cardViewV2';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { videoIsPlayable } from '../../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperi
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { useFileState } from '@atlaskit/media-client-react';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.3";
+const packageVersion = "77.1.1";
 export class CardV2Base extends Component {
   constructor(props) {
     super(props);
@@ -537,7 +537,7 @@ export class CardV2Base extends Component {
       // Force Media Image to always display img for SSR
       const forceSyncDisplay = !!ssr;
       const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
-      const card = /*#__PURE__*/React.createElement(CardView, {
+      const card = /*#__PURE__*/React.createElement(CardViewV2, {
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,
@@ -672,7 +672,7 @@ export class CardV2Base extends Component {
       previewDidRender: false,
       error: _error,
       wasResolvedUpfrontPreview: false,
-      shouldUpdateStateForIdentifier: false
+      shouldUpdateStateForIdentifier: _isCardVisible && isFileIdentifier(_identifier)
     };
   }
   getSSRPreview(ssr, identifier, mediaClient) {

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

@@ -0,0 +1,300 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../utils/cardDimensions';
+import { isValidPercentageUnit } from '../../utils/isValidPercentageUnit';
+import { getElementDimension } from '../../utils/getElementDimension';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { attachDetailsToActions } from '../actions';
+import { cardImageContainerStyles, calcBreakpointSize } from '../ui/styles';
+import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
+import { TitleBox } from '../ui/titleBox/titleBox';
+import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { PlayButton } from '../ui/playButton/playButton';
+import { TickBox } from '../ui/tickBox/tickBox';
+import { Blanket } from '../ui/blanket/blanket';
+import { ActionsBar } from '../ui/actionsBar/actionsBar';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
+import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
+import { Wrapper } from '../ui/wrapper';
+import { fileCardImageViewSelector } from '../classnames';
+export const CardViewV2Base = ({
+  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 [elementWidth, setElementWidth] = useState();
+  const [didImageRender, setDidImageRender] = useState(false);
+  const divRef = useRef(null);
+  const prevCardPreviewRef = useRef();
+  const width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
+  useEffect(() => {
+    // If the dimensions.width is a percentage, we need to transform it into a pixel value in order to get the right breakpoints applied.
+    if (width && isValidPercentageUnit(width) && !!divRef.current) {
+      const elementWidth = getElementDimension(divRef.current, 'width');
+      setElementWidth(elementWidth);
+    }
+  }, [width]);
+  useEffect(() => {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  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;
+    }
+
+    /*
+      We render the icon & icon message always, even if there is cardPreview available.
+       If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
+       If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
+       It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
+    */
+
+    setDidImageRender(true);
+    onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview);
+  };
+  const handleOnImageError = cardPreview => {
+    setDidImageRender(false);
+    onImageError === null || onImageError === void 0 ? void 0 : onImageError(cardPreview);
+  };
+  const breakpoint = useMemo(() => {
+    const width = elementWidth || (dimensions ? dimensions.width : '') || defaultImageCardDimensions.width;
+    return calcBreakpointSize(parseInt(`${width}`, 10));
+  }, [elementWidth, dimensions]);
+  const shouldRenderPlayButton = () => {
+    const {
+      mediaType
+    } = metadata || {};
+    if (mediaType !== 'video' || !cardPreview) {
+      return false;
+    }
+    return true;
+  };
+  const getRenderConfigByStatus = () => {
+    const {
+      name,
+      mediaType
+    } = metadata || {};
+    const isZeroSize = metadata && metadata.size === 0;
+    const defaultConfig = {
+      renderTypeIcon: !didImageRender,
+      renderImageRenderer: !!cardPreview,
+      renderPlayButton: !!cardPreview && mediaType === 'video',
+      renderBlanket: !disableOverlay,
+      renderTitleBox: !disableOverlay && !!name,
+      renderTickBox: !disableOverlay && !!selectable
+    };
+    switch (status) {
+      case 'uploading':
+        return {
+          ...defaultConfig,
+          renderBlanket: !disableOverlay || mediaType !== 'video',
+          isFixedBlanket: true,
+          renderProgressBar: true
+        };
+      case 'processing':
+        return {
+          ...defaultConfig,
+          iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
+            disableAnimation: disableAnimation
+          }) : undefined
+        };
+      case 'complete':
+        return defaultConfig;
+      case 'error':
+      case 'failed-processing':
+        const baseErrorConfig = {
+          ...defaultConfig,
+          renderTypeIcon: true,
+          renderImageRenderer: false,
+          renderTitleBox: false,
+          renderPlayButton: false
+        };
+        let iconMessage;
+        let customTitleMessage;
+        const {
+          secondaryError
+        } = error || {};
+        if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+          iconMessage = jsx(PreviewCurrentlyUnavailable, null);
+        } else if (isUploadError(error)) {
+          iconMessage = jsx(FailedToUpload, null);
+          customTitleMessage = messages.failed_to_upload;
+        } else if (!metadata) {
+          iconMessage = jsx(FailedToLoad, null);
+        } else {
+          iconMessage = jsx(PreviewUnavailable, null);
+        }
+        if (!disableOverlay) {
+          const renderFailedTitleBox = !name || !!customTitleMessage;
+          return {
+            ...baseErrorConfig,
+            renderTitleBox: !!name && !customTitleMessage,
+            renderFailedTitleBox,
+            iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+            customTitleMessage
+          };
+        }
+        return {
+          ...baseErrorConfig,
+          iconMessage
+        };
+      case 'loading-preview':
+      case 'loading':
+      default:
+        return {
+          ...defaultConfig,
+          renderPlayButton: false,
+          renderTypeIcon: false,
+          renderSpinner: !didImageRender
+        };
+    }
+  };
+  const {
+    renderTypeIcon,
+    iconMessage,
+    renderImageRenderer,
+    renderSpinner,
+    renderPlayButton,
+    renderBlanket,
+    renderProgressBar,
+    renderTitleBox,
+    renderFailedTitleBox,
+    renderTickBox,
+    isFixedBlanket,
+    customTitleMessage
+  } = getRenderConfigByStatus();
+  const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  const isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
+  const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  // Disable tooltip for Media Single
+  const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  const hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
+  const {
+    mediaType,
+    mimeType,
+    name,
+    createdAt
+  } = metadata || {};
+  const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
+  const content = jsx(React.Fragment, null, jsx("div", {
+    css: cardImageContainerStyles,
+    className: fileCardImageViewSelector,
+    "data-testid": fileCardImageViewSelector,
+    "data-test-media-name": name,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected
+  }, renderTypeIcon && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), iconMessage), renderSpinner && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(SpinnerIcon, {
+    testId: "media-card-loading"
+  })), renderImageRenderer && !!cardPreview && jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: handleOnImageLoad,
+    onImageError: handleOnImageError,
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }), renderPlayButton && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)), renderBlanket && jsx(Blanket, {
+    isFixed: isFixedBlanket
+  }), renderTitleBox && name && jsx(TitleBox, {
+    name: name,
+    createdAt: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  }), renderFailedTitleBox && jsx(FailedTitleBox, {
+    breakpoint: breakpoint,
+    customMessage: customTitleMessage
+  }), renderProgressBar && jsx(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: !hasTitleBox
+  }), renderTickBox && jsx(TickBox, {
+    selected: selected
+  })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {
+    actions: actionsWithDetails
+  }));
+  return jsx(Wrapper, {
+    testId: testId || 'media-card-view',
+    dimensions: dimensions,
+    appearance: appearance,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: divRef,
+    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);
+};
+export const CardViewV2 = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(CardViewV2Base);

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.0.3",
+      packageName: "77.1.1",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.3";
+const packageVersion = "77.1.1";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.3";
+var packageVersion = "77.1.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -744,7 +744,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       // and then check if the triggered listener is from the card
       // that contains a div in current window.getSelection()
       // won't work in IE11
-      (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = getDocument()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
@@ -866,7 +866,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _getDocument2;
       this.hasBeenMounted = false;
       this.unsubscribe();
-      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
@@ -936,8 +936,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state6, _this$state6$fileStat;
-      return getFileAttributes(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
+      var _this$state6;
+      return getFileAttributes(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 || (_this$state6 = _this$state6.fileState) === null || _this$state6 === void 0 ? void 0 : _this$state6.status);
     }
   }, {
     key: "fireOperationalEvent",

package/dist/esm/card/cardSwitcher.js

@@ -1,4 +1,8 @@
+import React from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import CardLoader from './cardLoader';
 import CardV2Loader from './v2/cardV2Loader';
-export default getBooleanFF('platform.media-experience.cardv2_7zann') ? CardV2Loader : CardLoader;
+function CardSwitcher(props) {
+  return getBooleanFF('platform.media-experience.cardv2_7zann') ? /*#__PURE__*/React.createElement(CardV2Loader, props) : /*#__PURE__*/React.createElement(CardLoader, props);
+}
+export default CardSwitcher;