@atlaskit/media-card 73.4.2 → 73.6.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @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
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
+## 73.5.0
+
+### Minor Changes
+
+- [`02fb8e78fb9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02fb8e78fb9) - Implement media card render UFO experience
+
+### Patch Changes
+
+- [`3ef794dc11f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef794dc11f) - Removed emoji and media packages dependencies from renderer initial load.
+- [`7948702bf56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7948702bf56) - Fixing a bug where sometimes the media card pre-load indicator is given 100% height and renders over other components. It now has a max height of 0 and is not a click target
+- [`065ae19cb44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/065ae19cb44) - Enforced "up to date" logged feature flags via type checks
+- Updated dependencies
+
 ## 73.4.2
 
 ### Patch Changes

package/classnames/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/media-card/classnames",
+  "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/classnames.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
+  enumerable: true,
+  get: function get() {
+    return _classnames.fileCardImageViewSelectedSelector;
+  }
+});
+Object.defineProperty(exports, "fileCardImageViewSelector", {
+  enumerable: true,
+  get: function get() {
+    return _classnames.fileCardImageViewSelector;
+  }
+});
+
+var _classnames = require("./files/cardImageView/classnames");

package/dist/cjs/files/cardImageView/classnames.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fileCardImageViewSelector = exports.fileCardImageViewSelectedSelector = void 0;
+var fileCardImageViewSelector = 'media-file-card-view';
+exports.fileCardImageViewSelector = fileCardImageViewSelector;
+var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
+exports.fileCardImageViewSelectedSelector = fileCardImageViewSelectedSelector;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fileCardImageViewSelector = exports.fileCardImageViewSelectedSelector = exports.FileCardImageView = void 0;
+exports.FileCardImageView = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -41,6 +41,8 @@ var _progressBar = require("../../utils/progressBar");
 
 var _cardActions = _interopRequireDefault(require("../../utils/cardActions"));
 
+var _classnames = require("./classnames");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -49,11 +51,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 fileCardImageViewSelector = 'media-file-card-view';
-exports.fileCardImageViewSelector = fileCardImageViewSelector;
-var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
-exports.fileCardImageViewSelectedSelector = fileCardImageViewSelectedSelector;
-
 var FileCardImageView = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(FileCardImageView, _Component);
 
@@ -313,7 +310,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         selectable: selectable,
         selected: selected,
         mediaType: mediaType,
-        className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+        className: "".concat(_classnames.fileCardImageViewSelector, " ").concat(selected ? _classnames.fileCardImageViewSelectedSelector : '')
       }, this.renderCardContents());
     }
   }, {

package/dist/cjs/index.js

@@ -36,13 +36,13 @@ Object.defineProperty(exports, "defaultImageCardDimensions", {
 Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelectedSelector;
+    return _classnames.fileCardImageViewSelectedSelector;
   }
 });
 Object.defineProperty(exports, "fileCardImageViewSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelector;
+    return _classnames.fileCardImageViewSelector;
   }
 });
 Object.defineProperty(exports, "inlinePlayerClassName", {
@@ -66,7 +66,7 @@ var _cardError = require("./utils/lightCards/cardError");
 
 var _cardDimensions = require("./utils/cardDimensions");
 
-var _cardImageView = require("./files/cardImageView");
+var _classnames = require("./files/cardImageView/classnames");
 
 var _inlinePlayer = require("./root/inlinePlayer");
 

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

@@ -3,12 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relevantFeatureFlagNames = 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 relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
-exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
+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)(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) {

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

@@ -75,6 +75,10 @@ var _dimensionComparer = require("../../utils/dimensionComparer");
 
 var _getMediaCardCursor = require("../../utils/getMediaCardCursor");
 
+var _ufoExperiences = require("../../utils/ufoExperiences");
+
+var _generateUniqueId = require("../../utils/generateUniqueId");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -92,6 +96,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper(CardBase);
 
+  // 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)
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
   function CardBase(props) {
@@ -99,7 +105,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     (0, _classCallCheck2.default)(this, CardBase);
     _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", {
@@ -287,7 +298,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         if ((0, _getCardPreview.isSSRClientPreview)(cardPreview)) {
           _this.ssrReliability.client = failedSSRObject;
         }
-        /* 
+        /*
           If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
         */
 
@@ -343,7 +354,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
             status: 'success'
           };
         }
-        /* 
+        /*
           If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
         */
 
@@ -808,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();
@@ -883,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) {
@@ -950,6 +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.fileStateFlags, this.ssrReliability, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)(), error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -961,6 +989,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
+      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)());
     }
   }, {
     key: "actions",
@@ -1022,7 +1051,7 @@ var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: _cardAnalytics.relevantFeatureFlagNames
+  filterFeatureFlags: (0, _cardAnalytics.getRelevantFeatureFlagNames)()
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardBase, {
   enforceContext: false
 })));

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/generateUniqueId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateUniqueId = void 0;
+
+var generateUniqueId = function generateUniqueId() {
+  return (performance.now().toString(36) + Math.random().toString(36)).replace(/\./g, '');
+};
+
+exports.generateUniqueId = generateUniqueId;

package/dist/cjs/utils/ufoExperiences.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startUfoExperience = exports.completeUfoExperience = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ufo = require("@atlaskit/ufo");
+
+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, featureFlagsKeys) {
+  if (!concurrentExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-card'
+      },
+      type: _ufo.ExperienceTypes.Experience,
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlagsKeys: featureFlagsKeys
+    };
+    concurrentExperience = new _ufo.ConcurrentExperience('media-card-render', inlineExperience);
+  }
+
+  return concurrentExperience.getInstance(id);
+};
+
+var startUfoExperience = function startUfoExperience(id, featureFlagsKeys) {
+  getExperience(id, featureFlagsKeys).start();
+};
+
+exports.startUfoExperience = startUfoExperience;
+
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) {
+  switch (status) {
+    case 'complete':
+      succeedUfoExperience(id, featureFlagsKeys, {
+        fileAttributes: fileAttributes,
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
+      });
+      break;
+
+    case 'failed-processing':
+      failUfoExperience(id, featureFlagsKeys, {
+        fileAttributes: fileAttributes,
+        failReason: 'failed-processing',
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
+      });
+      break;
+
+    case 'error':
+      error && failUfoExperience(id, featureFlagsKeys, _objectSpread(_objectSpread({
+        fileAttributes: fileAttributes
+      }, (0, _analytics.extractErrorInfo)(error)), {}, {
+        request: (0, _analytics.getRenderErrorRequestMetadata)(error),
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
+      }));
+      break;
+  }
+};
+
+exports.completeUfoExperience = completeUfoExperience;
+
+var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).success({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: _version.name,
+      packageVersion: _version.version,
+      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+      mediaRegion: (0, _mediaClient.getMediaRegion)()
+    })
+  });
+};
+
+var failUfoExperience = function failUfoExperience(id, featureFlagsKeys, properties) {
+  getExperience(id, featureFlagsKeys).failure({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: _version.name,
+      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.4.2",
+	"version": "73.6.0",
 	"sideEffects": false
 }

package/dist/es2019/classnames.js

@@ -0,0 +1 @@
+export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView/classnames';

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

@@ -0,0 +1,2 @@
+export const fileCardImageViewSelector = 'media-file-card-view';
+export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';

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

@@ -9,8 +9,7 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-export const fileCardImageViewSelector = 'media-file-card-view';
-export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
+import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
 export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/index.js

@@ -2,6 +2,6 @@ export { Card, MediaInlineCard } from './root';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
-export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView';
+export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView/classnames';
 export { inlinePlayerClassName } from './root/inlinePlayer';
 export { newFileExperienceClassName } from './root/card/cardConstants';

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

@@ -1,5 +1,15 @@
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
+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,21 +16,32 @@ 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, relevantFeatureFlagNames, 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';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
+import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
+import { generateUniqueId } from '../../utils/generateUniqueId';
 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)
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "internalOccurrenceKey", generateUniqueId());
+
     _defineProperty(this, "hasBeenMounted", false);
 
+    _defineProperty(this, "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
 
     _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
@@ -183,7 +194,7 @@ export class CardBase extends Component {
         if (isSSRClientPreview(cardPreview)) {
           this.ssrReliability.client = failedSSRObject;
         }
-        /* 
+        /*
           If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
         */
 
@@ -240,7 +251,7 @@ export class CardBase extends Component {
             status: 'success'
           };
         }
-        /* 
+        /*
           If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
         */
 
@@ -757,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();
@@ -833,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
@@ -902,6 +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.fileStateFlags, this.ssrReliability, getRelevantFeatureFlagKeysWithAllProducts(), error);
   }
 
   fireCommencedEvent() {
@@ -914,6 +943,7 @@ export class CardBase extends Component {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
     });
+    startUfoExperience(this.internalOccurrenceKey, getRelevantFeatureFlagKeysWithAllProducts());
   }
 
   get actions() {
@@ -971,7 +1001,7 @@ export const Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: relevantFeatureFlagNames
+  filterFeatureFlags: getRelevantFeatureFlagNames()
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));

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/generateUniqueId.js

@@ -0,0 +1,3 @@
+export const generateUniqueId = () => {
+  return (performance.now().toString(36) + Math.random().toString(36)).replace(/\./g, '');
+};