@atlaskit/media-viewer 52.4.37 → 52.5.1

package/dist/es2019/item-viewer.js

@@ -18,9 +18,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';
 const ImageViewer = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(mod => mod.ImageViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
@@ -37,10 +37,6 @@ const DocViewer = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc').then(mod => mod.DocViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const DocNextViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_docNextViewer" */'./viewers/doc-next').then(mod => mod.DocViewer),
-  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
-});
 const CodeViewer = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer').then(mod => mod.CodeViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
@@ -55,6 +51,59 @@ const SvgViewer = Loadable({
 export const isExternalImageItem = fileItem => fileItem === 'external-image';
 export const isFileStateItem = fileItem => !isExternalImageItem(fileItem);
 export const 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
+ */
+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,
@@ -102,34 +151,52 @@ export const ItemViewerBase = ({
     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)) {
-      // 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;
+    }
+    const {
+      status
+    } = fileState;
+
+    // Track status flags for analytics
+    if (status === 'processing') {
+      fileStateFlagsRef.current.wasStatusProcessing = true;
+    } else if (status === 'uploading') {
+      fileStateFlagsRef.current.wasStatusUploading = true;
+    }
 
-    // File Subscription
-    if (fileState) {
-      const {
-        status
-      } = fileState;
-      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(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]);
   const onSuccess = useCallback(() => {
     item.whenSuccessful(fileItem => {
       if (isFileStateItem(fileItem)) {
@@ -214,12 +281,6 @@ export const ItemViewerBase = ({
           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

package/dist/es2019/styleWrappers.js

@@ -1,57 +1,375 @@
+/* styleWrappers.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
-import { Blanket as CompiledBlanket, HeaderWrapper as CompiledHeaderWrapper, ListWrapper as CompiledListWrapper, ArrowsWrapper as CompiledArrowsWrapper, CloseButtonWrapper as CompiledCloseButtonWrapper, ContentWrapper as CompiledContentWrapper, ZoomWrapper as CompiledZoomWrapper, ZoomCenterControls as CompiledZoomCenterControls, ZoomRightControls as CompiledZoomRightControls, ZoomLevelIndicator as CompiledZoomLevelIndicator, HDIconGroupWrapper as CompiledHDIconGroupWrapper, ErrorMessageWrapper as CompiledErrorMessageWrapper, ErrorImage as CompiledErrorImage, Video as CompiledVideo, PDFWrapper as CompiledPDFWrapper, Arrow as CompiledArrow, LeftWrapper as CompiledLeftWrapper, RightWrapper as CompiledRightWrapper, Header as CompiledHeader, LeftHeader as CompiledLeftHeader, ImageWrapper as CompiledImageWrapper, BaselineExtend as CompiledBaselineExtend, Img as CompiledImg, MedatadataTextWrapper as CompiledMedatadataTextWrapper, MetadataWrapper as CompiledMetadataWrapper, MetadataFileName as CompiledMetadataFileName, MetadataSubText as CompiledMetadataSubText, MetadataIconWrapper as CompiledMetadataIconWrapper, RightHeader as CompiledRightHeader, CustomAudioPlayerWrapper as CompiledCustomAudioPlayerWrapper, AudioPlayer as CompiledAudioPlayer, Audio as CompiledAudio, AudioCover as CompiledAudioCover, DefaultCoverWrapper as CompiledDefaultCoverWrapper, DownloadButtonWrapper as CompiledDownloadButtonWrapper, CustomVideoPlayerWrapper as CompiledCustomVideoPlayerWrapper, SidebarWrapper as CompiledSidebarWrapper, SpinnerWrapper as CompiledSpinnerWrapper, FormattedMessageWrapper as CompiledFormattedMessageWrapper } from './styleWrappers-compiled';
+import "./styleWrappers.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+
+import { forwardRef, useMemo } from 'react';
+import { TouchScrollable } from 'react-scrolllock';
+import { useMergeRefs } from 'use-callback-ref';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
+const blanketStyles = null;
+const headerWrapperStyles = null;
+const archiveHeaderWrapperStyles = null;
+const listWrapperStyles = null;
+const closeButtonWrapperStyles = null;
+const contentWrapperStyles = null;
+const contentWrapperStyleWithSideBar = null;
+const zoomWrapperStyles = null;
+const zoomCenterControlsStyles = null;
+const zoomRightControlsStyles = null;
+const zoomLevelIndicatorStyles = null;
+const hdIconGroupWrapperStyles = null;
+const errorMessageWrapperStyles = null;
+const errorImageStyles = null;
+const videoStyles = null;
+const pdfWrapperStyles = null;
+const arrowStyles = null;
+const arrowWrapperStyles = null;
+const arrowsWrapperStyles = null;
+const leftWrapperStyles = null;
+const leftWrapperStylesWithSideBar = null;
+const rightWrapperStyles = null;
+const headerStyles = null;
+const headerStyleWithSideBar = null;
+const leftHeaderStyles = null;
+const imageWrapperStyles = null;
+const baselineExtendStyles = null;
+const imgStyles = null;
+const pixelatedImgStyles = null;
+const medatadataTextWrapperStyles = null;
+const metadataWrapperStyles = null;
+const metadataFileNameStyles = null;
+const metadataSubTextStyles = null;
+const metadataIconWrapperStyles = xcss({
+  paddingTop: 'space.050',
+  paddingRight: 'space.150'
+});
+const rightHeaderStyles = null;
+const customAudioPlayerWrapperStyles = null;
+const audioPlayerStyles = null;
+const audioStyles = null;
+const audioCoverStyles = null;
+const defaultCoverWrapperStyles = null;
+const downloadButtonWrapperStyles = null;
+const customVideoPlayerWrapperStyles = null;
+const sidebarWrapperStyles = null;
+const spinnerWrapperStyles = null;
+const formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
-export const Blanket = props => /*#__PURE__*/React.createElement(CompiledBlanket, props);
-export const HeaderWrapper = props => /*#__PURE__*/React.createElement(CompiledHeaderWrapper, props);
+export const Blanket = ({
+  'data-testid': datatestId,
+  className,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
+  className: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
+  role: "dialog",
+  "aria-modal": "true",
+  "aria-labelledby": "media.media-viewer.file.name"
+}, children);
+export const HeaderWrapper = ({
+  className,
+  children,
+  isArchiveSideBarVisible
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_11q75a80 _kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1uc6 _tzy41w01 _ouxlidpf _syaz1poe _k48p1wq8 _ca0q1ejb _n3td1ejb _19bv1ejb _u5f31ejb _vchhusvi _lcxvglyw _1pby3tda", isArchiveSideBarVisible && "_ouxl1klg", className])
+  }, children);
+};
 HeaderWrapper.displayName = 'HeaderWrapper';
-export const ListWrapper = props => /*#__PURE__*/React.createElement(CompiledListWrapper, props);
+export const ListWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+}, children);
 ListWrapper.displayName = 'ListWrapper';
-export const ArrowsWrapper = props => /*#__PURE__*/React.createElement(CompiledArrowsWrapper, props);
-export const CloseButtonWrapper = props => /*#__PURE__*/React.createElement(CompiledCloseButtonWrapper, props);
-export const ContentWrapper = props => /*#__PURE__*/React.createElement(CompiledContentWrapper, props);
-export const ZoomWrapper = props => /*#__PURE__*/React.createElement(CompiledZoomWrapper, props);
-export const ZoomCenterControls = props => /*#__PURE__*/React.createElement(CompiledZoomCenterControls, props);
-export const ZoomRightControls = props => /*#__PURE__*/React.createElement(CompiledZoomRightControls, props);
-export const ZoomLevelIndicator = props => /*#__PURE__*/React.createElement(CompiledZoomLevelIndicator, _extends({}, props, {
-  "data-testid": "zoom-level-indicator"
-}));
-export const HDIconGroupWrapper = props => /*#__PURE__*/React.createElement(CompiledHDIconGroupWrapper, props);
-export const ErrorMessageWrapper = props => /*#__PURE__*/React.createElement(CompiledErrorMessageWrapper, props);
-export const ErrorImage = props => /*#__PURE__*/React.createElement(CompiledErrorImage, props);
-export const Video = props => /*#__PURE__*/React.createElement(CompiledVideo, props);
-export const PDFWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(CompiledPDFWrapper, _extends({
-  ref: ref
-}, props)));
-export const Arrow = props => /*#__PURE__*/React.createElement(CompiledArrow, props);
-export const LeftWrapper = props => /*#__PURE__*/React.createElement(CompiledLeftWrapper, props);
-export const RightWrapper = props => /*#__PURE__*/React.createElement(CompiledRightWrapper, props);
+export const ArrowsWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  id: "media-viewer-navigation",
+  className: ax(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
+}, children);
+export const CloseButtonWrapper = ({
+  className,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
+}, children);
+export const ContentWrapper = ({
+  isSidebarVisible,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
+}, children);
+export const ZoomWrapper = ({
+  className,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0qymxu _n3td1yov _u5f31ejb _19bv1ejb", className])
+}, children);
+export const ZoomCenterControls = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
+}, children);
+export const ZoomRightControls = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
+}, children);
+export const ZoomLevelIndicator = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  "data-testid": "zoom-level-indicator",
+  className: ax(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
+}, children);
+export const HDIconGroupWrapper = ({
+  className,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
+}, children);
+export const ErrorMessageWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  className: ax(["_y3gn1h6o _syaz1poe _zcqx1osq"])
+}, children);
+export const ErrorImage = ({
+  src,
+  alt
+}) => /*#__PURE__*/React.createElement("img", {
+  alt: alt,
+  src: src,
+  className: ax(["_otyr1yov _uiztglyw"])
+});
+export const Video = ({
+  autoPlay,
+  controls,
+  src
+}) => /*#__PURE__*/React.createElement("video", {
+  autoPlay: autoPlay,
+  controls: controls,
+  src: src,
+  className: ax(["_1bsbauwl _4t3i1kxc"])
+});
+const PDFWrapperBody = /*#__PURE__*/forwardRef(({
+  innerRef,
+  'data-testid': datatestId,
+  children
+}, ref) => {
+  const bodyRef = useMergeRefs([ref, innerRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: bodyRef,
+    "data-testid": datatestId,
+    className: ax(["_1reo1wug _18m91wug _kqswstnw _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _1l1f1n9t"])
+  }, children);
+});
+export const PDFWrapper = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(PDFWrapperBody, _extends({
+    innerRef: ref
+  }, props)));
+});
+export const Arrow = ({
+  className,
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
+}, children);
+export const LeftWrapper = ({
+  children,
+  isArchiveSideBarVisible
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
+}, children);
+export const RightWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
+}, children);
 
 // header.tsx
 
