@atlaskit/media-viewer 46.2.2 → 46.5.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/media-viewer
 
+## 46.5.0
+
+### Minor Changes
+
+- [`1a76e2839e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a76e2839e6) - Default value for mediaUploadApiV2 Media feature flag set to true.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 46.4.0
+
+### Minor Changes
+
+- [`bfde909c9b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfde909c9b4) - Add new feature flag mediaUploadApiV2
+- [`35e43fcc798`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35e43fcc798) - Add ufo feature flag logging
+- [`31cf1fff440`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31cf1fff440) - Flagged events with file states processing and uploading for UFO payload
+
+### Patch Changes
+
+- [`0ea419d2739`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea419d2739) - Enabled UFO logger for all the examples in Media-viewer
+- [`c2ede50a80a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ede50a80a) - Add media region and environment returned from media API response into failed analytic events.
+- Updated dependencies
+
+## 46.3.0
+
+### Minor Changes
+
+- [`d2e212a2676`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2e212a2676) - Added media environment to UFO payload
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 46.2.2
 
 ### Patch Changes

package/classnames/package.json

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

package/dist/cjs/analytics/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.componentName = exports.component = void 0;
+exports.componentName = exports.component = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireAnalytics = fireAnalytics;
 exports.getFileAttributes = getFileAttributes;
 Object.defineProperty(exports, "packageName", {
@@ -18,6 +18,7 @@ Object.defineProperty(exports, "packageVersion", {
     return _version.version;
   }
 });
+exports.relevantFlags = void 0;
 
 var _mediaCommon = require("@atlaskit/media-common");
 
@@ -25,6 +26,20 @@ var _version = require("../version.json");
 
 var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
+var relevantFlags = {
+  newCardExperience: false,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+exports.relevantFlags = relevantFlags;
+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;
 
 function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/cjs/analytics/ufoExperiences.js

@@ -11,8 +11,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ufo = require("@atlaskit/ufo");
 
+var _mediaClient = require("@atlaskit/media-client");
+
 var _version = require("../version.json");
 
+var _ = require(".");
+
 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; }
@@ -26,7 +30,8 @@ var getExperience = function getExperience() {
         component: 'media-viewer'
       },
       type: _ufo.ExperienceTypes.Experience,
-      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlags: _.LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new _ufo.UFOExperience('media-file', inlineExperience);
   }
@@ -42,11 +47,12 @@ exports.startMediaFileUfoExperience = startMediaFileUfoExperience;
 
 var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
   getExperience().success({
-    metadata: {
-      fileAttributes: properties,
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: _version.name,
-      packageVersion: _version.version
-    }
+      packageVersion: _version.version,
+      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+      mediaRegion: (0, _mediaClient.getMediaRegion)()
+    })
   });
 };
 
@@ -55,7 +61,9 @@ exports.succeedMediaFileUfoExperience = succeedMediaFileUfoExperience;
 var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
   var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
     packageName: _version.name,
-    packageVersion: _version.version
+    packageVersion: _version.version,
+    mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+    mediaRegion: (0, _mediaClient.getMediaRegion)()
   });
 
   getExperience().failure({

package/dist/cjs/errorMessage.js

@@ -109,7 +109,9 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         (0, _analytics.fireAnalytics)(payload, props);
 
-        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+        var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
+          fileStateFlags: props.fileStateFlags
+        });
 
         if (Object.keys(rawPayload).includes('status')) {
           delete rawPayload['status'];

package/dist/cjs/item-viewer.js

@@ -163,13 +163,20 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", initialState);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
           (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes), _this.props);
-          (0, _ufoExperiences.succeedMediaFileUfoExperience)(fileAttributes);
+          (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+            fileAttributes: fileAttributes,
+            fileStateFlags: _this.fileStateFlags
+          });
         }
       });
     });
@@ -183,7 +190,10 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         fileId: 'external-image'
       }), _this.props);
       (0, _ufoExperiences.succeedMediaFileUfoExperience)({
-        fileId: 'external-image'
+        fileAttributes: {
+          fileId: 'external-image'
+        },
+        fileStateFlags: _this.fileStateFlags
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
@@ -304,12 +314,14 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
           error: error,
-          fileState: fileState
+          fileState: fileState,
+          fileStateFlags: this.fileStateFlags
         }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
-          error: error
+          error: error,
+          fileStateFlags: this.fileStateFlags
         });
       }
     }
@@ -371,6 +383,21 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: collectionName
       });
     }
+  }, {
+    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: "init",
     value: function init(props) {
@@ -396,6 +423,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: identifier.collectionName
       }).subscribe({
         next: function next(file) {
+          _this3.updateFileStateFlag(file);
+
           _this3.setState({
             item: _domain.Outcome.successful(file)
           });

package/dist/cjs/media-viewer.js

@@ -212,14 +212,7 @@ var MediaViewer = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: _analytics.component,
   componentName: _analytics.componentName
 }, {
-  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: false,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: false
-  })
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.2.2",
+	"version": "46.5.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/index.js

@@ -1,7 +1,18 @@
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { name as packageName, version as packageVersion } from '../version.json';
 const componentName = 'mediaViewer';
 export { packageName, packageVersion, componentName, componentName as component };
+export const relevantFlags = {
+  newCardExperience: false,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/es2019/analytics/ufoExperiences.js

@@ -1,5 +1,7 @@
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { name as packageName, version as packageVersion } from '../version.json';
+import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 let ufoExperience;
 
 const getExperience = () => {
@@ -9,7 +11,8 @@ const getExperience = () => {
         component: 'media-viewer'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new UFOExperience('media-file', inlineExperience);
   }
@@ -22,17 +25,20 @@ export const startMediaFileUfoExperience = () => {
 };
 export const succeedMediaFileUfoExperience = properties => {
   getExperience().success({
-    metadata: {
-      fileAttributes: properties,
+    metadata: { ...properties,
       packageName,
-      packageVersion
+      packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     }
   });
 };
 export const failMediaFileUfoExperience = properties => {
   const refinedMetadata = { ...properties,
     packageName,
-    packageVersion
+    packageVersion,
+    mediaEnvironment: getMediaEnvironment(),
+    mediaRegion: getMediaRegion()
   };
   getExperience().failure({
     metadata: refinedMetadata

package/dist/es2019/errorMessage.js

@@ -55,7 +55,8 @@ export class ErrorMessage extends React.Component {
     if (supressAnalytics !== true) {
       const payload = ErrorMessage.getEventPayload(error, fileId, fileState);
       fireAnalytics(payload, props);
-      const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes)
+      const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes),
+        fileStateFlags: props.fileStateFlags
       };
 
       if (Object.keys(rawPayload).includes('status')) {

package/dist/es2019/item-viewer.js

@@ -50,6 +50,11 @@ export class ItemViewerBase extends React.Component {
 
     _defineProperty(this, "state", initialState);
 
+    _defineProperty(this, "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -58,7 +63,10 @@ export class ItemViewerBase extends React.Component {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), this.props);
-          succeedMediaFileUfoExperience(fileAttributes);
+          succeedMediaFileUfoExperience({
+            fileAttributes,
+            fileStateFlags: this.fileStateFlags
+          });
         }
       });
     });
@@ -74,7 +82,10 @@ export class ItemViewerBase extends React.Component {
         fileId: 'external-image'
       }), this.props);
       succeedMediaFileUfoExperience({
-        fileId: 'external-image'
+        fileAttributes: {
+          fileId: 'external-image'
+        },
+        fileStateFlags: this.fileStateFlags
       });
     });
 
@@ -191,12 +202,14 @@ export class ItemViewerBase extends React.Component {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
         error: error,
-        fileState: fileState
+        fileState: fileState,
+        fileStateFlags: this.fileStateFlags
       }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
     } else {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
-        error: error
+        error: error,
+        fileStateFlags: this.fileStateFlags
       });
     }
   }
@@ -257,6 +270,22 @@ export class ItemViewerBase extends React.Component {
     });
   }
 
+  updateFileStateFlag(fileState) {
+    if (!fileState) {
+      return;
+    }
+
+    const {
+      status
+    } = fileState;
+
+    if (status === 'processing') {
+      this.fileStateFlags.wasStatusProcessing = true;
+    } else if (status === 'uploading') {
+      this.fileStateFlags.wasStatusUploading = true;
+    }
+  }
+
   init(props) {
     const {
       mediaClient,
@@ -282,6 +311,7 @@ export class ItemViewerBase extends React.Component {
       collectionName: identifier.collectionName
     }).subscribe({
       next: file => {
+        this.updateFileStateFlag(file);
         this.setState({
           item: Outcome.successful(file)
         });

package/dist/es2019/media-viewer.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { IntlProvider, injectIntl } from 'react-intl-next';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { packageName, packageVersion, component, componentName, fireAnalytics } from './analytics';
+import { packageName, packageVersion, component, componentName, fireAnalytics, LOGGED_FEATURE_FLAGS } from './analytics';
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { List } from './list';
@@ -172,14 +172,7 @@ export const MediaViewer = withMediaAnalyticsContext({
   component,
   componentName
 }, {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: false,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: false
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.2.2",
+	"version": "46.5.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/index.js

@@ -1,7 +1,18 @@
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { name as packageName, version as packageVersion } from '../version.json';
 var componentName = 'mediaViewer';
 export { packageName, packageVersion, componentName, componentName as component };
+export var relevantFlags = {
+  newCardExperience: false,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export var LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,9 @@ 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) { _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 { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { name as packageName, version as packageVersion } from '../version.json';
+import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 var ufoExperience;
 
 var getExperience = function getExperience() {
@@ -15,7 +17,8 @@ var getExperience = function getExperience() {
         component: 'media-viewer'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new UFOExperience('media-file', inlineExperience);
   }
@@ -28,17 +31,20 @@ export var startMediaFileUfoExperience = function startMediaFileUfoExperience()
 };
 export var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
   getExperience().success({
-    metadata: {
-      fileAttributes: properties,
+    metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
-      packageVersion: packageVersion
-    }
+      packageVersion: packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
+    })
   });
 };
 export var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
   var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
     packageName: packageName,
-    packageVersion: packageVersion
+    packageVersion: packageVersion,
+    mediaEnvironment: getMediaEnvironment(),
+    mediaRegion: getMediaRegion()
   });
 
   getExperience().failure({

package/dist/esm/errorMessage.js

@@ -81,7 +81,9 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         fireAnalytics(payload, props);
 
-        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+        var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
+          fileStateFlags: props.fileStateFlags
+        });
 
         if (Object.keys(rawPayload).includes('status')) {
           delete rawPayload['status'];

package/dist/esm/item-viewer.js

@@ -107,13 +107,21 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", initialState);
 
+    _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), _this.props);
-          succeedMediaFileUfoExperience(fileAttributes);
+          succeedMediaFileUfoExperience({
+            fileAttributes: fileAttributes,
+            fileStateFlags: _this.fileStateFlags
+          });
         }
       });
     });
@@ -129,7 +137,10 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         fileId: 'external-image'
       }), _this.props);
       succeedMediaFileUfoExperience({
-        fileId: 'external-image'
+        fileAttributes: {
+          fileId: 'external-image'
+        },
+        fileStateFlags: _this.fileStateFlags
       });
     });
 
@@ -252,12 +263,14 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(ErrorMessage, {
           fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
           error: error,
-          fileState: fileState
+          fileState: fileState,
+          fileStateFlags: this.fileStateFlags
         }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/React.createElement(ErrorMessage, {
           fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
-          error: error
+          error: error,
+          fileStateFlags: this.fileStateFlags
         });
       }
     }
@@ -319,6 +332,21 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: collectionName
       });
     }
+  }, {
+    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: "init",
     value: function init(props) {
@@ -344,6 +372,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: identifier.collectionName
       }).subscribe({
         next: function next(file) {
+          _this3.updateFileStateFlag(file);
+
           _this3.setState({
             item: Outcome.successful(file)
           });

package/dist/esm/media-viewer.js

@@ -11,11 +11,11 @@ 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; } }
 
 import React from 'react';
-import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { IntlProvider, injectIntl } from 'react-intl-next';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { packageName, packageVersion, component, componentName, fireAnalytics } from './analytics';
+import { packageName, packageVersion, component, componentName, fireAnalytics, LOGGED_FEATURE_FLAGS } from './analytics';
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { List } from './list';
@@ -187,14 +187,7 @@ export var MediaViewer = withMediaAnalyticsContext({
   component: component,
   componentName: componentName
 }, {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: false,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: false
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.2.2",
+	"version": "46.5.0",
 	"sideEffects": false
 }

package/dist/types/analytics/index.d.ts

@@ -6,6 +6,17 @@ import { name as packageName, version as packageVersion } from '../version.json'
 import { MediaViewerEventPayload } from './events';
 declare const componentName = "mediaViewer";
 export { packageName, packageVersion, componentName, componentName as component, };
+export declare const relevantFlags: {
+    newCardExperience: boolean;
+    captions: boolean;
+    timestampOnVideo: boolean;
+    observedWidth: boolean;
+    mediaInline: boolean;
+    folderUploads: boolean;
+    mediaUploadApiV2: boolean;
+};
+export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
+export declare const LOGGED_FEATURE_FLAG_KEYS: string[];
 export declare function getFileAttributes(fileState?: FileState): FileAttributes;
 /** This type takes FailureAttributes and redefines `failReason` to be the strong media-viewer type */
 export declare type MediaViewerFailureAttributes = Omit<FailureAttributes, 'failReason'> & {

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

@@ -1,13 +1,19 @@
 import { FileAttributes } from '@atlaskit/media-common';
 import { RequestMetadata } from '@atlaskit/media-client';
 import { PrimaryErrorReason } from '../errors';
+import { FileStateFlags } from '../components/types';
 export declare type UFOFailedEventPayload = {
     failReason?: PrimaryErrorReason;
     error?: string;
     errorDetail?: string;
     request?: RequestMetadata;
     fileAttributes: FileAttributes;
+    fileStateFlags?: FileStateFlags;
+};
+export declare type UFOSucceedEventPayload = {
+    fileAttributes: FileAttributes;
+    fileStateFlags?: FileStateFlags;
 };
 export declare const startMediaFileUfoExperience: () => void;
-export declare const succeedMediaFileUfoExperience: (properties?: FileAttributes | undefined) => void;
+export declare const succeedMediaFileUfoExperience: (properties?: UFOSucceedEventPayload | undefined) => void;
 export declare const failMediaFileUfoExperience: (properties?: UFOFailedEventPayload | undefined) => void;

package/dist/types/components/types.d.ts

@@ -5,6 +5,10 @@ export interface MediaViewerDataSource {
     list?: Array<Identifier>;
     collectionName?: string;
 }
+export declare type FileStateFlags = {
+    wasStatusProcessing: boolean;
+    wasStatusUploading: boolean;
+};
 export interface MediaViewerExtensionsActions {
     close: () => void;
 }

package/dist/types/errorMessage.d.ts

@@ -4,12 +4,14 @@ import { MessageDescriptor, WrappedComponentProps } from 'react-intl-next';
 import { FileState } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason, SecondaryErrorReason, MediaViewerError } from './errors';
+import { FileStateFlags } from './components/types';
 export declare type Props = Readonly<{
     error: MediaViewerError;
     supressAnalytics?: boolean;
     fileId: string;
     fileState?: FileState;
     children?: ReactNode;
+    fileStateFlags?: FileStateFlags;
 }>;
 export declare type FormatMessageFn = (messageDescriptor: MessageDescriptor) => string;
 export declare const errorReasonToMessages: Array<[

package/dist/types/item-viewer.d.ts

@@ -22,6 +22,7 @@ export declare type State = {
 export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
+    private fileStateFlags;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;
@@ -34,6 +35,7 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     private renderError;
     render(): JSX.Element;
     private renderDownloadButton;
+    updateFileStateFlag(fileState?: FileState): void;
     private init;
     private needsReset;
     private release;

package/example-helpers/MainWrapper.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { enableMediaUfoLogger } from '@atlaskit/media-test-helpers';
+import { payloadPublisher } from '@atlassian/ufo';
+import { Container } from './styled';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const MainWrapper: React.FC<Props> = ({ children }) => {
+  enableMediaUfoLogger(payloadPublisher);
+  return <Container>{children}</Container>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "46.2.2",
+  "version": "46.5.0",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,9 +32,9 @@
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^15.1.0",
-    "@atlaskit/media-common": "^2.12.0",
-    "@atlaskit/media-ui": "^21.1.0",
+    "@atlaskit/media-client": "^17.0.0",
+    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/side-navigation": "^1.2.3",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
@@ -56,10 +56,10 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^73.5.0",
-    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/media-card": "^73.8.0",
+    "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
-    "@atlaskit/media-test-helpers": "^29.4.0",
+    "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",