@atlaskit/media-card 73.1.0 → 73.3.0

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

@@ -11,16 +11,19 @@ import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
 import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
+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 } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent, fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
+import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
 import { isProcessedFileState } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isBigger } from '../../utils/dimensionComparer';
+import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 export class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -33,6 +36,15 @@ export class CardBase extends Component {
 
     _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
 
+    _defineProperty(this, "ssrReliability", {
+      server: {
+        status: 'unknown'
+      },
+      client: {
+        status: 'unknown'
+      }
+    });
+
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "getImageURLParams", ({
@@ -106,15 +118,19 @@ export class CardBase extends Component {
       });
     });
 
-    _defineProperty(this, "resolveSSRPreview", (identifier, ssr) => {
+    _defineProperty(this, "refetchSSRPreview", async identifier => {
       const {
-        mediaClient
+        mediaClient,
+        dimensions = {}
       } = 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
+        const cardPreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        this.safeSetState({
+          cardPreview
+        });
+      } catch (e) {// No need to log this error.
+        // If preview fails, it will be refetched later
       }
     });
 
@@ -158,13 +174,41 @@ export class CardBase extends Component {
       };
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "logSSRImageError", cardPreview => {
+      if (cardPreview) {
+        const failedSSRObject = {
+          status: 'fail',
+          ...extractErrorInfo(new ImageLoadError(cardPreview.source))
+        };
+
+        if (isSSRClientPreview(cardPreview)) {
+          this.ssrReliability.client = failedSSRObject;
+        }
+        /* 
+          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview)) {
+          this.ssrReliability.server = failedSSRObject;
+          this.ssrReliability.client = failedSSRObject;
+        }
+      }
+    });
+
+    _defineProperty(this, "onImageError", cardPreview => {
+      this.logSSRImageError(cardPreview);
       const {
-        cardPreview
-      } = this.state;
+        cardPreview: currentPreview
+      } = this.state; // If the dataURI has been replaced, we can dismiss this error
+
+      if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
+        return;
+      }
+
       const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
       const isLocal = cardPreview && isLocalPreview(cardPreview);
-      const isSSR = cardPreview && isSSRClientPreview(cardPreview);
+      const isSSR = cardPreview && (isSSRClientPreview(cardPreview) || isSSRDataPreview(cardPreview));
 
       if (isLocal || isSSR) {
         const updateState = {
@@ -176,10 +220,6 @@ export class CardBase extends Component {
           this.fireLocalPreviewErrorEvent(error);
         }
 
-        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
-          // https://product-fabric.atlassian.net/browse/MEX-770
-        }
-
         const {
           identifier,
           dimensions = {}
@@ -194,7 +234,36 @@ export class CardBase extends Component {
       }
     });
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", cardPreview => {
+      if (cardPreview) {
+        if (isSSRClientPreview(cardPreview) && this.ssrReliability.client.status === 'unknown') {
+          this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+        /* 
+          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview) && this.ssrReliability.server.status === 'unknown') {
+          this.ssrReliability.server = {
+            status: 'success'
+          };
+          this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+      }
+
+      const {
+        cardPreview: currentPreview
+      } = this.state; // If the dataURI has been replaced, we can dismiss this callback
+
+      if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
+        return;
+      }
+
       this.safeSetState({
         previewDidRender: true
       });
@@ -315,7 +384,8 @@ export class CardBase extends Component {
         originalDimensions
       } = this.props;
       const {
-        shouldAutoplay
+        shouldAutoplay,
+        cardPreview
       } = this.state;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
@@ -327,7 +397,8 @@ export class CardBase extends Component {
         onClick: this.onClick,
         selected: selected,
         ref: this.setRef,
-        testId: testId
+        testId: testId,
+        cardPreview: cardPreview
       });
     });
 
@@ -407,7 +478,9 @@ export class CardBase extends Component {
         featureFlags,
         titleBoxBgColor,
         titleBoxIcon,
-        ssr
+        ssr,
+        useInlinePlayer,
+        shouldOpenMediaViewer
       } = this.props;
       const {
         mediaItemType
@@ -415,13 +488,7 @@ export class CardBase extends Component {
       const {
         status,
         progress,
-        cardPreview: {
-          dataURI,
-          orientation
-        } = {
-          dataURI: undefined,
-          orientation: 1
-        },
+        cardPreview,
         error,
         cardRef,
         isCardVisible
@@ -440,12 +507,13 @@ export class CardBase extends Component {
       const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
 
       const forceSyncDisplay = !!ssr;
+      const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
         error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
-        dataURI: dataURI,
+        cardPreview: cardPreview,
         alt: alt,
         appearance: appearance,
         resizeMode: resizeMode,
@@ -458,7 +526,6 @@ export class CardBase extends Component {
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: onDisplayImage,
-        previewOrientation: orientation,
         innerRef: this.setRef,
         testId: testId,
         featureFlags: featureFlags,
@@ -467,7 +534,8 @@ export class CardBase extends Component {
         onImageError: this.onImageError,
         onImageLoad: this.onImageLoad,
         nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay
+        forceSyncDisplay: forceSyncDisplay,
+        mediaCardCursor: mediaCardCursor
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         cardEl: cardRef,
@@ -483,6 +551,26 @@ export class CardBase extends Component {
       })) : card;
     });
 
+    _defineProperty(this, "storeSSRData", () => {
+      var _this$ssrReliability$;
+
+      const {
+        ssr,
+        identifier
+      } = this.props;
+      const {
+        cardPreview: {
+          dataURI
+        } = {}
+      } = this.state;
+      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
+        identifier: identifier,
+        dataURI: dataURI,
+        dimensions: this.requestedDimensions,
+        error: ((_this$ssrReliability$ = this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? this.ssrReliability.server : undefined
+      });
+    });
+
     _defineProperty(this, "onCardInViewport", () => {
       this.setState({
         isCardVisible: true
@@ -527,10 +615,13 @@ export class CardBase extends Component {
 
     let _cardPreview;
 
+    let _error;
+
     const {
       identifier: _identifier,
       dimensions: _dimensions = {},
-      ssr: _ssr
+      ssr: _ssr,
+      mediaClient: _mediaClient
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -540,8 +631,32 @@ export class CardBase extends Component {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        this.fireCommencedEvent();
-        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+        var _this$ssrData, _this$ssrData2;
+
+        this.ssrData = getSSRData(_identifier);
+
+        if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+          this.ssrReliability.server = {
+            status: 'fail',
+            ...this.ssrData.error
+          };
+        }
+
+        if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
+          try {
+            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
+          } catch (e) {
+            this.ssrReliability[_ssr] = {
+              status: 'fail',
+              ...extractErrorInfo(e)
+            };
+          }
+        } else {
+          _cardPreview = {
+            dataURI: this.ssrData.dataURI,
+            source: 'ssr-data'
+          };
+        }
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
@@ -570,7 +685,8 @@ export class CardBase extends Component {
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
-      previewDidRender: false
+      previewDidRender: false,
+      error: _error
     };
   }
 
@@ -582,17 +698,28 @@ export class CardBase extends Component {
     } = this.state;
     const {
       identifier,
-      ssr
+      ssr,
+      dimensions
     } = 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);
+    if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
+      var _this$ssrData3;
+
+      if (isSSRClientPreview(cardPreview)) {
+        // 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 (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
+        // If dimensions from Server have changed and are bigger,
+        // we need to refetch
+        this.refetchSSRPreview(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()
@@ -775,7 +902,7 @@ export class CardBase extends Component {
     const {
       createAnalyticsEvent
     } = this.props;
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
   }
 
   fireCommencedEvent() {
@@ -822,7 +949,7 @@ export class CardBase extends Component {
       isPlayingFile,
       mediaViewerSelectedItem
     } = this.state;
-    const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
+    const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
     return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);

package/dist/es2019/root/cardView.js

@@ -30,6 +30,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -45,32 +46,38 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", prevCardPreview => {
       const {
-        onImageLoad
-      } = this.props; // We render the icon & icon message always, even if there is dataURI available.
+        onImageLoad,
+        cardPreview
+      } = this.props;
+
+      if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      } // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
       // behind the thumbnail in case the image has transparency.
-      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
 
+
       this.setState({
         didImageRender: true
       });
-      onImageLoad && onImageLoad();
+      onImageLoad && onImageLoad(cardPreview);
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "onImageError", cardPreview => {
       const {
         onImageError
       } = this.props;
       this.setState({
         didImageRender: false
       });
-      onImageError && onImageError();
+      onImageError && onImageError(cardPreview);
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -106,13 +113,13 @@ export class CardViewBase extends React.Component {
         selected,
         selectable,
         disableOverlay,
-        dataURI
+        cardPreview,
+        mediaCardCursor
       } = this.props;
       const {
         name
       } = metadata || {};
-      const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
+      const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
@@ -126,7 +133,7 @@ export class CardViewBase extends React.Component {
         onMouseEnter: onMouseEnter,
         innerRef: this.divRef,
         breakpoint: this.breakpoint,
-        shouldUsePointerCursor: shouldUsePointerCursor,
+        mediaCardCursor: mediaCardCursor,
         disableOverlay: !!disableOverlay,
         selected: !!selected,
         displayBackground: shouldDisplayBackground,
@@ -142,21 +149,24 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "renderFile", () => {
       const {
+        cardPreview,
         status,
         mediaItemType,
         metadata,
-        dataURI,
         progress,
         resizeMode,
         dimensions,
         selectable,
         selected,
         disableOverlay,
-        previewOrientation,
         alt,
         onDisplayImage,
         actions
       } = this.props;
+      const {
+        dataURI,
+        orientation
+      } = cardPreview || {};
       const {
         name,
         mediaType,
@@ -183,16 +193,17 @@ export class CardViewBase extends React.Component {
         onDisplayImage: onDisplayImage,
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
-        previewOrientation: previewOrientation,
+        previewOrientation: orientation,
         alt: alt,
         onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageError: this.onImageError,
+        cardPreview: cardPreview
       });
     });
 
     _defineProperty(this, "getRenderConfigByStatus", () => {
       const {
-        dataURI,
+        cardPreview,
         status,
         metadata,
         disableOverlay,
@@ -210,8 +221,8 @@ export class CardViewBase extends React.Component {
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
         renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!dataURI,
-        renderPlayButton: !!dataURI && mediaType === 'video',
+        renderImageRenderer: !!cardPreview,
+        renderPlayButton: !!cardPreview && mediaType === 'video',
         renderBlanket: !disableOverlay,
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
@@ -330,16 +341,16 @@ export class CardViewBase extends React.Component {
   }
 
   componentDidUpdate({
-    dataURI: prevDataURI
+    cardPreview: prevCardPreview
   }) {
     const {
-      dataURI
+      cardPreview
     } = this.props; // We should only switch didImageRender to false
-    // when dataURI goes undefined, not when it is updated.
+    // when cardPreview goes undefined, not when it is updated.
     // as this method could be triggered after onImageLoad callback,
     // falling on a race condition
 
-    prevDataURI && !dataURI && this.setState({
+    !!prevCardPreview && !cardPreview && this.setState({
       didImageRender: false
     });
   }
@@ -413,13 +424,13 @@ export class CardViewBase extends React.Component {
   shouldRenderPlayButton() {
     const {
       metadata,
-      dataURI
+      cardPreview
     } = this.props;
     const {
       mediaType
     } = metadata || {};
 
-    if (mediaType !== 'video' || !dataURI) {
+    if (mediaType !== 'video' || !cardPreview) {
       return false;
     }
 
@@ -480,32 +491,26 @@ export class CardViewBase extends React.Component {
 
   renderImageRenderer() {
     const {
-      dataURI,
+      cardPreview,
       metadata: {
         mediaType = 'unknown'
       } = {},
-      previewOrientation,
       alt,
       resizeMode,
       onDisplayImage,
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    const {
-      didImageRender
-    } = this.state;
-    return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
-      dataURI: dataURI,
+    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+      cardPreview: cardPreview,
       mediaType: mediaType,
-      previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
       onImageLoad: this.onImageLoad,
       onImageError: this.onImageError,
       nativeLazyLoad: nativeLazyLoad,
-      forceSyncDisplay: forceSyncDisplay,
-      isImageVisible: forceSyncDisplay || didImageRender
+      forceSyncDisplay: forceSyncDisplay
     });
   }
 
@@ -558,7 +563,8 @@ export class CardViewBase extends React.Component {
 }
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto'
+  appearance: 'auto',
+  mediaCardCursor: MediaCardCursor.NoAction
 });
 
 export const CardView = withAnalyticsEvents({

package/dist/es2019/root/inlinePlayer.js

@@ -216,7 +216,8 @@ export class InlinePlayerBase extends Component {
       testId,
       identifier,
       forwardRef,
-      autoplay
+      autoplay,
+      cardPreview
     } = this.props;
     const {
       fileSrc,
@@ -250,7 +251,8 @@ export class InlinePlayerBase extends Component {
         contentId: identifier.id
       },
       originalDimensions: originalDimensions,
-      showControls: checkMouseMovement
+      showControls: checkMouseMovement,
+      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
     })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
       progress: progress,
       breakpoint: this.breakpoint,

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

@@ -2,10 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
-import styled from 'styled-components';
-export const ImageRendererBase = ({
-  dataURI,
-  previewOrientation,
+export const ImageRenderer = ({
+  cardPreview,
   alt,
   resizeMode,
   onImageLoad,
@@ -13,8 +11,7 @@ export const ImageRendererBase = ({
   onDisplayImage,
   mediaType,
   nativeLazyLoad,
-  forceSyncDisplay,
-  className = 'media-card-image-renderer'
+  forceSyncDisplay
 }) => {
   useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
@@ -22,21 +19,22 @@ export const ImageRendererBase = ({
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  const onLoad = () => {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  const onError = () => {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
-    className: className,
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));
-};
-export const ImageRenderer = styled(ImageRendererBase)`
-  ${({
-  isImageVisible
-}) => `
-    visibility: ${isImageVisible ? 'visible' : 'hidden'};
-`}
-`;
+};