@atlaskit/media-card 73.6.0 → 74.0.0

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

@@ -1,15 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**@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 class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
@@ -41,11 +44,11 @@ export class FileCardImageView extends Component {
     });
 
     _defineProperty(this, "renderLoadingContents", () => {
-      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(this, "renderErrorContents", () => {
@@ -58,9 +61,9 @@ export class FileCardImageView extends Component {
         actions,
         fileSize
       } = this.props;
-      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,
@@ -80,9 +83,9 @@ export class FileCardImageView extends Component {
         actions,
         fileSize
       } = this.props;
-      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,
@@ -103,7 +106,7 @@ export class FileCardImageView extends Component {
         selected
       } = this.props;
       const isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -130,7 +133,9 @@ export class FileCardImageView extends 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"
@@ -174,7 +179,7 @@ export class FileCardImageView extends Component {
         this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/React.createElement(MediaImage, {
+      return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: this.isCropped,
@@ -197,13 +202,23 @@ export class FileCardImageView extends 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))));
@@ -227,9 +242,9 @@ export class FileCardImageView extends 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);
     });
@@ -246,7 +261,7 @@ export class FileCardImageView extends Component {
         actions
       } = this.props;
       const isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -269,17 +284,14 @@ export class FileCardImageView extends Component {
       status,
       mediaName
     } = this.props;
-    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: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
+      mediaType: mediaType
     }, this.renderCardContents());
   }
 

package/dist/es2019/files/cardImageView/{styled.js → styles.js}

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+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 { Root, cardShadow } from '../../styles';
+import { rootStyles, cardShadow } from '../../styles';
 import { getSelectedBorderStyle } from '../../styles/getSelectedBorderStyle';
 
 const getShadowAttribute = props => {
@@ -22,15 +22,16 @@ const getBackgroundColor = props => {
   })(props)};`;
 };
 
-export const Wrapper = styled(Root)`
-  ${getShadowAttribute}
+export const wrapperStyles = props => css`
+  ${rootStyles()}
+  ${getShadowAttribute(props)}
   ${borderRadius}
-  ${getBackgroundColor}
+  ${getBackgroundColor(props)}
 
   line-height: normal;
   position: relative;
 
-  ${getSelectedBorderStyle}
+  ${getSelectedBorderStyle(props)}
 
   ${size()} .wrapper {
     ${borderRadius};
@@ -48,7 +49,7 @@ export const Wrapper = styled(Root)`
     }
   }
 `;
-export const PlayIconWrapper = styled.div`
+export const playIconWrapperStyles = css`
   position: absolute;
   top: 0;
   left: 0;
@@ -65,7 +66,7 @@ export const PlayIconWrapper = styled.div`
     height: 64px;
   }
 `;
-export const PlayIconBackground = styled.div`
+export const playIconBackgroundStyles = css`
   background: rgba(23, 43, 77, 0.7);
   border-radius: 100%;
   padding: 10px;
@@ -78,18 +79,18 @@ export const PlayIconBackground = styled.div`
   height: 56px;
 `;
 const bodyHeight = 26;
-export const ProgressBarWrapper = styled.div`
+export const progressBarWrapperStyles = css`
   position: absolute;
   height: 100%;
   width: 100%;
 `;
-export const Overlay = styled.div`
+export const overlayStyles = css`
   ${absolute()}
   ${size()}
   border-radius: inherit;
   background-color: rgba(9, 30, 66, 0.5);
 `;
-export const Title = styled.div`
+export const titleStyles = css`
   ${absolute()} width: 100%;
   padding: 8px;
   color: ${N0};
@@ -97,7 +98,7 @@ export const Title = styled.div`
   line-height: 18px;
   word-wrap: break-word;
 `;
-export const Body = styled.div`
+export const bodyStyles = css`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -105,7 +106,7 @@ export const Body = styled.div`
   padding: 8px;
   color: ${N0};
 `;
-export const ProgressWrapper = styled.div`
+export const progressWrapperStyles = css`
   flex-grow: 1;
 
   /*
@@ -122,7 +123,7 @@ export const ProgressWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
 `;
