@atlaskit/media-card 75.0.0 → 76.0.0

package/dist/es2019/inline/mediaInlineCard.js

@@ -1,11 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { FileFetcherError } from '@atlaskit/media-client';
 import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import Tooltip from '@atlaskit/tooltip';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
+import { fireMediaCardEvent } from '../utils/analytics';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MediaCardError } from '../errors';
+import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 // UI component which renders an inline link in the appropiate state based on a media file
 export const MediaInlineCardInternal = ({
   mediaClient,
@@ -18,8 +23,23 @@ export const MediaInlineCardInternal = ({
   intl
 }) => {
   const [fileState, setFileState] = useState();
-  const [isErrored, setIsErrored] = useState(false);
+  const [subscribeError, setSubscribeError] = useState();
+  const [isSucceededEventSent, setIsSucceededEventSent] = useState(false);
+  const [isFailedEventSent, setIsFailedEventSent] = useState(false);
   const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const fireFailedOperationalEvent = (error = new MediaCardError('missing-error-data'), failReason) => {
+    const payload = failReason ? getFailedProcessingStatusPayload(fileState) : getErrorStatusPayload(error, fileState);
+    setIsFailedEventSent(true);
+    fireMediaCardEvent(payload, createAnalyticsEvent);
+  };
+  const fireSucceededOperationalEvent = () => {
+    const payload = getSucceededStatusPayload(fileState);
+    setIsSucceededEventSent(true);
+    fireMediaCardEvent(payload, createAnalyticsEvent);
+  };
   const onMediaInlineCardClick = event => {
     if (onClick) {
       const inlineCardEvent = {
@@ -59,25 +79,44 @@ export const MediaInlineCardInternal = ({
     }).subscribe({
       next: fileState => {
         setFileState(fileState);
-        setIsErrored(false);
       },
-      error: () => {
-        setIsErrored(true);
+      error: e => {
+        setSubscribeError(e);
       }
     });
     return () => {
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (isErrored && (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+  if (subscribeError) {
+    const errorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? messages.failed_to_upload : messages.couldnt_load_file;
+    const errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+    !isFailedEventSent && fireFailedOperationalEvent(new MediaCardError(errorReason, subscribeError));
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(errorMessage),
+      isSelected: isSelected
+    });
+  }
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    const error = new MediaCardError('error-file-state', new Error(fileState.message));
+    !isFailedEventSent && fireFailedOperationalEvent(error);
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: (intl || defaultIntl).formatMessage(messages.failed_to_upload),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
-  if (isErrored || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing' ||
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
   // Empty file handling
-  fileState && !fileState.name) {
+  if (fileState && !fileState.name) {
+    const error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', fileState.id));
+    !isFailedEventSent && fireFailedOperationalEvent(error);
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
       message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
@@ -117,6 +156,9 @@ export const MediaInlineCardInternal = ({
     };
     formattedDate = formatDate(fileState.createdAt, locale);
   }
+  if (fileState.status === 'processed' && !isSucceededEventSent) {
+    fireSucceededOperationalEvent();
+  }
   if (shouldDisplayToolTip === undefined || shouldDisplayToolTip === true) {
     return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
       position: "bottom",

package/dist/es2019/inline/mediaInlineCardAnalytics.js

@@ -0,0 +1,48 @@
+import { extractErrorInfo } from '../utils/analytics';
+export const getSucceededStatusPayload = fileState => {
+  return {
+    eventType: 'operational',
+    action: 'succeeded',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'success',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileSize: fileState === null || fileState === void 0 ? void 0 : fileState.size,
+        fileMediatype: fileState === null || fileState === void 0 ? void 0 : fileState.mediaType,
+        fileMimetype: fileState === null || fileState === void 0 ? void 0 : fileState.mimeType,
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      }
+    }
+  };
+};
+export const getErrorStatusPayload = (error, fileState) => {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      },
+      ...extractErrorInfo(error)
+    }
+  };
+};
+export const getFailedProcessingStatusPayload = fileState => {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      },
+      failReason: 'failed-processing'
+    }
+  };
+};

package/dist/es2019/utils/cardDimensions.js

@@ -1,9 +1,3 @@
-// Default dimensions
-
-export const defaultSmallCardDimensions = {
-  width: '100%',
-  height: 42
-};
 export const defaultImageCardDimensions = {
   width: 156,
   height: 125
@@ -16,76 +10,6 @@ export const defaultSquareCardDimensions = {
   width: 300,
   height: 300
 };
-
-// Small dimensions
-
-export const minSmallCardDimensions = {
-  width: 200,
-  height: 32
-};
-export const minImageCardDimensions = {
-  width: 144,
-  height: 96
-};
-export const minSquareCardDimensions = {
-  width: 272,
-  height: 275
-};
-export const minHorizontalCardDimensions = {
-  width: 400,
-  height: 125
-};
-
-// Max dimensions
-
-export const maxImageCardDimensions = {
-  width: 480,
-  height: 360
-};
-export const maxHorizontalCardDimensions = {
-  width: 400,
-  height: 116
-};
-export const maxSquareCardDimensions = {
-  width: 400,
-  height: 348
-};
-export const getCardMaxHeight = appearance => {
-  if (appearance === 'image') {
-    return maxImageCardDimensions.height;
-  }
-  if (appearance === 'horizontal') {
-    return maxHorizontalCardDimensions.height;
-  }
-  if (appearance === 'square') {
-    return maxSquareCardDimensions.height;
-  }
-  return maxSquareCardDimensions.width;
-};
-export const getCardMinWidth = appearance => {
-  if (appearance === 'image') {
-    return minImageCardDimensions.width;
-  }
-  if (appearance === 'horizontal') {
-    return minHorizontalCardDimensions.width;
-  }
-  if (appearance === 'square') {
-    return minSquareCardDimensions.width;
-  }
-  return minSmallCardDimensions.width;
-};
-export const getCardMaxWidth = appearance => {
-  if (appearance === 'image') {
-    return maxImageCardDimensions.width;
-  }
-  if (appearance === 'horizontal') {
-    return maxHorizontalCardDimensions.width;
-  }
-  if (appearance === 'square') {
-    return maxSquareCardDimensions.width;
-  }
-  return maxSquareCardDimensions.width;
-};
 export const getDefaultCardDimensions = appearance => {
   if (appearance === 'image') {
     return defaultImageCardDimensions;

package/dist/es2019/utils/index.js

@@ -1,9 +1,5 @@
-export { ErrorIcon } from './errorIcon';
-export { FileIcon } from './fileIcon';
-export { CardActionIconButton, CardActionsDropdownMenu, CardActionsView, default } from './cardActions';
 export { isRetina } from './isRetina';
-export { defaultHorizontalCardDimensions, defaultImageCardDimensions, defaultSmallCardDimensions, defaultSquareCardDimensions, getCardMaxHeight, getCardMaxWidth, getCardMinWidth, getDefaultCardDimensions, maxHorizontalCardDimensions, maxImageCardDimensions, maxSquareCardDimensions, minHorizontalCardDimensions, minImageCardDimensions, minSmallCardDimensions, minSquareCardDimensions } from './cardDimensions';
-export { breakpointSize, breakpointStyles, cardBreakpointSizes } from './breakpoint';
+export { defaultHorizontalCardDimensions, defaultImageCardDimensions, defaultSquareCardDimensions, getDefaultCardDimensions } from './cardDimensions';
 export { isValidPercentageUnit } from './isValidPercentageUnit';
 export { getElementDimension } from './getElementDimension';
 export { containsPixelUnit } from './containsPixelUnit';

package/dist/es2019/utils/lightCards/cardError.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { ErrorIcon } from '../errorIcon';
+import { ErrorIcon } from './errorIcon';
 import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export class CardError extends Component {

package/dist/es2019/utils/lightCards/cardLoading.js

@@ -1,32 +1,19 @@
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
+import { Wrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
-import FileIcon from '@atlaskit/icon/glyph/file';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export class CardLoading extends Component {
   render() {
     const {
       dimensions: dimensionsProp,
-      testId,
-      featureFlags
+      testId
     } = this.props;
     const dimensions = getDimensionsWithDefault(dimensionsProp);
-    if (getMediaFeatureFlag('newCardExperience', featureFlags)) {
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        "data-testid": testId || 'media-card-loading',
-        "data-test-loading": true,
-        dimensions: dimensions
-      }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
-    }
-    return /*#__PURE__*/React.createElement(AnimatedWrapper, {
+    return /*#__PURE__*/React.createElement(Wrapper, {
       "data-testid": testId || 'media-card-loading',
       "data-test-loading": true,
       dimensions: dimensions
-    }, /*#__PURE__*/React.createElement(FileIcon, {
-      label: "loading",
-      size: "medium"
-    }));
+    }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
   }
 }

package/dist/es2019/utils/lightCards/lightCardWrappers.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { wrapperStyles } from './styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 export const Wrapper = props => {
   const theme = useGlobalTheme();
@@ -11,13 +11,4 @@ export const Wrapper = props => {
       theme: theme
     })
   }, props), props.children);
-};
-export const AnimatedWrapper = props => {
-  const theme = useGlobalTheme();
-  return jsx("div", _extends({
-    css: animatedWrapperStyles({
-      dimensions: props.dimensions,
-      theme: theme
-    })
-  }, props), props.children);
 };

package/dist/es2019/utils/lightCards/styles.js

@@ -1,20 +1,7 @@
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
-export const blinkLoadingAnimation = keyframes`
-  0%{
-    opacity: 1;
-  }
-
-  50%{
-    opacity: 0.6;
-  }
-
-  100%{
-    opacity: 1;
-  }
-`;
 export const wrapperStyles = ({
   dimensions,
   theme
@@ -37,10 +24,4 @@ export const wrapperStyles = ({
   max-width: 100%;
   width: ${dimensions.width};
   height: ${dimensions.height};
-`;
-export const animatedWrapperStyles = props => css`
-  ${wrapperStyles(props)}
-  > span {
-    animation: ${blinkLoadingAnimation} 0.8s infinite;
-  }
 `;

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 = "75.0.0";
+const packageVersion = "76.0.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/version.json

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

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 = "75.0.0";
+var packageVersion = "76.0.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/cardState.js

@@ -20,7 +20,7 @@ export var createStateUpdater = function createStateUpdater(newState, fireErrorE
   };
 };
 export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
-  var status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags), featureFlags);
+  var status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   var error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
   var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
   return {