@atlaskit/media-card 73.5.0 → 73.7.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/media-card
 
+## 73.7.0
+
+### Minor Changes
+
+- [`bfde909c9b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfde909c9b4) - Add new feature flag mediaUploadApiV2
+- [`ed6cdd2d397`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed6cdd2d397) - added onfullscreenchange property to media to avoid triggering table resizing when media is in full screen mode
+
+### Patch Changes
+
+- [`35e43fcc798`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35e43fcc798) - Minor bug fix for feature flag names in experience parameters
+- [`83036ef87f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83036ef87f1) - fix mouse cursor style when hovered over linked image
+- [`c3d85388bc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3d85388bc6) - fix media card titlebox cursor
+- [`c2ede50a80a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ede50a80a) - Add media region and environment returned from media API response into failed analytic events.
+- [`e21e5c271b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e21e5c271b7) - Enabled UFO logger for all examples of Media-Card
+- Updated dependencies
+
+## 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

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,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRelevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
-
-var _mediaCommon = require("@atlaskit/media-common");
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../../utils/analytics");
 
-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) {
     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", {
@@ -472,7 +476,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props7.dimensions,
           selected = _this$props7.selected,
           testId = _this$props7.testId,
-          originalDimensions = _this$props7.originalDimensions;
+          originalDimensions = _this$props7.originalDimensions,
+          onFullscreenChange = _this$props7.onFullscreenChange;
       var _this$state = _this.state,
           shouldAutoplay = _this$state.shouldAutoplay,
           cardPreview = _this$state.cardPreview;
@@ -482,6 +487,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -815,6 +821,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 +897,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 +979,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, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -1031,7 +1053,7 @@ var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: (0, _cardAnalytics.getRelevantFeatureFlagNames)()
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardBase, {
   enforceContext: false
 })));

package/dist/cjs/root/cardView.js

@@ -83,8 +83,6 @@ var _cardConstants = require("./card/cardConstants");
 
 var _errors = require("../errors");
 
-var _types = require("../types");
-
 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; }
@@ -297,7 +295,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 +344,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
             iconMessage: iconMessage
           });
 
+        case 'loading-preview':
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
@@ -625,8 +623,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
 exports.CardViewBase = CardViewBase;
 (0, _defineProperty2.default)(CardViewBase, "defaultProps", {
-  appearance: 'auto',
-  mediaCardCursor: _types.MediaCardCursor.NoAction
+  appearance: 'auto'
 });
 var CardView = (0, _analyticsNext.withAnalyticsEvents)({
   onClick: (0, _analytics.createAndFireMediaCardEvent)({

package/dist/cjs/root/inlinePlayer.js

@@ -332,7 +332,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           identifier = _this$props4.identifier,
           forwardRef = _this$props4.forwardRef,
           autoplay = _this$props4.autoplay,
-          cardPreview = _this$props4.cardPreview;
+          cardPreview = _this$props4.cardPreview,
+          onFullscreenChange = _this$props4.onFullscreenChange;
       var _this$state = this.state,
           fileSrc = _this$state.fileSrc,
           isUploading = _this$state.isUploading,
@@ -356,6 +357,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
+          onFullscreenChange: onFullscreenChange,
           fileId: identifier.id,
           isAutoPlay: autoplay,
           isHDAvailable: false,

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

@@ -89,7 +89,7 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
 };
 
 var getCursorStyle = function getCursorStyle(cursor) {
-  return "cursor: ".concat(cursor, ";");
+  return !!cursor ? "cursor: ".concat(cursor, ";") : '';
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {

package/dist/cjs/root/ui/titleBox/styled.js

@@ -33,7 +33,7 @@ var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 var TitleBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       titleBoxBgColor = _ref.titleBoxBgColor;
-  return "\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background-color: ".concat((0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 0.8), ";\n    color: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
+  return "\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background-color: ".concat((0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 0.8), ";\n    color: inherit;\n    cursor: inherit;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
 });
 
 exports.TitleBoxWrapper = TitleBoxWrapper;

package/dist/cjs/types.js

@@ -9,6 +9,5 @@ exports.MediaCardCursor = MediaCardCursor;
 
 (function (MediaCardCursor) {
   MediaCardCursor["Action"] = "pointer";
-  MediaCardCursor["NoAction"] = "default";
   MediaCardCursor["NotReady"] = "wait";
 })(MediaCardCursor || (exports.MediaCardCursor = MediaCardCursor = {}));

package/dist/cjs/utils/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractErrorInfo = exports.createAndFireMediaCardEvent = void 0;
+exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
 exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
 
@@ -23,6 +23,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 relevantFlags = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: false
+};
+var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
+exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
+var LOGGED_FEATURE_FLAG_KEYS = (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(relevantFlags);
+exports.LOGGED_FEATURE_FLAG_KEYS = LOGGED_FEATURE_FLAG_KEYS;
+
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,

package/dist/cjs/utils/getMediaCardCursor.js

@@ -7,10 +7,13 @@ exports.getMediaCardCursor = void 0;
 
 var _types = require("../types");
 
+/**
+ * When the returned value is undefined, we'd expect the media card to take the parent's cursor style.
+ */
 var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) {
   // If error status or no action is requested = NoAction
   if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
-    return _types.MediaCardCursor.NoAction;
+    return;
   }
 
   if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
@@ -23,7 +26,7 @@ var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaVi
     return _types.MediaCardCursor.Action;
   }
 
-  return _types.MediaCardCursor.NoAction;
+  return;
 };
 
 exports.getMediaCardCursor = getMediaCardCursor;

package/dist/cjs/utils/ufoExperiences.js

@@ -15,6 +15,8 @@ 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; }
@@ -28,7 +30,8 @@ var getExperience = function getExperience(id) {
         component: 'media-card'
       },
       type: _ufo.ExperienceTypes.Experience,
-      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlags: _analytics.LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new _ufo.ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -42,12 +45,13 @@ var startUfoExperience = function startUfoExperience(id) {
 
 exports.startUfoExperience = startUfoExperience;
 
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
         fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
@@ -55,7 +59,8 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       failUfoExperience(id, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
@@ -64,7 +69,8 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
         fileAttributes: fileAttributes
       }, (0, _analytics.extractErrorInfo)(error)), {}, {
         request: (0, _analytics.getRenderErrorRequestMetadata)(error),
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       }));
       break;
   }
@@ -76,7 +82,9 @@ var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: _version.name,
-      packageVersion: _version.version
+      packageVersion: _version.version,
+      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+      mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
   });
 };
@@ -85,7 +93,9 @@ var failUfoExperience = function failUfoExperience(id, properties) {
   getExperience(id).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.0",
+	"version": "73.7.0",
 	"sideEffects": false
 }

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

@@ -1,13 +1,4 @@
-import { filterFeatureFlagNames } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-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

@@ -14,9 +14,9 @@ import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
-import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent, fireCommencedEvent, getRelevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireCommencedEvent, 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());
@@ -386,7 +391,8 @@ export class CardBase extends Component {
         dimensions,
         selected,
         testId,
-        originalDimensions
+        originalDimensions,
+        onFullscreenChange
       } = this.props;
       const {
         shouldAutoplay,
@@ -398,6 +404,7 @@ export class CardBase extends Component {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: this.onInlinePlayerError,
         onClick: this.onClick,
         selected: selected,
@@ -763,6 +770,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 +847,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 +932,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, error);
   }
 
   fireCommencedEvent() {
@@ -979,7 +1003,7 @@ export const Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: getRelevantFeatureFlagNames()
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));

package/dist/es2019/root/cardView.js

@@ -30,7 +30,6 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
-import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -237,7 +236,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 +284,7 @@ export class CardViewBase extends React.Component {
             iconMessage
           };
 
+        case 'loading-preview':
         case 'loading':
         default:
           return { ...defaultConfig,
@@ -563,8 +562,7 @@ export class CardViewBase extends React.Component {
 }
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto',
-  mediaCardCursor: MediaCardCursor.NoAction
+  appearance: 'auto'
 });
 
 export const CardView = withAnalyticsEvents({

package/dist/es2019/root/inlinePlayer.js

@@ -217,7 +217,8 @@ export class InlinePlayerBase extends Component {
       identifier,
       forwardRef,
       autoplay,
-      cardPreview
+      cardPreview,
+      onFullscreenChange
     } = this.props;
     const {
       fileSrc,
@@ -242,6 +243,7 @@ export class InlinePlayerBase extends Component {
     }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
       type: "video",
       src: fileSrc,
+      onFullscreenChange: onFullscreenChange,
       fileId: identifier.id,
       isAutoPlay: autoplay,
       isHDAvailable: false,

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

@@ -52,7 +52,7 @@ const getWrapperShadow = (disableOverlay, selected) => {
   return shadow ? `box-shadow: ${shadow};` : '';
 };
 
-const getCursorStyle = cursor => `cursor: ${cursor};`;
+const getCursorStyle = cursor => !!cursor ? `cursor: ${cursor};` : '';
 
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {

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

@@ -25,6 +25,8 @@ export const TitleBoxWrapper = styled.div`
     width: 100%;
     background-color: ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)};
     color: inherit;
+    cursor: inherit;
+    pointer-events: none;
     display: flex;
     flex-direction: column;
     justify-content: center;

package/dist/es2019/types.js

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

package/dist/es2019/utils/analytics.js

@@ -1,7 +1,18 @@
 import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
+const relevantFlags = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: false
+};
+export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export const getFileAttributes = (metadata, fileStatus) => ({
   fileMediatype: metadata.mediaType,
   fileMimetype: metadata.mimeType,

package/dist/es2019/utils/getMediaCardCursor.js

@@ -1,8 +1,12 @@
 import { MediaCardCursor } from '../types';
+
+/**
+ * When the returned value is undefined, we'd expect the media card to take the parent's cursor style.
+ */
 export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) => {
   // If error status or no action is requested = NoAction
   if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
-    return MediaCardCursor.NoAction;
+    return;
   }
 
   if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
@@ -15,5 +19,5 @@ export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatu
     return MediaCardCursor.Action;
   }
 
-  return MediaCardCursor.NoAction;
+  return;
 };