@atlaskit/media-card 74.5.0 → 74.5.2

package/dist/es2019/card/getCardStatus.js

@@ -1,6 +1,5 @@
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
-
 const getCardStatusBuggy = (fileStatus, {
   hasFilesize,
   isPreviewable,
@@ -11,7 +10,6 @@ const getCardStatusBuggy = (fileStatus, {
     case 'failed-processing':
     case 'error':
       return fileStatus;
-
     case 'processing':
       // Legacy empty files logic
       // isPreviewable will most likely be false for empty files,
@@ -19,28 +17,22 @@ const getCardStatusBuggy = (fileStatus, {
       // TODO: https://product-fabric.atlassian.net/browse/BMPT-1247
       if (!hasFilesize) {
         return 'processing';
-      } // If we show no preview for this file
+      }
+      // If we show no preview for this file
       // we won't show the "creating preview" message, i.e. Card is "complete".
-
-
       if (!isPreviewable) {
         return 'complete';
       }
-
       return 'processing';
-
     case 'processed':
       if (!isPreviewable || !hasPreview) {
         return 'complete';
       }
-
       return 'loading-preview';
-
     default:
       return 'loading';
   }
 };
-
 const getCardStatusFixed = (fileStatus, {
   isPreviewable,
   hasPreview
@@ -51,23 +43,18 @@ const getCardStatusFixed = (fileStatus, {
     case 'error':
     case 'processing':
       return fileStatus;
-
     case 'processed':
       if (!isPreviewable || !hasPreview) {
         return 'complete';
       }
-
       return 'loading-preview';
-
     default:
       return 'loading';
   }
 };
-
 export const getCardStatus = (fileStatus, filePreviewStatus, featureFlags) => {
   if (getMediaFeatureFlag('fetchFileStateAfterUpload', featureFlags)) {
     return getCardStatusFixed(fileStatus, filePreviewStatus);
   }
-
   return getCardStatusBuggy(fileStatus, filePreviewStatus);
 };

package/dist/es2019/card/inlinePlayer.js

@@ -16,30 +16,23 @@ export const getPreferredVideoArtifact = fileState => {
     const {
       artifacts
     } = fileState;
-
     if (!artifacts) {
       return undefined;
     }
-
     return artifacts['video_1280.mp4'] ? 'video_1280.mp4' : artifacts['video_640.mp4'] ? 'video_640.mp4' : undefined;
   }
-
   return undefined;
 };
 export class InlinePlayerBase extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {});
-
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "setFileSrc", fileSrc => {
       this.setState({
         fileSrc
       });
     });
-
     _defineProperty(this, "setBinaryURL", async () => {
       const {
         mediaClient,
@@ -50,7 +43,6 @@ export class InlinePlayerBase extends Component {
         id,
         collectionName
       } = identifier;
-
       try {
         const fileSrc = await mediaClient.file.getFileBinaryURL(id, collectionName);
         this.setFileSrc(fileSrc);
@@ -60,23 +52,19 @@ export class InlinePlayerBase extends Component {
         }
       }
     });
-
     _defineProperty(this, "unsubscribe", () => {
       if (this.subscription) {
         this.subscription.unsubscribe();
       }
     });
-
     _defineProperty(this, "revoke", () => {
       const {
         fileSrc
       } = this.state;
-
       if (fileSrc) {
         URL.revokeObjectURL(fileSrc);
       }
     });
-
     _defineProperty(this, "onDownloadClick", () => {
       const {
         mediaClient,
@@ -88,7 +76,6 @@ export class InlinePlayerBase extends Component {
       } = identifier;
       mediaClient.file.downloadBinary(id, undefined, collectionName);
     });
-
     _defineProperty(this, "onFirstPlay", () => {
       const {
         identifier
@@ -98,20 +85,16 @@ export class InlinePlayerBase extends Component {
         viewingLevel: 'full'
       });
     });
-
     _defineProperty(this, "saveElementWidth", () => {
       const {
         dimensions
       } = this.props;
-
       if (!dimensions) {
         return;
       }
-
       const {
         width
       } = dimensions;
-
       if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
         const elementWidth = getElementDimension(this.divRef.current, 'width');
         this.setState({
@@ -120,7 +103,6 @@ export class InlinePlayerBase extends Component {
       }
     });
   }
-
   componentDidMount() {
     this.saveElementWidth();
     const {
@@ -147,38 +129,32 @@ export class InlinePlayerBase extends Component {
             isUploading: false
           });
         }
-
         const {
           fileSrc: existingFileSrc
-        } = this.state; // we want to reuse the existing fileSrc to prevent re renders
-
+        } = this.state;
+        // we want to reuse the existing fileSrc to prevent re renders
         if (existingFileSrc) {
           return;
         }
-
         if (fileState.status !== 'error' && fileState.preview) {
           const {
             value
           } = await fileState.preview;
-
           if (value instanceof Blob && value.type.indexOf('video/') === 0) {
             const fileSrc = URL.createObjectURL(value);
             this.setFileSrc(fileSrc);
             return;
           }
         }
-
         if (fileState.status === 'processed' || fileState.status === 'processing') {
           const artifactName = getPreferredVideoArtifact(fileState);
           const {
             artifacts
           } = fileState;
-
           if (!artifactName || !artifacts) {
             this.setBinaryURL();
             return;
           }
-
           try {
             const fileSrc = await mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
             this.setFileSrc(fileSrc);
@@ -186,7 +162,6 @@ export class InlinePlayerBase extends Component {
             const {
               onError
             } = this.props;
-
             if (onError && error instanceof Error) {
               onError(error);
             }
@@ -195,17 +170,14 @@ export class InlinePlayerBase extends Component {
       }
     });
   }
-
   componentWillUnmount() {
     this.unsubscribe();
     this.revoke();
   }
-
   get breakpoint() {
     const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
     return calcBreakpointSize(parseInt(`${width}`, 10));
   }
-
   render() {
     const {
       onClick,
@@ -224,14 +196,12 @@ export class InlinePlayerBase extends Component {
       isUploading,
       progress
     } = this.state;
-
     if (!fileSrc) {
       return /*#__PURE__*/React.createElement(CardLoading, {
         testId: testId,
         dimensions: dimensions
       });
     }
-
     return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
       testId: testId || 'media-card-inline-player',
       selected: {
@@ -262,13 +232,10 @@ export class InlinePlayerBase extends Component {
       showOnTop: true
     }) : null);
   }
-
 }
-
 _defineProperty(InlinePlayerBase, "defaultProps", {
   dimensions: defaultImageCardDimensions
 });
-
 const InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InlinePlayerBase, _extends({}, props, {
     forwardRef: ref

package/dist/es2019/card/inlinePlayerLazy.js

@@ -2,8 +2,7 @@ import { lazy } from 'react';
 export const InlinePlayerLazy = /*#__PURE__*/lazy(async () => {
   const {
     InlinePlayer
-  } = await import(
-  /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer" */
+  } = await import( /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer" */
   './inlinePlayer');
   return {
     default: InlinePlayer

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -4,14 +4,11 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { UnhandledErrorCard } from './ui/unhandledErrorCard';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireMediaCardEvent } from '../utils/analytics';
-
 class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "fireOperationalEvent", (error, info) => {
       var _window, _window$navigator;
-
       const {
         data = {},
         createAnalyticsEvent
@@ -30,32 +27,26 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
       };
       fireMediaCardEvent(payload, createAnalyticsEvent);
     });
-
     _defineProperty(this, "handleOnClick", event => {
       try {
         var _this$props$onClick, _this$props;
-
         (_this$props$onClick = (_this$props = this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props, {
           event
         });
       } catch (e) {}
     });
-
     this.state = {
       hasError: false
     };
   }
-
   componentDidCatch(error, info) {
     try {
       this.fireOperationalEvent(error, info);
     } catch (e) {}
-
     this.setState({
       hasError: true
     });
   }
-
   render() {
     const {
       hasError
@@ -64,23 +55,18 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
       dimensions,
       children
     } = this.props;
-
     if (hasError) {
       return /*#__PURE__*/React.createElement(UnhandledErrorCard, {
         dimensions: dimensions,
         onClick: this.handleOnClick
       });
     }
-
     return children;
   }
-
 }
-
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
-
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.0";
+const packageVersion = "74.5.2";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -1,10 +1,10 @@
 import { borderRadius } from '@atlaskit/media-ui';
 import { getSelectionStyles, SelectionStyle, hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+
 /*
  * Used to display the blue border around a selected card without
  * shrinking the image OR growing the card size
  */
-
 export const getSelectedBorderStyle = ({
   selected
 }) => `

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

@@ -5,11 +5,8 @@ import { breakpointStyles } from '../../utils/breakpoint';
 import { getSelectedBorderStyle } from './getSelectedBorderStyle';
 import { getDimensionsWithDefault } from '../../utils/lightCards/getDimensionsWithDefault';
 export const inlinePlayerClassName = 'media-card-inline-player';
-
 const getWrapperHeight = dimensions => dimensions && dimensions.height ? `height: ${getCSSUnitValue(dimensions.height)}; max-height: 100%;` : '';
-
 const getWrapperWidth = dimensions => dimensions && dimensions.width ? `width: ${getCSSUnitValue(dimensions.width)}; max-width: 100%;` : '';
-
 export const wrapperStyles = ({
   dimensions,
   breakpointSize = 'medium',

package/dist/es2019/card/ui/actionsBar/actionsBar.js

@@ -7,11 +7,9 @@ export class ActionsBar extends React.Component {
       isFixed,
       actions
     } = this.props;
-
     if (actions.length === 0) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(ActionsBarWrapper, {
       isFixed: isFixed
     }, /*#__PURE__*/React.createElement(CardActionsView, {
@@ -19,5 +17,4 @@ export class ActionsBar extends React.Component {
       variant: CardActionIconButtonVariant.filled
     }));
   }
-
 }

package/dist/es2019/card/ui/common.js

@@ -1,10 +1,8 @@
 export let Breakpoint;
-
 (function (Breakpoint) {
   Breakpoint["SMALL"] = "small";
   Breakpoint["LARGE"] = "large";
 })(Breakpoint || (Breakpoint = {}));
-
 export const responsiveSettings = {
   [Breakpoint.SMALL]: {
     fontSize: 11,

package/dist/es2019/card/ui/iconMessage/styles.js

@@ -10,7 +10,6 @@ const animatedStyles = css`
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
 `;
-
 const getStylesBasedOnProps = ({
   animated,
   reducedFont
@@ -25,7 +24,6 @@ const getStylesBasedOnProps = ({
   margin-bottom: -1em;
   padding: 3px 10px;
 `;
-
 export const iconMessageWrapperStyles = props => css`
   ${getStylesBasedOnProps(props)}
 `;

package/dist/es2019/card/ui/iconWrapper/styles.js

@@ -4,9 +4,9 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
   // there is no titlebox
   if (!hasTitleBox) {
     return `0px`;
-  } // calculate height of the titlebox
-
+  }
 
+  // calculate height of the titlebox
   const marginBottom = getTitleBoxHeight(breakpoint);
   return `${marginBottom}px`;
 }

package/dist/es2019/card/ui/imageRenderer/imageRenderer.js

@@ -19,15 +19,12 @@ export const ImageRenderer = ({
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
-
   const onLoad = () => {
     onImageLoad && onImageLoad(cardPreview);
   };
-
   const onError = () => {
     onImageError && onImageError(cardPreview);
   };
-
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
     dataURI: cardPreview.dataURI,
     alt: alt,

package/dist/es2019/card/ui/progressBar/styles.js

@@ -6,7 +6,6 @@ import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;
 const padding = 1;
 const width = 95; // %
-
 const left = (100 - width) / 2; // %
 
 const smallSizeSettings = {
@@ -23,8 +22,8 @@ export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop,
     ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const getStyledBarStylesBasedOnProps = ({
   progress,
   breakpoint,
@@ -53,7 +52,6 @@ ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-
 export const styledBarStyles = props => {
   return css`
     ${getStyledBarStylesBasedOnProps(props)}

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

@@ -34,9 +34,10 @@ export const getWrapperDimensions = (dimensions, appearance) => {
     height: ${getCSSUnitValue(height || defaultHeight)};
     max-height: 100%;
   `;
-}; // This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+};
 
+// This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
 export const getWrapperShadow = (disableOverlay, selected) => {
   const withOverlayShadow = !disableOverlay ? `${`var(--ds-shadow-raised, ${`0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}`})`}` : '';
   const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
@@ -48,7 +49,6 @@ export const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
     return '';
   }
-
   return `
     &:hover .${playButtonClassName} {
       ${fixedPlayButtonStyles}
@@ -59,7 +59,6 @@ export const getSelectableTickBoxStyles = isTickBoxSelectable => {
   if (!isTickBoxSelectable) {
     return '';
   }
-
   return `
     &:hover .${tickBoxClassName} {
       ${tickboxFixedStyles}

package/dist/es2019/card/ui/titleBox/styles.js

@@ -3,7 +3,6 @@ import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../../styles/mixins';
 import { themed } from '@atlaskit/theme/components';
-
 const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
   const setting = responsiveSettings[breakpoint];
   const verticalPadding = setting.titleBox.verticalPadding;
@@ -12,7 +11,6 @@ const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
   return `height: ${height}px;
     padding: ${verticalPadding}px ${horizontalPadding}px;`;
 };
-
 const HEX_REGEX = /^#[0-9A-F]{6}$/i;
 const BACKGROUND_COLOR_DARK = '#161a1d';
 const TEXT_COLOR_DARK = '#C7D1DB';
@@ -26,7 +24,8 @@ export const titleBoxWrapperStyles = ({
   width: 100%;
   background-color: ${themed({
   light: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
-  dark: `var(--ds-surface, ${rgba( // theme does not contain this color, use constant instead
+  dark: `var(--ds-surface, ${rgba(
+  // theme does not contain this color, use constant instead
   titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1)})`
 })({
   theme

package/dist/es2019/card/ui/unhandledErrorCard/index.js

@@ -6,9 +6,7 @@ import { N20, N800, Y500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../../../utils';
-
 const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
-
 const shouldShowText = ({
   width,
   height
@@ -16,15 +14,12 @@ const shouldShowText = ({
   if (isPercentage(width) || isPercentage(height)) {
     return false;
   }
-
   return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
 };
-
 const normalizeDimension = (value, defaultValue) => {
   const sValue = value.toString();
   return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
 };
-
 const getConvertedDimension = dimensions => {
   const {
     width = defaultImageCardDimensions.width,
@@ -35,7 +30,6 @@ const getConvertedDimension = dimensions => {
     height: normalizeDimension(height, defaultImageCardDimensions.height)
   };
 };
-
 const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
   try {
     return css`
@@ -59,7 +53,6 @@ const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
     return null;
   }
 };
-
 export class UnhandledErrorCard extends Component {
   render() {
     const {
@@ -75,5 +68,4 @@ export class UnhandledErrorCard extends Component {
       size: "medium"
     }), jsx("p", null, "We couldn't load this content"));
   }
-
 }

package/dist/es2019/errors.js

@@ -2,19 +2,20 @@
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
+
 export class MediaCardError extends Error {
   constructor(primaryReason, secondaryError) {
-    super(primaryReason); // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
-
+    super(primaryReason);
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
     this.primaryReason = primaryReason;
     this.secondaryError = secondaryError;
-    Object.setPrototypeOf(this, new.target.prototype); // https://v8.dev/docs/stack-trace-api
+    Object.setPrototypeOf(this, new.target.prototype);
 
+    // https://v8.dev/docs/stack-trace-api
     if ('captureStackTrace' in Error) {
       Error.captureStackTrace(this, new.target);
     }
   }
-
 }
 export class LocalPreviewError extends MediaCardError {
   constructor(primaryReason, secondaryError) {
@@ -22,7 +23,6 @@ export class LocalPreviewError extends MediaCardError {
     this.primaryReason = primaryReason;
     this.secondaryError = secondaryError;
   }
-
 }
 export class RemotePreviewError extends MediaCardError {
   constructor(primaryReason, secondaryError) {
@@ -30,7 +30,6 @@ export class RemotePreviewError extends MediaCardError {
     this.primaryReason = primaryReason;
     this.secondaryError = secondaryError;
   }
-
 }
 export class SsrPreviewError extends MediaCardError {
   constructor(primaryReason, secondaryError) {
@@ -38,26 +37,20 @@ export class SsrPreviewError extends MediaCardError {
     this.primaryReason = primaryReason;
     this.secondaryError = secondaryError;
   }
-
 }
 export const getImageLoadPrimaryReason = source => {
   switch (source) {
     case 'cache-remote':
       return 'cache-remote-uri';
-
     case 'cache-local':
       return 'cache-local-uri';
-
     case 'external':
       return 'external-uri';
-
     case 'local':
       return 'local-uri';
-
     case 'remote':
       return 'remote-uri';
     // This fail reason will come from a bug, most likely.
-
     default:
       return `unknown-uri`;
   }
@@ -66,7 +59,6 @@ export class ImageLoadError extends MediaCardError {
   constructor(source) {
     super(getImageLoadPrimaryReason(source));
   }
-
 }
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
@@ -76,19 +68,18 @@ export const isRemotePreviewError = err => err instanceof RemotePreviewError;
 export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
 export function isImageLoadError(err) {
   return err instanceof ImageLoadError;
-} // In a try/catch statement, the error caught is the type of unknown.
+}
+
+// In a try/catch statement, the error caught is the type of unknown.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 // If updatePrimaryReason is true, if it's a MediaCardError already, it will update it's primary reason
-
 export const ensureMediaCardError = (primaryReason, error, updatePrimaryReason) => {
   if (isMediaCardError(error)) {
     if (updatePrimaryReason && error.primaryReason !== primaryReason) {
       return new MediaCardError(primaryReason, error.secondaryError);
     }
-
     return error;
   }
-
   return new MediaCardError(primaryReason, error);
 };
 export const isUploadError = error => error && error.primaryReason === 'upload';

package/dist/es2019/index.js

@@ -2,6 +2,7 @@
  * Entry Point: @atlaskit/media-card
  * tsconfig.entry-points.json
  */
+
 export { Card } from './card';
 export { MediaInlineCard } from './inline';
 export { CardLoading } from './utils/lightCards/cardLoading';