@atlaskit/media-card 72.1.0 → 73.0.0

package/dist/cjs/styles/index.js

@@ -5,12 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "defaultTransitionDuration", {
-  enumerable: true,
-  get: function get() {
-    return _config.defaultTransitionDuration;
-  }
-});
+exports.Root = exports.FadeinImage = void 0;
 Object.defineProperty(exports, "antialiased", {
   enumerable: true,
   get: function get() {
@@ -29,6 +24,7 @@ Object.defineProperty(exports, "capitalize", {
     return _mixins.capitalize;
   }
 });
+exports.cardShadow = void 0;
 Object.defineProperty(exports, "centerSelf", {
   enumerable: true,
   get: function get() {
@@ -53,55 +49,61 @@ Object.defineProperty(exports, "centerX", {
     return _mixins.centerX;
   }
 });
-Object.defineProperty(exports, "hexToRgb", {
+exports.default = void 0;
+Object.defineProperty(exports, "defaultTransitionDuration", {
   enumerable: true,
   get: function get() {
-    return _mixins.hexToRgb;
+    return _config.defaultTransitionDuration;
   }
 });
-Object.defineProperty(exports, "rgba", {
+Object.defineProperty(exports, "easeOutCubic", {
   enumerable: true,
   get: function get() {
-    return _mixins.rgba;
+    return _easing.easeOutCubic;
   }
 });
-Object.defineProperty(exports, "spaceAround", {
+Object.defineProperty(exports, "easeOutExpo", {
   enumerable: true,
   get: function get() {
-    return _mixins.spaceAround;
+    return _easing.easeOutExpo;
   }
 });
-Object.defineProperty(exports, "transition", {
+Object.defineProperty(exports, "hexToRgb", {
   enumerable: true,
   get: function get() {
-    return _mixins.transition;
+    return _mixins.hexToRgb;
   }
 });
-Object.defineProperty(exports, "withAppearance", {
+Object.defineProperty(exports, "rgba", {
   enumerable: true,
   get: function get() {
-    return _mixins.withAppearance;
+    return _mixins.rgba;
   }
 });
-Object.defineProperty(exports, "easeOutCubic", {
+Object.defineProperty(exports, "spaceAround", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutCubic;
+    return _mixins.spaceAround;
   }
 });
-Object.defineProperty(exports, "easeOutExpo", {
+Object.defineProperty(exports, "spin", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutExpo;
+    return _animations.spin;
   }
 });
-Object.defineProperty(exports, "spin", {
+Object.defineProperty(exports, "transition", {
   enumerable: true,
   get: function get() {
-    return _animations.spin;
+    return _mixins.transition;
+  }
+});
+Object.defineProperty(exports, "withAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _mixins.withAppearance;
   }
 });
-exports.default = exports.FadeinImage = exports.cardShadow = exports.Root = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/styles/mixins.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withAppearance = exports.capitalize = exports.rgba = exports.hexToRgb = exports.transition = exports.spaceAround = exports.borderRadiusLeft = exports.centerSelf = exports.centerSelfX = exports.centerSelfY = exports.antialiased = exports.centerX = void 0;
+exports.withAppearance = exports.transition = exports.spaceAround = exports.rgba = exports.hexToRgb = exports.centerX = exports.centerSelfY = exports.centerSelfX = exports.centerSelf = exports.capitalize = exports.borderRadiusLeft = exports.antialiased = void 0;
 
 var _constants = require("@atlaskit/theme/constants");
 

package/dist/cjs/utils/analytics.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createAndFireMediaCardEvent = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-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;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
 
 var _mediaClient = require("@atlaskit/media-client");
 

package/dist/cjs/utils/breakpoint.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.breakpointStyles = exports.cardBreakpointSizes = exports.breakpointSize = void 0;
+exports.cardBreakpointSizes = exports.breakpointStyles = exports.breakpointSize = void 0;
 
 var _mediaUi = require("@atlaskit/media-ui");
 

package/dist/cjs/utils/cardActions/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "CardActionIconButton", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _cardActionIconButton.CardActionIconButton;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "CardActionIconButtonVariant", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _styled.CardActionIconButtonVariant;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
   enumerable: true,
   get: function get() {
-    return _cardActionIconButton.CardActionIconButton;
+    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "CardActionsView", {
   enumerable: true,
   get: function get() {
-    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
+    return _cardActionsView.CardActionsView;
   }
 });
-Object.defineProperty(exports, "CardActionIconButtonVariant", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _styled.CardActionIconButtonVariant;
+    return _cardActionsView.CardActionsView;
   }
 });
 

package/dist/cjs/utils/cardActions/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardActionButton = exports.CardActionIconButtonVariant = exports.Wrapper = void 0;
+exports.Wrapper = exports.CardActionIconButtonVariant = exports.CardActionButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/cardDimensions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultCardDimensions = exports.getCardMaxWidth = exports.getCardMinWidth = exports.getCardMaxHeight = exports.maxSquareCardDimensions = exports.maxHorizontalCardDimensions = exports.maxImageCardDimensions = exports.minHorizontalCardDimensions = exports.minSquareCardDimensions = exports.minImageCardDimensions = exports.minSmallCardDimensions = exports.defaultSquareCardDimensions = exports.defaultHorizontalCardDimensions = exports.defaultImageCardDimensions = exports.defaultSmallCardDimensions = void 0;
+exports.minSquareCardDimensions = exports.minSmallCardDimensions = exports.minImageCardDimensions = exports.minHorizontalCardDimensions = exports.maxSquareCardDimensions = exports.maxImageCardDimensions = exports.maxHorizontalCardDimensions = exports.getDefaultCardDimensions = exports.getCardMinWidth = exports.getCardMaxWidth = exports.getCardMaxHeight = exports.defaultSquareCardDimensions = exports.defaultSmallCardDimensions = exports.defaultImageCardDimensions = exports.defaultHorizontalCardDimensions = void 0;
 // Default dimensions
 var defaultSmallCardDimensions = {
   width: '100%',

package/dist/cjs/utils/getErrorMessage.js

@@ -9,12 +9,12 @@ exports.getErrorMessage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
 var getErrorMessage = function getErrorMessage(status) {
-  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.failed_to_load);
+  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.failed_to_load);
 };
 
 exports.getErrorMessage = getErrorMessage;

package/dist/cjs/utils/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CardActionIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionIconButton;
+  }
+});
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsDropdownMenu;
+  }
+});
+Object.defineProperty(exports, "CardActionsView", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsView;
+  }
+});
 Object.defineProperty(exports, "ErrorIcon", {
   enumerable: true,
   get: function get() {
@@ -17,34 +35,34 @@ Object.defineProperty(exports, "FileIcon", {
     return _fileIcon.FileIcon;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "breakpointSize", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionIconButton;
+    return _breakpoint.breakpointSize;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "breakpointStyles", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsDropdownMenu;
+    return _breakpoint.breakpointStyles;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "cardBreakpointSizes", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsView;
+    return _breakpoint.cardBreakpointSizes;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "containsPixelUnit", {
   enumerable: true,
   get: function get() {
-    return _cardActions.default;
+    return _containsPixelUnit.containsPixelUnit;
   }
 });
-Object.defineProperty(exports, "isRetina", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _isRetina.isRetina;
+    return _cardActions.default;
   }
 });
 Object.defineProperty(exports, "defaultHorizontalCardDimensions", {
@@ -95,6 +113,24 @@ Object.defineProperty(exports, "getDefaultCardDimensions", {
     return _cardDimensions.getDefaultCardDimensions;
   }
 });
+Object.defineProperty(exports, "getElementDimension", {
+  enumerable: true,
+  get: function get() {
+    return _getElementDimension.getElementDimension;
+  }
+});
+Object.defineProperty(exports, "isRetina", {
+  enumerable: true,
+  get: function get() {
+    return _isRetina.isRetina;
+  }
+});
+Object.defineProperty(exports, "isValidPercentageUnit", {
+  enumerable: true,
+  get: function get() {
+    return _isValidPercentageUnit.isValidPercentageUnit;
+  }
+});
 Object.defineProperty(exports, "maxHorizontalCardDimensions", {
   enumerable: true,
   get: function get() {
@@ -137,42 +173,6 @@ Object.defineProperty(exports, "minSquareCardDimensions", {
     return _cardDimensions.minSquareCardDimensions;
   }
 });
-Object.defineProperty(exports, "breakpointSize", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointSize;
-  }
-});
-Object.defineProperty(exports, "breakpointStyles", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointStyles;
-  }
-});
-Object.defineProperty(exports, "cardBreakpointSizes", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.cardBreakpointSizes;
-  }
-});
-Object.defineProperty(exports, "isValidPercentageUnit", {
-  enumerable: true,
-  get: function get() {
-    return _isValidPercentageUnit.isValidPercentageUnit;
-  }
-});
-Object.defineProperty(exports, "getElementDimension", {
-  enumerable: true,
-  get: function get() {
-    return _getElementDimension.getElementDimension;
-  }
-});
-Object.defineProperty(exports, "containsPixelUnit", {
-  enumerable: true,
-  get: function get() {
-    return _containsPixelUnit.containsPixelUnit;
-  }
-});
 
 var _errorIcon = require("./errorIcon");
 

package/dist/cjs/utils/lightCards/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedWrapper = exports.Wrapper = exports.blinkLoadingAnimation = void 0;
+exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/objectURLCache.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createObjectURLCache = exports.ObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = void 0;
+exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/utils/viewportDetector.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.createViewportDetector = void 0;
+exports.createViewportDetector = exports.ViewportDetector = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/dist/cjs/version.json

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

package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js

@@ -31,5 +31,8 @@ export const isPreviewableStatus = (cardStatus, {
   hasPreview,
   isSupportedByBrowser
 }) => {
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
 };

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

@@ -7,7 +7,7 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { IntlProvider, intlShape } from 'react-intl';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
@@ -791,7 +791,7 @@ export class CardBase extends Component {
       mediaViewerSelectedItem
     } = this.state;
     const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-    return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);
   }
