@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/es2019/root/ui/imageRenderer/imageRenderer.js

@@ -1,80 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../../utils/analytics';
-import { withFileAttributes } from '../../../utils/fileAttributesContext';
-export const resizeModeToMediaImageProps = resizeMode => ({
-  crop: resizeMode === 'crop',
-  stretch: resizeMode === 'stretchy-fit'
-});
-export class ImageRendererBase extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        onImageError,
-        fileAttributes
-      } = this.props;
-      onImageError && onImageError();
-
-      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, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-  }
-
-  componentDidMount() {
+import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
+export const ImageRenderer = ({
+  dataURI,
+  previewOrientation,
+  alt,
+  resizeMode,
+  onImageLoad,
+  onImageError,
+  onDisplayImage,
+  mediaType,
+  nativeLazyLoad,
+  forceSyncDisplay
+}) => {
+  useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-    const {
-      onDisplayImage,
-      mediaType
-    } = this.props;
-
     if (mediaType === 'image' && onDisplayImage) {
       onDisplayImage();
     }
-  }
-
-  render() {
-    const {
-      dataURI,
-      previewOrientation,
-      alt,
-      resizeMode
-    } = this.props;
-    return /*#__PURE__*/React.createElement(MediaImage, _extends({
-      dataURI: dataURI,
-      alt: alt,
-      previewOrientation: previewOrientation,
-      onImageLoad: this.onImageLoad,
-      onImageError: this.onImageError
-    }, resizeModeToMediaImageProps(resizeMode)));
-  }
-
-}
-export const ImageRenderer = withAnalyticsEvents()(withFileAttributes(ImageRendererBase));
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/React.createElement(MediaImage, _extends({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
+  }, resizeModeToMediaImageProps(resizeMode)));
+};

package/dist/es2019/root/ui/styled.js

