@atlaskit/media-card 74.6.0 → 74.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-card
 
+## 74.7.0
+
+### Minor Changes
+
+- [`8a0a92b2885`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a0a92b2885) - MEX-2210 improve inconsistent behaviour on timestampOnVideo playback
+- [`c3eba8c788d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3eba8c788d) - Deprecation notice: Media Card and Inline Card no longer accept a collection name as a data source for Media Viewer. Integrators should pass the full list of files to browse through the new "mediaViewerItems" property.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 74.6.1
+
+### Patch Changes
+
+- [`489f7b32ff6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/489f7b32ff6) - Fixed broken SSR error handling logic when the preview url fails to load
+
 ## 74.6.0
 
 ### Minor Changes

package/dist/cjs/card/card.js

@@ -26,6 +26,7 @@ var _mediaViewer = require("@atlaskit/media-viewer");
 var _reactIntlNext = require("react-intl-next");
 var _cardView = require("./cardView");
 var _viewportDetector = require("../utils/viewportDetector");
+var _videoIsPlayable = require("../utils/videoIsPlayable");
 var _getDataURIDimension = require("../utils/getDataURIDimension");
 var _getCardPreview = require("./getCardPreview");
 var _metadata = require("../utils/metadata");
@@ -47,7 +48,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -513,6 +514,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient = _this$props7.mediaClient,
         identifier = _this$props7.identifier,
         mediaViewerDataSource = _this$props7.mediaViewerDataSource,
+        mediaViewerItems = _this$props7.mediaViewerItems,
         contextId = _this$props7.contextId,
         featureFlags = _this$props7.featureFlags;
       if (!mediaViewerSelectedItem) {
@@ -525,6 +527,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
         collectionName: collectionName,
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.config,
         selectedItem: mediaViewerSelectedItem,
         onClose: _this.onMediaViewerClose,
@@ -767,7 +770,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
-      var prevIsCardVisible = prevState.isCardVisible;
+      var prevIsCardVisible = prevState.isCardVisible,
+        prevCardPreview = prevState.cardPreview;
       var _this$props12 = this.props,
         mediaClient = _this$props12.mediaClient,
         identifier = _this$props12.identifier,
@@ -775,7 +779,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         featureFlags = _this$props12.featureFlags,
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
-        resizeMode = _this$props12.resizeMode;
+        resizeMode = _this$props12.resizeMode,
+        ssr = _this$props12.ssr;
       var _this$state4 = this.state,
         isCardVisible = _this$state4.isCardVisible,
         cardPreview = _this$state4.cardPreview,
@@ -799,6 +804,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
        * ----------------------------------------------------
        */
       var turnedVisible = !prevIsCardVisible && isCardVisible;
+      var hadSSRCardPreview = !!prevCardPreview && (0, _getCardPreview.isSSRClientPreview)(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
       var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
       this.updateFileStateFlag(fileState);
@@ -824,8 +830,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
           this.fireScreenEvent();
         }
       }
-      if ((0, _mediaClient2.isFileIdentifier)(identifier) && turnedVisible && !cardPreview && !wasResolvedUpfrontPreview) {
-        // This is a one-off call, only meant to happen when turnedVisible = true (only once in the component's lifecycle)
+      if ((0, _mediaClient2.isFileIdentifier)(identifier) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
+        // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
+        // - turnedVisible = true
+        // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
         this.resolveUpfrontPreview(identifier);
       } else if ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
         status: status,
@@ -855,8 +863,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
         this.unsubscribe();
       }
       var isVideo = this.fileAttributes.fileMediatype === 'video';
-      var videoAvailableToPlay = fileState && (0, _mediaClient2.isProcessedFileState)(fileState);
-      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
+      var _getFileDetails2 = (0, _metadata.getFileDetails)(identifier, fileState),
+        mimeType = _getFileDetails2.mimeType;
+      var isVideoPlayable = (0, _videoIsPlayable.videoIsPlayable)(isBannedLocalPreview, fileState, mimeType);
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
         this.setState({
           isPlayingFile: true
         });

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

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -77,7 +77,7 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var MediaInlineAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/inline/mediaInlineCard.js

