@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/cjs/item-viewer.js

@@ -4,533 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFileStateItem = exports.isExternalImageItem = exports.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = exports.ItemViewerBase = exports.ItemViewer = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+exports.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = exports.ItemViewer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactLoadable = _interopRequireDefault(require("react-loadable"));
-var _mediaClient = require("@atlaskit/media-client");
-var _compiled = require("@atlaskit/primitives/compiled");
-var _reactIntl = require("react-intl");
-var _messages = require("@atlaskit/media-ui/messages");
-var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
-var _useFileState2 = require("@atlaskit/media-client-react/use-file-state");
-var _useMediaClient = require("@atlaskit/media-client-react/use-media-client");
-var _domain = require("./domain");
-var _loading = require("./loading");
-var _errorMessage = _interopRequireDefault(require("./errorMessage"));
-var _errors = require("./errors");
-var _download = require("./download");
+var _react = _interopRequireDefault(require("react"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
-var _commenced = require("./analytics/events/operational/commenced");
-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 _fg = require("@atlaskit/platform-feature-flags/fg");
-var _ufoExperiences = require("./analytics/ufoExperiences");
-var _customViewer = require("./viewers/customViewer/customViewer");
-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);
-};
-// Consts
-var isExternalImageItem = exports.isExternalImageItem = function isExternalImageItem(fileItem) {
-  return fileItem === 'external-image';
-};
-var isFileStateItem = exports.isFileStateItem = function isFileStateItem(fileItem) {
-  return !isExternalImageItem(fileItem);
-};
+var _mediaClient = require("@atlaskit/media-client");
+var _ItemViewerBase = require("./ItemViewerBase");
 var MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = exports.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = 10 * 1024 * 1024;
-
-/**
- * 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 <= 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)(_domain.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(_download.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, _analytics.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(_domain.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(_domain.Outcome.failed(new _errors.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 && isFileStateItem(prev.data) && prev.data.id === fileState.id && prev.data.status === 'processed') {
-          return prev;
-        }
-        // First load or different file: create normalized processed state
-        return _domain.Outcome.successful(createProcessedFileState(fileState));
-      });
-      return;
-    }
-
-    // Non-native files: standard behavior
-    setItem(_domain.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 (isFileStateItem(fileItem)) {
-        var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
-        (0, _analytics.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(_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,
-      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 > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
-        return renderError(new _errors.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 _errors.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(_errorMessage.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(_errorMessage.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, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
-              fileId: 'external-image'
-            }), createAnalyticsEventRef.current);
-            (0, _ufoExperiences.succeedMediaFileUfoExperience)({
-              fileAttributes: {
-                fileId: 'external-image'
-              },
-              fileStateFlags: fileStateFlagsRef.current
-            });
-          },
-          onError: function onError() {
-            setItem(_domain.Outcome.failed(new _errors.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 _errors.MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
-          case 'error':
-            return renderError(new _errors.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);
-    }
-  });
-};
 var ViewerWithKey = function ViewerWithKey(props) {
   var identifier = props.identifier;
   var key = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : identifier.dataURI;
-  return /*#__PURE__*/_react.default.createElement(ItemViewerBase, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_ItemViewerBase.ItemViewerBase, (0, _extends2.default)({}, props, {
     key: key
   }));
 };

package/dist/cjs/list.js

@@ -13,7 +13,7 @@ var _itemViewer = require("./item-viewer");
 var _styleWrappers = require("./styleWrappers");
 var _navigation = require("./navigation");
 var _mediaCommon = require("@atlaskit/media-common");