-export const Header = props => /*#__PURE__*/React.createElement(CompiledHeader, props);
-export const LeftHeader = props => /*#__PURE__*/React.createElement(CompiledLeftHeader, props);
-export const ImageWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(CompiledImageWrapper, _extends({
-  ref: ref
-}, props)));
-export const BaselineExtend = () => /*#__PURE__*/React.createElement(CompiledBaselineExtend, null);
-export const Img = props => /*#__PURE__*/React.createElement(CompiledImg, props);
-export const MedatadataTextWrapper = props => /*#__PURE__*/React.createElement(CompiledMedatadataTextWrapper, props);
-export const MetadataWrapper = props => /*#__PURE__*/React.createElement(CompiledMetadataWrapper, props);
-export const MetadataFileName = props => /*#__PURE__*/React.createElement(CompiledMetadataFileName, props);
-export const MetadataSubText = props => /*#__PURE__*/React.createElement(CompiledMetadataSubText, props);
-export const MetadataIconWrapper = props => /*#__PURE__*/React.createElement(CompiledMetadataIconWrapper, props);
-export const RightHeader = props => /*#__PURE__*/React.createElement(CompiledRightHeader, props);
-export const CustomAudioPlayerWrapper = props => /*#__PURE__*/React.createElement(CompiledCustomAudioPlayerWrapper, props);
-export const AudioPlayer = props => /*#__PURE__*/React.createElement(CompiledAudioPlayer, props);
+export const Header = ({
+  children,
+  isArchiveSideBarVisible,
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+  className: ax(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
+}, children);
+export const LeftHeader = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
+}, children);
+export const ImageWrapper = /*#__PURE__*/forwardRef(({
+  children,
+  'data-testid': datatestId,
+  onClick,
+  style,
+  className
+}, ref) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  onClick: onClick,
+  ref: ref,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  style: style
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
+  className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+}, children));
+export const BaselineExtend = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
+});
+export const Img = ({
+  canDrag,
+  isDragging,
+  shouldPixelate,
+  'data-testid': datatestId,
+  src,
+  style,
+  onLoad,
+  onError,
+  onMouseDown,
+  alt,
+  className
+}) => {
+  const cursor = useMemo(() => {
+    if (canDrag && isDragging) {
+      return 'grabbing';
+    } else if (canDrag) {
+      return 'grab';
+    } else {
+      return 'auto';
+    }
+  }, [canDrag, isDragging]);
+  return /*#__PURE__*/React.createElement("img", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
+    alt: alt,
+    "data-testid": datatestId,
+    src: src
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      cursor,
+      ...style
+    },
+    onLoad: onLoad,
+    onError: onError,
+    onMouseDown: onMouseDown
+  });
+};
+export const MedatadataTextWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo15vq _18m915vq"])
+}, children);
+export const MetadataWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw"])
+}, children);
+export const MetadataFileName = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+}, /*#__PURE__*/React.createElement(Heading, {
+  as: "h1",
+  size: "medium",
+  id: "media.media-viewer.file.name",
+  testId: datatestId
+}, children));
+export const MetadataSubText = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
+}, children);
+export const MetadataIconWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: metadataIconWrapperStyles
+}, children);
+export const RightHeader = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
+}, children);
+export const CustomAudioPlayerWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
+}, children);
+export const AudioPlayer = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  className: ax(["_2rkofajl _1reo15vq _18m915vq _bfhk1tzm _4cvr1h6o _1bah1h6o _1bsb1kdj _4t3i1kdj _1e0c1txw _2lx21bp4 _kqswh2mm"])
+}, children);
 AudioPlayer.displayName = 'AudioPlayer';
