@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/es2019/ItemViewerBase.js

@@ -0,0 +1,435 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Suspense, useCallback, useEffect, useState, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Loadable from 'react-loadable';
+import { isExternalImageIdentifier, isFileIdentifier, toCommonMediaClientError } from '@atlaskit/media-client';
+import { useFileState } from '@atlaskit/media-client-react/use-file-state';
+import { useMediaClient } from '@atlaskit/media-client-react/use-media-client';
+import { isCodeViewerItem } from '@atlaskit/media-ui/isCodeViewerItem';
+import { messages } from '@atlaskit/media-ui/messages';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Text } from '@atlaskit/primitives/compiled';
+import { ErrorViewDownloadButton } from './ErrorViewDownloadButton';
+import { MediaViewerError } from './MediaViewerError';
+import { createCommencedEvent } from './analytics/events/operational/commenced';
+import { createLoadSucceededEvent } from './analytics/events/operational/loadSucceeded';
+import { fireAnalytics } from './analytics/fireAnalytics';
+import { getFileAttributes } from './analytics/getFileAttributes';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
+import { Outcome } from './domain/outcome';
+import ErrorMessage from './errorMessageWithAnalytics';
+import { isFileStateItem } from './isFileStateItem';
+import { MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER } from './item-viewer';
+import { Spinner } from './loading';
+import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { CustomViewer } from './viewers/customViewer/customViewer';
+import { InteractiveImg } from './viewers/image/interactive-img';
+function loadImageViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image');
+}
+const LoadableImageViewer = Loadable({
+  loader: () => loadImageViewer().then(mod => mod.ImageViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazyImageViewer = /*#__PURE__*/React.lazy(() => loadImageViewer().then(mod => ({
+  default: mod.ImageViewer
+})));
+function loadVideoViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video');
+}
+const LoadableVideoViewer = Loadable({
+  loader: () => loadVideoViewer().then(mod => mod.VideoViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazyVideoViewer = /*#__PURE__*/React.lazy(() => loadVideoViewer().then(mod => ({
+  default: mod.VideoViewer
+})));
+function loadAudioViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio');
+}
+const LoadableAudioViewer = Loadable({
+  loader: () => loadAudioViewer().then(mod => mod.AudioViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazyAudioViewer = /*#__PURE__*/React.lazy(() => loadAudioViewer().then(mod => ({
+  default: mod.AudioViewer
+})));
+function loadDocViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc');
+}
+const LoadableDocViewer = Loadable({
+  loader: () => loadDocViewer().then(mod => mod.DocViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazyDocViewer = /*#__PURE__*/React.lazy(() => loadDocViewer().then(mod => ({
+  default: mod.DocViewer
+})));
+function loadCodeViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer');
+}
+const LoadableCodeViewer = Loadable({
+  loader: () => loadCodeViewer().then(mod => mod.CodeViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazyCodeViewer = /*#__PURE__*/React.lazy(() => loadCodeViewer().then(mod => ({
+  default: mod.CodeViewer
+})));
+function loadSvgViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg');
+}
+const LoadableSvgViewer = Loadable({
+  loader: () =>
+  // @ts-ignore [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+  import( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg').then(mod => mod.SvgViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const LazySvgViewer = /*#__PURE__*/React.lazy(() => loadSvgViewer().then(mod => ({
+  default: mod.SvgViewer
+})));
+const ViewerSuspense = ({
+  children
+}) => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement(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
+ */
+const canRenderWithoutProcessing = fileState => {
+  const {
+    mimeType,
+    name,
+    size
+  } = fileState;
+
+  // Text/code files via CodeViewer (10MB limit)
+  if (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.
+ */
+const createProcessedFileState = fileState => ({
+  status: 'processed',
+  id: fileState.id,
+  name: fileState.name,
+  size: fileState.size,
+  mediaType: fileState.mediaType,
+  mimeType: fileState.mimeType,
+  artifacts: {},
+  preview: fileState.preview,
+  createdAt: fileState.createdAt
+});
+export const ItemViewerBase = ({
+  identifier,
+  showControls,
+  onClose,
+  previewCount,
+  contextId,
+  createAnalyticsEvent,
+  viewerOptions,
+  traceContext
+}) => {
+  // States and Refs
+  const [item, setItem] = useState(Outcome.pending());
+  const fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  const createAnalyticsEventRef = useRef(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+
+  // Hooks
+  const mediaClient = useMediaClient();
+  const {
+    fileState
+  } = useFileState(isExternalImageIdentifier(identifier) ? '' : identifier.id, {
+    collectionName: isExternalImageIdentifier(identifier) ? '' : identifier.collectionName,
+    skipRemote: isExternalImageIdentifier(identifier)
+  });
+  const renderDownloadButton = useCallback((fileState, error) => {
+    const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+    return /*#__PURE__*/React.createElement(ErrorViewDownloadButton, {
+      fileState: fileState,
+      mediaClient: mediaClient,
+      error: error,
+      collectionName: collectionName,
+      traceContext: traceContext
+    });
+  }, [mediaClient, identifier, traceContext]);
+
+  // Did mount
+
+  useEffect(() => {
+    if (isExternalImageIdentifier(identifier)) {
+      return;
+    }
+    fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext), createAnalyticsEventRef.current);
+    startMediaFileUfoExperience();
+  }, [identifier, traceContext]);
+  const isNativeFileOptimizationEnabled = fg('media_viewer_prevent_rerender_on_polling');
+  useEffect(() => {
+    // External images don't need backend subscriptions
+    if (isExternalImageIdentifier(identifier)) {
+      setItem(Outcome.successful('external-image'));
+      return;
+    }
+    if (!fileState) {
+      return;
+    }
+    const {
+      status
+    } = fileState;
+
+    // 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.failed(new MediaViewerError('itemviewer-fetch-metadata', 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(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 Outcome.successful(createProcessedFileState(fileState));
+      });
+      return;
+    }
+
+    // Non-native files: standard behavior
+    setItem(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]);
+  const onSuccess = useCallback(() => {
+    item.whenSuccessful(fileItem => {
+      if (isFileStateItem(fileItem)) {
+        const fileAttributes = getFileAttributes(fileItem);
+        fireAnalytics(createLoadSucceededEvent(fileAttributes, traceContext), createAnalyticsEventRef.current);
+        succeedMediaFileUfoExperience({
+          fileAttributes,
+          fileStateFlags: fileStateFlagsRef.current
+        });
+      }
+    });
+  }, [item, traceContext]);
+  const onLoadFail = useCallback(mediaViewerError => {
+    setItem(Outcome.failed(mediaViewerError, fileState));
+  }, [fileState]);
+  const renderItem = fileItem => {
+    var _viewerOptions$custom;
+    const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+    const viewerProps = {
+      mediaClient,
+      item: fileItem,
+      collectionName,
+      onClose,
+      previewCount,
+      viewerOptions,
+      traceContext
+    };
+    const customRenderer = viewerOptions === null || viewerOptions === void 0 ? void 0 : (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(renderer => renderer.shouldUseCustomRenderer({
+      fileItem
+    }));
+    if (customRenderer) {
+      return /*#__PURE__*/React.createElement(CustomViewer, _extends({
+        customRendererConfig: customRenderer,
+        onError: onLoadFail,
+        onSuccess: onSuccess
+      }, viewerProps));
+    }
+
+    // TODO: fix all of the item errors
+
+    if (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 MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+      }
+      return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyCodeViewer, _extends({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableCodeViewer, _extends({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps));
+    }
+    if (isFileIdentifier(identifier) && fileItem.mimeType === 'image/svg+xml') {
+      return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazySvgViewer, {
+        identifier: identifier,
+        onLoad: onSuccess,
+        onError: onLoadFail,
+        onClose: onClose,
+        traceContext: traceContext
+      })) : /*#__PURE__*/React.createElement(LoadableSvgViewer, {
+        identifier: identifier,
+        onLoad: onSuccess,
+        onError: onLoadFail,
+        onClose: onClose,
+        traceContext: traceContext
+      });
+    }
+    const {
+      mediaType
+    } = fileItem;
+    switch (mediaType) {
+      case 'image':
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyImageViewer, _extends({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableImageViewer, _extends({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId
+        }, viewerProps));
+      case 'audio':
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyAudioViewer, _extends({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableAudioViewer, _extends({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'video':
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyVideoViewer, _extends({
+          identifier: identifier,
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableVideoViewer, _extends({
+          identifier: identifier,
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'doc':
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyDocViewer, _extends({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableDocViewer, _extends({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'archive':
+        return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+    }
+    return renderError(new MediaViewerError('unsupported'), fileItem);
+  };
+  const renderError = useCallback((error, fileItem) => {
+    if (fileItem) {
+      let fileState;
+      if (fileItem === 'external-image') {
+        // external image error outcome
+        fileState = {
+          id: 'external-image',
+          status: 'error'
+        };
+      } else {
+        // FileState error outcome
+        fileState = fileItem;
+      }
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileState: fileState,
+        fileStateFlags: fileStateFlagsRef.current,
+        traceContext: traceContext
+      }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(fileState, error));
+    } else {
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileStateFlags: fileStateFlagsRef.current
+      });
+    }
+  }, [identifier, renderDownloadButton, traceContext]);
+  return item.match({
+    successful: fileItem => {
+      if (fileItem === 'external-image') {
+        // render an external image
+        const {
+          dataURI,
+          name
+        } = identifier;
+        return /*#__PURE__*/React.createElement(InteractiveImg, {
+          src: dataURI,
+          alt: name !== null && name !== void 0 ? name : '',
+          onLoad: () => {
+            fireAnalytics(createLoadSucceededEvent({
+              fileId: 'external-image'
+            }), createAnalyticsEventRef.current);
+            succeedMediaFileUfoExperience({
+              fileAttributes: {
+                fileId: 'external-image'
+              },
+              fileStateFlags: fileStateFlagsRef.current
+            });
+          },
+          onError: () => {
+            setItem(Outcome.failed(new 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('itemviewer-file-failed-processing-status'), fileItem);
+          case 'error':
+            return renderError(new MediaViewerError('itemviewer-file-error-status', toCommonMediaClientError(fileItem)), fileItem);
+        }
+      }
+    },
+    pending: () => /*#__PURE__*/React.createElement(Spinner, null),
+    failed: error => renderError(error, item.data)
+  });
+};

package/dist/es2019/MediaViewerError.js

@@ -0,0 +1,15 @@
+export class MediaViewerError extends Error {
+  constructor(primaryReason, secondaryError) {
+    super(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, new.target.prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace(this, new.target);
+    }
+  }
+}

package/dist/es2019/ToolbarDownloadButton.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { isExternalImageIdentifier } from '@atlaskit/media-client';
+import { createDownloadButtonClickedEvent } from './analytics/events/ui/downloadButtonClicked';
+import { DownloadItem } from './DownloadItem';
+import { downloadIcon } from './downloadIcon';
+export const ToolbarDownloadButton = ({
+  state,
+  mediaClient,
+  identifier,
+  traceContext,
+  fallbackMediaName
+}) => {
+  // TODO [MS-1731]: make it work for external files as well
+  if (isExternalImageIdentifier(identifier)) {
+    return null;
+  }
+  const downloadEvent = createDownloadButtonClickedEvent(state);
+  const testId = 'media-viewer-download-button';
+  return /*#__PURE__*/React.createElement(DownloadItem, {
+    testId: testId,
+    analyticspayload: downloadEvent,
+    fileState: state,
+    mediaClient: mediaClient,
+    collectionName: identifier.collectionName,
+    traceContext: traceContext,
+    iconBefore: downloadIcon,
+    fallbackMediaName: fallbackMediaName
+  });
+};

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

@@ -0,0 +1,35 @@
+import { getErrorDetail } from '../../../getErrorDetail';
+import { getPrimaryErrorReason } from '../../../getPrimaryErrorReason';
+import { getRequestMetadata } from '../../../getRequestMetadata';
+import { getSecondaryErrorReason } from '../../../getSecondaryErrorReason';
+import { getFileAttributes } from '../../getFileAttributes';
+export const createDownloadFailedEventPayload = (fileId, error, fileState, traceContext) => {
+  const {
+    fileMediatype,
+    fileMimetype,
+    fileSize
+  } = getFileAttributes(fileState);
+  const requestMetadata = getRequestMetadata(error);
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadFailed',
+    attributes: {
+      status: 'fail',
+      failReason: getPrimaryErrorReason(error),
+      error: getSecondaryErrorReason(error),
+      errorDetail: getErrorDetail(error),
+      statusCode: requestMetadata === null || requestMetadata === void 0 ? void 0 : requestMetadata.statusCode,
+      request: requestMetadata,
+      fileMimetype,
+      fileMediatype,
+      fileAttributes: {
+        fileId,
+        fileMediatype,
+        fileMimetype,
+        fileSize
+      },
+      traceContext
+    }
+  };
+};

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

@@ -0,0 +1,26 @@
+import { getFileAttributes } from '../../getFileAttributes';
+export const createDownloadSucceededEventPayload = (fileState, traceContext) => {
+  const {
+    fileId,
+    fileMediatype,
+    fileMimetype,
+    fileSize
+  } = getFileAttributes(fileState);
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadSucceeded',
+    attributes: {
+      status: 'success',
+      fileMediatype,
+      fileMimetype,
+      fileAttributes: {
+        fileId,
+        fileMediatype,
+        fileMimetype,
+        fileSize
+      },
+      traceContext
+    }
+  };
+};

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

@@ -1,57 +1 @@
-import { getFileAttributes } from '../..';
-import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
-export const createDownloadSucceededEventPayload = (fileState, traceContext) => {
-  const {
-    fileId,
-    fileMediatype,
-    fileMimetype,
-    fileSize
-  } = getFileAttributes(fileState);
-  return {
-    eventType: 'operational',
-    actionSubject: 'mediaFile',
-    action: 'downloadSucceeded',
-    attributes: {
-      status: 'success',
-      fileMediatype,
-      fileMimetype,
-      fileAttributes: {
-        fileId,
-        fileMediatype,
-        fileMimetype,
-        fileSize
-      },
-      traceContext
-    }
-  };
-};
-export const createDownloadFailedEventPayload = (fileId, error, fileState, traceContext) => {
-  const {
-    fileMediatype,
-    fileMimetype,
-    fileSize
-  } = getFileAttributes(fileState);
-  const requestMetadata = getRequestMetadata(error);
-  return {
-    eventType: 'operational',
-    actionSubject: 'mediaFile',
-    action: 'downloadFailed',
-    attributes: {
-      status: 'fail',
-      failReason: getPrimaryErrorReason(error),
-      error: getSecondaryErrorReason(error),
-      errorDetail: getErrorDetail(error),
-      statusCode: requestMetadata === null || requestMetadata === void 0 ? void 0 : requestMetadata.statusCode,
-      request: requestMetadata,
-      fileMimetype,
-      fileMediatype,
-      fileAttributes: {
-        fileId,
-        fileMediatype,
-        fileMimetype,
-        fileSize
-      },
-      traceContext
-    }
-  };
-};
+export {};

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

@@ -1,5 +1,8 @@
-import { getFileAttributes } from '../..';
-import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
+import { getErrorDetail } from '../../../getErrorDetail';
+import { getPrimaryErrorReason } from '../../../getPrimaryErrorReason';
+import { getRequestMetadata } from '../../../getRequestMetadata';
+import { getSecondaryErrorReason } from '../../../getSecondaryErrorReason';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createLoadFailedEvent = (fileId, error, fileState, traceContext) => {
   var _failReason;
   const {

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

@@ -1,5 +1,5 @@
-import { getFileAttributes } from '../..';
-import { getPrimaryErrorReason } from '../../../errors';
+import { getPrimaryErrorReason } from '../../../getPrimaryErrorReason';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createPreviewTooLargeEvent = (error, fileState) => {
   const {
     fileId,

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

@@ -1,4 +1,4 @@
-import { getFileAttributes } from '../..';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createPreviewUnsupportedEvent = fileState => {
   const {
     fileId,

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

@@ -1,6 +1,8 @@
-import { getFileAttributes } from '../..';
-import { getMimeTypeFromFilename } from '../../../utils';
-import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail } from '../../../errors';
+import { getErrorDetail } from '../../../getErrorDetail';
+import { getPrimaryErrorReason } from '../../../getPrimaryErrorReason';
+import { getSecondaryErrorReason } from '../../../getSecondaryErrorReason';
+import { getMimeTypeFromFilename } from '../../../utils/getMimeTypeFromFilename';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createZipEntryLoadFailedEvent = (fileState, error, zipEntry) => {
   const {
     fileId,

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

@@ -1,5 +1,5 @@
-import { getMimeTypeFromFilename } from '../../../utils';
-import { getFileAttributes } from '../..';
+import { getMimeTypeFromFilename } from '../../../utils/getMimeTypeFromFilename';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createZipEntryLoadSucceededEvent = (fileState, zipEntry) => {
   const {
     fileId,

package/dist/es2019/analytics/events/ui/createNavigatedEvent.js

@@ -0,0 +1,14 @@
+import { isFileIdentifier } from '@atlaskit/media-client';
+import { inputFromSource } from './inputFromSource';
+export const createNavigatedEvent = (direction, source, identifier) => ({
+  eventType: 'ui',
+  action: 'navigated',
+  actionSubject: 'file',
+  actionSubjectId: direction === 'next' ? 'next' : 'previous',
+  attributes: {
+    fileAttributes: {
+      fileId: isFileIdentifier(identifier) ? identifier.id : ''
+    },
+    input: inputFromSource(source)
+  }
+});

package/dist/es2019/analytics/events/ui/downloadButtonClicked.js

@@ -1,4 +1,4 @@
-import { getFileAttributes } from '../..';
+import { getFileAttributes } from '../../getFileAttributes';
 export const createDownloadButtonClickedEvent = fileState => {
   const {
     fileId,