@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/esm/root/inlinePlayer.js

@@ -20,6 +20,10 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
+import { ProgressBar } from './ui/progressBar/progressBar';
+import { calcBreakpointSize } from './ui/styled';
+import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
+import { getElementDimension } from '../utils/getElementDimension';
 export var inlinePlayerClassName = 'media-card-inline-player';
 export var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -52,6 +56,8 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {});
 
+    _defineProperty(_assertThisInitialized(_this), "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "setFileSrc", function (fileSrc) {
       _this.setState({
         fileSrc: fileSrc
@@ -126,6 +132,24 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
+      var dimensions = _this.props.dimensions;
+
+      if (!dimensions) {
+        return;
+      }
+
+      var width = dimensions.width;
+
+      if (width && isValidPercentageUnit(width) && !!_this.divRef.current) {
+        var elementWidth = getElementDimension(_this.divRef.current, 'width');
+
+        _this.setState({
+          elementWidth: elementWidth
+        });
+      }
+    });
+
     return _this;
   }
 
@@ -134,6 +158,7 @@ export 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;
@@ -152,30 +177,41 @@ export 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;
                     }
 
@@ -185,9 +221,9 @@ export 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;
                     }
 
@@ -195,7 +231,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
                     artifacts = fileState.artifacts;
 
                     if (!(!artifactName || !artifacts)) {
-                      _context2.next = 18;
+                      _context2.next = 19;
                       break;
                     }
 
@@ -203,34 +239,34 @@ export 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) {
@@ -247,6 +283,12 @@ export 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 calcBreakpointSize(parseInt("".concat(width), 10));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -259,8 +301,13 @@ export 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,
+          cardPreview = _this$props4.cardPreview;
+      var _this$state = this.state,
+          fileSrc = _this$state.fileSrc,
+          isUploading = _this$state.isUploading,
+          progress = _this$state.progress;
 
       if (!fileSrc) {
         return /*#__PURE__*/React.createElement(CardLoading, {
@@ -281,7 +328,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           type: "video",
           src: fileSrc,
           fileId: identifier.id,
-          isAutoPlay: true,
+          isAutoPlay: autoplay,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
           onFirstPlay: _this3.onFirstPlay,
@@ -289,9 +336,15 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
             contentId: identifier.id
           },
           originalDimensions: originalDimensions,
-          showControls: checkMouseMovement
+          showControls: checkMouseMovement,
+          poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
         });
-      }));
+      }), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+        progress: progress,
+        breakpoint: this.breakpoint,
+        positionBottom: true,
+        showOnTop: true
+      }) : null);
     }
   }]);
 

package/dist/esm/root/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -32,4 +32,5 @@ export var InlinePlayerWrapper = styled.div(_templateObject2 || (_templateObject
 }, function (props) {
   return getDimensionsWithDefault(props.dimensions).height || 'auto';
 }, borderRadius(), getSelectedBorderStyle);
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export var FormattedMessageWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));

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

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

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

@@ -3,8 +3,7 @@ import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
 export var ImageRenderer = function ImageRenderer(_ref) {
-  var dataURI = _ref.dataURI,
-      previewOrientation = _ref.previewOrientation,
+  var cardPreview = _ref.cardPreview,
       alt = _ref.alt,
       resizeMode = _ref.resizeMode,
       onImageLoad = _ref.onImageLoad,
@@ -19,12 +18,21 @@ export var ImageRenderer = function ImageRenderer(_ref) {
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  var onLoad = function onLoad() {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  var onError = function onError() {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));

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

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

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

@@ -10,7 +10,7 @@ export var WarningIconWrapper = styled.div(_templateObject2 || (_templateObject2
 export var LoadingRateLimitedTextWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, 1), "\n  ");
+  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, false, 1), "\n  ");
 });
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
 export var CouldntLoadWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));

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

