@atlaskit/media-viewer 49.2.7 → 49.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/media-viewer
 
+## 49.4.0
+
+### Minor Changes
+
+- [#163838](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163838)
+  [`c3fcf9a7c2028`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3fcf9a7c2028) -
+  Logging good/bad events from file downloads
+
+### Patch Changes
+
+- Updated dependencies
+
+## 49.3.0
+
+### Minor Changes
+
+- [`6099ac032dd30`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6099ac032dd30) -
+  Added viewerOptions to override file preview renderer in media components
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 49.2.7
 
 ### Patch Changes

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDownloadSucceededEventPayload = exports.createDownloadFailedEventPayload = void 0;
+var _ = require("../..");
+var _errors = require("../../../errors");
+var createDownloadSucceededEventPayload = exports.createDownloadSucceededEventPayload = function createDownloadSucceededEventPayload(fileState, traceContext) {
+  var _getFileAttributes = (0, _.getFileAttributes)(fileState),
+    fileId = _getFileAttributes.fileId,
+    fileMediatype = _getFileAttributes.fileMediatype,
+    fileMimetype = _getFileAttributes.fileMimetype,
+    fileSize = _getFileAttributes.fileSize;
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadSucceeded',
+    attributes: {
+      status: 'success',
+      fileMediatype: fileMediatype,
+      fileMimetype: fileMimetype,
+      fileAttributes: {
+        fileId: fileId,
+        fileMediatype: fileMediatype,
+        fileMimetype: fileMimetype,
+        fileSize: fileSize
+      },
+      traceContext: traceContext
+    }
+  };
+};
+var createDownloadFailedEventPayload = exports.createDownloadFailedEventPayload = function createDownloadFailedEventPayload(fileId, error, fileState, traceContext) {
+  var _getFileAttributes2 = (0, _.getFileAttributes)(fileState),
+    fileMediatype = _getFileAttributes2.fileMediatype,
+    fileMimetype = _getFileAttributes2.fileMimetype,
+    fileSize = _getFileAttributes2.fileSize;
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadFailed',
+    attributes: {
+      status: 'fail',
+      failReason: (0, _errors.getPrimaryErrorReason)(error),
+      error: (0, _errors.getSecondaryErrorReason)(error),
+      errorDetail: (0, _errors.getErrorDetail)(error),
+      request: (0, _errors.getRequestMetadata)(error),
+      fileMimetype: fileMimetype,
+      fileMediatype: fileMediatype,
+      fileAttributes: {
+        fileId: fileId,
+        fileMediatype: fileMediatype,
+        fileMimetype: fileMimetype,
+        fileSize: fileSize
+      },
+      traceContext: traceContext
+    }
+  };
+};

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "49.2.7";
+var packageVersion = exports.packageVersion = "49.4.0";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "49.2.7";
+var packageVersion = "49.4.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/components/media-viewer.js

@@ -47,7 +47,8 @@ var MediaViewerBase = exports.MediaViewerBase = function MediaViewerBase(_ref) {
     collectionName = _ref.collectionName,
     items = _ref.items,
     extensions = _ref.extensions,
-    contextId = _ref.contextId;
+    contextId = _ref.contextId,
+    viewerOptions = _ref.viewerOptions;
   var _useMemo = (0, _react.useMemo)(function () {
       return normaliseItems(items, selectedItem, collectionName);
     }, [items, selectedItem, collectionName]),
@@ -80,7 +81,8 @@ var MediaViewerBase = exports.MediaViewerBase = function MediaViewerBase(_ref) {
     items: normalisedItems,
     featureFlags: featureFlags,
     extensions: extensions,
-    contextId: contextId
+    contextId: contextId,
+    viewerOptions: viewerOptions
   });
 };
 

package/dist/cjs/download.js

@@ -5,20 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DisabledToolbarDownloadButton = void 0;
-exports.DownloadButton = DownloadButton;
-exports.createItemDownloader = exports.ToolbarDownloadButton = exports.ErrorViewDownloadButton = void 0;
+exports.ToolbarDownloadButton = exports.ErrorViewDownloadButton = exports.DisabledToolbarDownloadButton = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaUi = require("@atlaskit/media-ui");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _mediaCommon = require("@atlaskit/media-common");
 var _downloadButtonClicked = require("./analytics/events/ui/downloadButtonClicked");