@@ -25,6 +25,7 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     mediaViewerDataSource = _ref.mediaViewerDataSource,
+    mediaViewerItems = _ref.mediaViewerItems,
     intl = _ref.intl;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,6 +58,7 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
       return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
         collectionName: identifier.collectionName || '',
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose

package/dist/cjs/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/cjs/utils/videoIsPlayable.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoIsPlayable = void 0;
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaCommon = require("@atlaskit/media-common");
+var videoIsPlayable = function videoIsPlayable(isBannedLocalPreview, fileState, mimeType) {
+  var localPreviewAvailable = mimeType && !isBannedLocalPreview && (0, _mediaCommon.isVideoMimeTypeSupportedByBrowser)(mimeType);
+  var videoProcessedByServer = fileState && (0, _mediaClient.isProcessedFileState)(fileState);
+  return !!(localPreviewAvailable || videoProcessedByServer);
+};
+exports.videoIsPlayable = videoIsPlayable;

package/dist/cjs/version.json

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

package/dist/es2019/card/card.js

@@ -5,11 +5,12 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { getRandomHex } from '@atlaskit/media-common';
-import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, isProcessedFileState, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
+import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from './cardView';
 import { ViewportDetector } from '../utils/viewportDetector';
+import { videoIsPlayable } from '../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../utils/metadata';
@@ -26,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -464,6 +465,7 @@ export class CardBase extends Component {
         mediaClient,
         identifier,
         mediaViewerDataSource,
+        mediaViewerItems,
         contextId,
         featureFlags
       } = this.props;
