@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/esm/files/cardImageView/cardOverlay/index.js

@@ -10,6 +10,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
@@ -19,7 +21,8 @@ import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things direct
 import { FileIcon } from '../../../utils/fileIcon';
 import { ErrorIcon } from '../../../utils/errorIcon';
 import CardActions from '../../../utils/cardActions';
-import { TickBox, Overlay, ErrorLine, LeftColumn, TopRow, BottomRow, RightColumn, ErrorMessage, TitleWrapper, Subtitle, Metadata, AltWrapper } from './styled';
+import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
+import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
 
 var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
   // don't show title if error
@@ -91,21 +94,25 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
       var menuTriggerColor = !persistent ? 'white' : undefined;
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(Overlay, {
         hasError: !!error,
         noHover: noHover,
         className: this.wrapperClassNames
-      }, /*#__PURE__*/React.createElement(TopRow, {
+      }, jsx("div", {
+        css: topRowStyles,
         className: 'top-row'
-      }, this.errorLine(), /*#__PURE__*/React.createElement(TitleWrapper, {
-        className: 'title'
-      }, titleText ? /*#__PURE__*/React.createElement(Ellipsify, {
+      }, this.errorLine(), jsx(TitleWrapper, null, titleText ? jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: titleText,
         lines: 2
-      }) : null), this.tickBox()), /*#__PURE__*/React.createElement(BottomRow, {
+      }) : null), this.tickBox()), jsx("div", {
+        css: bottomRowStyles,
         className: 'bottom-row'
-      }, /*#__PURE__*/React.createElement(LeftColumn, null, this.bottomLeftColumn()), /*#__PURE__*/React.createElement(RightColumn, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      }, jsx("div", {
+        css: leftColumnStyles
+      }, this.bottomLeftColumn()), jsx("div", {
+        css: rightColumnStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         onToggle: this.onMenuToggle,
         triggerColor: menuTriggerColor
@@ -117,7 +124,11 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           error = _this$props3.error,
           alt = _this$props3.alt;
-      return error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(ErrorIcon, null), /*#__PURE__*/React.createElement(ErrorMessage, null, error)), alt && /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(AltWrapper, null, alt)));
+      return error && jsx(React.Fragment, null, jsx("div", {
+        css: errorLineStyles
+      }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
+        css: errorLineStyles
+      }, jsx(AltWrapper, null, alt)));
     }
   }, {
     key: "tickBox",
@@ -125,15 +136,16 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props4 = this.props,
           selected = _this$props4.selected,
           selectable = _this$props4.selectable;
-      var tick = /*#__PURE__*/React.createElement(TickIcon, {
+      var tick = jsx(TickIcon, {
         label: "tick"
       });
       var className = cx('tickbox', {
         selected: selected
       });
-      return selectable && /*#__PURE__*/React.createElement(TickBox, {
+      return selectable && jsx("div", {
+        css: tickBoxStyles,
         className: className
-      }, " ", tick, " ");
+      }, tick);
     }
   }, {
     key: "bottomLeftColumn",
@@ -146,14 +158,15 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
             subtitle = _this$props5.subtitle,
             icon = _this$props5.icon;
         var classNames = cx('metadata');
-        var fileIcon = mediaType || icon ? /*#__PURE__*/React.createElement(FileIcon, {
+        var fileIcon = mediaType || icon ? jsx(FileIcon, {
           mediaType: mediaType,
           iconUrl: icon
         }) : null;
-        var subtitleEl = subtitle ? /*#__PURE__*/React.createElement(Subtitle, {
+        var subtitleEl = subtitle ? jsx("div", {
+          css: subtitleStyles,
           className: "file-size"
         }, subtitle) : null;
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Metadata, {
+        return jsx("div", null, jsx(Metadata, {
           className: classNames
         }, fileIcon, subtitleEl));
       }

package/dist/esm/files/cardImageView/cardOverlay/styles.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+/**
+ * Everything about this file change is just wrong.
+ * Mostly because we do bad things with classes.
+ * This is all wrong and hopefully will be removed from existence with card v3,
+ * so please don’t be too sad about all this!
+ */
+import { css } from '@emotion/react';
+import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import * as colors from '@atlaskit/theme/colors';
+import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
+export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: #798599; /* TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: white;\n    background-color: #0052cc; /* TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), rgba('#ffffff', 0.5));
+
+var getOverlayStyles = function getOverlayStyles(_ref) {
+  var hasError = _ref.hasError,
+      noHover = _ref.noHover;
+
+  if (hasError || noHover) {
+    return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
+  }
+};
+
+export var overlayStyles = function overlayStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n\n    .bottom-row {\n      .delete-btn {\n        display: flex;\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n        }\n\n        .title,\n        .bottom-row,\n        .file-size,\n        .more-btn {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: white;\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: white;\n        display: none;\n      }\n\n      .more-btn {\n        color: ", ";\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n\n      .delete-btn {\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .more-btn {\n        ", " color: ", ";\n      }\n\n      .delete-btn {\n        display: flex;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          border-color: ", " !important;\n          color: white;\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), colors.B400, colors.N800, rgba(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, rgba(colors.N900, 0.5), centerX, colors.N0, colors.B200, colors.B200, colors.N800);
+};
+export var errorLineStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
+export var leftColumnStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
+export var topRowStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+export var bottomRowStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
+export var rightColumnStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, colors.N70);
+export var altWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
+export var titleWrapperStyles = function titleWrapperStyles(theme) {
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
+    light: colors.N800,
+    dark: colors.DN900
+  })({
+    theme: theme
+  }));
+};
+export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), ellipsis('100px'));
+export var metadataStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/files/cardImageView/index.js

@@ -10,17 +10,19 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
-import { PlayIconWrapper, Wrapper, ProgressBarWrapper, Body, CardActionsWrapper, Overlay, ProgressWrapper, Title, PlayIconBackground } from './styled';
+import { bodyStyles, cardActionsWrapperStyles, overlayStyles, progressWrapperStyles, titleStyles, playIconBackgroundStyles } from './styles';
 import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
+import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
 export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _inherits(FileCardImageView, _Component);
 
@@ -63,11 +65,11 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderLoadingContents", function () {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
-      }, /*#__PURE__*/React.createElement(CardLoading, null)));
+      }, jsx(CardLoading, null)));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderErrorContents", function () {
@@ -79,9 +81,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props2.mediaType,
           actions = _this$props2.actions,
           fileSize = _this$props2.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         error: error,
         persistent: true,
@@ -100,9 +102,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props3.mediaType,
           actions = _this$props3.actions,
           fileSize = _this$props3.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         noHover: true,
         persistent: true,
@@ -122,7 +124,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selectable = _this$props4.selectable,
           selected = _this$props4.selected;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -148,7 +150,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(PlayIconWrapper, null, /*#__PURE__*/React.createElement(PlayIconBackground, null, /*#__PURE__*/React.createElement(VidPlayIcon, {
+      return jsx(PlayIconWrapper, null, jsx("div", {
+        css: playIconBackgroundStyles
+      }, jsx(VidPlayIcon, {
         testId: "media-card-play-button",
         label: "play",
         size: "large"
@@ -189,7 +193,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         _this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/React.createElement(MediaImage, {
+      return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: _this.isCropped,
@@ -211,13 +215,23 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ProgressBarWrapper, null, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(Ellipsify, {
+      return jsx(ProgressBarWrapper, null, jsx("div", {
+        css: overlayStyles
+      }, jsx("div", {
+        css: titleStyles
+      }, jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: mediaName || '',
         lines: 2
-      })), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement(ProgressBar, {
+      })), jsx("div", {
+        css: bodyStyles
+      }, jsx("div", {
+        css: progressWrapperStyles
+      }, jsx(ProgressBar, {
         progress: progress
-      })), /*#__PURE__*/React.createElement(CardActionsWrapper, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      })), jsx("div", {
+        css: cardActionsWrapperStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         triggerColor: "white"
       }) : null))));
@@ -240,9 +254,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
@@ -258,7 +272,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selected = _this$props11.selected,
           actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -284,17 +298,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           progress = _this$props12.progress,
           status = _this$props12.status,
           mediaName = _this$props12.mediaName;
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        "data-testid": "media-file-card-view",
-        "data-test-media-name": mediaName,
-        "data-test-status": status,
-        "data-test-progress": progress,
-        "data-test-selected": selected ? true : undefined,
+      return jsx(CardImageViewWrapper, {
+        mediaName: mediaName,
+        status: status,
+        progress: progress,
         disableOverlay: disableOverlay,
         selectable: selectable,
         selected: selected,
-        mediaType: mediaType,
-        className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+        mediaType: mediaType
       }, this.renderCardContents());
     }
   }, {

package/dist/esm/files/cardImageView/styles.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import { css } from '@emotion/react';
+import { absolute, borderRadius, size } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import { N20, DN50, N0 } from '@atlaskit/theme/colors';
+import { rootStyles, cardShadow } from '../../styles';
+import { getSelectedBorderStyle } from '../../styles/getSelectedBorderStyle';
+
+var getShadowAttribute = function getShadowAttribute(props) {
+  var disableOverlay = props.disableOverlay;
+  return disableOverlay ? '' : cardShadow;
+};
+
+var getBackgroundColor = function getBackgroundColor(props) {
+  var mediaType = props.mediaType;
+  return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
+    light: N20,
+    dark: DN50
+  })(props), ";");
+};
+
+export var wrapperStyles = function wrapperStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), rootStyles(), getShadowAttribute(props), borderRadius, getBackgroundColor(props), getSelectedBorderStyle(props), size(), borderRadius, borderRadius);
+};
+export var playIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])));
+export var playIconBackgroundStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: rgba(23, 43, 77, 0.7);\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])));
+var bodyHeight = 26;
+export var progressBarWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
+export var overlayStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: rgba(9, 30, 66, 0.5);\n"])), absolute(), size());
+export var titleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), N0);
+export var bodyStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), N0);
+export var progressWrapperStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);
+export var cardActionsWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));