+var _download2 = require("./analytics/events/operational/download");
+var _analytics = require("./analytics");
 var _failedPreviewDownloadButtonClicked = require("./analytics/events/ui/failedPreviewDownloadButtonClicked");
 var _styleWrappers = require("./styleWrappers");
+var _errors = require("./errors");
 var _excluded = ["analyticspayload", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,40 +36,66 @@ function DownloadButton(_ref) {
     _ref$onClick = _ref.onClick,
     providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var onClick = (0, _react.useCallback)(function (event, analyticsEvent) {
-    var clone = analyticsEvent.clone();
-    if (clone) {
-      clone.update(analyticspayload);
-      clone.fire(_mediaCommon.ANALYTICS_MEDIA_CHANNEL);
-    }
+    (0, _analytics.fireAnalytics)(analyticspayload, createAnalyticsEvent);
     providedOnClick(event, analyticsEvent);
-  }, [analyticspayload, providedOnClick]);
+  }, [analyticspayload, providedOnClick, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, (0, _extends2.default)({}, rest, {
     onClick: onClick
   }));
 }
-var createItemDownloader = exports.createItemDownloader = function createItemDownloader(file, mediaClient, collectionName) {
-  return function () {
-    var id = file.id;
-    var name = !(0, _mediaClient.isErrorFileState)(file) ? file.name : undefined;
-    return mediaClient.file.downloadBinary(id, name, collectionName);
-  };
+var createItemDownloader = function createItemDownloader(file, mediaClient, options) {
+  return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var collectionName, traceContext, createAnalyticsEvent, id, name;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          collectionName = options.collectionName, traceContext = options.traceContext, createAnalyticsEvent = options.createAnalyticsEvent;
+          id = file.id;
+          name = !(0, _mediaClient.isErrorFileState)(file) ? file.name : undefined;
+          mediaClient.file.downloadBinary(id, name, collectionName, traceContext).then(function () {
+            (0, _analytics.fireAnalytics)((0, _download2.createDownloadSucceededEventPayload)(file, traceContext), createAnalyticsEvent);
+          }).catch(function (e) {
+            (0, _analytics.fireAnalytics)((0, _download2.createDownloadFailedEventPayload)(file.id, new _errors.MediaViewerError('download', e), file, traceContext), createAnalyticsEvent);
+          });
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
 };
-var ErrorViewDownloadButton = exports.ErrorViewDownloadButton = function ErrorViewDownloadButton(props) {
-  var fileState = props.fileState,
-    error = props.error;
+var ErrorViewDownloadButton = exports.ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref3) {
+  var fileState = _ref3.fileState,
+    mediaClient = _ref3.mediaClient,
+    error = _ref3.error,
+    traceContext = _ref3.traceContext,
+    collectionName = _ref3.collectionName;
   var downloadEvent = (0, _failedPreviewDownloadButtonClicked.createFailedPreviewDownloadButtonClickedEvent)(fileState, error);
-  return /*#__PURE__*/_react.default.createElement(_styleWrappers.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadButton, {
-    testId: "media-viewer-download-button",
+  var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadButton
+  // testId="media-viewer-failed-preview-download-button"
+  , {
+    testId: "media-viewer-error-download-button",
     analyticspayload: downloadEvent,
     appearance: "primary",
-    onClick: createItemDownloader(props.fileState, props.mediaClient, props.collectionName)
+    onClick: createItemDownloader(fileState, mediaClient, {
+      collectionName: collectionName,
+      traceContext: traceContext,
+      createAnalyticsEvent: createAnalyticsEvent
+    })
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.download)));
 };
-var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(props) {
-  var state = props.state,
-    mediaClient = props.mediaClient,
-    identifier = props.identifier;
+var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(_ref4) {
+  var state = _ref4.state,
+    mediaClient = _ref4.mediaClient,
+    identifier = _ref4.identifier,
+    traceContext = _ref4.traceContext;
+  var _useAnalyticsEvents3 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents3.createAnalyticsEvent;
   var downloadEvent = (0, _downloadButtonClicked.createDownloadButtonClickedEvent)(state);
 
   // TODO [MS-1731]: make it work for external files as well
@@ -76,7 +105,11 @@ var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDown
   return /*#__PURE__*/_react.default.createElement(DownloadButton, {
     testId: "media-viewer-download-button",
     analyticspayload: downloadEvent,
-    onClick: createItemDownloader(state, mediaClient, identifier.collectionName),
+    onClick: createItemDownloader(state, mediaClient, {
+      collectionName: identifier.collectionName,
+      createAnalyticsEvent: createAnalyticsEvent,
+      traceContext: traceContext
+    }),
     iconBefore: downloadIcon
   });
 };

package/dist/cjs/header.js

@@ -28,7 +28,8 @@ var Header = exports.Header = function Header(_ref) {
     isSidebarVisible = _ref.isSidebarVisible,
     onSidebarButtonClick = _ref.onSidebarButtonClick,
     identifier = _ref.identifier,
-    onSetArchiveSideBarVisible = _ref.onSetArchiveSideBarVisible;
+    onSetArchiveSideBarVisible = _ref.onSetArchiveSideBarVisible,
+    traceContext = _ref.traceContext;
   // States
   var _useState = (0, _react.useState)(_domain.Outcome.pending()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -153,7 +154,8 @@ var Header = exports.Header = function Header(_ref) {
       return /*#__PURE__*/_react.default.createElement(_download.ToolbarDownloadButton, {
         state: item,
         identifier: identifier,
-        mediaClient: mediaClient
+        mediaClient: mediaClient,
+        traceContext: traceContext
       });
     }
   })));

