@atlaskit/media-card 73.1.1 → 73.2.0

package/dist/cjs/utils/globalScope/getSSRData.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSSRData = void 0;
+
+var _globalScope = require("./globalScope");
+
+var getSSRData = function getSSRData(identifier) {
+  var mediaCardSsr = (0, _globalScope.getMediaCardSSR)();
+
+  if (!mediaCardSsr) {
+    return;
+  }
+
+  return mediaCardSsr[(0, _globalScope.getKey)(identifier)];
+};
+
+exports.getSSRData = getSSRData;

package/dist/cjs/utils/globalScope/globalScope.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKey = exports.StoreSSRDataScript = exports.GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_CARD_SSR = void 0;
+exports.getMediaCardSSR = getMediaCardSSR;
+exports.getMediaGlobalScope = getMediaGlobalScope;
+exports.storeDataURI = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _printScript = require("../printScript");
+
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+var GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+exports.GLOBAL_MEDIA_CARD_SSR = GLOBAL_MEDIA_CARD_SSR;
+var GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+exports.GLOBAL_MEDIA_NAMESPACE = GLOBAL_MEDIA_NAMESPACE;
+
+function getMediaGlobalScope() {
+  var globalScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  var namespace = '__MEDIA_INTERNAL';
+
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+
+  return globalScope[namespace];
+}
+
+function getMediaCardSSR() {
+  var globalScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+  var globalMedia = getMediaGlobalScope(globalScope); // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+
+  var key = 'mediaCardSsr';
+
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+
+  return globalMedia[key];
+}
+
+var dashed = function dashed(param) {
+  return param ? "-".concat(param) : '';
+};
+
+var getKey = function getKey(_ref) {
+  var id = _ref.id,
+      collectionName = _ref.collectionName,
+      occurrenceKey = _ref.occurrenceKey;
+  return "".concat(id).concat(dashed(collectionName)).concat(dashed(occurrenceKey));
+};
+
+exports.getKey = getKey;
+
+var storeDataURI = function storeDataURI(key, dataURI, dimensions, error) {
+  var globalScope = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : window;
+  var mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI: dataURI,
+    dimensions: dimensions,
+    error: error
+  };
+};
+
+exports.storeDataURI = storeDataURI;
+
+var generateScript = function generateScript(identifier, dataURI, dimensions, error) {
+  var functionCall = (0, _printScript.printFunctionCall)(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return (0, _printScript.printScript)([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+
+var StoreSSRDataScript = function StoreSSRDataScript(_ref2) {
+  var dataURI = _ref2.dataURI,
+      identifier = _ref2.identifier,
+      dimensions = _ref2.dimensions,
+      error = _ref2.error;
+  return /*#__PURE__*/_react.default.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: generateScript(identifier, dataURI, dimensions, error)
+    }
+  });
+};
+
+exports.StoreSSRDataScript = StoreSSRDataScript;

package/dist/cjs/utils/globalScope/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GLOBAL_MEDIA_CARD_SSR", {
+  enumerable: true,
+  get: function get() {
+    return _globalScope.GLOBAL_MEDIA_CARD_SSR;
+  }
+});
+Object.defineProperty(exports, "GLOBAL_MEDIA_NAMESPACE", {
+  enumerable: true,
+  get: function get() {
+    return _globalScope.GLOBAL_MEDIA_NAMESPACE;
+  }
+});
+Object.defineProperty(exports, "StoreSSRDataScript", {
+  enumerable: true,
+  get: function get() {
+    return _globalScope.StoreSSRDataScript;
+  }
+});
+Object.defineProperty(exports, "getKey", {
+  enumerable: true,
+  get: function get() {
+    return _globalScope.getKey;
+  }
+});
+Object.defineProperty(exports, "getSSRData", {
+  enumerable: true,
+  get: function get() {
+    return _getSSRData.getSSRData;
+  }
+});
+
+var _globalScope = require("./globalScope");
+
+var _getSSRData = require("./getSSRData");

package/dist/cjs/utils/globalScope/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils/printScript.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.printScript = exports.printFunctionCall = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var printParam = function printParam(param) {
+  if (typeof param === 'string') {
+    return "'".concat(param, "'");
+  } else if ((0, _typeof2.default)(param) === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+var printParams = function printParams(args) {
+  return args.map(function (arg) {
+    return printParam(arg);
+  }).join(',');
+};
+
+var printFunctionCall = function printFunctionCall(fn) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
+};
+
+exports.printFunctionCall = printFunctionCall;
+
+var printScript = function printScript(statements) {
+  return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
+};
+
+exports.printScript = printScript;

package/dist/cjs/version.json

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

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

@@ -138,6 +138,22 @@ export class FileCardImageView extends Component {
       })));
     });
 