@@ -807,11 +807,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,
@@ -819,4 +814,6 @@ export const Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -49,6 +49,15 @@ export const MediaInlineCardInternal = ({
     return null;
   };
 
+  const renderContent = children => {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  const defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(() => {
     mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -64,14 +73,14 @@ export const MediaInlineCardInternal = ({
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file),
+      message: (intl || defaultIntl).formatMessage(messages.loading_file),
       isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -85,7 +94,7 @@ export const MediaInlineCardInternal = ({
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -118,7 +127,7 @@ export const MediaInlineCardInternal = ({
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
     content: formattedDate,
     tag: "span"
@@ -127,6 +136,8 @@ export const MediaInlineCardInternal = ({
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
-export const MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export const MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});

package/dist/es2019/root/styled.js

@@ -42,4 +42,5 @@ export const InlinePlayerWrapper = styled.div`
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export const FormattedMessageWrapper = styled.span``;

package/dist/es2019/root/ui/iconMessage/index.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IconMessageWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -11,7 +12,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
+import { FormattedMessageWrapper } from '../../styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { Breakpoint } from '../common';
 export const LoadingRateLimited = ({
   breakpoint = Breakpoint.SMALL,
@@ -11,5 +12,5 @@ export const LoadingRateLimited = ({
   return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file)), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429))));
+  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
 };

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

@@ -3,7 +3,8 @@ 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 { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const FailedTitleBox = ({
   breakpoint,
   customMessage = messages.failed_to_load
@@ -14,5 +15,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';

package/dist/es2019/utils/getErrorMessage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export const getErrorMessage = status => status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/es2019/version.json

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

package/dist/esm/root/card/getCardPreview/filePreviewStatus.js

@@ -31,5 +31,8 @@ export var isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3)
   var isPreviewable = _ref3.isPreviewable,
       hasPreview = _ref3.hasPreview,
       isSupportedByBrowser = _ref3.isSupportedByBrowser;
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
 };

package/dist/esm/root/card/index.js

@@ -25,7 +25,7 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { IntlProvider, intlShape } from 'react-intl';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
@@ -808,7 +808,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           isPlayingFile = _this$state7.isPlayingFile,
           mediaViewerSelectedItem = _this$state7.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-      return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+      return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, innerContent);
     }
@@ -826,11 +826,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,
@@ -838,4 +833,6 @@ export var Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));