@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/cjs/ItemViewerBase.js

@@ -0,0 +1,523 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemViewerBase = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _mediaClient = require("@atlaskit/media-client");
+var _useFileState2 = require("@atlaskit/media-client-react/use-file-state");
+var _useMediaClient = require("@atlaskit/media-client-react/use-media-client");
+var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
+var _messages = require("@atlaskit/media-ui/messages");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _ErrorViewDownloadButton = require("./ErrorViewDownloadButton");
+var _MediaViewerError = require("./MediaViewerError");
+var _commenced = require("./analytics/events/operational/commenced");
+var _loadSucceeded = require("./analytics/events/operational/loadSucceeded");
+var _fireAnalytics = require("./analytics/fireAnalytics");
+var _getFileAttributes = require("./analytics/getFileAttributes");
+var _ufoExperiences = require("./analytics/ufoExperiences");
+var _outcome = require("./domain/outcome");
+var _errorMessageWithAnalytics = _interopRequireDefault(require("./errorMessageWithAnalytics"));
+var _isFileStateItem = require("./isFileStateItem");
+var _itemViewer = require("./item-viewer");
+var _loading = require("./loading");
+var _archiveViewerLoader = _interopRequireDefault(require("./viewers/archiveSidebar/archiveViewerLoader"));
+var _customViewer = require("./viewers/customViewer/customViewer");
+var _interactiveImg = require("./viewers/image/interactive-img");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function loadImageViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image'));
+  });
+}
+var LoadableImageViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return loadImageViewer().then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazyImageViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadImageViewer().then(function (mod) {
+    return {
+      default: mod.ImageViewer
+    };
+  });
+});
+function loadVideoViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video'));
+  });
+}
+var LoadableVideoViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return loadVideoViewer().then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazyVideoViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadVideoViewer().then(function (mod) {
+    return {
+      default: mod.VideoViewer
+    };
+  });
+});
+function loadAudioViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio'));
+  });
+}
+var LoadableAudioViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return loadAudioViewer().then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazyAudioViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadAudioViewer().then(function (mod) {
+    return {
+      default: mod.AudioViewer
+    };
+  });
+});
+function loadDocViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc'));
+  });
+}
+var LoadableDocViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return loadDocViewer().then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazyDocViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadDocViewer().then(function (mod) {
+    return {
+      default: mod.DocViewer
+    };
+  });
+});
+function loadCodeViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer'));
+  });
+}
+var LoadableCodeViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return loadCodeViewer().then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazyCodeViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadCodeViewer().then(function (mod) {
+    return {
+      default: mod.CodeViewer
+    };
+  });
+});
+function loadSvgViewer() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg'));
+  });
+}
+var LoadableSvgViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return (
+      // @ts-ignore [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+      Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg'));
+      }).then(function (mod) {
+        return mod.SvgViewer;
+      })
+    );
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var LazySvgViewer = /*#__PURE__*/_react.default.lazy(function () {
+  return loadSvgViewer().then(function (mod) {
+    return {
+      default: mod.SvgViewer
+    };
+  });
+});
+var ViewerSuspense = function ViewerSuspense(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(_loading.Spinner, null)
+  }, children);
+};
+
+/**
+ * Determines if a file renders natively without backend processing artifacts.
+ * These files (text/code, PDF, SVG) can be rendered directly from the original binary
+ * without waiting for transcoded artifacts from the backend.
+ *
+ * Evidence:
+ * - CodeViewer: Uses getFileBinaryURL(id) - works with both 'processing' and 'processed' status
+ * - DocViewer: Uses getDocumentContent(id) - only needs file ID, not artifacts
+ * - SvgViewer: Uses MediaSvg with identifier - never touches status or artifacts
+ */
+var canRenderWithoutProcessing = function canRenderWithoutProcessing(fileState) {
+  var mimeType = fileState.mimeType,
+    name = fileState.name,
+    size = fileState.size;
+
+  // Text/code files via CodeViewer (10MB limit)
+  if ((0, _isCodeViewerItem.isCodeViewerItem)(name, mimeType) && size <= _itemViewer.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+    return true;
+  }
+
+  // PDF files via DocViewer
+  if (mimeType === 'application/pdf') {
+    return true;
+  }
+
+  // SVG files via SvgViewer
+  if (mimeType === 'image/svg+xml') {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Creates a synthetic ProcessedFileState for native-rendered files.
+ * These files don't need backend processing, so we normalize to 'processed'
+ * to prevent unnecessary re-renders when the actual status changes.
+ * Note: artifacts are not used by native viewers (CodeViewer, DocViewer, SvgViewer)
+ * as they fetch the original binary directly via file ID.
+ */
+var createProcessedFileState = function createProcessedFileState(fileState) {
+  return {
+    status: 'processed',
+    id: fileState.id,
+    name: fileState.name,
+    size: fileState.size,
+    mediaType: fileState.mediaType,
+    mimeType: fileState.mimeType,
+    artifacts: {},
+    preview: fileState.preview,
+    createdAt: fileState.createdAt
+  };
+};
+var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref2) {
+  var identifier = _ref2.identifier,
+    showControls = _ref2.showControls,
+    onClose = _ref2.onClose,
+    previewCount = _ref2.previewCount,
+    contextId = _ref2.contextId,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    viewerOptions = _ref2.viewerOptions,
+    traceContext = _ref2.traceContext;
+  // States and Refs
+  var _useState = (0, _react.useState)(_outcome.Outcome.pending()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    item = _useState2[0],
+    setItem = _useState2[1];
+  var fileStateFlagsRef = (0, _react.useRef)({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  var createAnalyticsEventRef = (0, _react.useRef)(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+
+  // Hooks
+  var mediaClient = (0, _useMediaClient.useMediaClient)();
+  var _useFileState = (0, _useFileState2.useFileState)((0, _mediaClient.isExternalImageIdentifier)(identifier) ? '' : identifier.id, {
+      collectionName: (0, _mediaClient.isExternalImageIdentifier)(identifier) ? '' : identifier.collectionName,
+      skipRemote: (0, _mediaClient.isExternalImageIdentifier)(identifier)
+    }),
+    fileState = _useFileState.fileState;
+  var renderDownloadButton = (0, _react.useCallback)(function (fileState, error) {
+    var collectionName = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : undefined;
+    return /*#__PURE__*/_react.default.createElement(_ErrorViewDownloadButton.ErrorViewDownloadButton, {
+      fileState: fileState,
+      mediaClient: mediaClient,
+      error: error,
+      collectionName: collectionName,
+      traceContext: traceContext
+    });
+  }, [mediaClient, identifier, traceContext]);
+
+  // Did mount
+
+  (0, _react.useEffect)(function () {
+    if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
+      return;
+    }
+    (0, _fireAnalytics.fireAnalytics)((0, _commenced.createCommencedEvent)(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext), createAnalyticsEventRef.current);
+    (0, _ufoExperiences.startMediaFileUfoExperience)();
+  }, [identifier, traceContext]);
+  var isNativeFileOptimizationEnabled = (0, _fg.fg)('media_viewer_prevent_rerender_on_polling');
+  (0, _react.useEffect)(function () {
+    // External images don't need backend subscriptions
+    if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
+      setItem(_outcome.Outcome.successful('external-image'));
+      return;
+    }
+    if (!fileState) {
+      return;
+    }
+    var status = fileState.status;
+
+    // Track status flags for analytics
+    if (status === 'processing') {
+      fileStateFlagsRef.current.wasStatusProcessing = true;
+    } else if (status === 'uploading') {
+      fileStateFlagsRef.current.wasStatusUploading = true;
+    }
+
+    // Handle error state
+    if (status === 'error') {
+      setItem(_outcome.Outcome.failed(new _MediaViewerError.MediaViewerError('itemviewer-fetch-metadata', (0, _mediaClient.toCommonMediaClientError)(fileState))));
+      return;
+    }
+
+    // Optimization: normalize native files to ProcessedFileState to prevent
+    // unnecessary re-renders when status changes (e.g., processing → processed)
+    if (isNativeFileOptimizationEnabled && canRenderWithoutProcessing(fileState)) {
+      setItem(function (prev) {
+        // Keep stable reference if we already have a processed state for this file
+        if (prev.status === 'SUCCESSFUL' && prev.data && (0, _isFileStateItem.isFileStateItem)(prev.data) && prev.data.id === fileState.id && prev.data.status === 'processed') {
+          return prev;
+        }
+        // First load or different file: create normalized processed state
+        return _outcome.Outcome.successful(createProcessedFileState(fileState));
+      });
+      return;
+    }
+
+    // Non-native files: standard behavior
+    setItem(_outcome.Outcome.successful(fileState));
+    // fileState object reference changes often when polling items (especially during processing); only re-run when fileState.status changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNativeFileOptimizationEnabled ? fileState === null || fileState === void 0 ? void 0 : fileState.status : fileState, identifier]);
+  var onSuccess = (0, _react.useCallback)(function () {
+    item.whenSuccessful(function (fileItem) {
+      if ((0, _isFileStateItem.isFileStateItem)(fileItem)) {
+        var fileAttributes = (0, _getFileAttributes.getFileAttributes)(fileItem);
+        (0, _fireAnalytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, traceContext), createAnalyticsEventRef.current);
+        (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+          fileAttributes: fileAttributes,
+          fileStateFlags: fileStateFlagsRef.current
+        });
+      }
+    });
+  }, [item, traceContext]);
+  var onLoadFail = (0, _react.useCallback)(function (mediaViewerError) {
+    setItem(_outcome.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,
+      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
+
+    if ((0, _isCodeViewerItem.isCodeViewerItem)(fileItem.name, fileItem.mimeType)) {
+      //Render error message if code file has size over 10MB.
+      //Required by https://product-fabric.atlassian.net/browse/MEX-1788
+      if (fileItem.size > _itemViewer.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+        return renderError(new _MediaViewerError.MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+      }
+      return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazyCodeViewer, (0, _extends2.default)({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps))) : /*#__PURE__*/_react.default.createElement(LoadableCodeViewer, (0, _extends2.default)({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps));
+    }
+    if ((0, _mediaClient.isFileIdentifier)(identifier) && fileItem.mimeType === 'image/svg+xml') {
+      return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazySvgViewer, {
+        identifier: identifier,
+        onLoad: onSuccess,
+        onError: onLoadFail,
+        onClose: onClose,
+        traceContext: traceContext
+      })) : /*#__PURE__*/_react.default.createElement(LoadableSvgViewer, {
+        identifier: identifier,
+        onLoad: onSuccess,
+        onError: onLoadFail,
+        onClose: onClose,
+        traceContext: traceContext
+      });
+    }
+    var mediaType = fileItem.mediaType;
+    switch (mediaType) {
+      case 'image':
+        return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazyImageViewer, (0, _extends2.default)({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId
+        }, viewerProps))) : /*#__PURE__*/_react.default.createElement(LoadableImageViewer, (0, _extends2.default)({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId
+        }, viewerProps));
+      case 'audio':
+        return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazyAudioViewer, (0, _extends2.default)({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/_react.default.createElement(LoadableAudioViewer, (0, _extends2.default)({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'video':
+        return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazyVideoViewer, (0, _extends2.default)({
+          identifier: identifier,
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/_react.default.createElement(LoadableVideoViewer, (0, _extends2.default)({
+          identifier: identifier,
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'doc':
+        return (0, _fg.fg)('platform_media_react19_support') ? /*#__PURE__*/_react.default.createElement(ViewerSuspense, null, /*#__PURE__*/_react.default.createElement(LazyDocViewer, (0, _extends2.default)({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/_react.default.createElement(LoadableDocViewer, (0, _extends2.default)({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'archive':
+        return /*#__PURE__*/_react.default.createElement(_archiveViewerLoader.default, (0, _extends2.default)({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+    }
+    return renderError(new _MediaViewerError.MediaViewerError('unsupported'), fileItem);
+  };
+  var renderError = (0, _react.useCallback)(function (error, fileItem) {
+    if (fileItem) {
+      var _fileState;
+      if (fileItem === 'external-image') {
+        // external image error outcome
+        _fileState = {
+          id: 'external-image',
+          status: 'error'
+        };
+      } else {
+        // FileState error outcome
+        _fileState = fileItem;
+      }
+      return /*#__PURE__*/_react.default.createElement(_errorMessageWithAnalytics.default, {
+        fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileState: _fileState,
+        fileStateFlags: fileStateFlagsRef.current,
+        traceContext: traceContext
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_errorMessageWithAnalytics.default, {
+        fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileStateFlags: fileStateFlagsRef.current
+      });
+    }
+  }, [identifier, renderDownloadButton, traceContext]);
+  return item.match({
+    successful: function successful(fileItem) {
+      if (fileItem === 'external-image') {
+        // render an external image
+        var _ref3 = identifier,
+          dataURI = _ref3.dataURI,
+          name = _ref3.name;
+        return /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
+          src: dataURI,
+          alt: name !== null && name !== void 0 ? name : '',
+          onLoad: function onLoad() {
+            (0, _fireAnalytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
+              fileId: 'external-image'
+            }), createAnalyticsEventRef.current);
+            (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+              fileAttributes: {
+                fileId: 'external-image'
+              },
+              fileStateFlags: fileStateFlagsRef.current
+            });
+          },
+          onError: function onError() {
+            setItem(_outcome.Outcome.failed(new _MediaViewerError.MediaViewerError('imageviewer-external-onerror')));
+          }
+        });
+      } else {
+        // render a FileState fetched through media-client
+        switch (fileItem.status) {
+          case 'processed':
+          case 'uploading':
+          case 'processing':
+            return renderItem(fileItem);
+          case 'failed-processing':
+            if (fileItem.mediaType === 'doc' && fileItem.mimeType === 'application/pdf') {
+              return renderItem(fileItem);
+            }
+            return renderError(new _MediaViewerError.MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
+          case 'error':
+            return renderError(new _MediaViewerError.MediaViewerError('itemviewer-file-error-status', (0, _mediaClient.toCommonMediaClientError)(fileItem)), fileItem);
+        }
+      }
+    },
+    pending: function pending() {
+      return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+    },
+    failed: function failed(error) {
+      return renderError(error, item.data);
+    }
+  });
+};

package/dist/cjs/MediaViewerError.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaViewerError = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var MediaViewerError = exports.MediaViewerError = /*#__PURE__*/function (_Error) {
+  function MediaViewerError(primaryReason, secondaryError) {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaViewerError);
+    _this = _callSuper(this, MediaViewerError, [primaryReason]);
+
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    Object.setPrototypeOf(_this, (this instanceof MediaViewerError ? this.constructor : void 0).prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace(_this, this instanceof MediaViewerError ? this.constructor : void 0);
+    }
+    return _this;
+  }
+  (0, _inherits2.default)(MediaViewerError, _Error);
+  return (0, _createClass2.default)(MediaViewerError);
+}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));

package/dist/cjs/ToolbarDownloadButton.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarDownloadButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
+var _downloadButtonClicked = require("./analytics/events/ui/downloadButtonClicked");
+var _DownloadItem = require("./DownloadItem");
+var _downloadIcon = require("./downloadIcon");
+var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(_ref) {
+  var state = _ref.state,
+    mediaClient = _ref.mediaClient,
+    identifier = _ref.identifier,
+    traceContext = _ref.traceContext,
+    fallbackMediaName = _ref.fallbackMediaName;
+  // TODO [MS-1731]: make it work for external files as well
+  if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
+    return null;
+  }
+  var downloadEvent = (0, _downloadButtonClicked.createDownloadButtonClickedEvent)(state);
+  var testId = 'media-viewer-download-button';
+  return /*#__PURE__*/_react.default.createElement(_DownloadItem.DownloadItem, {
+    testId: testId,
+    analyticspayload: downloadEvent,
+    fileState: state,
+    mediaClient: mediaClient,
+    collectionName: identifier.collectionName,
+    traceContext: traceContext,
+    iconBefore: _downloadIcon.downloadIcon,
+    fallbackMediaName: fallbackMediaName
+  });
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDownloadFailedEventPayload = void 0;
+var _getErrorDetail = require("../../../getErrorDetail");
+var _getPrimaryErrorReason = require("../../../getPrimaryErrorReason");
+var _getRequestMetadata = require("../../../getRequestMetadata");
+var _getSecondaryErrorReason = require("../../../getSecondaryErrorReason");
+var _getFileAttributes2 = require("../../getFileAttributes");
+var createDownloadFailedEventPayload = exports.createDownloadFailedEventPayload = function createDownloadFailedEventPayload(fileId, error, fileState, traceContext) {
+  var _getFileAttributes = (0, _getFileAttributes2.getFileAttributes)(fileState),
+    fileMediatype = _getFileAttributes.fileMediatype,
+    fileMimetype = _getFileAttributes.fileMimetype,
+    fileSize = _getFileAttributes.fileSize;
+  var requestMetadata = (0, _getRequestMetadata.getRequestMetadata)(error);
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadFailed',
+    attributes: {
+      status: 'fail',
+      failReason: (0, _getPrimaryErrorReason.getPrimaryErrorReason)(error),
+      error: (0, _getSecondaryErrorReason.getSecondaryErrorReason)(error),
+      errorDetail: (0, _getErrorDetail.getErrorDetail)(error),
+      statusCode: requestMetadata === null || requestMetadata === void 0 ? void 0 : requestMetadata.statusCode,
+      request: requestMetadata,
+      fileMimetype: fileMimetype,
+      fileMediatype: fileMediatype,
+      fileAttributes: {
+        fileId: fileId,
+        fileMediatype: fileMediatype,
+        fileMimetype: fileMimetype,
+        fileSize: fileSize
+      },
+      traceContext: traceContext
+    }
+  };
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDownloadSucceededEventPayload = void 0;
+var _getFileAttributes2 = require("../../getFileAttributes");
+var createDownloadSucceededEventPayload = exports.createDownloadSucceededEventPayload = function createDownloadSucceededEventPayload(fileState, traceContext) {
+  var _getFileAttributes = (0, _getFileAttributes2.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
+    }
+  };
+};