@atlaskit/media-card 70.11.0 → 73.0.0

package/dist/cjs/root/inline/{inlineMediaCard.js → mediaInlineCard.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineMediaCard = exports.InlineMediaCardInternal = void 0;
+exports.MediaInlineCardInternal = exports.MediaInlineCard = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
@@ -23,12 +23,16 @@ var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _formatDate = require("@atlaskit/media-ui/formatDate");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // UI component which renders an inline link in the appropiate state based on a media file
-var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
+var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
       identifier = _ref.identifier,
       shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
@@ -44,10 +48,15 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isMediaViewerVisible = _useState4[0],
-      setMediaViewerVisible = _useState4[1];
+      isErrored = _useState4[0],
+      setIsErrored = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isMediaViewerVisible = _useState6[0],
+      setMediaViewerVisible = _useState6[1];
 
-  var onInlineCardClick = function onInlineCardClick(event) {
+  var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
@@ -78,28 +87,60 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
     return null;
   };
 
+  var renderContent = function renderContent(children) {
+    return intl ? children : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  var defaultIntl = (0, _reactIntlNext.createIntl)({
+    locale: 'en'
+  });
   (0, _react.useEffect)(function () {
-    // [EDM-1948] TODO: use mediaClient.file.getFileState()
-    // [EDM-1948] TODO: handle error here
-    mediaClient.file.getCurrentState(identifier.id, {
+    mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
-    }).then(function (fileState) {
-      setFileState(fileState);
+    }).subscribe({
+      next: function next(fileState) {
+        setFileState(fileState);
+      },
+      error: function error() {
+        setIsErrored(true);
+      }
     });
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvingView, {
-      url: intl.formatMessage(_mediaUi.messages.loading_file),
-      titleTextColor: "black",
-      withoutHover: true
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.loading_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (isErrored) {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardErroredView, {
-      url: "",
-      message: fileState.message || ''
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: fileState.message || '',
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'failed-processing') {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'uploading') {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 
@@ -107,21 +148,38 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
       name = fileState.name;
 
   var linkIcon = /*#__PURE__*/_react.default.createElement(_mediaTypeIcon.MediaTypeIcon, {
-    testId: 'inline-media-card-file-type-icon',
+    testId: 'media-inline-card-file-type-icon',
     size: "small",
     type: mediaType
   });
 
-  var mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
+  var mediaViewer = renderMediaViewer();
+  var formattedDate;
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvedView, {
+  if (fileState.createdAt) {
+    var _ref2 = intl || {
+      locale: 'en'
+    },
+        _ref2$locale = _ref2.locale,
+        locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
+
+    formattedDate = (0, _formatDate.formatDate)(fileState.createdAt, locale);
+  }
+
+  return renderContent( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    position: "bottom",
+    content: formattedDate,
+    tag: "span"
+  }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
-    onClick: onInlineCardClick,
+    onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer));
 };
 
-exports.InlineMediaCardInternal = InlineMediaCardInternal;
-var InlineMediaCard = (0, _reactIntl.injectIntl)(InlineMediaCardInternal);
-exports.InlineMediaCard = InlineMediaCard;
+exports.MediaInlineCardInternal = MediaInlineCardInternal;
+var MediaInlineCard = (0, _reactIntlNext.injectIntl)(MediaInlineCardInternal, {
+  enforceContext: false
+});
+exports.MediaInlineCard = MediaInlineCard;

package/dist/cjs/root/inlinePlayer.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlinePlayer = exports.InlinePlayerBase = exports.getPreferredVideoArtifact = exports.inlinePlayerClassName = void 0;
+exports.inlinePlayerClassName = exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -303,7 +303,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function () {
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function (checkMouseMovement) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
@@ -315,7 +315,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           lastWatchTimeConfig: {
             contentId: identifier.id
           },
-          originalDimensions: originalDimensions
+          originalDimensions: originalDimensions,
+          showControls: checkMouseMovement
         });
       }));
     }

package/dist/cjs/root/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlinePlayerWrapper = exports.Wrapper = void 0;
+exports.Wrapper = exports.InlinePlayerWrapper = exports.FormattedMessageWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
 
 var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var getWrapperHeight = function getWrapperHeight(dimensions) {
   return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
@@ -51,4 +51,8 @@ var InlinePlayerWrapper = _styledComponents.default.div(_templateObject2 || (_te
 }, (0, _constants.borderRadius)(), _getSelectedBorderStyle.getSelectedBorderStyle);
 
 exports.InlinePlayerWrapper = InlinePlayerWrapper;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+
+var FormattedMessageWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.FormattedMessageWrapper = FormattedMessageWrapper;

package/dist/cjs/root/ui/actionsBar/styled.js

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

package/dist/cjs/root/ui/blanket/styled.js

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

package/dist/cjs/root/ui/common.js

@@ -5,22 +5,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTitleBoxHeight = exports.responsiveSettings = void 0;
+exports.responsiveSettings = exports.getTitleBoxHeight = exports.Breakpoint = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _Breakpoint = require("./Breakpoint");
-
 var _responsiveSettings;
 
-var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.SMALL, {
+var Breakpoint;
+exports.Breakpoint = Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (exports.Breakpoint = Breakpoint = {}));
+
+var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,
   titleBox: {
     verticalPadding: 4,
     horizontalPadding: 8
   }
-}), (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.LARGE, {
+}), (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.LARGE, {
   fontSize: 14,
   lineHeight: 22,
   titleBox: {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewCurrentlyUnavailable = exports.RateLimited = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
+exports.PreviewUnavailable = exports.PreviewCurrentlyUnavailable = exports.IconMessage = exports.FailedToUpload = exports.FailedToLoad = exports.CreatingPreview = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,7 +15,9 @@ var _styled = require("./styled");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
+
+var _styled2 = require("../../styled");
 
 var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
@@ -26,7 +28,7 @@ var IconMessage = function IconMessage(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messageDescriptor)));
 };
 
 exports.IconMessage = IconMessage;
@@ -49,14 +51,21 @@ var PreviewUnavailable = function PreviewUnavailable(props) {
 
 exports.PreviewUnavailable = PreviewUnavailable;
 
-var RateLimited = function RateLimited(props) {
+var FailedToLoad = function FailedToLoad(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
-    messageDescriptor: _mediaUi.messages.preview_rateLimited,
-    reducedFont: true
+    messageDescriptor: _mediaUi.messages.failed_to_load
+  }));
+};
+
+exports.FailedToLoad = FailedToLoad;
+
+var FailedToUpload = function FailedToUpload(props) {
+  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _mediaUi.messages.failed_to_upload
   }));
 };
 
