@atlaskit/media-card 70.9.0 → 72.0.0

package/dist/cjs/utils/analytics.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderFailedFileUriPayload = exports.getFailedFileUriFailReason = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.RenderEventAction = void 0;
+exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getRenderPreviewableCardPayload = exports.getFileAttributes = void 0;
 
 var _mediaClient = require("@atlaskit/media-client");
 
@@ -14,15 +14,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _errors = require("../errors");
 
-var RenderEventAction;
-exports.RenderEventAction = RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (exports.RenderEventAction = RenderEventAction = {}));
-
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -35,68 +26,58 @@ var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
 
 exports.getFileAttributes = getFileAttributes;
 
-var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes) {
+var getRenderPreviewableCardPayload = function getRenderPreviewableCardPayload(fileAttributes) {
   return {
-    eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
-    actionSubject: 'mediaCardRender',
+    eventType: 'screen',
+    action: 'viewed',
+    actionSubject: 'mediaCardRenderScreen',
+    name: 'mediaCardRenderScreen',
     attributes: {
+      type: fileAttributes.fileMediatype,
       fileAttributes: fileAttributes
     }
   };
 };
 
-exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
+exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes) {
+var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      status: 'success'
+      performanceAttributes: performanceAttributes
     }
   };
 };
 
-exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
-
-var getFailedFileUriFailReason = function getFailedFileUriFailReason(fileStatus) {
-  if (!fileStatus) {
-    // This fail reason will come from a bug, most likely.
-    return "unknown-uri";
-  } else if (fileStatus === 'uploading') {
-    return 'local-uri';
-  }
-
-  return 'remote-uri';
-};
-
-exports.getFailedFileUriFailReason = getFailedFileUriFailReason;
+exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      status: 'fail',
-      failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
+      performanceAttributes: performanceAttributes,
+      status: 'success'
     }
   };
 };
 
-exports.getRenderFailedFileUriPayload = getRenderFailedFileUriPayload;
+exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
 
-var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes) {
+var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'external-uri'
     }
@@ -147,13 +128,14 @@ var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error
 
 exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, error) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: getRenderErrorFailReason(error),
       error: getRenderErrorErrorReason(error),
@@ -165,13 +147,14 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes) {
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
+      performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'failed-processing'
     }

package/dist/cjs/utils/dimensionComparer.js

@@ -32,7 +32,7 @@ var canCompareDimension = function canCompareDimension(current, next) {
 exports.canCompareDimension = canCompareDimension;
 
 var isBigger = function isBigger(current, next) {
-  if (canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
+  if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
     var nextIsHigher = parseInt("".concat(current.width), 10) < parseInt("".concat(next.width), 10);
     var nextIsWider = parseInt("".concat(current.height), 10) < parseInt("".concat(next.height), 10);
     return nextIsHigher || nextIsWider;

package/dist/cjs/utils/document.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _default = function _default() {
+  return document;
+};
+
+exports.default = _default;

package/dist/cjs/utils/getDataURIDimension.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDataURIDimension = void 0;
+exports.getRequestedDimensions = exports.getDataURIDimension = void 0;
 
 var _isRetina = require("./isRetina");
 
@@ -34,4 +34,15 @@ var getDataURIDimension = function getDataURIDimension(dimension, options) {
   return _cardDimensions.defaultImageCardDimensions[dimension] * retinaFactor;
 };
 
-exports.getDataURIDimension = getDataURIDimension;
+exports.getDataURIDimension = getDataURIDimension;
+
+var getRequestedDimensions = function getRequestedDimensions(options) {
+  var width = getDataURIDimension('width', options);
+  var height = getDataURIDimension('height', options);
+  return {
+    width: width,
+    height: height
+  };
+};
+
+exports.getRequestedDimensions = getRequestedDimensions;

package/dist/cjs/utils/metadata.js

@@ -20,8 +20,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-var getFileDetails = function getFileDetails(state) {
-  return !(0, _mediaClient.isErrorFileState)(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -29,8 +29,16 @@ var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+var getFileDetails = function getFileDetails(identifier, fileState) {
+  return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };
 

package/dist/cjs/utils/objectURLCache.js

@@ -86,6 +86,12 @@ var ObjectURLCache = /*#__PURE__*/function () {
     value: function set(key, value) {
       this.cache.set(key, value);
     }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var removed = this.cache.remove(key);
+      removed && URL.revokeObjectURL(removed.dataURI);
+    }
   }]);
   return ObjectURLCache;
 }();

package/dist/cjs/utils/resizeModeToMediaImageProps.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeModeToMediaImageProps = resizeModeToMediaImageProps;
+
+function resizeModeToMediaImageProps(resizeMode) {
+  return {
+    crop: resizeMode === 'crop',
+    stretch: resizeMode === 'stretchy-fit'
+  };
+}

package/dist/cjs/utils/shouldDisplayImageThumbnail.js

@@ -13,7 +13,7 @@ var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatu
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/cjs/utils/videoSnapshot.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.takeSnapshot = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _videoSnapshot = _interopRequireDefault(require("video-snapshot"));
+
+var takeSnapshot = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
+    var snapshooter, dataUri;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            snapshooter = new _videoSnapshot.default(blob);
+            _context.next = 3;
+            return snapshooter.takeSnapshot();
+
+          case 3:
+            dataUri = _context.sent;
+            snapshooter.end();
+            return _context.abrupt("return", dataUri);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function takeSnapshot(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.takeSnapshot = takeSnapshot;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "70.9.0",
+	"version": "72.0.0",
 	"sideEffects": false
 }

package/dist/es2019/errors.js

@@ -11,11 +11,61 @@ export class MediaCardError extends Error {
     }
   }
 
