@atlaskit/media-card 71.0.0 → 72.0.0

package/dist/cjs/root/cardView.js

@@ -79,12 +79,12 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _iconMessage = require("./ui/iconMessage");
 
-var _loadingRateLimited = require("./ui/loadingRateLimited/loadingRateLimited");
-
 var _mediaClient = require("@atlaskit/media-client");
 
 var _cardConstants = require("./card/cardConstants");
 
+var _errors = require("../errors");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -113,13 +113,33 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoadError", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
+      var onImageLoad = _this.props.onImageLoad; // We render the icon & icon message always, even if there is dataURI available.
+      // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
+      // the root card decides to chage status to error.
+      // If the image renders successfully, we switch this variable to hide the icon & icon message
+      // behind the thumbnail in case the image has transparency.
+      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
+      // for a smoother transition
+
+      _this.setState({
+        didImageRender: true
+      });
+
+      onImageLoad && onImageLoad();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+      var onImageError = _this.props.onImageError;
+
       _this.setState({
-        isImageFailedToLoad: true
+        didImageRender: false
       });
+
+      onImageError && onImageError();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
       var dimensions = _this.props.dimensions;
@@ -156,7 +176,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref.name;
 
       var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      var shouldDisplayBackground = !dataURI || !disableOverlay;
+      var shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
       // Intention is to show full file name when it's truncate in titlebox,
@@ -200,8 +220,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           previewOrientation = _this$props2.previewOrientation,
           alt = _this$props2.alt,
           onDisplayImage = _this$props2.onDisplayImage,
-          actions = _this$props2.actions,
-          timeElapsedTillCommenced = _this$props2.timeElapsedTillCommenced;
+          actions = _this$props2.actions;
 
       var _ref2 = metadata || {},
           name = _ref2.name,
@@ -231,7 +250,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
         alt: alt,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRenderConfigByStatus", function () {
@@ -248,15 +268,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref3.name,
           mediaType = _ref3.mediaType;
 
-      var isImageFailedToLoad = _this.state.isImageFailedToLoad;
+      var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
-        renderTypeIcon: isImageFailedToLoad || !dataURI,
-        renderImageRenderer: !!dataURI && !isImageFailedToLoad,
+        renderTypeIcon: !didImageRender,
+        renderImageRenderer: !!dataURI,
         renderPlayButton: !!dataURI && mediaType === 'video',
         renderBlanket: !disableOverlay,
-        renderTitleBox: !!name && !disableOverlay,
-        renderFailedTitleBox: !!isImageFailedToLoad && !metadata,
+        renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
 
@@ -271,55 +290,71 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         case 'processing':
         case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           });
 
         case 'complete':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: !!isImageFailedToLoad && !!metadata ? /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null) : undefined
-          });
+          return defaultConfig;
 
         case 'error':
-          if (error && (0, _mediaClient.isPollingError)(error)) {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null) : undefined
+        case 'failed-processing':
+          var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          });
+
+          var iconMessage;
+
+          if (!!metadata) {
+            if (error) {
+              var secondaryError = error.secondaryError;
+
+              if ((0, _mediaClient.isRateLimitedError)(secondaryError) || secondaryError && (0, _mediaClient.isPollingError)(secondaryError)) {
+                iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
+              }
+            } else if (!isZeroSize) {
+              iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
+            }
+          } else if (!!disableOverlay) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
+          }
+
+          if (error && (0, _errors.isUploadError)(error)) {
+            if (!disableOverlay) {
+              return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+                renderFailedTitleBox: true,
+                customTitleMessage: _mediaUi.messages.failed_to_upload
+              });
+            }
+
+            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+              renderTitleBox: !metadata && !!name,
+              iconMessage: /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null)
             });
-          } else if ((0, _mediaClient.isRateLimitedError)(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata,
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/_react.default.createElement(_iconMessage.RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
-            };
-          } else {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: false,
-              renderFailedTitleBox: true
+          }
+
+          if (!disableOverlay) {
+            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+              renderTitleBox: !!name,
+              renderFailedTitleBox: !metadata,
+              iconMessage: iconMessage
             });
           }
 
-        case 'failed-processing':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderTypeIcon: true,
-            renderImageRenderer: false,
-            renderTitleBox: !!name && !disableOverlay,
-            renderFailedTitleBox: !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null) : undefined
+          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+            iconMessage: iconMessage
           });
 
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           });
       }
     });