-exports.RateLimited = RateLimited;
+exports.FailedToUpload = FailedToUpload;
 
 var PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {

package/dist/cjs/root/ui/iconWrapper/styled.js

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

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

@@ -2,141 +2,51 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageRenderer = exports.ImageRendererBase = void 0;
+exports.ImageRenderer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = require("../../../utils/analytics");
-
-var _fileAttributesContext = require("../../../utils/fileAttributesContext");
-
 var _resizeModeToMediaImageProps = require("../../../utils/resizeModeToMediaImageProps");
 
-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 ImageRendererBase = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ImageRendererBase, _React$Component);
-
-  var _super = _createSuper(ImageRendererBase);
-
-  function ImageRendererBase() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ImageRendererBase);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          fileAttributes = _this$props.fileAttributes,
-          timeElapsedTillCommenced = _this$props.timeElapsedTillCommenced;
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.SUCCEEDED)) {
-        var timeElapsedTillSucceeded = performance.now();
-        var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        var performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced: durationSinceCommenced
-          }
-        };
-        (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
-      var _this$props2 = _this.props,
-          onImageError = _this$props2.onImageError,
-          fileAttributes = _this$props2.fileAttributes;
-      onImageError && onImageError();
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.FAILED)) {
-        var _this$props3 = _this.props,
-            createAnalyticsEvent = _this$props3.createAnalyticsEvent,
-            mediaItemType = _this$props3.mediaItemType,
-            timeElapsedTillCommenced = _this$props3.timeElapsedTillCommenced;
-        var timeElapsedTillFailed = performance.now();
-        var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        var performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced: durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedFileUriPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedExternalUriPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldFireEvent", function (action) {
-      return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ImageRendererBase, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-      var _this$props4 = this.props,
-          onDisplayImage = _this$props4.onDisplayImage,
-          mediaType = _this$props4.mediaType;
-
-      if (mediaType === 'image' && onDisplayImage) {
-        onDisplayImage();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          dataURI = _this$props5.dataURI,
-          previewOrientation = _this$props5.previewOrientation,
-          alt = _this$props5.alt,
-          resizeMode = _this$props5.resizeMode;
-      return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-        dataURI: dataURI,
-        alt: alt,
-        previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
-      }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageRenderer = function ImageRenderer(_ref) {
+  var dataURI = _ref.dataURI,
+      previewOrientation = _ref.previewOrientation,
+      alt = _ref.alt,
+      resizeMode = _ref.resizeMode,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      onDisplayImage = _ref.onDisplayImage,
+      mediaType = _ref.mediaType,
+      nativeLazyLoad = _ref.nativeLazyLoad,
+      forceSyncDisplay = _ref.forceSyncDisplay;
+  (0, _react.useEffect)(function () {
+    // TODO: trigger accordingly with the succeeded event. This could be a breaking change
+    if (mediaType === 'image' && onDisplayImage) {
+      onDisplayImage();
     }
-  }]);
-  return ImageRendererBase;
-}(_react.default.Component);
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
+  }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
+};
 
-exports.ImageRendererBase = ImageRendererBase;
-var ImageRenderer = (0, _analyticsNext.withAnalyticsEvents)()((0, _fileAttributesContext.withFileAttributes)(ImageRendererBase));
 exports.ImageRenderer = ImageRenderer;

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

@@ -13,21 +13,23 @@ var _errorIcon = require("@atlaskit/media-ui/errorIcon");
 
 var _styled = require("./styled");
 
+var _styled2 = require("../../styled");
+
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? true : _ref$positionBottom;
   return /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedContainer, null, /*#__PURE__*/_react.default.createElement(_styled.WarningIconWrapper, null, _errorIcon.errorIcon), /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/_react.default.createElement(_styled.CouldntLoadWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.couldnt_load_file)), /*#__PURE__*/_react.default.createElement(_styled.ErrorWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.error_429))));
+  }, /*#__PURE__*/_react.default.createElement(_styled.CouldntLoadWrapper, null, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.couldnt_load_file))), /*#__PURE__*/_react.default.createElement(_styled.ErrorWrapper, null, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.error_429)))));
 };
 
 exports.LoadingRateLimited = LoadingRateLimited;

package/dist/cjs/root/ui/loadingRateLimited/styled.js

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

package/dist/cjs/root/ui/playButton/styled.js

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

package/dist/cjs/root/ui/progressBar/progressBar.js

@@ -11,12 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
-var _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;

package/dist/cjs/root/ui/progressBar/styled.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResponsiveStyles = generateResponsiveStyles;
 exports.StyledBar = void 0;
+exports.generateResponsiveStyles = generateResponsiveStyles;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -20,8 +20,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _templateObject;
 
 var height = 3;
@@ -39,7 +37,7 @@ var largeSizeSettings = {
 
 function generateResponsiveStyles(breakpoint, positionBottom) {
   var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var setting = breakpoint === _Breakpoint.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
   return "\n    bottom: ".concat(marginBottom, "px\n  ");