package/dist/cjs/item-viewer.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _mediaClient = require("@atlaskit/media-client");
+var _primitives = require("@atlaskit/primitives");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _codeViewer = require("@atlaskit/media-ui/codeViewer");
@@ -26,8 +27,8 @@ var _loadSucceeded = require("./analytics/events/operational/loadSucceeded");
 var _analytics = require("./analytics");
 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");
+var _customViewer = require("./viewers/customViewer/customViewer");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ImageViewer = (0, _reactLoadable.default)({
@@ -119,15 +120,14 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
     onClose = _ref.onClose,
     previewCount = _ref.previewCount,
     contextId = _ref.contextId,
-    createAnalyticsEvent = _ref.createAnalyticsEvent;
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    viewerOptions = _ref.viewerOptions,
+    traceContext = _ref.traceContext;
   // States and Refs
   var _useState = (0, _react.useState)(_domain.Outcome.pending()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     item = _useState2[0],
     setItem = _useState2[1];
-  var traceContext = (0, _react.useRef)({
-    traceId: (0, _mediaCommon.getRandomHex)(8)
-  });
   var fileStateFlagsRef = (0, _react.useRef)({
     wasStatusUploading: false,
     wasStatusProcessing: false
@@ -148,9 +148,10 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
       fileState: fileState,
       mediaClient: mediaClient,
       error: error,
-      collectionName: collectionName
+      collectionName: collectionName,
+      traceContext: traceContext
     });
-  }, [mediaClient, identifier]);
+  }, [mediaClient, identifier, traceContext]);
 
   // Did mount
 
@@ -158,9 +159,9 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
     if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
       return;
     }
-    (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext.current), createAnalyticsEventRef.current);
+    (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext), createAnalyticsEventRef.current);
     (0, _ufoExperiences.startMediaFileUfoExperience)();
-  }, [identifier]);
+  }, [identifier, traceContext]);
   (0, _react.useEffect)(function () {
     if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
       // external images do not need to talk to our backend,
@@ -192,26 +193,41 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
     item.whenSuccessful(function (fileItem) {
       if (isFileStateItem(fileItem)) {
         var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
-        (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, traceContext.current), createAnalyticsEventRef.current);
+        (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, traceContext), createAnalyticsEventRef.current);
         (0, _ufoExperiences.succeedMediaFileUfoExperience)({
           fileAttributes: fileAttributes,
           fileStateFlags: fileStateFlagsRef.current
         });
       }
     });