+    _defineProperty(this, "onImageLoad", () => {
+      const {
+        onImageLoad,
+        cardPreview
+      } = this.props;
+      onImageLoad && onImageLoad(cardPreview);
+    });
+
+    _defineProperty(this, "onImageError", () => {
+      const {
+        onImageError,
+        cardPreview
+      } = this.props;
+      onImageError && onImageError(cardPreview);
+    });
+
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -147,9 +163,7 @@ export class FileCardImageView extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt,
-        onImageLoad,
-        onImageError
+        alt
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -167,8 +181,8 @@ export class FileCardImageView extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     });
 

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

@@ -165,6 +165,7 @@ export const isSSRClientPreview = preview => {
   const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
   return ssrClientSources.includes(preview.source);
 };
+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);

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.
@@ -106,15 +109,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 +165,18 @@ export class CardBase extends Component {
       };
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "onImageError", 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 = {
@@ -194,7 +206,15 @@ export class CardBase extends Component {
       }
     });
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", cardPreview => {
+      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 +335,8 @@ export class CardBase extends Component {
         originalDimensions
       } = this.props;
       const {
-        shouldAutoplay
+        shouldAutoplay,
+        cardPreview
       } = this.state;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
@@ -327,7 +348,8 @@ export class CardBase extends Component {
         onClick: this.onClick,
         selected: selected,
         ref: this.setRef,
-        testId: testId
+        testId: testId,
+        cardPreview: cardPreview
       });
     });
 
@@ -407,7 +429,9 @@ export class CardBase extends Component {
         featureFlags,
         titleBoxBgColor,
         titleBoxIcon,
-        ssr
+        ssr,
+        useInlinePlayer,
+        shouldOpenMediaViewer
       } = this.props;
       const {
         mediaItemType
@@ -415,13 +439,7 @@ export class CardBase extends Component {
       const {
         status,
         progress,
-        cardPreview: {
-          dataURI,
-          orientation
-        } = {
-          dataURI: undefined,
-          orientation: 1
-        },
+        cardPreview,
         error,
         cardRef,
         isCardVisible
@@ -440,12 +458,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 +477,6 @@ export class CardBase extends Component {
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: onDisplayImage,
-        previewOrientation: orientation,
         innerRef: this.setRef,
         testId: testId,
         featureFlags: featureFlags,
@@ -467,7 +485,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 +502,26 @@ export class CardBase extends Component {
       })) : card;
     });
 
+    _defineProperty(this, "storeSSRData", () => {
+      const {
+        ssr,
+        identifier
+      } = this.props;
+      const {
+        cardPreview: {
+          dataURI
+        } = {},
+        error
+      } = this.state;
+      const ssrDataError = !!error ? extractErrorInfo(error) : undefined;
+      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
+        identifier: identifier,
+        dataURI: dataURI,
+        dimensions: this.requestedDimensions,
+        error: ssrDataError
+      });
+    });
+
     _defineProperty(this, "onCardInViewport", () => {
       this.setState({
         isCardVisible: true
@@ -527,10 +566,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 +582,26 @@ export class CardBase extends Component {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        this.fireCommencedEvent();
-        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+        var _this$ssrData;
+
+        this.ssrData = getSSRData(_identifier);
+
+        if (_ssr === 'server' || !((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.dataURI)) {
+          try {
+            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
+          } catch (e) {
+            // TODO: handle error in client MEX-770
+            // If we fail building the dataURI in server, we store the error in the state
+            // to be later stored in global scope and logged in client.
+            // We don't set the status = error to fall back to the spinner icon
+            _error = _ssr === 'server' ? e : undefined;
+          }
+        } else {
+          _cardPreview = {
+            dataURI: this.ssrData.dataURI,
+            source: 'ssr-data'
+          };
+        }
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
@@ -570,7 +630,8 @@ export class CardBase extends Component {
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
-      previewDidRender: false
+      previewDidRender: false,
+      error: _error
     };
   }
 
@@ -582,17 +643,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$ssrData2;
+
+      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$ssrData2 = this.ssrData) === null || _this$ssrData2 === void 0 ? void 0 : _this$ssrData2.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()
@@ -822,7 +894,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);