-export const Audio = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(CompiledAudio, _extends({
-  ref: ref
-}, props)));
-export const AudioCover = props => /*#__PURE__*/React.createElement(CompiledAudioCover, props);
-export const DefaultCoverWrapper = props => /*#__PURE__*/React.createElement(CompiledDefaultCoverWrapper, props);
-export const DownloadButtonWrapper = props => /*#__PURE__*/React.createElement(CompiledDownloadButtonWrapper, props);
-export const CustomVideoPlayerWrapper = props => /*#__PURE__*/React.createElement(CompiledCustomVideoPlayerWrapper, props);
-export const SidebarWrapper = props => /*#__PURE__*/React.createElement(CompiledSidebarWrapper, props);
-export const SpinnerWrapper = props => /*#__PURE__*/React.createElement(CompiledSpinnerWrapper, props);
-export const FormattedMessageWrapper = props => /*#__PURE__*/React.createElement(CompiledFormattedMessageWrapper, props);
+export const Audio = /*#__PURE__*/forwardRef(({
+  autoPlay,
+  controls,
+  src,
+  preload
+}, ref) => /*#__PURE__*/React.createElement("audio", {
+  ref: ref,
+  autoPlay: autoPlay,
+  controls: controls,
+  src: src,
+  preload: preload,
+  className: ax(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
+}));
+export const AudioCover = ({
+  src,
+  alt
+}) => /*#__PURE__*/React.createElement("img", {
+  alt: alt,
+  src: src,
+  className: ax(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
+});
+export const DefaultCoverWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
+}, children);
+export const DownloadButtonWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
+}, children);
+export const CustomVideoPlayerWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  className: ax(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
+}, children);
+export const SidebarWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": datatestId,
+  className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhky0hh _syaz1vvf"])
+}, children);
+export const SpinnerWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
+}, children);
+export const FormattedMessageWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", null, children);

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

@@ -12,7 +12,6 @@ import AudioIcon from '@atlaskit/icon/core/migration/audio--media-services-audio
 import ErrorMessage from '../../errorMessage';
 import { BaseViewer } from '../base-viewer';
 import { InteractiveImg } from '../image/interactive-img';
-import { PDFRenderer } from '../doc/pdfRenderer';
 import { ArchiveItemViewerWrapper, ArchiveLayout, ArchiveViewerWrapper } from './styleWrappers';
 import ArchiveSidebarRenderer from './archive-sidebar-renderer';
 import { getMediaTypeFromFilename, getMimeTypeFromFilename, rejectAfter } from '../../utils';
@@ -26,6 +25,7 @@ import { createZipEntryLoadFailedEvent } from '../../analytics/events/operationa
 import { CodeViewRenderer } from '../codeViewer/codeViewerRenderer';
 import { DEFAULT_LANGUAGE } from '../codeViewer/util';
 import { MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER } from '../../item-viewer';
+import { NativePdfViewer } from './nativePdfViewer';
 export const getArchiveEntriesFromFileState = async (fileState, mediaClient, collectionName) => {
   const url = await mediaClient.file.getFileBinaryURL(fileState.id, collectionName);
   const reader = new HTTPRangeReader(url);
@@ -55,11 +55,15 @@ export class ArchiveViewerBase extends BaseViewer {
       });
       let src = '';
       let codeViewerSrc = '';
-      const isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, getMimeTypeFromFilename(selectedArchiveEntry.name));
+      const mimeType = getMimeTypeFromFilename(selectedArchiveEntry.name);
+      const isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, mimeType);
       if (!selectedArchiveEntry.isDirectory) {
         try {
           const blob = await rejectAfter(() => selectedArchiveEntry.blob(), 10000);
-          src = URL.createObjectURL(blob);
+          const blobWithMimeType = new Blob([blob], {
+            type: mimeType
+          });
+          src = URL.createObjectURL(blobWithMimeType);
           if (isCodeMimeType) {
             codeViewerSrc = await rejectAfter(() => blob.text());
           }
@@ -240,12 +244,13 @@ export class ArchiveViewerBase extends BaseViewer {
             onError: this.onViewerError('archiveviewer-audioviewer-onerror', selectedArchiveEntry)
           }))));
         case 'doc':
-          return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(PDFRenderer, {
-            item: item,
+          return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, {
+            fullHeight: true
+          }, /*#__PURE__*/React.createElement(NativePdfViewer, {
             src: src,
             onSuccess: this.onViewerLoad(selectedArchiveEntry),
             onError: this.onViewerError('archiveviewer-docviewer-onerror', selectedArchiveEntry)
-          }));
+          }, this.renderPreviewError(new ArchiveViewerError('archiveviewer-docviewer-onerror'), selectedArchiveEntry, false)));
         case 'archive':
           //BMPT-388 - Add illustration here, currently empty viewer
           return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null);
@@ -254,12 +259,14 @@ export class ArchiveViewerBase extends BaseViewer {
       }
     }
   }
-  renderPreviewError(error, entry) {
+  renderPreviewError(error, entry, shouldFireAnalytics = true) {
     const {
       item,
       createAnalyticsEvent
     } = this.props;
-    fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
+    if (shouldFireAnalytics) {
+      fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
+    }
     return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       fileId: item.id,
       fileState: item,

package/dist/es2019/viewers/archiveSidebar/nativePdfViewer.compiled.css

@@ -0,0 +1,3 @@
+._1bsb1osq{width:100%}
+._4t3i1osq{height:100%}
+._4t3i8ved{height:75px}