@atlaskit/media-card 73.5.1 → 73.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-card
 
+## 73.6.0
+
+### Minor Changes
+
+- [`b4fd2a59367`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b4fd2a59367) - Attach media environment and region to the media-card UFO events
+- [`7e767393469`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e767393469) - Add ufo feature flag logging to `media-card`
+- [`ade1a5c3e23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ade1a5c3e23) - Flagged events with file states processing and uploading for UFO payload
+
+### Patch Changes
+
+- [`bf0e7c8e46b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf0e7c8e46b) - [MEX-1413] Hot fix for remove useMediaPickerAuthProvider flag
+- [`79c431ca1a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c431ca1a6) - Removed "Creating Preview" message for files already processed
+- [`f87afac53b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f87afac53b3) - Add ufo logging for media-card
+- Updated dependencies
+
 ## 73.5.1
 
 ### Patch Changes

package/classnames/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/classnames.js",
   "module": "../dist/esm/classnames.js",
   "module:es2019": "../dist/es2019/classnames.js",
+  "sideEffects": false,
   "types": "../dist/types/classnames.d.ts"
 }

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

@@ -3,25 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRelevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
+exports.getRelevantFeatureFlagNames = exports.getRelevantFeatureFlagKeysWithAllProducts = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = exports.REQUIRED_FEATURE_FLAGS = void 0;
 
 var _mediaCommon = require("@atlaskit/media-common");
 
 var _analytics = require("../../utils/analytics");
 
+var REQUIRED_FEATURE_FLAGS = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false
+};
+exports.REQUIRED_FEATURE_FLAGS = REQUIRED_FEATURE_FLAGS;
+
 var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
-  return (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: true,
-    captions: true,
-    timestampOnVideo: true,
-    observedWidth: true,
-    mediaInline: false,
-    folderUploads: false
-  });
+  return (0, _mediaCommon.filterFeatureFlagNames)(REQUIRED_FEATURE_FLAGS);
 };
 
 exports.getRelevantFeatureFlagNames = getRelevantFeatureFlagNames;
 
+var getRelevantFeatureFlagKeysWithAllProducts = function getRelevantFeatureFlagKeysWithAllProducts() {
+  return (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(REQUIRED_FEATURE_FLAGS);
+};
+
+exports.getRelevantFeatureFlagKeysWithAllProducts = getRelevantFeatureFlagKeysWithAllProducts;
+
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);

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

@@ -107,6 +107,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "internalOccurrenceKey", (0, _generateUniqueId.generateUniqueId)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasBeenMounted", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
@@ -815,6 +819,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      this.updateFileStateFlag(fileState);
 
       if ((0, _mediaClient2.isExternalImageIdentifier)(identifier) && isDifferent) {
         this.fireCommencedEvent();
@@ -890,6 +895,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       this.fireCommencedEvent();
       this.subscribeInternalFile(identifier);
     }
+  }, {
+    key: "updateFileStateFlag",
+    value: function updateFileStateFlag(fileState) {
+      if (!fileState) {
+        return;
+      }
+
+      var status = fileState.status;
+
+      if (status === 'processing') {
+        this.fileStateFlags.wasStatusProcessing = true;
+      } else if (status === 'uploading') {
+        this.fileStateFlags.wasStatusUploading = true;
+      }
+    }
   }, {
     key: "subscribeInternalFile",
     value: function subscribeInternalFile(identifier) {
@@ -957,7 +977,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-      (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.ssrReliability, error);
+      (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)(), error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -969,7 +989,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
-      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey);
+      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)());
     }
   }, {
     key: "actions",

package/dist/cjs/root/cardView.js

@@ -297,7 +297,6 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
         case 'processing':
-        case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
             iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
               disableAnimation: disableAnimation
@@ -347,6 +346,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
             iconMessage: iconMessage
           });
 
