@atlaskit/media-card 74.5.1 → 74.6.0

package/dist/es2019/card/cardAnalytics.js

@@ -2,16 +2,13 @@ import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEvent
 import { MediaCardError } from '../errors';
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
-
   switch (status) {
     case 'complete':
       fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
-
     case 'failed-processing':
       fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
-
     case 'error':
       fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
@@ -23,9 +20,7 @@ export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, perform
 export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
   if (typeof window.getSelection === 'function') {
     var _selection$containsNo;
-
     const selection = window.getSelection();
-
     if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
       fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
     }

package/dist/es2019/card/cardImageView/cardOverlay/index.js

@@ -1,44 +1,38 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
 import TickIcon from '@atlaskit/icon/glyph/check';
-import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things directly from "utils" to avoid circular dependencies
+import { Ellipsify } from '@atlaskit/media-ui';
 
+// We dont require things directly from "utils" to avoid circular dependencies
 import { FileIcon } from '../../../utils/fileIcon';
 import { ErrorIcon } from '../../../utils/errorIcon';
 import CardActions from '../../../utils/cardActions';
 import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
 import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
-
 const resolveTitleText = (cardStatus, mediaName, error, selected) => {
   // don't show title if error
   // also when card is uploading + selected, title is already showing outside of the overlay
   if (error || !mediaName || cardStatus === 'uploading' && !selected) {
     return '';
   }
-
   return mediaName;
 };
-
 export class CardOverlay extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "onMenuToggle", attrs => {
       this.setState({
         isMenuExpanded: attrs.isOpen
       });
     });
-
     this.state = {
       isMenuExpanded: false
     };
   }
-
   get wrapperClassNames() {
     const {
       error,
@@ -63,7 +57,6 @@ export class CardOverlay extends Component {
       noHover
     });
   }
-
   render() {
     const {
       cardStatus,
@@ -100,7 +93,6 @@ export class CardOverlay extends Component {
       triggerColor: menuTriggerColor
     }) : null)));
   }
-
   errorLine() {
     const {
       error,
@@ -112,7 +104,6 @@ export class CardOverlay extends Component {
       css: errorLineStyles
     }, jsx(AltWrapper, null, alt)));
   }
-
   tickBox() {
     const {
       selected,
@@ -129,12 +120,10 @@ export class CardOverlay extends Component {
       className: className
     }, tick);
   }
-
   bottomLeftColumn() {
     const {
       error
     } = this.props;
-
     if (!error) {
       const {
         mediaType,
@@ -155,7 +144,6 @@ export class CardOverlay extends Component {
       }, fileIcon, subtitleEl));
     }
   }
-
   removeBtnClick(handler) {
     return e => {
       e.preventDefault();
@@ -163,9 +151,7 @@ export class CardOverlay extends Component {
       handler();
     };
   }
-
 }