@@ -6,11 +6,14 @@ export var ProgressBar = function ProgressBar(_ref) {
       _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? 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.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

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

@@ -19,17 +19,18 @@ var smallSizeSettings = {
 var largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 export var StyledBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n    box-sizing: border-box;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 StyledBar.displayName = 'StyledProgressBar';

package/dist/esm/root/ui/styled.js

@@ -61,8 +61,8 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';
 };
 
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
+var getCursorStyle = function getCursorStyle(cursor) {
+  return "cursor: ".concat(cursor, ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -85,14 +85,14 @@ export var NewFileExperienceWrapper = styled.div(_templateObject || (_templateOb
   var breakpoint = _ref6.breakpoint,
       dimensions = _ref6.dimensions,
       appearance = _ref6.appearance,
-      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
       disableOverlay = _ref6.disableOverlay,
       displayBackground = _ref6.displayBackground,
       selected = _ref6.selected,
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+      shouldDisplayTooltip = _ref6.shouldDisplayTooltip,
+      mediaCardCursor = _ref6.mediaCardCursor;
+  return "\n    ".concat(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(mediaCardCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
 NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
 export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);

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

@@ -3,7 +3,8 @@ import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
       _ref$customMessage = _ref.customMessage,
@@ -14,5 +15,5 @@ export var FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

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

package/dist/esm/types.js

@@ -1 +1,7 @@
-export {};
+export var MediaCardCursor;
+
+(function (MediaCardCursor) {
+  MediaCardCursor["Action"] = "pointer";
+  MediaCardCursor["NoAction"] = "default";
+  MediaCardCursor["NotReady"] = "wait";
+})(MediaCardCursor || (MediaCardCursor = {}));

package/dist/esm/utils/analytics.js

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
@@ -89,20 +95,25 @@ export var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadat
     return error.secondaryError.metadata;
   }
 };
+export var extractErrorInfo = function extractErrorInfo(error) {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error)
+  };
+};
 export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
     action: 'failed',
     actionSubject: 'mediaCardRender',
-    attributes: {
+    attributes: _objectSpread(_objectSpread({
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
-      status: 'fail',
-      failReason: getRenderErrorFailReason(error),
-      error: getRenderErrorErrorReason(error),
-      errorDetail: getRenderErrorErrorDetail(error),
+      status: 'fail'
+    }, extractErrorInfo(error)), {}, {
       request: getRenderErrorRequestMetadata(error)
-    }
+    })
   };
 };
 export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {

package/dist/esm/utils/cardActions/cardActionsDropdownMenu.js

@@ -5,6 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["triggerRef"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -85,7 +86,7 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
           onOpenChange: onOpenChange,
           trigger: function trigger(_ref) {
             var triggerRef = _ref.triggerRef,
-                providedProps = _objectWithoutProperties(_ref, ["triggerRef"]);
+                providedProps = _objectWithoutProperties(_ref, _excluded);
 
             return /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
               variant: triggerVariant,

package/dist/esm/utils/dimensionComparer.js

@@ -1,23 +1,18 @@
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+var isPixelEquivalent = function isPixelEquivalent(dimension) {
+  return typeof dimension === 'number' || containsPixelUnit("".concat(dimension));
+};
+
 export var canCompareDimension = function canCompareDimension(current, next) {
   if (!current || !next) {
     return false;
   }
 
-  if (isValidPercentageUnit(current) && isValidPercentageUnit(next)) {
-    return true;
-  }
-
-  if (containsPixelUnit("".concat(current)) && containsPixelUnit("".concat(next))) {
-    return true;
-  }
-
-  if (typeof current === 'number' && typeof next === 'number') {
-    return true;
-  }
-
-  return false;
+  var bothPixelEquivalent = isPixelEquivalent(current) && isPixelEquivalent(next);
+  var bothPercentage = isValidPercentageUnit(current) && isValidPercentageUnit(next);
+  return bothPixelEquivalent || bothPercentage;
 };
 export var isBigger = function isBigger(current, next) {
   if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {

package/dist/esm/utils/getErrorMessage.js

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

package/dist/esm/utils/getMediaCardCursor.js

@@ -0,0 +1,19 @@
+import { MediaCardCursor } from '../types';
+export var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) {
+  // If error status or no action is requested = NoAction
+  if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
+    return MediaCardCursor.NoAction;
+  }
+
+  if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
+    return MediaCardCursor.NotReady;
+  } else if (mediaType === 'video' && hasCardPreview && useInlinePlayer) {
+    return MediaCardCursor.Action;
+  }
+
+  if (useMediaViewer) {
+    return MediaCardCursor.Action;
+  }
+
+  return MediaCardCursor.NoAction;
+};

package/dist/esm/utils/globalScope/getSSRData.js

@@ -0,0 +1,10 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export var getSSRData = function getSSRData(identifier) {
+  var mediaCardSsr = getMediaCardSSR();
+
+  if (!mediaCardSsr) {
+    return;
+  }
+
+  return mediaCardSsr[getKey(identifier)];
+};

package/dist/esm/utils/globalScope/globalScope.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { printFunctionCall, printScript } from '../printScript';
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+export var GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export var GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope() {
+  var globalScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  var namespace = '__MEDIA_INTERNAL';
+
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+
+  return globalScope[namespace];
+}
+export function getMediaCardSSR() {
+  var globalScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+  var globalMedia = getMediaGlobalScope(globalScope); // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+
+  var key = 'mediaCardSsr';
+
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+
+  return globalMedia[key];
+}
+
+var dashed = function dashed(param) {
+  return param ? "-".concat(param) : '';
+};
+
+export var getKey = function getKey(_ref) {
+  var id = _ref.id,
+      collectionName = _ref.collectionName,
+      occurrenceKey = _ref.occurrenceKey;
+  return "".concat(id).concat(dashed(collectionName)).concat(dashed(occurrenceKey));
+};
+export var storeDataURI = function storeDataURI(key, dataURI, dimensions, error) {
+  var globalScope = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : window;
+  var mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI: dataURI,
+    dimensions: dimensions,
+    error: error
+  };
+};
+
+var generateScript = function generateScript(identifier, dataURI, dimensions, error) {
+  var functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+
+export var StoreSSRDataScript = function StoreSSRDataScript(_ref2) {
+  var dataURI = _ref2.dataURI,
+      identifier = _ref2.identifier,
+      dimensions = _ref2.dimensions,
+      error = _ref2.error;
+  return /*#__PURE__*/React.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: generateScript(identifier, dataURI, dimensions, error)
+    }
+  });
+};

package/dist/esm/utils/globalScope/index.js

@@ -0,0 +1,2 @@
+export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

package/dist/esm/utils/globalScope/types.js

@@ -0,0 +1 @@
+export {};