+}
+export class LocalPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
+}
+export class RemotePreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
+}
+export const getImageLoadPrimaryReason = source => {
+  switch (source) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+
+    case 'cache-local':
+      return 'cache-local-uri';
+
+    case 'external':
+      return 'external-uri';
+
+    case 'local':
+      return 'local-uri';
+
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+
+    default:
+      return `unknown-uri`;
+  }
+};
+export class ImageLoadError extends MediaCardError {
+  constructor(source) {
+    super(getImageLoadPrimaryReason(source));
+  }
+
 }
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
-export const isLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-get'; // In a try/catch statement, the error caught is the type of any.
+export const isLocalPreviewError = err => err instanceof LocalPreviewError;
+export const isRemotePreviewError = err => err instanceof RemotePreviewError;
+export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
+export function isImageLoadError(err) {
+  return err instanceof ImageLoadError;
+} // In a try/catch statement, the error caught is the type of any.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
-export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const isUploadError = error => error.primaryReason === 'upload';

package/dist/es2019/files/cardImageView/index.js

@@ -9,11 +9,9 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
-import { withFileAttributes } from '../../utils/fileAttributesContext';
 export const fileCardImageViewSelector = 'media-file-card-view';
-export class FileCardImageViewBase extends Component {
+export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
+export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
 
@@ -34,7 +32,7 @@ export class FileCardImageViewBase extends Component {
       // immediately, even if there's no image preview
 
 
-      const isZeroSize = fileSize === '' && status === 'processing';
+      const isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
 
       if (mediaType !== 'video' && !this.isFileCardImageReadyForDisplay && !isZeroSize) {
         return this.renderLoadingContents();
@@ -140,36 +138,6 @@ export class FileCardImageViewBase extends Component {
       })));
     });
 
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType
-        } = this.props;
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -179,7 +147,9 @@ export class FileCardImageViewBase extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt
+        alt,
+        onImageLoad,
+        onImageError
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -197,13 +167,11 @@ export class FileCardImageViewBase extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageLoad: onImageLoad,
+        onImageError: onImageError
       });
     });
 
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-
     _defineProperty(this, "renderProgressBar", () => {
       const {
         mediaName,
@@ -298,7 +266,7 @@ export class FileCardImageViewBase extends Component {
       selectable: selectable,
       selected: selected,
       mediaType: mediaType,
-      className: fileCardImageViewSelector
+      className: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
     }, this.renderCardContents());
   }
 
@@ -307,7 +275,7 @@ export class FileCardImageViewBase extends Component {
       dataURI,
       status
     } = this.props;
-    return !!dataURI || !['loading', 'processing'].includes(status);
+    return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
   }
 
   get isCropped() {
@@ -326,9 +294,7 @@ export class FileCardImageViewBase extends Component {
 
 }
 
-_defineProperty(FileCardImageViewBase, "defaultProps", {
+_defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false
-});
-
-export const FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
+});

package/dist/es2019/files/index.js

@@ -1 +1 @@
-export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
+export { FileCardImageView } from './cardImageView';

package/dist/es2019/index.js

@@ -1,7 +1,7 @@
-export { default as Card } from './root/card/cardLoader';
+export { Card, MediaInlineCard } from './root';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
-export { fileCardImageViewSelector } from './files/cardImageView';
+export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView';
 export { inlinePlayerClassName } from './root/inlinePlayer';
-export { newFileExperienceClassName } from './root/cardView';
+export { newFileExperienceClassName } from './root/card/cardConstants';

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,30 +1,36 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, {
-  cardPreview,
-  error
-} = {}) => {
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      /**
-       * A Card that is considered Complete and has no preview,
-       * reflects an expected behaviour, and thus a legitimate
-       * success case to be logged.
-       */
-      if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
-        fireEvent(getRenderSucceededEventPayload(fileAttributes));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, error));
+      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
       break;
   }
+};
+export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes) => {
+  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
+};
+export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
+  if (typeof window.getSelection === 'function') {
+    var _selection$containsNo;
+
+    const selection = window.getSelection();
+
+    if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
+      fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
+    }
+  }
+};
+export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
+  fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
 };

package/dist/es2019/root/card/cardConstants.js

@@ -0,0 +1 @@
+export const newFileExperienceClassName = 'new-file-experience-wrapper';

package/dist/es2019/root/card/cardSSRView.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/*
+ * This file is designed to be optimised for maximum performance.
+ * Because of this the imports are optimised to import only what is required
+ * If you're adding a new dependency please ensure that the
+ * imported file only contains and depends on only what is required for it to function.
+ */
+import React from 'react';
+import { imageResizeModeToFileImageMode } from '@atlaskit/media-client';
+import { MediaImage } from '@atlaskit/media-ui';
+import SpinnerIcon from '@atlaskit/spinner';
+import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+import { defaultImageCardDimensions } from '../../utils/cardDimensions';
+import { IconWrapper } from '../ui/iconWrapper/styled';
+import { SSRFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from '../ui/styledSSR';
+import { Blanket } from '../ui/blanket/styled';
+import { newFileExperienceClassName } from './cardConstants';
+import { resizeModeToMediaImageProps } from '../../utils/resizeModeToMediaImageProps';
+export const CardSSRView = ({
+  identifier,
+  dimensions,
+  mediaClient,
+  resizeMode,
+  disableOverlay,
+  isLazy
+}) => {
+  let dataURI;
+
+  try {
+    const {
+      width,
+      height
+    } = getRequestedDimensions({
+      dimensions
+    });
+    const mode = imageResizeModeToFileImageMode(resizeMode);
+    dataURI = mediaClient.getImageUrlSync(identifier.id, {
+      collection: identifier.collectionName,
+      mode,
+      width,
+      height,
+      allowAnimated: true
+    });
+  } catch (e) {
+    // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
+    dataURI = '';
+  }
+
+  const shouldDisplayBackground = !dataURI || !disableOverlay;
+  return /*#__PURE__*/React.createElement(SSRFileExperienceWrapper, {
+    className: newFileExperienceClassName,
+    dimensions: dimensions,
+    breakpoint: calculateBreakpoint(dimensions),
+    shouldUsePointerCursor: Boolean(dataURI),
+    displayBackground: shouldDisplayBackground,
+    disableOverlay: !!disableOverlay,
+    selected: false,
+    "data-testid": "media-card-view"
+  }, /*#__PURE__*/React.createElement(CardImageContainer, {
+    className: "media-file-card-view",
+    "data-testid": "media-file-card-view"
+  }, /*#__PURE__*/React.createElement(IconWrapper, {
+    breakpoint: calculateBreakpoint(dimensions),
+    hasTitleBox: false
+  }, /*#__PURE__*/React.createElement(SpinnerIcon, null)), !!dataURI && /*#__PURE__*/React.createElement(MediaImage, _extends({
+    dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
+    // onImageLoad={this.onImageLoad}  // TODO add these back as part of tracking performance.
+    // onImageError={this.onImageError}
+
+  }, resizeModeToMediaImageProps(resizeMode), {
+    loading: getLazyValue(isLazy)
+  })), !disableOverlay && /*#__PURE__*/React.createElement(Blanket, {
+    isFixed: false
+  })));
+};
+
+function getLazyValue(isLazy) {
+  switch (isLazy) {
+    case false:
+      return 'eager';
+
+    default:
+      return 'lazy';
+  }
+}
+
+function calculateBreakpoint(dimensions) {
+  var _dimensions$width;
+
+  const width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : defaultImageCardDimensions.width;
+  return calcBreakpointSize(parseInt(`${width}`, 10));
+}