@@ -477,6 +479,7 @@ export class CardBase extends Component {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
         collectionName: collectionName,
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.config,
         selectedItem: mediaViewerSelectedItem,
         onClose: this.onMediaViewerClose,
@@ -736,7 +739,8 @@ export class CardBase extends Component {
       dimensions: prevDimensions
     } = prevProps;
     const {
-      isCardVisible: prevIsCardVisible
+      isCardVisible: prevIsCardVisible,
+      cardPreview: prevCardPreview
     } = prevState;
     const {
       mediaClient,
@@ -745,7 +749,8 @@ export class CardBase extends Component {
       featureFlags,
       useInlinePlayer,
       disableOverlay,
-      resizeMode
+      resizeMode,
+      ssr
     } = this.props;
     const {
       isCardVisible,
@@ -771,6 +776,7 @@ export class CardBase extends Component {
      * ----------------------------------------------------
      */
     const turnedVisible = !prevIsCardVisible && isCardVisible;
+    const hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
     const isNewMediaClient = prevMediaClient !== mediaClient;
     const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
@@ -798,8 +804,10 @@ export class CardBase extends Component {
         this.fireScreenEvent();
       }
     }
-    if (isFileIdentifier(identifier) && turnedVisible && !cardPreview && !wasResolvedUpfrontPreview) {
-      // This is a one-off call, only meant to happen when turnedVisible = true (only once in the component's lifecycle)
+    if (isFileIdentifier(identifier) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
+      // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
+      // - turnedVisible = true
+      // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
       this.resolveUpfrontPreview(identifier);
     } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
       status,
@@ -829,8 +837,11 @@ export class CardBase extends Component {
       this.unsubscribe();
     }
     const isVideo = this.fileAttributes.fileMediatype === 'video';
-    const videoAvailableToPlay = fileState && isProcessedFileState(fileState);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+    const {
+      mimeType
+    } = getFileDetails(identifier, fileState);
+    const isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
       this.setState({
         isPlayingFile: true
       });

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -54,7 +54,7 @@ class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 const MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/inline/mediaInlineCard.js

@@ -14,6 +14,7 @@ export const MediaInlineCardInternal = ({
   isSelected,
   onClick,
   mediaViewerDataSource,
+  mediaViewerItems,
   intl
 }) => {
   const [fileState, setFileState] = useState();
@@ -36,6 +37,7 @@ export const MediaInlineCardInternal = ({
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
         collectionName: identifier.collectionName || '',
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose

package/dist/es2019/utils/ufoExperiences.js

@@ -3,7 +3,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.6.0";
+const packageVersion = "74.7.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/utils/videoIsPlayable.js

@@ -0,0 +1,7 @@
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+export const videoIsPlayable = (isBannedLocalPreview, fileState, mimeType) => {
+  const localPreviewAvailable = mimeType && !isBannedLocalPreview && isVideoMimeTypeSupportedByBrowser(mimeType);
+  const videoProcessedByServer = fileState && isProcessedFileState(fileState);
+  return !!(localPreviewAvailable || videoProcessedByServer);
+};

package/dist/es2019/version.json

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

package/dist/esm/card/card.js

@@ -18,11 +18,12 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { getRandomHex } from '@atlaskit/media-common';
-import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, isProcessedFileState, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
+import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from './cardView';
 import { ViewportDetector } from '../utils/viewportDetector';
+import { videoIsPlayable } from '../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../utils/metadata';
@@ -39,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -505,6 +506,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient = _this$props7.mediaClient,
         identifier = _this$props7.identifier,
         mediaViewerDataSource = _this$props7.mediaViewerDataSource,
+        mediaViewerItems = _this$props7.mediaViewerItems,
         contextId = _this$props7.contextId,
         featureFlags = _this$props7.featureFlags;
       if (!mediaViewerSelectedItem) {
@@ -517,6 +519,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
         collectionName: collectionName,
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.config,
         selectedItem: mediaViewerSelectedItem,
         onClose: _this.onMediaViewerClose,
@@ -759,7 +762,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
-      var prevIsCardVisible = prevState.isCardVisible;
+      var prevIsCardVisible = prevState.isCardVisible,
+        prevCardPreview = prevState.cardPreview;
       var _this$props12 = this.props,
         mediaClient = _this$props12.mediaClient,
         identifier = _this$props12.identifier,
@@ -767,7 +771,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         featureFlags = _this$props12.featureFlags,
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
-        resizeMode = _this$props12.resizeMode;
+        resizeMode = _this$props12.resizeMode,
+        ssr = _this$props12.ssr;
       var _this$state4 = this.state,
         isCardVisible = _this$state4.isCardVisible,
         cardPreview = _this$state4.cardPreview,
@@ -791,6 +796,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
        * ----------------------------------------------------
        */
       var turnedVisible = !prevIsCardVisible && isCardVisible;
+      var hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
       var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       this.updateFileStateFlag(fileState);
@@ -816,8 +822,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           this.fireScreenEvent();
         }
       }
-      if (isFileIdentifier(identifier) && turnedVisible && !cardPreview && !wasResolvedUpfrontPreview) {
-        // This is a one-off call, only meant to happen when turnedVisible = true (only once in the component's lifecycle)
+      if (isFileIdentifier(identifier) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
+        // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
+        // - turnedVisible = true
+        // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
         this.resolveUpfrontPreview(identifier);
       } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
         status: status,
@@ -847,8 +855,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         this.unsubscribe();
       }
       var isVideo = this.fileAttributes.fileMediatype === 'video';
-      var videoAvailableToPlay = fileState && isProcessedFileState(fileState);
-      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+      var _getFileDetails2 = getFileDetails(identifier, fileState),
+        mimeType = _getFileDetails2.mimeType;
+      var isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
         this.setState({
           isPlayingFile: true
         });

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

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -70,7 +70,7 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
 }(React.Component);
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/inline/mediaInlineCard.js

@@ -15,6 +15,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     mediaViewerDataSource = _ref.mediaViewerDataSource,
+    mediaViewerItems = _ref.mediaViewerItems,
     intl = _ref.intl;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47,6 +48,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
         collectionName: identifier.collectionName || '',
         dataSource: dataSource,
+        items: mediaViewerItems,
         mediaClientConfig: mediaClient.mediaClientConfig,
         selectedItem: identifier,
         onClose: onMediaViewerClose

package/dist/esm/utils/ufoExperiences.js

@@ -6,7 +6,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.6.0";
+var packageVersion = "74.7.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/esm/utils/videoIsPlayable.js

@@ -0,0 +1,7 @@
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+export var videoIsPlayable = function videoIsPlayable(isBannedLocalPreview, fileState, mimeType) {
+  var localPreviewAvailable = mimeType && !isBannedLocalPreview && isVideoMimeTypeSupportedByBrowser(mimeType);
+  var videoProcessedByServer = fileState && isProcessedFileState(fileState);
+  return !!(localPreviewAvailable || videoProcessedByServer);
+};

package/dist/esm/version.json

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

package/dist/types/inline/mediaInlineCard.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
+import { FileIdentifier, Identifier, MediaClient } from '@atlaskit/media-client';
 import { WrappedComponentProps } from 'react-intl-next';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
 export interface MediaInlineCardProps {
@@ -8,7 +8,14 @@ export interface MediaInlineCardProps {
     shouldOpenMediaViewer?: boolean;
     isSelected?: boolean;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * Includes data source like collection name,
+     * media file list.
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-149 Internal documentation for deprecation (no external access)}}
+     * Use mediaViewerItems instead
+     */
     mediaViewerDataSource?: MediaViewerDataSource;
+    mediaViewerItems?: Identifier[];
 }
 export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
 export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

package/dist/types/types.d.ts

@@ -75,10 +75,14 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly isLazy?: boolean;
     readonly useInlinePlayer?: boolean;
     readonly shouldOpenMediaViewer?: boolean;
-    /** Imported from MediaViewer. It includes data source like collection name,
-     *  media file list.
+    /**
+     * Includes data source like collection name,
+     * media file list.
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-149 Internal documentation for deprecation (no external access)}}
+     * Use mediaViewerItems instead
      */
     readonly mediaViewerDataSource?: MediaViewerDataSource;
+    readonly mediaViewerItems?: Identifier[];
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;
     readonly ssr?: SSR;

package/dist/types/utils/videoIsPlayable.d.ts

@@ -0,0 +1,2 @@
+import { FileState } from '@atlaskit/media-client';
+export declare const videoIsPlayable: (isBannedLocalPreview: boolean, fileState?: FileState | undefined, mimeType?: string | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.6.0",
+  "version": "74.7.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,17 +29,17 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/dropdown-menu": "^11.5.0",
+    "@atlaskit/dropdown-menu": "^11.7.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^20.0.0",
-    "@atlaskit/media-common": "^2.19.0",
+    "@atlaskit/media-client": "^20.1.0",
+    "@atlaskit/media-common": "^3.0.0",
     "@atlaskit/media-ui": "^22.3.0",
-    "@atlaskit/media-viewer": "^47.4.0",
-    "@atlaskit/spinner": "^15.3.0",
+    "@atlaskit/media-viewer": "^47.5.0",
+    "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^1.2.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",

package/report.api.md

@@ -148,8 +148,11 @@ export interface CardProps extends SharedCardProps, CardEventProps {
   readonly isLazy?: boolean;
   // (undocumented)
   readonly mediaClient: MediaClient;
+  // @deprecated
   readonly mediaViewerDataSource?: MediaViewerDataSource;
   // (undocumented)
+  readonly mediaViewerItems?: Identifier[];
+  // (undocumented)
   readonly shouldEnableDownloadButton?: boolean;
   // (undocumented)
   readonly shouldOpenMediaViewer?: boolean;
@@ -311,9 +314,11 @@ interface MediaInlineCardProps {
   isSelected?: boolean;
   // (undocumented)
   mediaClient: MediaClient;
-  // (undocumented)
+  // @deprecated
   mediaViewerDataSource?: MediaViewerDataSource;
   // (undocumented)
+  mediaViewerItems?: Identifier[];
+  // (undocumented)
   onClick?: React_2.EventHandler<React_2.KeyboardEvent | React_2.MouseEvent>;
   // (undocumented)
   shouldOpenMediaViewer?: boolean;