package/dist/esm/index.js

@@ -3,5 +3,5 @@ export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
 export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView/classnames';
-export { inlinePlayerClassName } from './root/inlinePlayer';
+export { inlinePlayerClassName } from './root/styles';
 export { newFileExperienceClassName } from './root/card/cardConstants';

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

@@ -2,29 +2,28 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createObjectURLCache } from '../../../utils/objectURLCache';
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-export var getCacheKey = function getCacheKey(id, dimensions) {
-  return [id, dimensions.height, dimensions.width].join('-');
+export var getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 export var CardPreviewCacheImpl = /*#__PURE__*/_createClass(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   _classCallCheck(this, CardPreviewCacheImpl);
 
-  _defineProperty(this, "get", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
     return _this.previewCache.get(cacheKey);
   });
 
-  _defineProperty(this, "set", function (id, dimensions, cardPreview) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
 
-  _defineProperty(this, "remove", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  _defineProperty(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.remove(cacheKey);
   });

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

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { takeSnapshot } from '../../../utils/videoSnapshot';
 import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';

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

@@ -1,6 +1,6 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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; }
 
@@ -26,7 +26,7 @@ export var getFilePreviewFromFileState = function getFilePreviewFromFileState(fi
   return 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 };
 
-var extendAndCachePreview = function extendAndCachePreview(id, dimensions, preview, mediaBlobUrlAttrs) {
+var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, mediaBlobUrlAttrs) {
   var source;
 
   switch (preview.source) {
@@ -53,7 +53,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
   var dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  cardPreviewCache.set(id, dimensions, _objectSpread(_objectSpread({}, preview), {}, {
+  cardPreviewCache.set(id, mode, _objectSpread(_objectSpread({}, preview), {}, {
     source: source,
     dataURI: dataURI
   }));
@@ -75,44 +75,48 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 export var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, mode, cachedPreview, dimensionsAreBigger, localPreview;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
-            cachedPreview = cardPreviewCache.get(id, dimensions);
+            mode = imageUrlParams.mode;
+            cachedPreview = cardPreviewCache.get(id, mode);
+            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-            if (!cachedPreview) {
-              _context.next = 4;
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 6;
               break;
             }
 
             return _context.abrupt("return", cachedPreview);
 
-          case 4:
-            _context.prev = 4;
+          case 6:
+            _context.prev = 6;
 
             if (!filePreview) {
-              _context.next = 10;
+              _context.next = 12;
               break;
             }
 
-            _context.next = 8;
+            _context.next = 10;
             return getCardPreviewFromFilePreview(filePreview);
 
-          case 8:
+          case 10:
             localPreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
-          case 10:
-            _context.next = 17;
+          case 12:
+            _context.next = 19;
             break;
 
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](4);
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](6);
 
             /**
              * We report the error if:
@@ -134,29 +138,29 @@ export var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 17;
+              _context.next = 19;
               break;
             }
 
             throw _context.t0;
 
-          case 17:
+          case 19:
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 21;
               break;
             }
 
             throw new MediaCardError('remote-preview-not-ready');
 
-          case 19:
+          case 21:
             return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
 
-          case 20:
+          case 22:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[4, 12]]);
+    }, _callee, null, [[6, 14]]);
   }));
 
   return function getCardPreview(_x) {
@@ -167,12 +171,14 @@ export var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   var status = _ref3.status,
       fileState = _ref3.fileState,
       dimensions = _ref3.dimensions,
-      prevDimensions = _ref3.prevDimensions,
+      identifier = _ref3.identifier,
+      fileImageMode = _ref3.fileImageMode,
       hasCardPreview = _ref3.hasCardPreview,
       isBannedLocalPreview = _ref3.isBannedLocalPreview,
       featureFlags = _ref3.featureFlags;
   var statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
-  var dimensionsAreBigger = isBigger(prevDimensions, dimensions);
+  var cardPreview = cardPreviewCache.get(identifier.id, fileImageMode);
+  var dimensionsAreBigger = isBigger(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
@@ -223,7 +229,9 @@ export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
 
           case 2:
             remotePreview = _context2.sent;
-            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
           case 4:
           case "end":