-  }, [item]);
+  }, [item, traceContext]);
   var onLoadFail = (0, _react.useCallback)(function (mediaViewerError) {
     setItem(_domain.Outcome.failed(mediaViewerError, fileState));
   }, [fileState]);
   var renderItem = function renderItem(fileItem) {
+    var _viewerOptions$custom;
     var collectionName = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : undefined;
     var viewerProps = {
       mediaClient: mediaClient,
       item: fileItem,
       collectionName: collectionName,
       onClose: onClose,
-      previewCount: previewCount
+      previewCount: previewCount,
+      viewerOptions: viewerOptions,
+      traceContext: traceContext
     };
+    var customRenderer = viewerOptions === null || viewerOptions === void 0 || (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(function (renderer) {
+      return renderer.shouldUseCustomRenderer({
+        fileItem: fileItem
+      });
+    });
+    if (customRenderer) {
+      return /*#__PURE__*/_react.default.createElement(_customViewer.CustomViewer, (0, _extends2.default)({
+        customRendererConfig: customRenderer,
+        onError: onLoadFail,
+        onSuccess: onSuccess
+      }, viewerProps));
+    }
 
     // TODO: fix all of the item errors
 
@@ -232,7 +248,7 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
         onLoad: onSuccess,
         onError: onLoadFail,
         onClose: onClose,
-        traceContext: traceContext.current
+        traceContext: traceContext
       });
     }
     var mediaType = fileItem.mediaType;
@@ -241,8 +257,7 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
         return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
           onLoad: onSuccess,
           onError: onLoadFail,
-          contextId: contextId,
-          traceContext: traceContext.current
+          contextId: contextId
         }, viewerProps));
       case 'audio':
         return /*#__PURE__*/_react.default.createElement(AudioViewer, (0, _extends2.default)({
@@ -287,8 +302,8 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
         error: error,
         fileState: _fileState,
         fileStateFlags: fileStateFlagsRef.current,
-        traceContext: traceContext.current
-      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+        traceContext: traceContext
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
     } else {
       return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
         fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',

package/dist/cjs/list.js

@@ -12,6 +12,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _itemViewer = require("./item-viewer");
 var _styleWrappers = require("./styleWrappers");
 var _navigation = require("./navigation");
+var _mediaCommon = require("@atlaskit/media-common");
 var _header = _interopRequireDefault(require("./header"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -25,7 +26,8 @@ var List = exports.List = function List(_ref) {
     featureFlags = _ref.featureFlags,
     isSidebarVisible = _ref.isSidebarVisible,
     onNavigationChange = _ref.onNavigationChange,
-    items = _ref.items;
+    items = _ref.items,
+    viewerOptions = _ref.viewerOptions;
   var _useState = (0, _react.useState)(defaultSelectedItem),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedItem = _useState2[0],
@@ -38,6 +40,9 @@ var List = exports.List = function List(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isArchiveSideBarVisible = _useState6[0],
     setIsArchiveSideBarVisible = _useState6[1];
+  var traceContext = (0, _react.useRef)({
+    traceId: (0, _mediaCommon.getRandomHex)(8)
+  });
   return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
@@ -51,14 +56,17 @@ var List = exports.List = function List(_ref) {
     isSidebarVisible: isSidebarVisible,
     isArchiveSideBarVisible: isArchiveSideBarVisible,
     featureFlags: featureFlags,
-    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible
+    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
+    traceContext: traceContext.current
   })), /*#__PURE__*/_react.default.createElement(_itemViewer.ItemViewer, {
     identifier: selectedItem,
     showControls: showControls,
     onClose: onClose,
     previewCount: previewCount,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions,
+    traceContext: traceContext.current
   }), /*#__PURE__*/_react.default.createElement(_navigation.Navigation, {
     items: items,
     selectedItem: selectedItem,

package/dist/cjs/media-viewer.js

@@ -32,7 +32,8 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     innerRef = _ref.innerRef,
     _onClose = _ref.onClose,
     selectedItem = _ref.selectedItem,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    viewerOptions = _ref.viewerOptions;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSidebarVisible = _useState2[0],
@@ -95,7 +96,8 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     },
     isSidebarVisible: isSidebarVisible,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions
   })), renderSidebar()));
   return intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
     locale: "en"

package/dist/cjs/viewerOptions.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/viewers/archiveSidebar/archive.js

@@ -19,6 +19,7 @@ var _unzipit = require("unzipit");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _codeViewer = require("@atlaskit/media-ui/codeViewer");
+var _primitives = require("@atlaskit/primitives");
 var _domain = require("../../domain");
 var _styleWrappers = require("../../styleWrappers");
 var _audioMediaServicesAudio = _interopRequireDefault(require("@atlaskit/icon/core/migration/audio--media-services-audio"));
@@ -98,7 +99,8 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
             case 0:
               _this.setState({
                 content: _domain.Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
-                  selectedArchiveEntry: undefined
+                  selectedArchiveEntry: undefined,
+                  hasLoadedEntries: false // displays a nice loading spinner for the content viewer
                 }))
               });
               src = '';