-
 _defineProperty(CardOverlay, "defaultProps", {
   actions: [],
   mediaName: ''

package/dist/es2019/card/cardImageView/cardOverlay/styles.js

@@ -4,6 +4,7 @@
  * 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';
@@ -33,7 +34,6 @@ export const tickBoxStyles = css`
     width: 14px;
   }
 `;
-
 const getOverlayStyles = ({
   hasError,
   noHover
@@ -48,7 +48,6 @@ const getOverlayStyles = ({
       `;
   }
 };
-
 export const overlayStyles = props => css`
   ${size()}
   ${absolute()}

package/dist/es2019/card/cardImageView/fileCardImageView.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
@@ -15,33 +14,27 @@ import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './car
 export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "wasThumbnailDisplayed", false);
-
     _defineProperty(this, "renderCardContents", () => {
       const {
         status,
         mediaType,
         fileSize
       } = this.props;
-
       if (status === 'error') {
         return this.renderErrorContents();
       } else if (status === 'failed-processing') {
         return this.renderFailedContents();
-      } // If a video has no errors/failed processing, we want to be able to play it
-      // immediately, even if there's no image preview
-
+      }
 
+      // If a video has no errors/failed processing, we want to be able to play it
+      // immediately, even if there's no image preview
       const isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
-
       if (mediaType !== 'video' && !this.isFileCardImageReadyForDisplay && !isZeroSize) {
         return this.renderLoadingContents();
       }
-
       return this.renderSuccessCardContents();
     });
-
     _defineProperty(this, "renderLoadingContents", () => {
       return jsx("div", {
         className: "wrapper"
@@ -49,7 +42,6 @@ export class FileCardImageView extends Component {
         className: "img-wrapper"
       }, jsx(CardLoading, null)));
     });
-
     _defineProperty(this, "renderErrorContents", () => {
       const {
         status,
@@ -73,7 +65,6 @@ export class FileCardImageView extends Component {
         actions: actions
       }));
     });
-
     _defineProperty(this, "renderFailedContents", () => {
       const {
         status,
@@ -94,7 +85,6 @@ export class FileCardImageView extends Component {
         actions: actions
       }));
     });
-
     _defineProperty(this, "renderUploadingCardOverlay", () => {
       const {
         status,
@@ -113,7 +103,6 @@ export class FileCardImageView extends Component {
         selected: selected
       });
     });
-
     _defineProperty(this, "renderPlayButton", () => {
       const {
         status,
@@ -123,15 +112,12 @@ export class FileCardImageView extends Component {
         selectable,
         dataURI
       } = this.props;
-
       if (mediaType !== 'video') {
         return null;
       }
-
       if (selectable && !shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
       }
-
       return jsx(PlayIconWrapper, null, jsx("div", {
         css: playIconBackgroundStyles
       }, jsx(VidPlayIcon, {
@@ -140,7 +126,6 @@ export class FileCardImageView extends Component {
         size: "large"
       })));
     });
-
     _defineProperty(this, "onImageLoad", () => {
       const {
         onImageLoad,
@@ -148,7 +133,6 @@ export class FileCardImageView extends Component {
       } = this.props;
       onImageLoad && onImageLoad(cardPreview);
     });
-
     _defineProperty(this, "onImageError", () => {
       const {
         onImageError,
@@ -156,7 +140,6 @@ export class FileCardImageView extends Component {
       } = this.props;
       onImageError && onImageError(cardPreview);
     });
-
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -168,16 +151,13 @@ export class FileCardImageView extends Component {
         onDisplayImage,
         alt
       } = this.props;
-
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
       }
-
       if (!this.wasThumbnailDisplayed && onDisplayImage && mediaType === 'image') {
         onDisplayImage();
         this.wasThumbnailDisplayed = true;
       }
-
       return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
@@ -188,7 +168,6 @@ export class FileCardImageView extends Component {
         onImageError: this.onImageError
       });
     });
-
     _defineProperty(this, "renderProgressBar", () => {
       const {
         mediaName,
@@ -196,11 +175,9 @@ export class FileCardImageView extends Component {
         actions,
         status
       } = this.props;
-
       if (status !== 'uploading') {
         return null;
       }
-
       return jsx(ProgressBarWrapper, null, jsx("div", {
         css: overlayStyles
       }, jsx("div", {
@@ -222,7 +199,6 @@ export class FileCardImageView extends Component {
         triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
-
     _defineProperty(this, "renderSuccessCardContents", () => {
       const {
         disableOverlay,
@@ -230,7 +206,6 @@ export class FileCardImageView extends Component {
         status
       } = this.props;
       let overlay = null;
-
       if (!disableOverlay) {
         if (status === 'uploading') {
           if (selectable) {
@@ -240,14 +215,12 @@ export class FileCardImageView extends Component {
           overlay = this.renderSuccessCardOverlay();
         }
       }
-
       return jsx("div", {
         className: "wrapper"
       }, jsx("div", {
         className: "img-wrapper"
       }, this.renderMediaImage(), this.renderProgressBar(), this.renderPlayButton()), overlay);
     });
-
     _defineProperty(this, "renderSuccessCardOverlay", () => {
       const {
         status,
@@ -272,7 +245,6 @@ export class FileCardImageView extends Component {
       });
     });
   }
-
   render() {
     const {
       disableOverlay,
@@ -293,7 +265,6 @@ export class FileCardImageView extends Component {
       mediaType: mediaType
     }, this.renderCardContents());
   }
-
   get isFileCardImageReadyForDisplay() {
     const {
       dataURI,
@@ -301,23 +272,19 @@ export class FileCardImageView extends Component {
     } = this.props;
     return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
   }
-
   get isCropped() {
     const {
       resizeMode
     } = this.props;
     return resizeMode === 'crop';
   }
-
   get isStretched() {
     const {
       resizeMode
     } = this.props;
     return resizeMode === 'stretchy-fit';
   }
-
 }
-
 _defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false

package/dist/es2019/card/cardImageView/styles.js

@@ -4,14 +4,12 @@ import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
 import { rootStyles, cardShadow } from '../styles';
 import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
-
 const getShadowAttribute = props => {
   const {
     disableOverlay
   } = props;
   return disableOverlay ? '' : cardShadow;
 };
-
 const getBackgroundColor = props => {
   const {
     mediaType
@@ -21,7 +19,6 @@ const getBackgroundColor = props => {
     dark: `var(--ds-background-neutral, ${DN50})`
   })(props)};`;
 };
-
 export const wrapperStyles = props => css`
   ${rootStyles()}
   ${getShadowAttribute(props)}

package/dist/es2019/card/cardLoader.js

@@ -4,34 +4,25 @@ import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
 import Loadable from 'react-loadable';
 import { CardLoading } from '../utils/lightCards/cardLoading';
 const MediaCardContext = /*#__PURE__*/React.createContext({});
-
 const CardLoadingWithContext = () => {
   const props = useContext(MediaCardContext);
   return /*#__PURE__*/React.createElement(CardLoading, props);
 };
-
 const MediaCard = Loadable({
-  loader: () => import(
-  /* webpackChunkName: "@atlaskit-internal_media-card" */
-  './card').then(mod => mod.Card),
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card" */'./card').then(mod => mod.Card),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
 const MediaCardErrorBoundary = Loadable({
-  loader: () => import(
-  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-  './media-card-analytics-error-boundary').then(mod => mod.default),
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'./media-card-analytics-error-boundary').then(mod => mod.default),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
 const MediaCardWithMediaClient = Loadable({
-  loader: () => import(
-  /* webpackChunkName: "@atlaskit-internal_media-client" */
-  '@atlaskit/media-client'),
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-client" */'@atlaskit/media-client'),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
   render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
     withMediaClient: loaded.withMediaClient
   }))
 });
-
 const CardWithMediaClient = props => {
   const {
     withMediaClient,
@@ -52,11 +43,9 @@ const CardWithMediaClient = props => {
     }, /*#__PURE__*/React.createElement(Card, props))
   );
 };
-
 const CardLoader = props => {
   return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
     value: props
   }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
 };
-
 export default CardLoader;

package/dist/es2019/card/cardState.js

@@ -2,11 +2,11 @@ import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../errors';
 import { getCardStatus, isFinalCardStatus } from './getCardStatus';
 import { extractFilePreviewStatus } from './getCardPreview';
+
 /**
  * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
  * The output of the updater is shallowly merged with state."
  */
-
 export const createStateUpdater = (newState, fireErrorEvent) => prevState => {
   // Only override if previous status is non-final or new status is 'complete'
   if (!!newState.status && isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
@@ -15,7 +15,6 @@ export const createStateUpdater = (newState, fireErrorEvent) => prevState => {
     !!newState.error && fireErrorEvent(newState.error);
     return prevState;
   }
-
   return newState;
 };
 export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {