@atlaskit/media-viewer 52.4.37 → 52.5.1

package/dist/es2019/viewers/archiveSidebar/nativePdfViewer.js

@@ -0,0 +1,38 @@
+/* nativePdfViewer.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./nativePdfViewer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const pdfWrapperStyles = null;
+const headerStyles = null;
+export const NativePdfViewer = ({
+  src,
+  children,
+  onSuccess,
+  onError
+}) => {
+  const ref = element => {
+    if (!element) {
+      return;
+    }
+
+    // The only way to know if an object is loaded is to check the bounding client rect of the error element
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      onSuccess();
+    } else {
+      onError();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "native-pdf-viewer",
+    className: ax(["_4t3i1osq _1bsb1osq"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4t3i8ved _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement("object", {
+    data: src,
+    type: "application/pdf",
+    className: ax(["_4t3i1osq _1bsb1osq"])
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children)));
+};

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -1,16 +1,123 @@
-import React from 'react';
-import { ArchiveItemViewerWrapper as CompiledArchiveItemViewerWrapper, ArchiveSideBar as CompiledArchiveSideBar, ArchiveSidebarFolderWrapper as CompiledArchiveSidebarFolderWrapper, ArchiveDownloadButtonWrapper as CompiledArchiveDownloadButtonWrapper, DisabledArchiveDownloadButtonWrapper as CompiledDisabledArchiveDownloadButtonWrapper, SidebarItemWrapper as CompiledSidebarItemWrapper, ArchiveSidebarFileEntryWrapper as CompiledArchiveSidebarFileEntryWrapper, ArchiveLayout as CompiledArchiveLayout, ArchiveViewerWrapper as CompiledArchiveViewerWrapper, Separator as CompiledSeparator, SidebarHeaderWrapper as CompiledSidebarHeaderWrapper, SidebarHeaderIcon as CompiledSidebarHeaderIcon, SidebarHeaderEntry as CompiledSidebarHeaderEntry } from './styleWrappers-compiled';
-import { TouchScrollable } from 'react-scrolllock';
-export const ArchiveItemViewerWrapper = props => /*#__PURE__*/React.createElement(CompiledArchiveItemViewerWrapper, props);
-export const ArchiveSideBar = props => /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(CompiledArchiveSideBar, props));
-export const ArchiveSidebarFolderWrapper = props => /*#__PURE__*/React.createElement(CompiledArchiveSidebarFolderWrapper, props);
-export const ArchiveDownloadButtonWrapper = props => /*#__PURE__*/React.createElement(CompiledArchiveDownloadButtonWrapper, props);
-export const DisabledArchiveDownloadButtonWrapper = props => /*#__PURE__*/React.createElement(CompiledDisabledArchiveDownloadButtonWrapper, props);
-export const SidebarItemWrapper = props => /*#__PURE__*/React.createElement(CompiledSidebarItemWrapper, props);
-export const ArchiveSidebarFileEntryWrapper = props => /*#__PURE__*/React.createElement(CompiledArchiveSidebarFileEntryWrapper, props);
-export const ArchiveLayout = props => /*#__PURE__*/React.createElement(CompiledArchiveLayout, props);
-export const ArchiveViewerWrapper = props => /*#__PURE__*/React.createElement(CompiledArchiveViewerWrapper, props);
-export const Separator = () => /*#__PURE__*/React.createElement(CompiledSeparator, null);
-export const SidebarHeaderWrapper = props => /*#__PURE__*/React.createElement(CompiledSidebarHeaderWrapper, props);
-export const SidebarHeaderIcon = props => /*#__PURE__*/React.createElement(CompiledSidebarHeaderIcon, props);
-export const SidebarHeaderEntry = props => /*#__PURE__*/React.createElement(CompiledSidebarHeaderEntry, props);
+/* styleWrappers.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./styleWrappers.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+import { DN500 } from '@atlaskit/theme/colors';
+export const ARCHIVE_SIDE_BAR_WIDTH = 300;
+const archiveItemViewerWrapperStyles = null;
+const archiveSideBarStyles = null;
+const slideDown = null;
+const archiveDownloadButtonWrapperStyles = null;
+const disabledArchiveDownloadButtonWrapperStyles = null;
+const archiveSidebarFolderWrapperStyles = null;
+const sidebarItemWrapperStyles = null;
+const archiveSidebarFileEntryWrapperStyles = null;
+const archiveLayoutStyles = null;
+const archiveViewerWrapperStyles = null;
+const separatorStyles = null;
+const sidebarHeaderWrapperStyles = null;
+const sidebarHeaderIconStyles = null;
+const sidebarHeaderEntryStyles = null;
+const fullHeightStyles = null;
+export const ArchiveItemViewerWrapper = ({
+  children,
+  fullHeight
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _1e0c1txw _1bah1h6o", fullHeight && "_4t3i1osq"])
+  }, children);
+};
+export const ArchiveSideBar = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: ax(["_ca0qqslr _u5f3v47k _19bvv47k _n3tdv47k _bfhky0hh _kqswstnw _1ltvidpf _154iidpf _1bsb1mjv _94n5idpf _vchhusvi _18m915zi"])
+  }, children);
+});
+export const ArchiveSidebarFolderWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "archive-sidebar-folder-wrapper",
+    className: ax(["_v564t24z _t9ecz6y5 _tzy4idpf _j7hq1kq8 _5sag188d _1o51q7pw"])
+  }, children);
+};
+export const ArchiveDownloadButtonWrapper = ({
+  children,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    "data-testid": "media-archiveDownloadButton",
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syazwydc _d0altlke _irr3ebx2 _1qamtlke _1di6j4ot"])
+  }, children);
+};
+export const DisabledArchiveDownloadButtonWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "media-disabledArchiveDownloadButton",
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syazwydc _80om13gf"])
+  }, children);
+};
+export const SidebarItemWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb13sl"])
+  }, children);
+};
+export const ArchiveSidebarFileEntryWrapper = ({
+  children,
+  index
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: ax(["_v564rca0 _n3td1vik _1e0c1txw _4cvr1h6o _80omtlke"])
+  }, children);
+};
+export const ArchiveLayout = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "archive-layout",
+    className: ax(["_1e0c1txw _1bsb1osq _4t3i1osq"])
+  }, children);
+};
+export const ArchiveViewerWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iidpf _1ltv1mjv _1xi2idpf _94n5idpf _4cvr1h6o _1e0c1txw"])
+  }, children);
+};
+export const Separator = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1rr0 _4t3iyh40 _19pk1te7 _2hwxidpf _otyr1te7 _18u0idpf _bfhk21we _1o9zidpf"])
+  });
+};
+export const SidebarHeaderWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf"])
+  }, children);
+};
+export const SidebarHeaderIcon = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1h6o _2hwx1yov _1o9zidpf"])
+  }, children);
+};
+export const SidebarHeaderEntry = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazg8nh"])
+  }, children);
+};

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

@@ -1,11 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { isPreviewableFileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
-import { MediaViewerError } from '../../errors';
-import { PDFRenderer } from './pdfRenderer';
 import { BaseViewer } from '../base-viewer';
-import { getObjectUrlFromFileState } from '../../utils/getObjectUrlFromFileState';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { DocViewer as DocViewerComponent } from './doc-viewer';
 export class DocViewer extends BaseViewer {
   constructor(...args) {
     super(...args);
@@ -13,7 +11,10 @@ export class DocViewer extends BaseViewer {
   }
   get initialState() {
     return {
-      content: Outcome.pending()
+      content: Outcome.pending(),
+      zoomLevel: new ZoomLevel(1.75),
+      isPasswordProtected: false,
+      hasPasswordError: false
     };
   }
   needsReset(propsA, propsB) {
@@ -24,55 +25,11 @@ export class DocViewer extends BaseViewer {
   }
   async init() {
     const {
-      item,
-      mediaClient,
-      collectionName,
-      onError
+      item
     } = this.props;
-    if (isPreviewableFileState(item) && item.mimeType.toLowerCase() === 'application/pdf') {
-      const src = await getObjectUrlFromFileState(item);
-      if (src) {
-        this.isObjectUrl = true;
-        this.setState({
-          content: Outcome.successful(src)
-        });
-        return;
-      }
-    }
-    if (item.status === 'processed') {
-      try {
-        const src = await mediaClient.file.getArtifactURL(item.artifacts, 'document.pdf', collectionName);
-        this.onMediaDisplayed();
-        this.setState({
-          content: Outcome.successful(src)
-        });
-      } catch (error) {
-        const docError = new MediaViewerError('docviewer-fetch-url', error instanceof Error ? error : undefined);
-        this.setState({
-          content: Outcome.failed(docError)
-        });
-        if (onError) {
-          onError(docError);
-        }
-      }
-    } else if (item.status === 'failed-processing') {
-      try {
-        const src = await mediaClient.file.getFileBinaryURL(item.id, collectionName, 2940 // 2940 seconds ~= 50 mins
-        );
-        this.onMediaDisplayed();
-        this.setState({
-          content: Outcome.successful(src)
-        });
-      } catch (error) {
-        const docError = new MediaViewerError('docviewer-fetch-url', error instanceof Error ? error : undefined);
-        this.setState({
-          content: Outcome.failed(docError)
-        });
-        if (onError) {
-          onError(docError);
-        }
-      }
-    }
+    this.setState({
+      content: Outcome.successful(item.id)
+    });
   }
   release() {
     if (!this.isObjectUrl) {
@@ -85,19 +42,14 @@ export class DocViewer extends BaseViewer {
       URL.revokeObjectURL(content.data);
     }
   }
-  renderSuccessful(content) {
-    const {
-      item,
-      onClose,
-      onSuccess,
-      onError
-    } = this.props;
-    return /*#__PURE__*/React.createElement(PDFRenderer, {
-      item: item,
-      src: content,
-      onSuccess: onSuccess,
-      onError: onError,
-      onClose: onClose
+  renderSuccessful() {
+    return /*#__PURE__*/React.createElement(DocViewerComponent, {
+      mediaClient: this.props.mediaClient,
+      fileState: this.props.item,
+      collectionName: this.props.collectionName,
+      onError: this.props.onError,
+      onSuccess: this.props.onSuccess,
+      traceContext: this.props.traceContext
     });
   }
 }

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.36";
+var packageVersion = "0.0.0-development";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -6,7 +6,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.36";
+var packageVersion = "0.0.0-development";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/item-viewer.js

@@ -19,9 +19,9 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 import { CustomViewer } from './viewers/customViewer/customViewer';
-import { fg } from '@atlaskit/platform-feature-flags';
 var ImageViewer = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(function (mod) {
@@ -62,16 +62,6 @@ var DocViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var DocNextViewer = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_docNextViewer" */'./viewers/doc-next').then(function (mod) {
-      return mod.DocViewer;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/React.createElement(Spinner, null);
-  }
-});
 var CodeViewer = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer').then(function (mod) {