@@ -112,7 +114,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
               _context2.next = 8;
               return (0, _utils.rejectAfter)(function () {
                 return selectedArchiveEntry.blob();
-              });
+              }, 10000);
             case 8:
               blob = _context2.sent;
               src = URL.createObjectURL(blob);
@@ -142,7 +144,8 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
                   isDirectory: selectedArchiveEntry.isDirectory,
                   error: undefined,
                   codeViewerSrc: codeViewerSrc,
-                  isCodeMimeType: isCodeMimeType
+                  isCodeMimeType: isCodeMimeType,
+                  hasLoadedEntries: true
                 }))
               });
             case 20:
@@ -244,7 +247,9 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
   }, {
     key: "renderArchiveItemViewer",
     value: function renderArchiveItemViewer(content) {
-      var item = this.props.item;
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        viewerOptions = _this$props2.viewerOptions;
       var src = content.src,
         name = content.name,
         isDirectory = content.isDirectory,
@@ -256,9 +261,48 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
         return this.renderPreviewError(error, selectedArchiveEntry);
       }
       if (!isDirectory && selectedArchiveEntry) {
+        var _viewerOptions$custom;
         if (!name || !src) {
           return this.renderPreviewError(new _errors.ArchiveViewerError('archiveviewer-missing-name-src'), selectedArchiveEntry);
         }
+        var customRenderer = viewerOptions === null || viewerOptions === void 0 || (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(function (renderer) {
+          return renderer.shouldUseCustomRenderer({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            }
+          });
+        });
+        if (customRenderer) {
+          return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, customRenderer.renderContent({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            },
+            getBinaryContent: function () {
+              var _getBinaryContent = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+                return _regenerator.default.wrap(function _callee4$(_context4) {
+                  while (1) switch (_context4.prev = _context4.next) {
+                    case 0:
+                      _context4.next = 2;
+                      return fetch(src);
+                    case 2:
+                      return _context4.abrupt("return", _context4.sent.blob());
+                    case 3:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }, _callee4);
+              }));
+              function getBinaryContent() {
+                return _getBinaryContent.apply(this, arguments);
+              }
+              return getBinaryContent;
+            }(),
+            onLoad: this.onViewerLoad(selectedArchiveEntry),
+            onError: this.onViewerError('archiveviewer-customrenderer-onerror', selectedArchiveEntry)
+          }));
+        }
         var mediaType = (0, _utils.getMediaTypeFromFilename)(name);
         if (isCodeMimeType) {
           // Same code viewer logic as in Item-Viewer.tsx
@@ -330,16 +374,16 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
   }, {
     key: "renderPreviewError",
     value: function renderPreviewError(error, entry) {
-      var _this$props2 = this.props,
-        item = _this$props2.item,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent;
       (0, _analytics.fireAnalytics)((0, _zipEntryLoadFailed.createZipEntryLoadFailedEvent)(item, error, entry), createAnalyticsEvent);
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
         fileId: item.id,
         fileState: item,
         error: error,
         supressAnalytics: true
-      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file))));
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file))));
     }
   }]);
   return ArchiveViewerBase;

package/dist/cjs/viewers/base-viewer.js

@@ -123,12 +123,14 @@ var BaseViewer = exports.BaseViewer = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         item = _this$props.item,
         mediaClient = _this$props.mediaClient,
-        collectionName = _this$props.collectionName;
+        collectionName = _this$props.collectionName,
+        traceContext = _this$props.traceContext;
       return /*#__PURE__*/_react.default.createElement(_download.ErrorViewDownloadButton, {
         fileState: item,
         mediaClient: mediaClient,
         error: error,
-        collectionName: collectionName
+        collectionName: collectionName,
+        traceContext: traceContext
       });
     }
   }, {