@@ -112,6 +112,7 @@ export const NewFileExperienceWrapper = styled.div`
     &:hover .${blanketClassName} {
       ${fixedBlanketStyles}
     }
+
     &:hover .${actionsBarClassName} {
       ${fixedActionBarStyles}
     }

package/dist/es2019/root/ui/titleBox/failedTitleBox.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { getErrorMessage } from '../../../utils/getErrorMessage';
+import { FormattedMessage } from 'react-intl';
 export const FailedTitleBox = ({
-  breakpoint
+  breakpoint,
+  customMessage = messages.failed_to_load
 }) => {
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
@@ -12,5 +14,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), getErrorMessage('error')));
+  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
 };

package/dist/es2019/utils/analytics.js

@@ -2,14 +2,6 @@ import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-clien
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
-export let RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (RenderEventAction = {}));
-
 export const getFileAttributes = (metadata, fileStatus) => ({
   fileMediatype: metadata.mediaType,
   fileMimetype: metadata.mimeType,
@@ -17,49 +9,44 @@ export const getFileAttributes = (metadata, fileStatus) => ({
   fileSize: metadata.size,
   fileStatus
 });
-export const getRenderCommencedEventPayload = fileAttributes => ({
-  eventType: 'operational',
-  action: RenderEventAction.COMMENCED,
-  actionSubject: 'mediaCardRender',
+export const getRenderPreviewableCardPayload = fileAttributes => ({
+  eventType: 'screen',
+  action: 'viewed',
+  actionSubject: 'mediaCardRenderScreen',
+  name: 'mediaCardRenderScreen',
   attributes: {
+    type: fileAttributes.fileMediatype,
     fileAttributes
   }
 });
-export const getRenderSucceededEventPayload = fileAttributes => ({
-  eventType: 'operational',
-  action: RenderEventAction.SUCCEEDED,
-  actionSubject: 'mediaCardRender',
-  attributes: {
-    fileAttributes,
-    status: 'success'
-  }
-});
-export const 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';
+export const getRenderCommencedEventPayload = (fileAttributes, performanceAttributes) => {
+  return {
+    eventType: 'operational',
+    action: 'commenced',
+    actionSubject: 'mediaCardRender',
+    attributes: {
+      fileAttributes,
+      performanceAttributes
+    }
+  };
 };
-export const getRenderFailedFileUriPayload = fileAttributes => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
-    status: 'fail',
-    failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
+    performanceAttributes,
+    status: 'success'
   }
 });
-export const getRenderFailedExternalUriPayload = fileAttributes => ({
+export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
+    performanceAttributes,
     status: 'fail',
     failReason: 'external-uri'
   }
@@ -94,12 +81,13 @@ export const getRenderErrorRequestMetadata = error => {
     return error.secondaryError.metadata;
   }
 };
-export const getRenderErrorEventPayload = (fileAttributes, error) => ({
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
+    performanceAttributes,
     status: 'fail',
     failReason: getRenderErrorFailReason(error),
     error: getRenderErrorErrorReason(error),
@@ -107,12 +95,13 @@ export const getRenderErrorEventPayload = (fileAttributes, error) => ({
     request: getRenderErrorRequestMetadata(error)
   }
 });
-export const getRenderFailedFileStatusPayload = fileAttributes => ({
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
+    performanceAttributes,
     status: 'fail',
     failReason: 'failed-processing'
   }

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -57,14 +57,18 @@ export class CardActionsDropdownMenu extends Component {
 
     if (actions.length > 0) {
       return /*#__PURE__*/React.createElement(DropdownMenu, {
-        "data-testid": "media-card-actions-menu",
+        testId: "media-card-actions-menu",
         onOpenChange: onOpenChange,
-        trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
+        trigger: ({
+          triggerRef,
+          ...providedProps
+        }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
           variant: triggerVariant,
           style: {
             color: triggerColor
-          }
-        }, /*#__PURE__*/React.createElement(MoreIcon, {
+          },
+          ref: triggerRef
+        }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
           label: "more"
         }))
       }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));

package/dist/es2019/utils/dimensionComparer.js

@@ -20,7 +20,7 @@ export const canCompareDimension = (current, next) => {
   return false;
 };
 export const 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)) {
     const nextIsHigher = parseInt(`${current.width}`, 10) < parseInt(`${next.width}`, 10);
     const nextIsWider = parseInt(`${current.height}`, 10) < parseInt(`${next.height}`, 10);
     return nextIsHigher || nextIsWider;

package/dist/es2019/utils/document.js

@@ -0,0 +1 @@
+export default (() => document);

package/dist/es2019/utils/getDataURIDimension.js

@@ -20,4 +20,12 @@ export const getDataURIDimension = (dimension, options) => {
   }
 
   return defaultImageCardDimensions[dimension] * retinaFactor;
+};
+export const getRequestedDimensions = options => {
+  const width = getDataURIDimension('width', options);
+  const height = getDataURIDimension('height', options);
+  return {
+    width,
+    height
+  };
 };

package/dist/es2019/utils/metadata.js

@@ -1,4 +1,4 @@
-import { isErrorFileState } from '@atlaskit/media-client';
+import { isErrorFileState, isFileIdentifier } from '@atlaskit/media-client';
 
 const getProcessingStatusFromFileState = status => {
   switch (status) {
@@ -13,7 +13,7 @@ const getProcessingStatusFromFileState = status => {
   }
 };
 
-export const getFileDetails = state => !isErrorFileState(state) ? {
+const getFileDetailsFromFileState = state => ({
   id: state.id,
   name: state.name,
   size: state.size,
@@ -21,6 +21,14 @@ export const getFileDetails = state => !isErrorFileState(state) ? {
   createdAt: state.createdAt,
   mediaType: state.mediaType,
   processingStatus: getProcessingStatusFromFileState(state.status)
-} : {
-  id: state.id
+});
+
+export const getFileDetails = (identifier, fileState) => {
+  return isFileIdentifier(identifier) ? fileState && !isErrorFileState(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
+  } : {
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
+  };
 };

package/dist/es2019/utils/objectURLCache.js

@@ -42,5 +42,10 @@ export class ObjectURLCache {
     this.cache.set(key, value);
   }
 
+  remove(key) {
+    const removed = this.cache.remove(key);
+    removed && URL.revokeObjectURL(removed.dataURI);
+  }
+
 }
 export const createObjectURLCache = () => new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);

package/dist/es2019/utils/resizeModeToMediaImageProps.js

@@ -0,0 +1,6 @@
+export function resizeModeToMediaImageProps(resizeMode) {
+  return {
+    crop: resizeMode === 'crop',
+    stretch: resizeMode === 'stretchy-fit'
+  };
+}

package/dist/es2019/utils/shouldDisplayImageThumbnail.js

@@ -5,7 +5,7 @@ export const shouldDisplayImageThumbnail = (cardStatus, mediaItemType, dataURI,
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/es2019/version.json

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

package/dist/esm/errors.js

@@ -70,6 +70,59 @@ export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
 
   return RemotePreviewError;
 }(MediaCardError);
+export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+  _inherits(SsrPreviewError, _MediaCardError3);
+
+  var _super4 = _createSuper(SsrPreviewError);
+
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+
+    _classCallCheck(this, SsrPreviewError);
+
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+
+  return SsrPreviewError;
+}(MediaCardError);
+export var getImageLoadPrimaryReason = function 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 var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  _inherits(ImageLoadError, _MediaCardError4);
+
+  var _super5 = _createSuper(ImageLoadError);
+
+  function ImageLoadError(source) {
+    _classCallCheck(this, ImageLoadError);
+
+    return _super5.call(this, getImageLoadPrimaryReason(source));
+  }
+
+  return ImageLoadError;
+}(MediaCardError);
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
@@ -81,9 +134,15 @@ export var isRemotePreviewError = function isRemotePreviewError(err) {
 };
 export var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
   return isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
-}; // In a try/catch statement, the error caught is the type of any.
+};
+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 var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
   return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+};
+export var isUploadError = function isUploadError(error) {
+  return error && error.primaryReason === 'upload';
 };