-export const CardActionsWrapper = styled.div`
+export const cardActionsWrapperStyles = css`
   margin-left: 4px;
   /*
     button must appear above overlay

package/dist/es2019/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/es2019/root/card/cardAnalytics.js

@@ -1,15 +1,4 @@
-import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const REQUIRED_FEATURE_FLAGS = {
-  newCardExperience: true,
-  captions: true,
-  timestampOnVideo: true,
-  observedWidth: true,
-  mediaInline: false,
-  folderUploads: false
-};
-export const getRelevantFeatureFlagNames = () => filterFeatureFlagNames(REQUIRED_FEATURE_FLAGS);
-export const getRelevantFeatureFlagKeysWithAllProducts = () => filterFeatureFlagKeysAllProducts(REQUIRED_FEATURE_FLAGS);
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 

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

@@ -1,24 +1,23 @@
 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 const getCacheKey = (id, dimensions) => {
-  return [id, dimensions.height, dimensions.width].join('-');
+export const getCacheKey = (id, mode) => {
+  const resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 export class CardPreviewCacheImpl {
   constructor(previewCache) {
-    _defineProperty(this, "get", (id, dimensions) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "get", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
       return this.previewCache.get(cacheKey);
     });
 
-    _defineProperty(this, "set", (id, dimensions, cardPreview) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "set", (id, mode, cardPreview) => {
+      const cacheKey = getCacheKey(id, mode);
       this.previewCache.set(cacheKey, cardPreview);
     });
 
-    _defineProperty(this, "remove", (id, dimensions) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "remove", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
       this.previewCache.remove(cacheKey);
     });
 

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

@@ -16,7 +16,7 @@ export const removeCardPreviewFromCache = cardPreviewCache.remove;
 
 export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 
-const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
+const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
   let source;
 
   switch (preview.source) {
@@ -43,7 +43,7 @@ const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
 
   const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  cardPreviewCache.set(id, dimensions, { ...preview,
+  cardPreviewCache.set(id, mode, { ...preview,
     source,
     dataURI
   });
@@ -73,16 +73,20 @@ export const getCardPreview = async ({
   imageUrlParams,
   mediaBlobUrlAttrs
 }) => {
-  const cachedPreview = cardPreviewCache.get(id, dimensions);
+  const mode = imageUrlParams.mode;
+  const cachedPreview = cardPreviewCache.get(id, mode);
+  const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-  if (cachedPreview) {
+  if (cachedPreview && !dimensionsAreBigger) {
     return cachedPreview;
   }
 
   try {
     if (filePreview) {
       const localPreview = await getCardPreviewFromFilePreview(filePreview);
-      return extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs);
+      return extendAndCachePreview(id, mode, { ...localPreview,
+        dimensions
+      }, mediaBlobUrlAttrs);
     }
   } catch (e) {
     /**
@@ -125,13 +129,15 @@ export const shouldResolvePreview = ({
   status,
   fileState,
   dimensions,
-  prevDimensions,
+  identifier,
+  fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
   featureFlags
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
-  const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
+  const cardPreview = cardPreviewCache.get(identifier.id, fileImageMode);
+  const dimensionsAreBigger = isBigger(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
@@ -168,5 +174,7 @@ export const isSSRClientPreview = preview => {
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
   const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
-  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
+  return extendAndCachePreview(id, params.mode, { ...remotePreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
 };

package/dist/es2019/root/card/index.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
-import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
@@ -14,9 +13,9 @@ import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
-import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent, fireCommencedEvent, getRelevantFeatureFlagNames, getRelevantFeatureFlagKeysWithAllProducts, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -25,6 +24,8 @@ import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.0.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -232,9 +233,10 @@ export class CardBase extends Component {
 
         const {
           identifier,
-          dimensions = {}
+          resizeMode
         } = this.props;
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+        const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
         this.safeSetState(updateState);
       } else {
         this.safeSetState({
@@ -391,7 +393,8 @@ export class CardBase extends Component {
         dimensions,
         selected,
         testId,
-        originalDimensions
+        originalDimensions,
+        onFullscreenChange
       } = this.props;
       const {
         shouldAutoplay,
@@ -403,6 +406,7 @@ export class CardBase extends Component {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: this.onInlinePlayerError,
         onClick: this.onClick,
         selected: selected,
@@ -629,7 +633,7 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {},
+      resizeMode: _resizeMode,
       ssr: _ssr,
       mediaClient: _mediaClient
     } = this.props;
@@ -638,7 +642,8 @@ export class CardBase extends Component {
       const {
         id
       } = _identifier;
-      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+      const fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
+      _cardPreview = getCardPreviewFromCache(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -742,8 +747,7 @@ export class CardBase extends Component {
   componentDidUpdate(prevProps, prevState) {
     const {
       mediaClient: prevMediaClient,
-      identifier: prevIdentifier,
-      dimensions: prevDimensions
+      identifier: prevIdentifier
     } = prevProps;
     const {
       isCardVisible: prevIsCardVisible
@@ -754,7 +758,8 @@ export class CardBase extends Component {
       dimensions,
       featureFlags,
       useInlinePlayer,
-      disableOverlay
+      disableOverlay,
+      resizeMode
     } = this.props;
     const {
       isCardVisible,
@@ -768,6 +773,7 @@ export class CardBase extends Component {
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const isNewMediaClient = prevMediaClient !== mediaClient;
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
@@ -802,7 +808,8 @@ export class CardBase extends Component {
       status,
       fileState,
       dimensions,
-      prevDimensions,
+      identifier,
+      fileImageMode,
       featureFlags,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview
@@ -930,7 +937,7 @@ export class CardBase extends Component {
       createAnalyticsEvent
     } = this.props;
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-    completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, getRelevantFeatureFlagKeysWithAllProducts(), error);
+    completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
   }
 
   fireCommencedEvent() {
@@ -943,7 +950,7 @@ export class CardBase extends Component {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
     });
-    startUfoExperience(this.internalOccurrenceKey, getRelevantFeatureFlagKeysWithAllProducts());
+    startUfoExperience(this.internalOccurrenceKey);
   }
 
   get actions() {
@@ -1001,7 +1008,7 @@ export const Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: getRelevantFeatureFlagNames()
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));