@atlaskit/media-card 72.0.0 → 72.1.0

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

@@ -11,7 +11,7 @@ import { IntlProvider, intlShape } from 'react-intl';
 import { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
@@ -88,6 +88,30 @@ export class CardBase extends Component {
       };
     });
 
+    _defineProperty(this, "setCacheSSRPreview", identifier => {
+      const {
+        mediaClient,
+        dimensions = {}
+      } = this.props;
+      fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier)).catch(() => {// No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    });
+
+    _defineProperty(this, "resolveSSRPreview", (identifier, ssr) => {
+      const {
+        mediaClient
+      } = this.props;
+
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+      } catch (e) {// TODO: log SSR reliability 'failed'
+        // https://product-fabric.atlassian.net/browse/MEX-770
+      }
+    });
+
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
         const params = this.getCardPreviewParams(identifier, fileState);
@@ -133,18 +157,29 @@ export class CardBase extends Component {
         cardPreview
       } = this.state;
       const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      const isLocal = cardPreview && isLocalPreview(cardPreview);
+      const isSSR = cardPreview && isSSRClientPreview(cardPreview);
+
+      if (isLocal || isSSR) {
+        const updateState = {
+          cardPreview: undefined
+        };
+
+        if (isLocal) {
+          updateState.isBannedLocalPreview = true;
+          this.fireLocalPreviewErrorEvent(error);
+        }
+
+        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
+          // https://product-fabric.atlassian.net/browse/MEX-770
+        }
 
-      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
         const {
           identifier,
           dimensions = {}
         } = this.props;
         isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
-        this.safeSetState({
-          cardPreview: undefined,
-          isBannedLocalPreview: true
-        });
-        this.fireLocalPreviewErrorEvent(error);
+        this.safeSetState(updateState);
       } else {
         this.safeSetState({
           status: 'error',
@@ -360,7 +395,8 @@ export class CardBase extends Component {
         testId,
         featureFlags,
         titleBoxBgColor,
-        titleBoxIcon
+        titleBoxIcon,
+        ssr
       } = this.props;
       const {
         mediaItemType
@@ -376,7 +412,8 @@ export class CardBase extends Component {
           orientation: 1
         },
         error,
-        cardRef
+        cardRef,
+        isCardVisible
       } = this.state;
       const {
         metadata
@@ -386,7 +423,12 @@ export class CardBase extends Component {
         onDisplayImage,
         actions,
         onMouseEnter
-      } = this;
+      } = this; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+
+      const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+
+      const forceSyncDisplay = !!ssr;
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
         error: error,
@@ -412,7 +454,9 @@ export class CardBase extends Component {
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
         onImageError: this.onImageError,
-        onImageLoad: this.onImageLoad
+        onImageLoad: this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -466,7 +510,8 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {}
+      dimensions: _dimensions = {},
+      ssr: _ssr
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -474,6 +519,11 @@ export class CardBase extends Component {
         id
       } = _identifier;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        this.fireCommencedEvent();
+        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
       _status = 'loading-preview';
@@ -485,14 +535,17 @@ export class CardBase extends Component {
         orientation: 1,
         source: 'external'
       };
-    } //  If cardPreview is available from local cache, `isCardVisible`
-    //  should be true to avoid flickers during re-mount of the component
+    } // If cardPreview is available from local cache or external, `isCardVisible`
+    // should be true to avoid flickers during re-mount of the component
+    // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
+    // outside the viewport
 
 
-    const isCardVisible = _cardPreview ? true : !this.props.isLazy;
+    const _isCardVisible = !this.props.isLazy || !!_cardPreview && !isSSRPreview(_cardPreview);
+
     this.state = {
       status: _status,
-      isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
       cardRef: null,
@@ -504,14 +557,22 @@ export class CardBase extends Component {
   componentDidMount() {
     this.hasBeenMounted = true;
     const {
-      isCardVisible
+      isCardVisible,
+      cardPreview
     } = this.state;
     const {
-      identifier
+      identifier,
+      ssr
     } = this.props;
 
     if (isCardVisible && isFileIdentifier(identifier)) {
       this.updateStateForIdentifier(identifier);
+    }
+
+    if (isCardVisible && !!ssr && !!cardPreview && isSSRClientPreview(cardPreview) && isFileIdentifier(identifier)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      this.setCacheSSRPreview(identifier);
     } // we add a listener for each of the cards on the page
     // and then check if the triggered listener is from the card
     // that contains a div in current window.getSelection()
@@ -588,8 +649,14 @@ export class CardBase extends Component {
       this.resolvePreview(identifier, fileState);
     }
 
+    if (turnedVisible && this.props.ssr && !!cardPreview && isSSRClientPreview(cardPreview) && isFileIdentifier(identifier)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      this.setCacheSSRPreview(identifier);
+    }
+
     if (previewDidRender && // We should't complete if status is uploading
-    ['loading', 'loading-preview', 'processing'].includes(status)) {
+    ['loading-preview', 'processing'].includes(status)) {
       this.safeSetState({
         status: 'complete'
       });
@@ -649,7 +716,7 @@ export class CardBase extends Component {
     } = this.props;
     const {
       cardRef: element
-    } = this.state;
+    } = this.state || {};
     return getRequestedDimensions({
       dimensions,
       element

package/dist/es2019/root/cardView.js

@@ -13,8 +13,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
 import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper } from './ui/styled';
-import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
+import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -115,11 +114,9 @@ export class CardViewBase extends React.Component {
       const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
       const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
-      // Intention is to show full file name when it's truncate in titlebox,
-      // and to hide it when no titlebox exists.
+      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
-      const shouldDisplayTooltip = !!name && !disableOverlay;
+      const shouldDisplayTooltip = !disableOverlay;
       return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
         className: newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -248,42 +245,29 @@ export class CardViewBase extends React.Component {
             renderPlayButton: false
           };
           let iconMessage;
-
-          if (!!metadata) {
-            if (error) {
-              const {
-                secondaryError
-              } = error;
-
-              if (isRateLimitedError(secondaryError) || secondaryError && isPollingError(secondaryError)) {
-                iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
-              }
-            } else if (!isZeroSize) {
-              iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
-            }
-          } else if (!!disableOverlay) {
+          let customTitleMessage;
+          const {
+            secondaryError
+          } = error || {};
+
+          if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+          } else if (isUploadError(error)) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            customTitleMessage = messages.failed_to_upload;
+          } else if (!metadata) {
             iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
-          }
-
-          if (error && isUploadError(error)) {
-            if (!disableOverlay) {
-              return { ...baseErrorConfig,
-                renderFailedTitleBox: true,
-                customTitleMessage: messages.failed_to_upload
-              };
-            }
-
-            return { ...baseErrorConfig,
-              renderTitleBox: !metadata && !!name,
-              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
-            };
+          } else {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
+            const renderFailedTitleBox = !name || !!customTitleMessage;
             return { ...baseErrorConfig,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: !metadata,
-              iconMessage
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage
             };
           }
 
@@ -504,18 +488,20 @@ export class CardViewBase extends React.Component {
       alt,
       resizeMode,
       onDisplayImage,
-      mediaItemType
+      nativeLazyLoad,
+      forceSyncDisplay
     } = this.props;
     return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
       dataURI: dataURI,
       mediaType: mediaType,
-      mediaItemType: mediaItemType,
       previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
       onImageLoad: this.onImageLoad,
-      onImageError: this.onImageError
+      onImageError: this.onImageError,
+      nativeLazyLoad: nativeLazyLoad,
+      forceSyncDisplay: forceSyncDisplay
     });
   }
 

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -64,31 +64,36 @@ export const MediaInlineCardInternal = ({
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file)
+      message: intl.formatMessage(messages.loading_file),
+      isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: intl.formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: fileState.message || ''
+      message: fileState.message || '',
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: intl.formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'uploading') {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: fileState.name
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 

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

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

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

@@ -10,7 +10,9 @@ export const ImageRenderer = ({
   onImageLoad,
   onImageError,
   onDisplayImage,
-  mediaType
+  mediaType,
+  nativeLazyLoad,
+  forceSyncDisplay
 }) => {
   useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
@@ -23,6 +25,8 @@ export const ImageRenderer = ({
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));
 };

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

@@ -3,7 +3,7 @@ import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export const LoadingRateLimited = ({
   breakpoint = Breakpoint.SMALL,
   positionBottom = true

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,

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

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { getTitleBoxHeight, responsiveSettings } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;
 const padding = 1;
 const width = 95; // %

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

@@ -1,11 +1,30 @@
 import styled from 'styled-components';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20, N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../styles';
 import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
+import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
 import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
 import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { SSRFileExperienceWrapper } from './styledSSR';
+import { Breakpoint, responsiveSettings } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};
+
+const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};
 
 const getWrapperDimensions = (dimensions, appearance) => {
   const {
@@ -22,8 +41,19 @@ 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
+
+
+const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
 };
 
+const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
     return '';
@@ -48,19 +78,40 @@ const getSelectableTickBoxStyles = isTickBoxSelectable => {
   `;
 };
 
-export const NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)`
+export const NewFileExperienceWrapper = styled.div`
   ${({
+  breakpoint,
   dimensions,
   appearance,
+  shouldUsePointerCursor,
+  disableOverlay,
+  displayBackground,
+  selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip
 }) => `
+    ${transition()}
+    box-sizing: border-box;
+    * {
+      box-sizing: border-box;
+    }
+    position: relative;
+    font-family: ${fontFamily()};
+    ${getWrapperDimensions(dimensions, appearance)}
+    ${displayBackground ? `background-color: ${N20};` : ''}
+    ${borderRadius}
+    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getWrapperShadow(disableOverlay, selected)}
+    ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}
 
     /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
     ${getClickablePlayButtonStyles(isPlayButtonClickable)}
     ${getSelectableTickBoxStyles(isTickBoxSelectable)}
+    &:hover .${blanketClassName} {
+      ${fixedBlanketStyles}
+    }
 
     &:hover .${actionsBarClassName} {
       ${fixedActionBarStyles}
@@ -70,4 +121,14 @@ export const NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)`
     ${shouldDisplayTooltip ? `> div { ${getWrapperDimensions(dimensions, appearance)} }` : ''}
 `}
 `;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+export const CardImageContainer = styled.div`
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  ${borderRadius}
+`;

package/dist/es2019/root/ui/titleBox/styled.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

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

@@ -57,14 +57,18 @@ export class CardActionsDropdownMenu extends Component {
 
     if (actions.length > 0) {
       return /*#__PURE__*/React.createElement(DropdownMenu, {
-        "data-testid": "media-card-actions-menu",
+        testId: "media-card-actions-menu",
         onOpenChange: onOpenChange,
-        trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
+        trigger: ({
+          triggerRef,
+          ...providedProps
+        }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
           variant: triggerVariant,
           style: {
             color: triggerColor
-          }
-        }, /*#__PURE__*/React.createElement(MoreIcon, {
+          },
+          ref: triggerRef
+        }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
           label: "more"
         }))
       }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "72.0.0",
+	"version": "72.1.0",
 	"sideEffects": false
 }

package/dist/esm/errors.js

@@ -70,6 +70,24 @@ export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
 
   return RemotePreviewError;
 }(MediaCardError);
+export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+  _inherits(SsrPreviewError, _MediaCardError3);
+
+  var _super4 = _createSuper(SsrPreviewError);
+
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+
+    _classCallCheck(this, SsrPreviewError);
+
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+
+  return SsrPreviewError;
+}(MediaCardError);
 export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
     case 'cache-remote':
@@ -92,15 +110,15 @@ export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source
       return "unknown-uri";
   }
 };
-export var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
-  _inherits(ImageLoadError, _MediaCardError3);
+export var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  _inherits(ImageLoadError, _MediaCardError4);
 
-  var _super4 = _createSuper(ImageLoadError);
+  var _super5 = _createSuper(ImageLoadError);
 
   function ImageLoadError(source) {
     _classCallCheck(this, ImageLoadError);
 
-    return _super4.call(this, getImageLoadPrimaryReason(source));
+    return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
   return ImageLoadError;
@@ -126,5 +144,5 @@ export var ensureMediaCardError = function ensureMediaCardError(primaryReason, e
   return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
 };
 export var isUploadError = function isUploadError(error) {
-  return error.primaryReason === 'upload';
+  return error && error.primaryReason === 'upload';
 };