-var _header = _interopRequireDefault(require("./header"));
+var _headerWithIntl = _interopRequireDefault(require("./headerWithIntl"));
 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" != _typeof(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); }
 var List = exports.List = function List(_ref) {
   var defaultSelectedItem = _ref.defaultSelectedItem,
@@ -48,7 +48,7 @@ var List = exports.List = function List(_ref) {
   , {
     className: _classNames.hideControlsClassName,
     isArchiveSideBarVisible: isArchiveSideBarVisible
-  }, /*#__PURE__*/_react.default.createElement(_header.default, {
+  }, /*#__PURE__*/_react.default.createElement(_headerWithIntl.default, {
     identifier: selectedItem,
     onClose: onClose,
     extensions: extensions,

package/dist/cjs/media-viewer.js

@@ -9,19 +9,19 @@ exports.MediaViewer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _perfMarks = require("perf-marks");
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactIntl = require("react-intl");
-var _shortcut = require("@atlaskit/media-ui/shortcut");
+var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
-var _analytics = require("./analytics");
+var _shortcut = require("@atlaskit/media-ui/shortcut");
 var _modal = require("./analytics/events/screen/modal");
 var _closed = require("./analytics/events/ui/closed");
-var _list = require("./list");
+var _fireAnalytics = require("./analytics/fireAnalytics");
+var _classnames = require("./classnames");
 var _content = require("./content");
+var _list = require("./list");
 var _styleWrappers = require("./styleWrappers");
-var _perfMarks = require("perf-marks");
-var _classnames = require("./classnames");
-var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 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" != _typeof(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); }
 var MediaViewerComponent = function MediaViewerComponent(_ref) {
   var featureFlags = _ref.featureFlags,
@@ -47,7 +47,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
   var createAnalyticsEventRef = (0, _react.useRef)(createAnalyticsEvent);
   createAnalyticsEventRef.current = createAnalyticsEvent;
   (0, _react.useLayoutEffect)(function () {
-    (0, _analytics.fireAnalytics)((0, _modal.createModalEvent)(), createAnalyticsEventRef.current);
+    (0, _fireAnalytics.fireAnalytics)((0, _modal.createModalEvent)(), createAnalyticsEventRef.current);
     (0, _perfMarks.start)('MediaViewer.SessionDuration');
   }, []);
   var defaultSelectedItem = selectedItem || items[0];
@@ -73,7 +73,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
     code: 'Escape',
     handler: function handler() {
-      (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), createAnalyticsEventRef.current);
+      (0, _fireAnalytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), createAnalyticsEventRef.current);
       _onClose && _onClose();
     }
   }), /*#__PURE__*/_react.default.createElement(_content.Content, {
@@ -81,7 +81,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     onClose: function onClose(_e, analyticsEvent) {
       var _analyticsEvent$paylo;
       if ((analyticsEvent === null || analyticsEvent === void 0 || (_analyticsEvent$paylo = analyticsEvent.payload) === null || _analyticsEvent$paylo === void 0 ? void 0 : _analyticsEvent$paylo.actionSubject) === 'button') {
-        (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('button'), createAnalyticsEventRef.current);
+        (0, _fireAnalytics.fireAnalytics)((0, _closed.createClosedEvent)('button'), createAnalyticsEventRef.current);
       }
       _onClose && _onClose();
     }

package/dist/cjs/navigation.js

@@ -12,16 +12,16 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
+var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _classNames = require("@atlaskit/media-ui/classNames");
 var _shortcut = require("@atlaskit/media-ui/shortcut");
-var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _createNavigatedEvent = require("./analytics/events/ui/createNavigatedEvent");
+var _fireAnalytics = require("./analytics/fireAnalytics");
 var _styleWrappers = require("./styleWrappers");
-var _utils = require("./utils");
-var _navigated = require("./analytics/events/ui/navigated");
-var _analytics = require("./analytics");
+var _getSelectedIndex = require("./utils/getSelectedIndex");
 var _primitives = require("@atlaskit/primitives");
 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" != _typeof(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 _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)); }
@@ -88,7 +88,7 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
         var selectedIndex = _this.selectedIndex;
         var newItem = direction === 'next' ? items[selectedIndex + 1] : items[selectedIndex - 1];
         if (newItem) {
-          (0, _analytics.fireAnalytics)((0, _navigated.createNavigatedEvent)(direction, source, newItem), createAnalyticsEvent);
+          (0, _fireAnalytics.fireAnalytics)((0, _createNavigatedEvent.createNavigatedEvent)(direction, source, newItem), createAnalyticsEvent);
           onChange(newItem);
         }
       };
@@ -99,7 +99,7 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       var _this$props2 = this.props,
         items = _this$props2.items,
         selectedItem = _this$props2.selectedItem;
-      return (0, _utils.getSelectedIndex)(items, selectedItem);
+      return (0, _getSelectedIndex.getSelectedIndex)(items, selectedItem);
     }
   }, {
     key: "render",

package/dist/cjs/noop.js

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