@atlaskit/media-card 73.1.0 → 73.3.0

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

@@ -52,7 +52,7 @@ const getWrapperShadow = (disableOverlay, selected) => {
   return shadow ? `box-shadow: ${shadow};` : '';
 };
 
-const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+const getCursorStyle = cursor => `cursor: ${cursor};`;
 
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
@@ -83,13 +83,13 @@ export const NewFileExperienceWrapper = styled.div`
   breakpoint,
   dimensions,
   appearance,
-  shouldUsePointerCursor,
   disableOverlay,
   displayBackground,
   selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
-  shouldDisplayTooltip
+  shouldDisplayTooltip,
+  mediaCardCursor
 }) => `
     ${transition()}
     box-sizing: border-box;
@@ -101,7 +101,7 @@ export const NewFileExperienceWrapper = styled.div`
     ${getWrapperDimensions(dimensions, appearance)}
     ${displayBackground ? `background-color: ${N20};` : ''}
     ${borderRadius}
-    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getCursorStyle(mediaCardCursor)}
     ${getWrapperShadow(disableOverlay, selected)}
     ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}

package/dist/es2019/types.js

@@ -1 +1,7 @@
-export {};
+export let MediaCardCursor;
+
+(function (MediaCardCursor) {
+  MediaCardCursor["Action"] = "pointer";
+  MediaCardCursor["NoAction"] = "default";
+  MediaCardCursor["NotReady"] = "wait";
+})(MediaCardCursor || (MediaCardCursor = {}));

package/dist/es2019/utils/analytics.js

@@ -30,14 +30,15 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
     }
   };
 };
-export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes) => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
   eventType: 'operational',
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
     performanceAttributes,
-    status: 'success'
+    status: 'success',
+    ssrReliability
   }
 });
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
@@ -81,7 +82,14 @@ export const getRenderErrorRequestMetadata = error => {
     return error.secondaryError.metadata;
   }
 };
-export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
+export const extractErrorInfo = error => {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error)
+  };
+};
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -89,13 +97,12 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    failReason: getRenderErrorFailReason(error),
-    error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error),
-    request: getRenderErrorRequestMetadata(error)
+    ...extractErrorInfo(error),
+    request: getRenderErrorRequestMetadata(error),
+    ssrReliability
   }
 });
-export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes) => ({
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -103,7 +110,8 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    failReason: 'failed-processing'
+    failReason: 'failed-processing',
+    ssrReliability
   }
 });
 export const getCopiedFilePayload = fileId => ({

package/dist/es2019/utils/dimensionComparer.js

@@ -1,23 +1,16 @@
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+const isPixelEquivalent = dimension => typeof dimension === 'number' || containsPixelUnit(`${dimension}`);
+
 export const canCompareDimension = (current, next) => {
   if (!current || !next) {
     return false;
   }
 
-  if (isValidPercentageUnit(current) && isValidPercentageUnit(next)) {
-    return true;
-  }
-
-  if (containsPixelUnit(`${current}`) && containsPixelUnit(`${next}`)) {
-    return true;
-  }
-
-  if (typeof current === 'number' && typeof next === 'number') {
-    return true;
-  }
-
-  return false;
+  const bothPixelEquivalent = isPixelEquivalent(current) && isPixelEquivalent(next);
+  const bothPercentage = isValidPercentageUnit(current) && isValidPercentageUnit(next);
+  return bothPixelEquivalent || bothPercentage;
 };
 export const isBigger = (current, next) => {
   if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {

package/dist/es2019/utils/getMediaCardCursor.js

@@ -0,0 +1,19 @@
+import { MediaCardCursor } from '../types';
+export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) => {
+  // If error status or no action is requested = NoAction
+  if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
+    return MediaCardCursor.NoAction;
+  }
+
+  if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
+    return MediaCardCursor.NotReady;
+  } else if (mediaType === 'video' && hasCardPreview && useInlinePlayer) {
+    return MediaCardCursor.Action;
+  }
+
+  if (useMediaViewer) {
+    return MediaCardCursor.Action;
+  }
+
+  return MediaCardCursor.NoAction;
+};

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

@@ -0,0 +1,10 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export const getSSRData = identifier => {
+  const mediaCardSsr = getMediaCardSSR();
+
+  if (!mediaCardSsr) {
+    return;
+  }
+
+  return mediaCardSsr[getKey(identifier)];
+};

package/dist/es2019/utils/globalScope/globalScope.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { printFunctionCall, printScript } from '../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.
+export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope(globalScope = window) {
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  const namespace = '__MEDIA_INTERNAL';
+
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+
+  return globalScope[namespace];
+}
+export function getMediaCardSSR(globalScope = window) {
+  const globalMedia = getMediaGlobalScope(globalScope); // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+
+  const key = 'mediaCardSsr';
+
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+
+  return globalMedia[key];
+}
+
+const dashed = param => param ? `-${param}` : '';
+
+export const getKey = ({
+  id,
+  collectionName,
+  occurrenceKey
+}) => `${id}${dashed(collectionName)}${dashed(occurrenceKey)}`;
+export const storeDataURI = (key, dataURI, dimensions, error, globalScope = window) => {
+  const mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI,
+    dimensions,
+    error
+  };
+};
+
+const generateScript = (identifier, dataURI, dimensions, error) => {
+  const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+
+export const StoreSSRDataScript = ({
+  dataURI,
+  identifier,
+  dimensions,
+  error
+}) => /*#__PURE__*/React.createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: generateScript(identifier, dataURI, dimensions, error)
+  }
+});

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

@@ -0,0 +1,2 @@
+export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils/printScript.js

@@ -0,0 +1,19 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
+export const printScript = statements => `(function(){
+  ${statements.join(';')}
+})();
+`;

package/dist/es2019/version.json

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

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

@@ -156,18 +156,30 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
       })));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
       var _this$props6 = _this.props,
-          status = _this$props6.status,
-          mediaItemType = _this$props6.mediaItemType,
-          dataURI = _this$props6.dataURI,
-          mediaType = _this$props6.mediaType,
-          mimeType = _this$props6.mimeType,
-          previewOrientation = _this$props6.previewOrientation,
-          onDisplayImage = _this$props6.onDisplayImage,
-          alt = _this$props6.alt,
           onImageLoad = _this$props6.onImageLoad,
-          onImageError = _this$props6.onImageError;
+          cardPreview = _this$props6.cardPreview;
+      onImageLoad && onImageLoad(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
+      var _this$props7 = _this.props,
+          onImageError = _this$props7.onImageError,
+          cardPreview = _this$props7.cardPreview;
+      onImageError && onImageError(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+      var _this$props8 = _this.props,
+          status = _this$props8.status,
+          mediaItemType = _this$props8.mediaItemType,
+          dataURI = _this$props8.dataURI,
+          mediaType = _this$props8.mediaType,
+          mimeType = _this$props8.mimeType,
+          previewOrientation = _this$props8.previewOrientation,
+          onDisplayImage = _this$props8.onDisplayImage,
+          alt = _this$props8.alt;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
@@ -184,17 +196,17 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         crop: _this.isCropped,
         stretch: _this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
-      var _this$props7 = _this.props,
-          mediaName = _this$props7.mediaName,
-          progress = _this$props7.progress,
-          actions = _this$props7.actions,
-          status = _this$props7.status;
+      var _this$props9 = _this.props,
+          mediaName = _this$props9.mediaName,
+          progress = _this$props9.progress,
+          actions = _this$props9.actions,
+          status = _this$props9.status;
 
       if (status !== 'uploading') {
         return null;
@@ -213,10 +225,10 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
-      var _this$props8 = _this.props,
-          disableOverlay = _this$props8.disableOverlay,
-          selectable = _this$props8.selectable,
-          status = _this$props8.status;
+      var _this$props10 = _this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          selectable = _this$props10.selectable,
+          status = _this$props10.status;
       var overlay = null;
 
       if (!disableOverlay) {
@@ -237,15 +249,15 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
-      var _this$props9 = _this.props,
-          status = _this$props9.status,
-          mediaName = _this$props9.mediaName,
-          mediaType = _this$props9.mediaType,
-          fileSize = _this$props9.fileSize,
-          dataURI = _this$props9.dataURI,
-          selectable = _this$props9.selectable,
-          selected = _this$props9.selected,
-          actions = _this$props9.actions;
+      var _this$props11 = _this.props,
+          status = _this$props11.status,
+          mediaName = _this$props11.mediaName,
+          mediaType = _this$props11.mediaType,
+          fileSize = _this$props11.fileSize,
+          dataURI = _this$props11.dataURI,
+          selectable = _this$props11.selectable,
+          selected = _this$props11.selected,
+          actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return /*#__PURE__*/React.createElement(CardOverlay, {
         cardStatus: status,
@@ -265,14 +277,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _createClass(FileCardImageView, [{
     key: "render",
     value: function render() {
-      var _this$props10 = this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          selectable = _this$props10.selectable,
-          selected = _this$props10.selected,
-          mediaType = _this$props10.mediaType,
-          progress = _this$props10.progress,
-          status = _this$props10.status,
-          mediaName = _this$props10.mediaName;
+      var _this$props12 = this.props,
+          disableOverlay = _this$props12.disableOverlay,
+          selectable = _this$props12.selectable,
+          selected = _this$props12.selected,
+          mediaType = _this$props12.mediaType,
+          progress = _this$props12.progress,
+          status = _this$props12.status,
+          mediaName = _this$props12.mediaName;
       return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": "media-file-card-view",
         "data-test-media-name": mediaName,
@@ -289,9 +301,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   }, {
     key: "isFileCardImageReadyForDisplay",
     get: function get() {
-      var _this$props11 = this.props,
-          dataURI = _this$props11.dataURI,
-          status = _this$props11.status;
+      var _this$props13 = this.props,
+          dataURI = _this$props13.dataURI,
+          status = _this$props13.status;
       return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
     }
   }, {

package/dist/esm/root/card/cardAnalytics.js

@@ -1,21 +1,21 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
 export var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
-export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
+export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
   };
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
+      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

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

@@ -208,6 +208,9 @@ export var isSSRClientPreview = function isSSRClientPreview(preview) {
   var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
   return ssrClientSources.includes(preview.source);
 };
+export var isSSRDataPreview = function isSSRDataPreview(preview) {
+  return preview.source === 'ssr-data';
+};
 export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
     var remotePreview;