@atlaskit/media-viewer 47.2.2 → 47.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/media-viewer
 
+## 47.3.0
+
+### Minor Changes
+
+- [`2168c4e0d81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2168c4e0d81) - Implement traceContext in media-viewer
+- [`0bccac57db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bccac57db6) - remove mediaUploadApiV2 Feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 47.2.2
 
 ### Patch Changes

package/dist/cjs/analytics/events/operational/commenced.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createCommencedEvent = void 0;
 
-var createCommencedEvent = function createCommencedEvent(fileId) {
+var createCommencedEvent = function createCommencedEvent(fileId, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
@@ -13,7 +13,8 @@ var createCommencedEvent = function createCommencedEvent(fileId) {
     attributes: {
       fileAttributes: {
         fileId: fileId
-      }
+      },
+      traceContext: traceContext
     }
   };
 };

package/dist/cjs/analytics/events/operational/loadFailed.js

@@ -9,7 +9,7 @@ var _ = require("../..");
 
 var _errors = require("../../../errors");
 
-var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState) {
+var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState, traceContext) {
   var _getFileAttributes = (0, _.getFileAttributes)(fileState),
       fileMediatype = _getFileAttributes.fileMediatype,
       fileMimetype = _getFileAttributes.fileMimetype,
@@ -30,7 +30,8 @@ var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileSt
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/cjs/analytics/events/operational/loadSucceeded.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createLoadSucceededEvent = void 0;
 
-var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
+var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
       fileMediatype = _ref.fileMediatype,
       fileMimetype = _ref.fileMimetype,
@@ -22,7 +22,8 @@ var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/cjs/analytics/index.js

@@ -14,7 +14,7 @@ var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
 var packageName = "@atlaskit/media-viewer";
 exports.packageName = packageName;
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.0";
 exports.packageVersion = packageVersion;
 var relevantFlags = {
   newCardExperience: false,
@@ -23,7 +23,6 @@ var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 exports.relevantFlags = relevantFlags;

package/dist/cjs/analytics/ufoExperiences.js

@@ -20,7 +20,7 @@ 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 packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {

package/dist/cjs/errorMessage.js

@@ -103,10 +103,11 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       var supressAnalytics = props.supressAnalytics,
           error = props.error,
           fileState = props.fileState,
-          fileId = props.fileId;
+          fileId = props.fileId,
+          traceContext = props.traceContext;
 
       if (supressAnalytics !== true) {
-        var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+        var payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
         (0, _analytics.fireAnalytics)(payload, props);
 
         var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
@@ -135,12 +136,12 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     }
   }], [{
     key: "getEventPayload",
-    value: function getEventPayload(error, fileId, fileState) {
+    value: function getEventPayload(error, fileId, fileState, traceContext) {
       if (fileState && (0, _errors.getPrimaryErrorReason)(error) === 'unsupported') {
         // this is not an SLI, its just a useful metric for unsupported
         return (0, _previewUnsupported.createPreviewUnsupportedEvent)(fileState);
       } else {
-        return (0, _loadFailed.createLoadFailedEvent)(fileId, error, fileState);
+        return (0, _loadFailed.createLoadFailedEvent)(fileId, error, fileState, traceContext);
       }
     }
   }]);

package/dist/cjs/item-viewer.js

@@ -61,6 +61,8 @@ var _interactiveImg = require("./viewers/image/interactive-img");
 
 var _archiveViewerLoader = _interopRequireDefault(require("./viewers/archiveSidebar/archiveViewerLoader"));
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 var _ufoExperiences = require("./analytics/ufoExperiences");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -169,12 +171,15 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
+      traceId: (0, _mediaCommon.getRandomHex)(8)
+    });
     (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, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, _this.traceContext), _this.props);
           (0, _ufoExperiences.succeedMediaFileUfoExperience)({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -268,7 +273,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
-            contextId: contextId
+            contextId: contextId,
+            traceContext: this.traceContext
           }, viewerProps));
 
         case 'audio':
@@ -323,7 +329,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
           error: error,
           fileState: fileState,
-          fileStateFlags: this.fileStateFlags
+          fileStateFlags: this.fileStateFlags,
+          traceContext: this.traceContext
         }, /*#__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, {
@@ -425,7 +432,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }
 
       var id = identifier.id;
-      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id), this.props);
+      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id, this.traceContext), this.props);
       (0, _ufoExperiences.startMediaFileUfoExperience)();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/cjs/version.json

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

package/dist/cjs/viewers/image/index.js

@@ -89,13 +89,13 @@ var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName;
+                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
 
                 if (!(fileState.status === 'error')) {
                   _context.next = 3;
@@ -156,7 +156,7 @@ var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 response = mediaClient.getImage(item.details.id, {
                   collection: collectionName,
                   mode: 'fit'
-                }, controller, true);
+                }, controller, true, traceContext);
 
                 this.cancelImageFetch = function () {
                   return controller && controller.abort();

package/dist/es2019/analytics/events/operational/commenced.js

@@ -1,10 +1,11 @@
-export const createCommencedEvent = fileId => ({
+export const createCommencedEvent = (fileId, traceContext) => ({
   eventType: 'operational',
   action: 'commenced',
   actionSubject: 'mediaFile',
   attributes: {
     fileAttributes: {
       fileId: fileId
-    }
+    },
+    traceContext
   }
 });

package/dist/es2019/analytics/events/operational/loadFailed.js

@@ -1,6 +1,6 @@
 import { getFileAttributes } from '../..';
 import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
-export const createLoadFailedEvent = (fileId, error, fileState) => {
+export const createLoadFailedEvent = (fileId, error, fileState, traceContext) => {
   const {
     fileMediatype,
     fileMimetype,
@@ -21,7 +21,8 @@ export const createLoadFailedEvent = (fileId, error, fileState) => {
         fileMediatype,
         fileMimetype,
         fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/es2019/analytics/events/operational/loadSucceeded.js

@@ -3,7 +3,7 @@ export const createLoadSucceededEvent = ({
   fileMediatype,
   fileMimetype,
   fileSize
-}) => {
+}, traceContext) => {
   return {
     eventType: 'operational',
     actionSubject: 'mediaFile',
@@ -16,7 +16,8 @@ export const createLoadSucceededEvent = ({
         fileMediatype,
         fileMimetype,
         fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "47.2.2";
+const packageVersion = "47.3.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export const relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,6 @@ export const relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "47.2.2";
+const packageVersion = "47.3.0";
 let ufoExperience;
 
 const getExperience = () => {

package/dist/es2019/errorMessage.js

@@ -49,11 +49,12 @@ export class ErrorMessage extends React.Component {
       supressAnalytics,
       error,
       fileState,
-      fileId
+      fileId,
+      traceContext
     } = props;
 
     if (supressAnalytics !== true) {
-      const payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+      const payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
       fireAnalytics(payload, props);
       const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes),
         fileStateFlags: props.fileStateFlags
@@ -68,12 +69,12 @@ export class ErrorMessage extends React.Component {
     }
   }
 
-  static getEventPayload(error, fileId, fileState) {
+  static getEventPayload(error, fileId, fileState, traceContext) {
     if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
       // this is not an SLI, its just a useful metric for unsupported
       return createPreviewUnsupportedEvent(fileState);
     } else {
-      return createLoadFailedEvent(fileId, error, fileState);
+      return createLoadFailedEvent(fileId, error, fileState, traceContext);
     }
   }
 

package/dist/es2019/item-viewer.js

@@ -18,6 +18,7 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 const ImageViewer = Loadable({
   loader: () => import('./viewers/image').then(mod => mod.ImageViewer),
@@ -56,6 +57,10 @@ export class ItemViewerBase extends React.Component {
       wasStatusProcessing: false
     });
 
+    _defineProperty(this, "traceContext", {
+      traceId: getRandomHex(8)
+    });
+
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -63,7 +68,7 @@ export class ItemViewerBase extends React.Component {
       item.whenSuccessful(fileItem => {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
-          fireAnalytics(createLoadSucceededEvent(fileAttributes), this.props);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, this.traceContext), this.props);
           succeedMediaFileUfoExperience({
             fileAttributes,
             fileStateFlags: this.fileStateFlags
@@ -154,7 +159,8 @@ export class ItemViewerBase extends React.Component {
         return /*#__PURE__*/React.createElement(ImageViewer, _extends({
           onLoad: this.onSuccess,
           onError: this.onLoadFail,
-          contextId: contextId
+          contextId: contextId,
+          traceContext: this.traceContext
         }, viewerProps));
 
       case 'audio':
@@ -210,7 +216,8 @@ export class ItemViewerBase extends React.Component {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
         error: error,
         fileState: fileState,
-        fileStateFlags: this.fileStateFlags
+        fileStateFlags: this.fileStateFlags,
+        traceContext: this.traceContext
       }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
     } else {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -312,7 +319,7 @@ export class ItemViewerBase extends React.Component {
     const {
       id
     } = identifier;
-    fireAnalytics(createCommencedEvent(id), this.props);
+    fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
     startMediaFileUfoExperience();
     this.subscription = mediaClient.file.getFileState(id, {
       collectionName: identifier.collectionName

package/dist/es2019/version.json

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

package/dist/es2019/viewers/image/index.js

@@ -40,7 +40,8 @@ export class ImageViewer extends BaseViewer {
     const {
       item: fileState,
       mediaClient,
-      collectionName
+      collectionName,
+      traceContext
     } = this.props;
 
     if (fileState.status === 'error') {
@@ -75,7 +76,7 @@ export class ImageViewer extends BaseViewer {
         const response = mediaClient.getImage(item.details.id, {
           collection: collectionName,
           mode: 'fit'
-        }, controller, true);
+        }, controller, true, traceContext);
 
         this.cancelImageFetch = () => controller && controller.abort();
 

package/dist/esm/analytics/events/operational/commenced.js

@@ -1,4 +1,4 @@
-export var createCommencedEvent = function createCommencedEvent(fileId) {
+export var createCommencedEvent = function createCommencedEvent(fileId, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
@@ -6,7 +6,8 @@ export var createCommencedEvent = function createCommencedEvent(fileId) {
     attributes: {
       fileAttributes: {
         fileId: fileId
-      }
+      },
+      traceContext: traceContext
     }
   };
 };

package/dist/esm/analytics/events/operational/loadFailed.js

@@ -1,6 +1,6 @@
 import { getFileAttributes } from '../..';
 import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
-export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState) {
+export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState, traceContext) {
   var _getFileAttributes = getFileAttributes(fileState),
       fileMediatype = _getFileAttributes.fileMediatype,
       fileMimetype = _getFileAttributes.fileMimetype,
@@ -21,7 +21,8 @@ export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error,
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/esm/analytics/events/operational/loadSucceeded.js

@@ -1,4 +1,4 @@
-export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
+export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
       fileMediatype = _ref.fileMediatype,
       fileMimetype = _ref.fileMimetype,
@@ -15,7 +15,8 @@ export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export var relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,6 @@ export var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);

package/dist/esm/analytics/ufoExperiences.js

@@ -8,7 +8,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {

package/dist/esm/errorMessage.js

@@ -75,10 +75,11 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       var supressAnalytics = props.supressAnalytics,
           error = props.error,
           fileState = props.fileState,
-          fileId = props.fileId;
+          fileId = props.fileId,
+          traceContext = props.traceContext;
 
       if (supressAnalytics !== true) {
-        var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+        var payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
         fireAnalytics(payload, props);
 
         var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
@@ -107,12 +108,12 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     }
   }], [{
     key: "getEventPayload",
-    value: function getEventPayload(error, fileId, fileState) {
+    value: function getEventPayload(error, fileId, fileState, traceContext) {
       if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
         // this is not an SLI, its just a useful metric for unsupported
         return createPreviewUnsupportedEvent(fileState);
       } else {
-        return createLoadFailedEvent(fileId, error, fileState);
+        return createLoadFailedEvent(fileId, error, fileState, traceContext);
       }
     }
   }]);

package/dist/esm/item-viewer.js

@@ -29,6 +29,7 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 var ImageViewer = Loadable({
   loader: function loader() {
@@ -113,12 +114,16 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusProcessing: false
     });
 
+    _defineProperty(_assertThisInitialized(_this), "traceContext", {
+      traceId: getRandomHex(8)
+    });
+
     _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);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, _this.traceContext), _this.props);
           succeedMediaFileUfoExperience({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -216,7 +221,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/React.createElement(ImageViewer, _extends({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
-            contextId: contextId
+            contextId: contextId,
+            traceContext: this.traceContext
           }, viewerProps));
 
         case 'audio':
@@ -271,7 +277,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
           error: error,
           fileState: fileState,
-          fileStateFlags: this.fileStateFlags
+          fileStateFlags: this.fileStateFlags,
+          traceContext: this.traceContext
         }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -373,7 +380,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }
 
       var id = identifier.id;
-      fireAnalytics(createCommencedEvent(id), this.props);
+      fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
       startMediaFileUfoExperience();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/esm/version.json

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

package/dist/esm/viewers/image/index.js

@@ -69,13 +69,13 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName;
+                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
 
                 if (!(fileState.status === 'error')) {
                   _context.next = 3;
@@ -136,7 +136,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 response = mediaClient.getImage(item.details.id, {
                   collection: collectionName,
                   mode: 'fit'
-                }, controller, true);
+                }, controller, true, traceContext);
 
                 this.cancelImageFetch = function () {
                   return controller && controller.abort();

package/dist/types/analytics/events/operational/commenced.d.ts

@@ -1,5 +1,5 @@
-import { WithFileAttributes } from '@atlaskit/media-common';
+import { MediaTraceContext, WithFileAttributes, WithTraceContext } from '@atlaskit/media-common';
 import { MediaFileEventPayload } from './_mediaFile';
-export declare type CommencedAttributes = WithFileAttributes;
+export declare type CommencedAttributes = WithFileAttributes & WithTraceContext;
 export declare type CommencedEventPayload = MediaFileEventPayload<CommencedAttributes, 'commenced'>;
-export declare const createCommencedEvent: (fileId: string) => CommencedEventPayload;
+export declare const createCommencedEvent: (fileId: string, traceContext: MediaTraceContext) => CommencedEventPayload;

package/dist/types/analytics/events/operational/loadFailed.d.ts

@@ -2,5 +2,6 @@ import { FileState } from '@atlaskit/media-client';
 import { MediaFileEventPayload } from './_mediaFile';
 import { MediaViewerFailureAttributes } from '../..';
 import { MediaViewerError } from '../../../errors';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type LoadFailedEventPayload = MediaFileEventPayload<MediaViewerFailureAttributes, 'loadFailed'>;
-export declare const createLoadFailedEvent: (fileId: string, error: MediaViewerError, fileState?: FileState | undefined) => LoadFailedEventPayload;
+export declare const createLoadFailedEvent: (fileId: string, error: MediaViewerError, fileState?: FileState | undefined, traceContext?: MediaTraceContext | undefined) => LoadFailedEventPayload;

package/dist/types/analytics/events/operational/loadSucceeded.d.ts

@@ -1,5 +1,5 @@
-import { SuccessAttributes, WithFileAttributes, FileAttributes } from '@atlaskit/media-common';
+import { SuccessAttributes, WithFileAttributes, FileAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { MediaFileEventPayload } from './_mediaFile';
-export declare type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes;
+export declare type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext;
 export declare type LoadSucceededEventPayload = MediaFileEventPayload<LoadSucceededAttributes, 'loadSucceeded'>;
-export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize, }: FileAttributes) => LoadSucceededEventPayload;
+export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize }: FileAttributes, traceContext?: MediaTraceContext | undefined) => LoadSucceededEventPayload;

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

@@ -1,5 +1,5 @@
 import { FileState, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, WithFileAttributes, FailureAttributes } from '@atlaskit/media-common';
+import { FileAttributes, WithFileAttributes, FailureAttributes, WithTraceContext } from '@atlaskit/media-common';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason } from '../errors';
 import { MediaViewerEventPayload } from './events';
@@ -14,7 +14,6 @@ export declare const relevantFlags: {
     observedWidth: boolean;
     mediaInline: boolean;
     folderUploads: boolean;
-    mediaUploadApiV2: boolean;
     memoryCacheLogging: boolean;
 };
 export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
@@ -24,5 +23,5 @@ export declare function getFileAttributes(fileState?: FileState): FileAttributes
 export declare type MediaViewerFailureAttributes = Omit<FailureAttributes, 'failReason'> & {
     failReason: PrimaryErrorReason;
     request?: RequestMetadata;
-} & WithFileAttributes;
+} & WithFileAttributes & WithTraceContext;
 export declare function fireAnalytics(payload: MediaViewerEventPayload, props: WithAnalyticsEventsProps): void;

package/dist/types/errorMessage.d.ts

@@ -5,6 +5,7 @@ import { FileState } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason, SecondaryErrorReason, MediaViewerError } from './errors';
 import { FileStateFlags } from './components/types';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type Props = Readonly<{
     error: MediaViewerError;
     supressAnalytics?: boolean;
@@ -12,6 +13,7 @@ export declare type Props = Readonly<{
     fileState?: FileState;
     children?: ReactNode;
     fileStateFlags?: FileStateFlags;
+    traceContext?: MediaTraceContext;
 }>;
 export declare type FormatMessageFn = (messageDescriptor: MessageDescriptor) => string;
 export declare const errorReasonToMessages: Array<[
@@ -22,7 +24,7 @@ export declare const getErrorMessageFromError: (error: MediaViewerError) => Mess
 export declare class ErrorMessage extends React.Component<Props & WrappedComponentProps & WithAnalyticsEventsProps, {}> {
     private getErrorInfo;
     componentDidMount(): void;
-    static getEventPayload(error: MediaViewerError, fileId: string, fileState?: FileState): import("./analytics/events/operational/loadFailed").LoadFailedEventPayload | import("./analytics/events/operational/previewUnsupported").PreviewUnsupportedEventPayload;
+    static getEventPayload(error: MediaViewerError, fileId: string, fileState?: FileState, traceContext?: MediaTraceContext): import("./analytics/events/operational/loadFailed").LoadFailedEventPayload | import("./analytics/events/operational/previewUnsupported").PreviewUnsupportedEventPayload;
     render(): JSX.Element;
 }
 declare const ErroMsg: React.ComponentType<Props & WithAnalyticsEventsProps>;

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

@@ -24,6 +24,7 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    private traceContext;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/dist/types/viewers/image/index.d.ts

@@ -3,6 +3,7 @@ import { MediaClient, FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
 import { MediaViewerError } from '../../errors';
 import { BaseViewer } from '../base-viewer';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type ObjectUrl = string;
 export declare type ImageViewerProps = {
     mediaClient: MediaClient;
@@ -12,6 +13,7 @@ export declare type ImageViewerProps = {
     onError: (error: MediaViewerError) => void;
     onClose?: () => void;
     contextId?: string;
+    traceContext?: MediaTraceContext;
 };
 export interface ImageViewerContent {
     objectUrl: ObjectUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "47.2.2",
+  "version": "47.3.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,10 +32,10 @@
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^19.0.0",
-    "@atlaskit/media-common": "^2.17.0",
+    "@atlaskit/media-client": "^19.1.0",
+    "@atlaskit/media-common": "^2.18.0",
     "@atlaskit/media-ui": "^22.2.0",
-    "@atlaskit/side-navigation": "^1.4.0",
+    "@atlaskit/side-navigation": "^1.5.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
@@ -57,10 +57,10 @@
   "devDependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^74.3.0",
+    "@atlaskit/media-card": "^74.4.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
-    "@atlaskit/media-test-helpers": "^30.0.0",
+    "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/media-viewer"