@@ -336,7 +371,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           renderFailedTitleBox = _this$getRenderConfig.renderFailedTitleBox,
           renderTickBox = _this$getRenderConfig.renderTickBox,
           isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
-          renderLoadingRateLimited = _this$getRenderConfig.renderLoadingRateLimited;
+          customTitleMessage = _this$getRenderConfig.customTitleMessage;
 
       var _this$props4 = _this.props,
           progress = _this$props4.progress,
@@ -355,7 +390,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         "data-test-status": status,
         "data-test-progress": progress,
         "data-test-selected": selected ? true : undefined
-      }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(), renderProgressBar && _this.renderProgressBar(!hasTitleBox), renderLoadingRateLimited && /*#__PURE__*/_react.default.createElement(_loadingRateLimited.LoadingRateLimited, null), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
+      }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(customTitleMessage), renderProgressBar && _this.renderProgressBar(!hasTitleBox), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
     });
     return _this;
   }
@@ -371,13 +406,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_ref5) {
       var prevDataURI = _ref5.dataURI;
-      var dataURI = this.props.dataURI;
+      var dataURI = this.props.dataURI; // We should only switch didImageRender to false
+      // when dataURI goes undefined, not when it is updated.
+      // as this method could be triggered after onImageLoad callback,
+      // falling on a race condition
 
-      if (prevDataURI !== dataURI) {
-        this.setState({
-          isImageFailedToLoad: false
-        });
-      }
+      prevDataURI && !dataURI && this.setState({
+        didImageRender: false
+      });
     }
   }, {
     key: "width",
@@ -498,9 +534,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderFailedTitleBox",
-    value: function renderFailedTitleBox() {
+    value: function renderFailedTitleBox(customMessage) {
       return /*#__PURE__*/_react.default.createElement(_failedTitleBox.FailedTitleBox, {
-        breakpoint: this.breakpoint
+        breakpoint: this.breakpoint,
+        customMessage: customMessage
       });
     }
   }, {
@@ -526,8 +563,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           alt = _this$props8.alt,
           resizeMode = _this$props8.resizeMode,
           onDisplayImage = _this$props8.onDisplayImage,
-          mediaItemType = _this$props8.mediaItemType,
-          timeElapsedTillCommenced = _this$props8.timeElapsedTillCommenced;
+          mediaItemType = _this$props8.mediaItemType;
       return !!dataURI && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
         dataURI: dataURI,
         mediaType: mediaType,
@@ -536,8 +572,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
-        onImageError: this.onImageLoadError,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     }
   }, {

package/dist/cjs/root/inline/loader.js

@@ -57,7 +57,8 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
     return _this;
   }

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

@@ -152,15 +152,16 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     formattedDate = (0, _formatDate.formatDate)(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     position: "bottom",
-    content: formattedDate
+    content: formattedDate,
+    tag: "span"
   }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer);
 };
 
 exports.MediaInlineCardInternal = MediaInlineCardInternal;

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.PreviewCurrentlyUnavailable = exports.FailedToUpload = exports.FailedToLoad = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -49,14 +49,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/imageRenderer/imageRenderer.js

@@ -2,141 +2,47 @@
 
 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;
+  (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
+  }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
+};
 
-exports.ImageRendererBase = ImageRendererBase;
-var ImageRenderer = (0, _analyticsNext.withAnalyticsEvents)()((0, _fileAttributesContext.withFileAttributes)(ImageRendererBase));
 exports.ImageRenderer = ImageRenderer;

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

@@ -13,19 +13,23 @@ var _styled = require("./styled");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _getErrorMessage = require("../../../utils/getErrorMessage");
+var _reactIntl = require("react-intl");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), (0, _getErrorMessage.getErrorMessage)('error')));
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, customMessage)));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

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.getRenderPreviewableCardPayload = 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,
@@ -53,7 +44,7 @@ exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -67,7 +58,7 @@ exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -79,39 +70,10 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
 
 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;
-
-var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes, performanceAttributes) {
-  return {
-    eventType: 'operational',
-    action: RenderEventAction.FAILED,
-    actionSubject: 'mediaCardRender',
-    attributes: {
-      fileAttributes: fileAttributes,
-      performanceAttributes: performanceAttributes,
-      status: 'fail',
-      failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
-    }
-  };
-};
-
-exports.getRenderFailedFileUriPayload = getRenderFailedFileUriPayload;
-
 var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -169,7 +131,7 @@ exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -188,7 +150,7 @@ exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,

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;