+        case 'loading-preview':
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {

package/dist/cjs/utils/ufoExperiences.js

@@ -15,20 +15,23 @@ var _version = require("../version.json");
 
 var _analytics = require("./analytics");
 
+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 concurrentExperience;
 
-var getExperience = function getExperience(id) {
+var getExperience = function getExperience(id, featureFlagsKeys) {
   if (!concurrentExperience) {
     var inlineExperience = {
       platform: {
         component: 'media-card'
       },
       type: _ufo.ExperienceTypes.Experience,
-      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlagsKeys: featureFlagsKeys
     };
     concurrentExperience = new _ufo.ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -36,35 +39,38 @@ var getExperience = function getExperience(id) {
   return concurrentExperience.getInstance(id);
 };
 
-var startUfoExperience = function startUfoExperience(id) {
-  getExperience(id).start();
+var startUfoExperience = function startUfoExperience(id, featureFlagsKeys) {
+  getExperience(id, featureFlagsKeys).start();
 };
 
 exports.startUfoExperience = startUfoExperience;
 
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
+      succeedUfoExperience(id, featureFlagsKeys, {
         fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, {
+      failUfoExperience(id, featureFlagsKeys, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
     case 'error':
-      error && failUfoExperience(id, _objectSpread(_objectSpread({
+      error && failUfoExperience(id, featureFlagsKeys, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, (0, _analytics.extractErrorInfo)(error)), {}, {
         request: (0, _analytics.getRenderErrorRequestMetadata)(error),
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       }));
       break;
   }
@@ -72,20 +78,24 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
 
 exports.completeUfoExperience = completeUfoExperience;
 
-var succeedUfoExperience = function succeedUfoExperience(id, properties) {
-  getExperience(id).success({
+var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: _version.name,
-      packageVersion: _version.version
+      packageVersion: _version.version,
+      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+      mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
   });
 };
 
-var failUfoExperience = function failUfoExperience(id, properties) {
-  getExperience(id).failure({
+var failUfoExperience = function failUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: _version.name,
-      packageVersion: _version.version
+      packageVersion: _version.version,
+      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+      mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
   });
 };

package/dist/cjs/version.json

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

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

@@ -1,13 +1,15 @@
-import { filterFeatureFlagNames } from '@atlaskit/media-common';
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const getRelevantFeatureFlagNames = () => filterFeatureFlagNames({
+export const REQUIRED_FEATURE_FLAGS = {
   newCardExperience: true,
   captions: true,
   timestampOnVideo: true,
   observedWidth: true,
   mediaInline: false,
   folderUploads: false
-});
+};
+export const getRelevantFeatureFlagNames = () => filterFeatureFlagNames(REQUIRED_FEATURE_FLAGS);
+export const getRelevantFeatureFlagKeysWithAllProducts = () => filterFeatureFlagKeysAllProducts(REQUIRED_FEATURE_FLAGS);
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 

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

@@ -16,7 +16,7 @@ import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent, fireCommencedEvent, getRelevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireCommencedEvent, getRelevantFeatureFlagNames, getRelevantFeatureFlagKeysWithAllProducts, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -37,6 +37,11 @@ export class CardBase extends Component {
 
     _defineProperty(this, "hasBeenMounted", false);
 
+    _defineProperty(this, "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
 
     _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
@@ -763,6 +768,7 @@ export class CardBase extends Component {
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const isNewMediaClient = prevMediaClient !== mediaClient;
+    this.updateFileStateFlag(fileState);
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
       this.fireCommencedEvent();
@@ -839,6 +845,22 @@ export class CardBase extends Component {
     this.subscribeInternalFile(identifier);
   }
 
+  updateFileStateFlag(fileState) {
+    if (!fileState) {
+      return;
+    }
+
+    const {
+      status
+    } = fileState;
+
+    if (status === 'processing') {
+      this.fileStateFlags.wasStatusProcessing = true;
+    } else if (status === 'uploading') {
+      this.fileStateFlags.wasStatusUploading = true;
+    }
+  }
+
   subscribeInternalFile(identifier) {
     const {
       mediaClient
@@ -908,7 +930,7 @@ export class CardBase extends Component {
       createAnalyticsEvent
     } = this.props;
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-    completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.ssrReliability, error);
+    completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, getRelevantFeatureFlagKeysWithAllProducts(), error);
   }
 
   fireCommencedEvent() {
@@ -921,7 +943,7 @@ export class CardBase extends Component {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
     });
-    startUfoExperience(this.internalOccurrenceKey);
+    startUfoExperience(this.internalOccurrenceKey, getRelevantFeatureFlagKeysWithAllProducts());
   }
 
   get actions() {

package/dist/es2019/root/cardView.js

@@ -237,7 +237,6 @@ export class CardViewBase extends React.Component {
           };
 
         case 'processing':
-        case 'loading-preview':
           return { ...defaultConfig,
             iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
               disableAnimation: disableAnimation
@@ -286,6 +285,7 @@ export class CardViewBase extends React.Component {
             iconMessage
           };
 
+        case 'loading-preview':
         case 'loading':
         default:
           return { ...defaultConfig,

package/dist/es2019/utils/ufoExperiences.js

@@ -1,16 +1,18 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
+import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 let concurrentExperience;
 
-const getExperience = id => {
+const getExperience = (id, featureFlagsKeys) => {
   if (!concurrentExperience) {
     const inlineExperience = {
       platform: {
         component: 'media-card'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlagsKeys
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -18,51 +20,58 @@ const getExperience = id => {
   return concurrentExperience.getInstance(id);
 };
 
-export const startUfoExperience = id => {
-  getExperience(id).start();
+export const startUfoExperience = (id, featureFlagsKeys) => {
+  getExperience(id, featureFlagsKeys).start();
 };
-export const completeUfoExperience = (id, status, fileAttributes, ssrReliability, error) => {
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) => {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
+      succeedUfoExperience(id, featureFlagsKeys, {
         fileAttributes,
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, {
+      failUfoExperience(id, featureFlagsKeys, {
         fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
 
     case 'error':
-      error && failUfoExperience(id, {
+      error && failUfoExperience(id, featureFlagsKeys, {
         fileAttributes,
         ...extractErrorInfo(error),
         request: getRenderErrorRequestMetadata(error),
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
   }
 };
 
-const succeedUfoExperience = (id, properties) => {
-  getExperience(id).success({
+const succeedUfoExperience = (id, featureFlagsKeys, properties) => {
+  getExperience(id, featureFlagsKeys).success({
     metadata: { ...properties,
       packageName,
-      packageVersion
+      packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     }
   });
 };
 
-const failUfoExperience = (id, properties) => {
-  getExperience(id).failure({
+const failUfoExperience = (id, featureFlagsKeys, properties) => {
+  getExperience(id, featureFlagsKeys).failure({
     metadata: { ...properties,
       packageName,
-      packageVersion
+      packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     }
   });
 };

package/dist/es2019/version.json

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

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

@@ -1,14 +1,18 @@
-import { filterFeatureFlagNames } from '@atlaskit/media-common';
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
+export var REQUIRED_FEATURE_FLAGS = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false
+};
 export var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
-  return filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: true,
-    timestampOnVideo: true,
-    observedWidth: true,
-    mediaInline: false,
-    folderUploads: false
-  });
+  return filterFeatureFlagNames(REQUIRED_FEATURE_FLAGS);
+};
+export var getRelevantFeatureFlagKeysWithAllProducts = function getRelevantFeatureFlagKeysWithAllProducts() {
+  return filterFeatureFlagKeysAllProducts(REQUIRED_FEATURE_FLAGS);
 };
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {

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

@@ -34,7 +34,7 @@ import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, getRelevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, getRelevantFeatureFlagNames, getRelevantFeatureFlagKeysWithAllProducts, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -63,6 +63,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
 
+    _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "viewportPreAnchorRef", /*#__PURE__*/createRef());
 
     _defineProperty(_assertThisInitialized(_this), "viewportPostAnchorRef", /*#__PURE__*/createRef());
@@ -800,6 +805,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      this.updateFileStateFlag(fileState);
 
       if (isExternalImageIdentifier(identifier) && isDifferent) {
         this.fireCommencedEvent();
@@ -875,6 +881,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       this.fireCommencedEvent();
       this.subscribeInternalFile(identifier);
     }
+  }, {
+    key: "updateFileStateFlag",
+    value: function updateFileStateFlag(fileState) {
+      if (!fileState) {
+        return;
+      }
+
+      var status = fileState.status;
+
+      if (status === 'processing') {
+        this.fileStateFlags.wasStatusProcessing = true;
+      } else if (status === 'uploading') {
+        this.fileStateFlags.wasStatusUploading = true;
+      }
+    }
   }, {
     key: "subscribeInternalFile",
     value: function subscribeInternalFile(identifier) {
@@ -942,7 +963,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.ssrReliability, error);
+      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, getRelevantFeatureFlagKeysWithAllProducts(), error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -954,7 +975,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
-      startUfoExperience(this.internalOccurrenceKey);
+      startUfoExperience(this.internalOccurrenceKey, getRelevantFeatureFlagKeysWithAllProducts());
     }
   }, {
     key: "actions",

package/dist/esm/root/cardView.js

@@ -259,7 +259,6 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
         case 'processing':
-        case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
             iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
               disableAnimation: disableAnimation
@@ -309,6 +308,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
             iconMessage: iconMessage
           });
 
+        case 'loading-preview':
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {

package/dist/esm/utils/ufoExperiences.js

@@ -7,16 +7,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
+import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var concurrentExperience;
 
-var getExperience = function getExperience(id) {
+var getExperience = function getExperience(id, featureFlagsKeys) {
   if (!concurrentExperience) {
     var inlineExperience = {
       platform: {
         component: 'media-card'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlagsKeys: featureFlagsKeys
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -24,51 +26,58 @@ var getExperience = function getExperience(id) {
   return concurrentExperience.getInstance(id);
 };
 
-export var startUfoExperience = function startUfoExperience(id) {
-  getExperience(id).start();
+export var startUfoExperience = function startUfoExperience(id, featureFlagsKeys) {
+  getExperience(id, featureFlagsKeys).start();
 };
-export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
+      succeedUfoExperience(id, featureFlagsKeys, {
         fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, {
+      failUfoExperience(id, featureFlagsKeys, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
     case 'error':
-      error && failUfoExperience(id, _objectSpread(_objectSpread({
+      error && failUfoExperience(id, featureFlagsKeys, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, extractErrorInfo(error)), {}, {
         request: getRenderErrorRequestMetadata(error),
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       }));
       break;
   }
 };
 
-var succeedUfoExperience = function succeedUfoExperience(id, properties) {
-  getExperience(id).success({
+var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
-      packageVersion: packageVersion
+      packageVersion: packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     })
   });
 };
 
-var failUfoExperience = function failUfoExperience(id, properties) {
-  getExperience(id).failure({
+var failUfoExperience = function failUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
-      packageVersion: packageVersion
+      packageVersion: packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     })
   });
 };

package/dist/esm/version.json

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

package/dist/types/root/card/cardAnalytics.d.ts

@@ -3,7 +3,16 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
+export declare const REQUIRED_FEATURE_FLAGS: {
+    newCardExperience: boolean;
+    captions: boolean;
+    timestampOnVideo: boolean;
+    observedWidth: boolean;
+    mediaInline: boolean;
+    folderUploads: boolean;
+};
 export declare const getRelevantFeatureFlagNames: () => (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
+export declare const getRelevantFeatureFlagKeysWithAllProducts: () => string[];
 export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;

package/dist/types/root/card/index.d.ts

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, MediaSubscription } from '@atlaskit/media-client';
+import { FileIdentifier, FileState, MediaSubscription } from '@atlaskit/media-client';
 import { WrappedComponentProps } from 'react-intl-next';
 import { CardAction, CardProps, CardState } from '../..';
 export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
+    private fileStateFlags;
     private viewportPreAnchorRef;
     private viewportPostAnchorRef;
     private ssrReliability;
@@ -25,6 +26,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private setCacheSSRPreview;
     private refetchSSRPreview;
     private resolvePreview;
+    updateFileStateFlag(fileState?: FileState): void;
     subscribeInternalFile(identifier: FileIdentifier): void;
     private get requestedDimensions();
     private get metadata();

package/dist/types/types.d.ts

@@ -5,6 +5,10 @@ export declare type FilePreviewStatus = {
     hasPreview: boolean;
     isSupportedByBrowser: boolean;
 };
+export declare type FileStateFlags = {
+    wasStatusProcessing: boolean;
+    wasStatusUploading: boolean;
+};
 export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
 export declare type CardDimensionValue = number | string;
 export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';

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

@@ -2,5 +2,6 @@ import { CardStatus } from '../../src';
 import { FileAttributes } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
-export declare const startUfoExperience: (id: string) => void;
-export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
+import { FileStateFlags } from '../types';
+export declare const startUfoExperience: (id: string, featureFlagsKeys: string[]) => void;
+export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, featureFlagsKeys: string[], error?: MediaCardError | undefined) => void;

package/in-product/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/in-product.js",
   "module": "../dist/esm/in-product.js",
   "module:es2019": "../dist/es2019/in-product.js",
+  "sideEffects": false,
   "types": "../dist/types/in-product.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "73.5.1",
+  "version": "73.6.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,13 +31,13 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/dropdown-menu": "^11.1.0",
-    "@atlaskit/editor-shared-styles": "^2.0.0",
+    "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^15.1.0",
-    "@atlaskit/media-common": "^2.12.0",
-    "@atlaskit/media-ui": "^21.1.0",
-    "@atlaskit/media-viewer": "^46.2.0",
+    "@atlaskit/media-client": "^16.0.0",
+    "@atlaskit/media-common": "^2.13.0",
+    "@atlaskit/media-ui": "^22.0.0",
+    "@atlaskit/media-viewer": "^46.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -62,8 +62,8 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.2.0",
-    "@atlaskit/media-core": "^32.3.0",
-    "@atlaskit/media-test-helpers": "^29.4.0",
+    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/select": "^15.2.1",
@@ -72,6 +72,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/ufo": "^0.1.10",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.6",
     "@types/react-loadable": "^5.4.1",

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
   "types": "../dist/types/types.d.ts"
 }