@@ -103,6 +93,59 @@ export var isFileStateItem = function isFileStateItem(fileItem) {
   return !isExternalImageItem(fileItem);
 };
 export var 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 (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
+  };
+};
 export var ItemViewerBase = function ItemViewerBase(_ref) {
   var identifier = _ref.identifier,
     showControls = _ref.showControls,
@@ -151,32 +194,50 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
     fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext), createAnalyticsEventRef.current);
     startMediaFileUfoExperience();
   }, [identifier, traceContext]);
+  var isNativeFileOptimizationEnabled = fg('media_viewer_prevent_rerender_on_polling');
   useEffect(function () {
+    // External images don't need backend subscriptions
     if (isExternalImageIdentifier(identifier)) {
-      // external images do not need to talk to our backend,
-      // so therefore no need for media-client subscriptions.
-      // just set a successful outcome of type "external-image".
       setItem(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;
+    }
 
-    // File Subscription
-    if (fileState) {
-      var status = fileState.status;
-      if (fileState.status !== 'error') {
-        // updateFileStateFlag
+    // Handle error state
+    if (status === 'error') {
+      setItem(Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', toCommonMediaClientError(fileState))));
+      return;
+    }
 
-        if (status === 'processing') {
-          fileStateFlagsRef.current.wasStatusProcessing = true;
-        } else if (status === 'uploading') {
-          fileStateFlagsRef.current.wasStatusUploading = true;
+    // 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;
         }
-        setItem(Outcome.successful(fileState));
-      } else {
-        setItem(Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', toCommonMediaClientError(fileState))));
-      }
+        // First load or different file: create normalized processed state
+        return Outcome.successful(createProcessedFileState(fileState));
+      });
+      return;
     }
-  }, [fileState, identifier]);
+
+    // 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]);
   var onSuccess = useCallback(function () {
     item.whenSuccessful(function (fileItem) {
       if (isFileStateItem(fileItem)) {
@@ -261,12 +322,6 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
           onError: onLoadFail
         }, viewerProps));
       case 'doc':
-        if (fg('media_document_viewer')) {
-          return /*#__PURE__*/React.createElement(DocNextViewer, _extends({
-            onSuccess: onSuccess,
-            onError: onLoadFail
-          }, viewerProps));
-        }
         return /*#__PURE__*/React.createElement(DocViewer, _extends({
           onSuccess: onSuccess,
           onError: onLoadFail