@atlaskit/media-card 71.0.0 → 73.1.0

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"));
 
@@ -41,6 +41,14 @@ var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
+var _progressBar = require("./ui/progressBar/progressBar");
+
+var _styled2 = require("./ui/styled");
+
+var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
+
+var _getElementDimension = require("../utils/getElementDimension");
+
 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; }
@@ -84,6 +92,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFileSrc", function (fileSrc) {
       _this.setState({
         fileSrc: fileSrc
@@ -153,6 +162,23 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         viewingLevel: 'full'
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
+      var dimensions = _this.props.dimensions;
+
+      if (!dimensions) {
+        return;
+      }
+
+      var width = dimensions.width;
+
+      if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!_this.divRef.current) {
+        var elementWidth = (0, _getElementDimension.getElementDimension)(_this.divRef.current, 'width');
+
+        _this.setState({
+          elementWidth: elementWidth
+        });
+      }
+    });
     return _this;
   }
 
@@ -161,6 +187,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      this.saveElementWidth();
       var _this$props3 = this.props,
           mediaClient = _this$props3.mediaClient,
           identifier = _this$props3.identifier;
@@ -179,30 +206,41 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
+                    if (fileState.status === 'uploading') {
+                      _this2.setState({
+                        isUploading: true,
+                        progress: fileState.progress
+                      });
+                    } else {
+                      _this2.setState({
+                        isUploading: false
+                      });
+                    }
+
                     existingFileSrc = _this2.state.fileSrc; // we want to reuse the existing fileSrc to prevent re renders
 
                     if (!existingFileSrc) {
-                      _context2.next = 3;
+                      _context2.next = 4;
                       break;
                     }
 
                     return _context2.abrupt("return");
 
-                  case 3:
+                  case 4:
                     if (!(fileState.status !== 'error' && fileState.preview)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
-                    _context2.next = 6;
+                    _context2.next = 7;
                     return fileState.preview;
 
-                  case 6:
+                  case 7:
                     _yield$fileState$prev = _context2.sent;
                     value = _yield$fileState$prev.value;
 
                     if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
@@ -212,9 +250,9 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 12:
+                  case 13:
                     if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
-                      _context2.next = 29;
+                      _context2.next = 30;
                       break;
                     }
 
@@ -222,7 +260,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
                     artifacts = fileState.artifacts;
 
                     if (!(!artifactName || !artifacts)) {
-                      _context2.next = 18;
+                      _context2.next = 19;
                       break;
                     }
 
@@ -230,34 +268,34 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 18:
-                    _context2.prev = 18;
-                    _context2.next = 21;
+                  case 19:
+                    _context2.prev = 19;
+                    _context2.next = 22;
                     return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
 
-                  case 21:
+                  case 22:
                     _fileSrc = _context2.sent;
 
                     _this2.setFileSrc(_fileSrc);
 
-                    _context2.next = 29;
+                    _context2.next = 30;
                     break;
 
-                  case 25:
-                    _context2.prev = 25;
-                    _context2.t0 = _context2["catch"](18);
+                  case 26:
+                    _context2.prev = 26;
+                    _context2.t0 = _context2["catch"](19);
                     onError = _this2.props.onError;
 
                     if (onError) {
                       onError(_context2.t0);
                     }
 
-                  case 29:
+                  case 30:
                   case "end":
                     return _context2.stop();
                 }
               }
-            }, _callee2, null, [[18, 25]]);
+            }, _callee2, null, [[19, 26]]);
           }));
 
           function next(_x) {
@@ -274,6 +312,12 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       this.unsubscribe();
       this.revoke();
     }
+  }, {
+    key: "breakpoint",
+    get: function get() {
+      var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _.defaultImageCardDimensions.width;
+      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -286,8 +330,12 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           selected = _this$props4.selected,
           testId = _this$props4.testId,
           identifier = _this$props4.identifier,
-          forwardRef = _this$props4.forwardRef;
-      var fileSrc = this.state.fileSrc;
+          forwardRef = _this$props4.forwardRef,
+          autoplay = _this$props4.autoplay;
+      var _this$state = this.state,
+          fileSrc = _this$state.fileSrc,
+          isUploading = _this$state.isUploading,
+          progress = _this$state.progress;
 
       if (!fileSrc) {
         return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, {
@@ -308,7 +356,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           type: "video",
           src: fileSrc,
           fileId: identifier.id,
-          isAutoPlay: true,
+          isAutoPlay: autoplay,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
           onFirstPlay: _this3.onFirstPlay,
@@ -318,7 +366,12 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           originalDimensions: originalDimensions,
           showControls: checkMouseMovement
         });
-      }));
+      }), isUploading ? /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+        progress: progress,
+        breakpoint: this.breakpoint,
+        positionBottom: true,
+        showOnTop: true
+      }) : null);
     }
   }]);
   return InlinePlayerBase;

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,65 @@
 
 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;
-
-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"));
+exports.ImageRendererBase = exports.ImageRenderer = void 0;
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-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];
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 ImageRendererBase = function ImageRendererBase(_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,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? 'media-card-image-renderer' : _ref$className;
+  (0, _react.useEffect)(function () {
+    // TODO: trigger accordingly with the succeeded event. This could be a breaking change
+    if (mediaType === 'image' && onDisplayImage) {
+      onDisplayImage();
     }
-
-    _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)));
-    }
-  }]);
-  return ImageRendererBase;
-}(_react.default.Component);
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
+    className: className,
+    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));
+var ImageRenderer = (0, _styledComponents.default)(ImageRendererBase)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref2) {
+  var isImageVisible = _ref2.isImageVisible;
+  return "\n    visibility: ".concat(isImageVisible ? 'visible' : 'hidden', ";\n");
+});
 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"));
 
@@ -28,7 +28,7 @@ exports.WarningIconWrapper = WarningIconWrapper;
 var LoadingRateLimitedTextWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(_colors.N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat((0, _styled.generateResponsiveStyles)(breakpoint, positionBottom, 1), "\n  ");
+  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(_colors.N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat((0, _styled.generateResponsiveStyles)(breakpoint, positionBottom, false, 1), "\n  ");
 });
 
 exports.LoadingRateLimitedTextWrapper = LoadingRateLimitedTextWrapper;

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,19 +11,22 @@ 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;
+      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
+      _ref$showOnTop = _ref.showOnTop,
+      showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/_react.default.createElement(_styled.StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };