@atlaskit/media-card 73.4.0 → 73.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/media-card
 
+## 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
+
+- [`c102bb59f41`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c102bb59f41) - Viewport detector needs to have absolute positioning so that it does not cause scroll bars in firefox when rendered in a table with a link.
+
+## 73.4.1
+
+### Patch Changes
+
+- [`de7e2ff674e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de7e2ff674e) - Applies a fix to ensure that the media card viewport detector is never a click target
+
 ## 73.4.0
 
 ### Minor Changes

package/classnames/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/media-card/classnames",
+  "main": "../dist/cjs/classnames.js",
+  "module": "../dist/esm/classnames.js",
+  "module:es2019": "../dist/es2019/classnames.js",
+  "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,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
+exports.getRelevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
+
+var _mediaCommon = require("@atlaskit/media-common");
 
 var _analytics = require("../../utils/analytics");
 
-var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
-exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
+var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
+  return (0, _mediaCommon.filterFeatureFlagNames)({
+    newCardExperience: true,
+    captions: true,
+    timestampOnVideo: true,
+    observedWidth: true,
+    mediaInline: false,
+    folderUploads: false
+  });
+};
+
+exports.getRelevantFeatureFlagNames = getRelevantFeatureFlagNames;
 
 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,6 +105,7 @@ 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), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
@@ -287,7 +294,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 +350,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.
         */
 
@@ -950,6 +957,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);
     }
   }, {
     key: "fireCommencedEvent",
@@ -961,6 +969,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
+      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey);
     }
   }, {
     key: "actions",
@@ -1022,7 +1031,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/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,91 @@
+"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");
+
+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) {
+  if (!concurrentExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-card'
+      },
+      type: _ufo.ExperienceTypes.Experience,
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+    };
+    concurrentExperience = new _ufo.ConcurrentExperience('media-card-render', inlineExperience);
+  }
+
+  return concurrentExperience.getInstance(id);
+};
+
+var startUfoExperience = function startUfoExperience(id) {
+  getExperience(id).start();
+};
+
+exports.startUfoExperience = startUfoExperience;
+
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+  switch (status) {
+    case 'complete':
+      succeedUfoExperience(id, {
+        fileAttributes: fileAttributes,
+        ssrReliability: ssrReliability
+      });
+      break;
+
+    case 'failed-processing':
+      failUfoExperience(id, {
+        fileAttributes: fileAttributes,
+        failReason: 'failed-processing',
+        ssrReliability: ssrReliability
+      });
+      break;
+
+    case 'error':
+      error && failUfoExperience(id, _objectSpread(_objectSpread({
+        fileAttributes: fileAttributes
+      }, (0, _analytics.extractErrorInfo)(error)), {}, {
+        request: (0, _analytics.getRenderErrorRequestMetadata)(error),
+        ssrReliability: ssrReliability
+      }));
+      break;
+  }
+};
+
+exports.completeUfoExperience = completeUfoExperience;
+
+var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+  getExperience(id).success({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: _version.name,
+      packageVersion: _version.version
+    })
+  });
+};
+
+var failUfoExperience = function failUfoExperience(id, properties) {
+  getExperience(id).failure({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: _version.name,
+      packageVersion: _version.version
+    })
+  });
+};

package/dist/cjs/utils/viewportDetector.js

@@ -35,8 +35,10 @@ var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     className: "media-card-viewport-anchor",
     style: {
-      position: 'relative',
-      top: "".concat(props.offsetTop, "px")
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px"),
+      maxHeight: 0,
+      pointerEvents: 'none'
     }
   });
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.4.0",
+	"version": "73.5.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,13 @@
+import { filterFeatureFlagNames } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
+export const getRelevantFeatureFlagNames = () => filterFeatureFlagNames({
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false
+});
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 

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

@@ -16,19 +16,25 @@ 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, 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, "viewportPreAnchorRef", /*#__PURE__*/createRef());
@@ -183,7 +189,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 +246,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.
         */
 
@@ -902,6 +908,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);
   }
 
   fireCommencedEvent() {
@@ -914,6 +921,7 @@ export class CardBase extends Component {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
     });
+    startUfoExperience(this.internalOccurrenceKey);
   }
 
   get actions() {
@@ -971,7 +979,7 @@ export const Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: relevantFeatureFlagNames
+  filterFeatureFlags: getRelevantFeatureFlagNames()
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));

package/dist/es2019/utils/generateUniqueId.js

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

package/dist/es2019/utils/ufoExperiences.js

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

package/dist/es2019/utils/viewportDetector.js

@@ -15,8 +15,10 @@ export const ViewportAnchor = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     className: "media-card-viewport-anchor",
     style: {
-      position: 'relative',
-      top: `${props.offsetTop}px`
+      position: 'absolute',
+      top: `${props.offsetTop}px`,
+      maxHeight: 0,
+      pointerEvents: 'none'
     }
   });
 });

package/dist/es2019/version.json

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

package/dist/esm/classnames.js

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

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

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

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

@@ -20,8 +20,7 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-export var fileCardImageViewSelector = 'media-file-card-view';
-export var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
+import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
 export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _inherits(FileCardImageView, _Component);
 

package/dist/esm/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/esm/root/card/cardAnalytics.js

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

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

@@ -34,18 +34,22 @@ 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, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, getRelevantFeatureFlagNames, 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 var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _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) {
@@ -55,6 +59,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "internalOccurrenceKey", generateUniqueId());
+
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "viewportPreAnchorRef", /*#__PURE__*/createRef());
@@ -255,7 +261,7 @@ export var CardBase = /*#__PURE__*/function (_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.
         */
 
@@ -313,7 +319,7 @@ export 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.
         */
 
@@ -936,6 +942,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);
     }
   }, {
     key: "fireCommencedEvent",
@@ -947,6 +954,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
+      startUfoExperience(this.internalOccurrenceKey);
     }
   }, {
     key: "actions",
@@ -1007,7 +1015,7 @@ export var Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: relevantFeatureFlagNames
+  filterFeatureFlags: getRelevantFeatureFlagNames()
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));

package/dist/esm/utils/generateUniqueId.js

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

package/dist/esm/utils/ufoExperiences.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { name as packageName, version as packageVersion } from '../version.json';
+import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
+var concurrentExperience;
+
+var getExperience = function getExperience(id) {
+  if (!concurrentExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-card'
+      },
+      type: ExperienceTypes.Experience,
+      performanceType: ExperiencePerformanceTypes.InlineResult
+    };
+    concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
+  }
+
+  return concurrentExperience.getInstance(id);
+};
+
+export var startUfoExperience = function startUfoExperience(id) {
+  getExperience(id).start();
+};
+export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+  switch (status) {
+    case 'complete':
+      succeedUfoExperience(id, {
+        fileAttributes: fileAttributes,
+        ssrReliability: ssrReliability
+      });
+      break;
+
+    case 'failed-processing':
+      failUfoExperience(id, {
+        fileAttributes: fileAttributes,
+        failReason: 'failed-processing',
+        ssrReliability: ssrReliability
+      });
+      break;
+
+    case 'error':
+      error && failUfoExperience(id, _objectSpread(_objectSpread({
+        fileAttributes: fileAttributes
+      }, extractErrorInfo(error)), {}, {
+        request: getRenderErrorRequestMetadata(error),
+        ssrReliability: ssrReliability
+      }));
+      break;
+  }
+};
+
+var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+  getExperience(id).success({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: packageName,
+      packageVersion: packageVersion
+    })
+  });
+};
+
+var failUfoExperience = function failUfoExperience(id, properties) {
+  getExperience(id).failure({
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
+      packageName: packageName,
+      packageVersion: packageVersion
+    })
+  });
+};

package/dist/esm/utils/viewportDetector.js

@@ -21,8 +21,10 @@ export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     className: "media-card-viewport-anchor",
     style: {
-      position: 'relative',
-      top: "".concat(props.offsetTop, "px")
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px"),
+      maxHeight: 0,
+      pointerEvents: 'none'
     }
   });
 });

package/dist/esm/version.json

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

package/dist/types/classnames.d.ts

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

package/dist/types/files/cardImageView/classnames.d.ts

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

package/dist/types/files/cardImageView/index.d.ts

@@ -26,8 +26,6 @@ export interface FileCardImageViewProps {
     readonly onImageLoad?: (cardPreview: CardPreview) => void;
     readonly cardPreview: CardPreview;
 }
-export declare const fileCardImageViewSelector = "media-file-card-view";
-export declare const fileCardImageViewSelectedSelector = "media-file-card-view-selected";
 export declare class FileCardImageView extends Component<FileCardImageViewProps> {
     private wasThumbnailDisplayed;
     static defaultProps: Partial<FileCardImageViewProps>;

package/dist/types/index.d.ts

@@ -67,6 +67,6 @@ export interface CardState {
 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/types/root/card/cardAnalytics.d.ts

@@ -1,9 +1,9 @@
-import { FileAttributes, MediaFeatureFlags, PerformanceAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
-export declare const relevantFeatureFlagNames: Array<keyof MediaFeatureFlags>;
+export declare const getRelevantFeatureFlagNames: () => ("newCardExperience" | "captions" | "mediaInline" | "folderUploads" | "timestampOnVideo" | "observedWidth")[];
 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

@@ -5,6 +5,7 @@ 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 viewportPreAnchorRef;
     private viewportPostAnchorRef;

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

@@ -0,0 +1 @@
+export declare const generateUniqueId: () => string;

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

@@ -0,0 +1,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;

package/example-helpers/index.tsx

@@ -16,7 +16,7 @@ import FabricAnalyticsListeners, {
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
 import { Card, CardAppearance, CardEvent, CardAction } from '../src';
-import { relevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
+import { getRelevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
 import { MediaCardError } from '../src/errors';
 import DevelopmentUseMessage from './developmentUseMessage';
 
@@ -134,7 +134,7 @@ export const MainWrapper: React.FC<MainWrapperProps> = ({
 }) => (
   <>
     {developmentOnly && <DevelopmentUseMessage />}
-    <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
+    <FeatureFlagsWrapper filterFlags={getRelevantFeatureFlagNames()}>
       {children}
     </FeatureFlagsWrapper>
   </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "73.4.0",
+  "version": "73.5.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,8 @@
   "af:exports": {
     "./types": "./src/types.ts",
     ".": "./src/index.ts",
-    "./in-product": "./src/in-product.ts"
+    "./in-product": "./src/in-product.ts",
+    "./classnames": "./src/classnames.ts"
   },
   "atlassian": {
     "team": "Media Experience",
@@ -34,12 +35,13 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/media-client": "^15.0.0",
-    "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-ui": "^21.0.0",
+    "@atlaskit/media-common": "^2.12.0",
+    "@atlaskit/media-ui": "^21.1.0",
     "@atlaskit/media-viewer": "^46.2.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
@@ -61,7 +63,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/media-core": "^32.3.0",
-    "@atlaskit/media-test-helpers": "^29.3.0",
+    "@atlaskit/media-test-helpers": "^29.4.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/select": "^15.2.1",
@@ -80,7 +82,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "3.9.6",
+    "typescript": "3.9.10",
     "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },