@atlaskit/media-viewer 54.8.21 → 54.8.23

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

@@ -0,0 +1,170 @@
+/* DocViewer.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./DocViewer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useReducer } from 'react';
+import { isCommonMediaClientError } from '@atlaskit/media-client';
+import { useStaticCallback } from '@atlaskit/media-common';
+import { isExcelFile } from '@atlaskit/media-common/mediaTypeUtils';
+import { DocumentViewer } from '@atlaskit/media-document-viewer/document-viewer';
+import { DOCUMENT_SCROLL_ROOT_ID } from '@atlaskit/media-document-viewer/get-document-root';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import Spinner from '@atlaskit/spinner/spinner';
+import { MediaViewerError } from '../../MediaViewerError';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { ZoomControls } from '../../zoomControls';
+import { PasswordInput } from './passwordInput';
+const initialState = {
+  isMissingPassword: false,
+  hasPasswordError: false,
+  password: '',
+  zoomLevel: new ZoomLevel(1.75),
+  isLoading: true
+};
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'submit_password':
+      return {
+        ...state,
+        password: action.password
+      };
+    case 'set_zoom_level':
+      return {
+        ...state,
+        zoomLevel: action.zoomLevel
+      };
+    case 'password_validation_failed':
+      return {
+        ...state,
+        hasPasswordError: true
+      };
+    case 'password_validation_succeeded':
+      return {
+        ...state,
+        isMissingPassword: false,
+        hasPasswordError: false
+      };
+    case 'content_fetch_failed_password_required':
+      return {
+        ...state,
+        isMissingPassword: true
+      };
+    case 'loading_completed':
+      return {
+        ...state,
+        isLoading: false
+      };
+    default:
+      return state;
+  }
+};
+const documentViewerStyles = null;
+const spinnerStyles = null;
+export const DocViewer = ({
+  mediaClient,
+  fileState,
+  collectionName,
+  onError,
+  onSuccess,
+  traceContext
+}) => {
+  var _fileState$mimeType;
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Compute enableLazyPageRendering based on Excel file detection and feature gate
+  // Excel files are found to have 60K pages, because excel can have thousand of empty rows, JST-1296681
+  const isExcel = fileState.status !== 'error' && isExcelFile((_fileState$mimeType = fileState.mimeType) !== null && _fileState$mimeType !== void 0 ? _fileState$mimeType : '');
+  const enableLazyPageRendering = isExcel && fg('platform_media_excel_lazy_load');
+  const getContent = useStaticCallback(async (pageStart, pageEnd) => {
+    try {
+      return await mediaClient.mediaStore.getDocumentContent(fileState.id, {
+        pageStart,
+        pageEnd,
+        collectionName,
+        password: state.password
+      }, traceContext);
+    } catch (error) {
+      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
+        dispatch({
+          type: 'content_fetch_failed_password_required'
+        });
+      } else {
+        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
+      }
+      throw error;
+    }
+  });
+  const onPasswordSubmit = useStaticCallback(async data => {
+    dispatch({
+      type: 'submit_password',
+      password: data.password
+    });
+    try {
+      // checking if the password is correct currently requires content fetch but we may have a faster enpoint for this in the future
+      await mediaClient.mediaStore.getDocumentContent(fileState.id, {
+        pageStart: 0,
+        pageEnd: 1,
+        collectionName,
+        password: data.password
+      }, traceContext);
+      dispatch({
+        type: 'password_validation_succeeded'
+      });
+    } catch (error) {
+      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
+        dispatch({
+          type: 'password_validation_failed'
+        });
+      } else {
+        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
+      }
+    }
+  });
+  const getPageImageUrl = useStaticCallback(async (pageNumber, zoom) => {
+    const src = await mediaClient.mediaStore.getDocumentPageImage(fileState.id, {
+      page: pageNumber,
+      zoom,
+      collectionName,
+      password: state.password
+    }, traceContext);
+    return URL.createObjectURL(src);
+  });
+  const onSuccessHandler = useStaticCallback(() => {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+  });
+  const onZoomChange = useStaticCallback(newZoomLevel => {
+    dispatch({
+      type: 'set_zoom_level',
+      zoomLevel: newZoomLevel
+    });
+  });
+  if (state.isMissingPassword) {
+    return /*#__PURE__*/React.createElement(PasswordInput, {
+      onSubmit: onPasswordSubmit,
+      hasPasswordError: state.hasPasswordError
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
+    id: DOCUMENT_SCROLL_ROOT_ID,
+    className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
+  }, /*#__PURE__*/React.createElement(DocumentViewer, {
+    getContent: getContent,
+    getPageImageUrl: getPageImageUrl,
+    zoom: state.zoomLevel.value,
+    onSuccess: onSuccessHandler,
+    enableLazyPageRendering: enableLazyPageRendering
+  }), /*#__PURE__*/React.createElement(ZoomControls, {
+    onChange: onZoomChange,
+    zoomLevel: state.zoomLevel
+  })));
+};

package/dist/es2019/viewers/doc/doc-viewer.js

@@ -1,171 +1,7 @@
-/* doc-viewer.tsx generated by @compiled/babel-plugin v3.0.1 */
-import "./doc-viewer.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useReducer } from 'react';
-import { isCommonMediaClientError } from '@atlaskit/media-client';
-import { DOCUMENT_SCROLL_ROOT_ID } from '@atlaskit/media-document-viewer/get-document-root';
-import { DocumentViewer } from '@atlaskit/media-document-viewer/document-viewer';
-import { useStaticCallback } from '@atlaskit/media-common';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { MediaViewerError } from '../../errors';
-import { ZoomControls } from '../../zoomControls';
-import { ZoomLevel } from '../../domain/zoomLevel';
-import { PasswordInput } from './passwordInput';
-import Spinner from '@atlaskit/spinner/spinner';
-import { isExcelFile } from '@atlaskit/media-common/mediaTypeUtils';
-const initialState = {
-  isMissingPassword: false,
-  hasPasswordError: false,
-  password: '',
-  zoomLevel: new ZoomLevel(1.75),
-  isLoading: true
-};
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'submit_password':
-      return {
-        ...state,
-        password: action.password
-      };
-    case 'set_zoom_level':
-      return {
-        ...state,
-        zoomLevel: action.zoomLevel
-      };
-    case 'password_validation_failed':
-      return {
-        ...state,
-        hasPasswordError: true
-      };
-    case 'password_validation_succeeded':
-      return {
-        ...state,
-        isMissingPassword: false,
-        hasPasswordError: false
-      };
-    case 'content_fetch_failed_password_required':
-      return {
-        ...state,
-        isMissingPassword: true
-      };
-    case 'loading_completed':
-      return {
-        ...state,
-        isLoading: false
-      };
-    default:
-      return state;
-  }
-};
-const documentViewerStyles = null;
-const spinnerStyles = null;
-export const DocViewer = ({
-  mediaClient,
-  fileState,
-  collectionName,
-  onError,
-  onSuccess,
-  traceContext
-}) => {
-  var _fileState$mimeType;
-  const [state, dispatch] = useReducer(reducer, initialState);
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // Compute enableLazyPageRendering based on Excel file detection and feature gate
-  // Excel files are found to have 60K pages, because excel can have thousand of empty rows, JST-1296681
-  const isExcel = fileState.status !== 'error' && isExcelFile((_fileState$mimeType = fileState.mimeType) !== null && _fileState$mimeType !== void 0 ? _fileState$mimeType : '');
-  const enableLazyPageRendering = isExcel && fg('platform_media_excel_lazy_load');
-  const getContent = useStaticCallback(async (pageStart, pageEnd) => {
-    try {
-      return await mediaClient.mediaStore.getDocumentContent(fileState.id, {
-        pageStart,
-        pageEnd,
-        collectionName,
-        password: state.password
-      }, traceContext);
-    } catch (error) {
-      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
-        dispatch({
-          type: 'content_fetch_failed_password_required'
-        });
-      } else {
-        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
-      }
-      throw error;
-    }
-  });
-  const onPasswordSubmit = useStaticCallback(async data => {
-    dispatch({
-      type: 'submit_password',
-      password: data.password
-    });
-    try {
-      // checking if the password is correct currently requires content fetch but we may have a faster enpoint for this in the future
-      await mediaClient.mediaStore.getDocumentContent(fileState.id, {
-        pageStart: 0,
-        pageEnd: 1,
-        collectionName,
-        password: data.password
-      }, traceContext);
-      dispatch({
-        type: 'password_validation_succeeded'
-      });
-    } catch (error) {
-      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
-        dispatch({
-          type: 'password_validation_failed'
-        });
-      } else {
-        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
-      }
-    }
-  });
-  const getPageImageUrl = useStaticCallback(async (pageNumber, zoom) => {
-    const src = await mediaClient.mediaStore.getDocumentPageImage(fileState.id, {
-      page: pageNumber,
-      zoom,
-      collectionName,
-      password: state.password
-    }, traceContext);
-    return URL.createObjectURL(src);
-  });
-  const onSuccessHandler = useStaticCallback(() => {
-    dispatch({
-      type: 'loading_completed'
-    });
-    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
-  });
-  const onZoomChange = useStaticCallback(newZoomLevel => {
-    dispatch({
-      type: 'set_zoom_level',
-      zoomLevel: newZoomLevel
-    });
-  });
-  if (state.isMissingPassword) {
-    return /*#__PURE__*/React.createElement(PasswordInput, {
-      onSubmit: onPasswordSubmit,
-      hasPasswordError: state.hasPasswordError
-    });
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
-    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    size: "large",
-    appearance: "invert"
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      opacity: state.isLoading ? 0 : 1
-    },
-    id: DOCUMENT_SCROLL_ROOT_ID,
-    className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
-  }, /*#__PURE__*/React.createElement(DocumentViewer, {
-    getContent: getContent,
-    getPageImageUrl: getPageImageUrl,
-    zoom: state.zoomLevel.value,
-    onSuccess: onSuccessHandler,
-    enableLazyPageRendering: enableLazyPageRendering
-  }), /*#__PURE__*/React.createElement(ZoomControls, {
-    onChange: onZoomChange,
-    zoomLevel: state.zoomLevel
-  })));
-};
+import { DocViewer } from './DocViewer';
 export default DocViewer;

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

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { Outcome } from '../../domain';
-import { BaseViewer } from '../base-viewer';
-import { ZoomLevel } from '../../domain/zoomLevel';
-import { DocViewer as DocViewerComponent } from './doc-viewer';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Outcome } from '../../domain/outcome';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { BaseViewer } from '../base-viewer';
+import { DocViewer as DocViewerComponent } from './DocViewer';
 export class DocViewer extends BaseViewer {
   constructor(...args) {
     super(...args);

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

@@ -4,10 +4,11 @@ import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui/imageMetaData/getOrientation';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { Outcome } from '../../domain';
-import { buildImgErrorDiagnostics, MediaViewerError } from '../../errors';
-import { InteractiveImg } from './interactive-img';
+import { MediaViewerError } from '../../MediaViewerError';
+import { buildImgErrorDiagnostics } from '../../buildImgErrorDiagnostics';
+import { Outcome } from '../../domain/outcome';
 import { BaseViewer } from '../base-viewer';
+import { InteractiveImg } from './interactive-img';
 function processedFileStateToMediaItem(file) {
   return {
     type: 'file',

package/dist/es2019/viewers/image/interactive-img-component.js

@@ -0,0 +1,287 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
+import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
+import { MAX_RESOLUTION } from '@atlaskit/media-client/constants';
+import { Camera } from '@atlaskit/media-ui/camera/camera';
+import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
+import { getCssFromImageOrientation } from '@atlaskit/media-ui/imageMetaData/getCssFromImageOrientation';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
+import Spinner from '@atlaskit/spinner/spinner';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
+import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
+import { ZoomControls } from '../../zoomControls';
+import { zoomLevelAfterResize } from './zoom-level-after-resize';
+const clientRectangle = el => {
+  const {
+    clientWidth,
+    clientHeight
+  } = el;
+  return new Rectangle(clientWidth, clientHeight);
+};
+const naturalSizeRectangle = el => {
+  const {
+    naturalWidth,
+    naturalHeight
+  } = el;
+  return new Rectangle(naturalWidth, naturalHeight);
+};
+const initialState = {
+  zoomLevel: new ZoomLevel(1),
+  isHDActive: false,
+  isHDActivating: false,
+  isHDAvailable: false,
+  isDragging: false,
+  cursorPos: new Vector2(0, 0),
+  hasBeenLoadedOnce: false
+};
+export class InteractiveImgComponent extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", initialState);
+    _defineProperty(this, "saveWrapperRef", ref => this.wrapper = ref);
+    _defineProperty(this, "onImageClicked", e => {
+      const {
+        onClose,
+        onBlanketClicked
+      } = this.props;
+      if (e.target === e.currentTarget && onBlanketClicked) {
+        onBlanketClicked();
+      }
+      closeOnDirectClick(onClose)(e);
+    });
+    _defineProperty(this, "onImgLoad", ev => {
+      const {
+        onLoad,
+        originalBinaryImageSrc
+      } = this.props;
+      const {
+        hasBeenLoadedOnce,
+        zoomLevel: oldZoomLevel,
+        camera: currentCamera
+      } = this.state;
+      let {
+        isHDActivating,
+        isHDAvailable,
+        isHDActive
+      } = this.state;
+      if (!this.wrapper) {
+        return;
+      }
+      const viewport = clientRectangle(this.wrapper);
+      const originalImgRect = naturalSizeRectangle(ev.currentTarget);
+      const camera = new Camera(viewport, originalImgRect);
+      let newZoomLevel;
+      if (hasBeenLoadedOnce && currentCamera) {
+        /* This is not first time image is loading. Likely due to new (HD) image is loaded.
+         * In order to keep new image on the same perceived zoom level we need to scale.
+         * It depends on ration between old and new images and current zoom level.
+         * For example:
+         * - old image is 2000px with zoom at 50% (0.5). New image is 4000px. 2000/4000 * 0.5 = 0.25 (25%)
+         * - old image is 2000px with zoom at 200% (2). New image is 4000px. 2000/4000 * 2 = 1 (100%)
+         */
+        const previousImageWidth = currentCamera.originalImg.width;
+        const newImageWidth = originalImgRect.width;
+        newZoomLevel = new ZoomLevel(previousImageWidth / newImageWidth * oldZoomLevel.value);
+        isHDActivating = false;
+      } else {
+        newZoomLevel = new ZoomLevel(camera.scaleDownToFit);
+
+        // If initial (non-HD) image is equal to MAX resolution -
+        // this means most likely original image had higher res (because non-HD is downsized and caped off with MAX res)
+        isHDAvailable = !!originalBinaryImageSrc && (originalImgRect.width === MAX_RESOLUTION || originalImgRect.height === MAX_RESOLUTION);
+
+        // Automatically activate HD on first load if zoom level is already 100% or bigger
+        isHDActive = newZoomLevel.value >= 1;
+        if (onLoad) {
+          // Call onLoad only once on initial image render
+          onLoad();
+        }
+      }
+      this.setState({
+        camera,
+        zoomLevel: newZoomLevel,
+        hasBeenLoadedOnce: true,
+        isHDActivating,
+        isHDAvailable,
+        isHDActive
+      });
+    });
+    _defineProperty(this, "onResize", () => {
+      const {
+        camera
+      } = this.state;
+      if (!this.wrapper || !camera) {
+        return;
+      }
+      const oldZoomLevel = this.state.zoomLevel;
+      const newViewport = clientRectangle(this.wrapper);
+      const newCamera = camera.resizedViewport(newViewport);
+      const newZoomLevel = zoomLevelAfterResize(newCamera, camera, oldZoomLevel);
+      this.setState({
+        camera: newCamera,
+        zoomLevel: newZoomLevel
+      });
+    });
+    _defineProperty(this, "onZoomChange", nextZoomLevel => {
+      const {
+        camera
+      } = this.state;
+      const {
+        wrapper
+      } = this;
+      if (!wrapper || !camera) {
+        return;
+      }
+      const {
+        scrollLeft,
+        scrollTop
+      } = wrapper;
+      const prevOffset = new Vector2(scrollLeft, scrollTop);
+      const {
+        zoomLevel: prevZoomLevel,
+        isHDActive: prevIsHDActive,
+        isHDActivating: prevIsHDActivating
+      } = this.state;
+      const isHDActive = prevIsHDActive || nextZoomLevel.value >= 1;
+      const isHDActivating = prevIsHDActivating || !prevIsHDActive && isHDActive;
+      this.setState({
+        zoomLevel: nextZoomLevel,
+        isHDActive,
+        isHDActivating
+      }, () => {
+        const {
+          x,
+          y
+        } = camera.scaledOffset(prevOffset, prevZoomLevel.value, nextZoomLevel.value);
+        wrapper.scrollLeft = x;
+        wrapper.scrollTop = y;
+      });
+    });
+    _defineProperty(this, "startDragging", ev => {
+      // stopping propagation to prevent media viewer from closing
+      // when clicking on the image
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.setState({
+        isDragging: true,
+        cursorPos: new Vector2(ev.screenX, ev.screenY)
+      });
+    });
+    _defineProperty(this, "stopDragging", ev => {
+      ev.preventDefault();
+      this.setState({
+        isDragging: false
+      });
+    });
+    _defineProperty(this, "panImage", ev => {
+      if (this.state.isDragging && this.wrapper) {
+        const cursorPos = new Vector2(ev.screenX, ev.screenY);
+        const delta = this.state.cursorPos.sub(cursorPos);
+        this.setState({
+          cursorPos
+        });
+        this.wrapper.scrollLeft += delta.x;
+        this.wrapper.scrollTop += delta.y;
+      }
+    });
+  }
+  componentDidMount() {
+    this.state = initialState;
+    window.addEventListener('resize', this.onResize);
+    document.addEventListener('mousemove', this.panImage);
+    document.addEventListener('mouseup', this.stopDragging);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+    document.removeEventListener('mousemove', this.panImage);
+    document.removeEventListener('mouseup', this.stopDragging);
+  }
+  renderHDIndicator() {
+    const {
+      isHDActivating,
+      isHDAvailable,
+      isHDActive
+    } = this.state;
+    if (!isHDAvailable) {
+      return null;
+    }
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(HDIconGroupWrapper, {
+        className: hideControlsClassName
+      }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
+        appearance: "invert"
+      }) : undefined, isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
+        label: "hd active"
+      }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
+        label: "hd"
+      }))
+    );
+  }
+  render() {
+    const {
+      src,
+      originalBinaryImageSrc,
+      orientation,
+      onError
+    } = this.props;
+    const {
+      zoomLevel,
+      isHDAvailable,
+      isHDActive,
+      camera,
+      isDragging
+    } = this.state;
+    const canDrag = camera && zoomLevel.value > camera.scaleToFit || false;
+    // We use style attr instead of SC prop for perf reasons
+    const imgStyle = camera && camera.scaledImg(zoomLevel.value) || {
+      visibility: 'hidden'
+    };
+    // When image loads it does two things at the same time 1) it renders itself in the browser 2) triggers onLoad
+    // visibility: 'hidden' is here to prevent image rendering on the screen (with 100%) before next
+    // react re-render when we have `camera` and can control it's zoom level.
+    // overflow: 'hidden' is here to prevent scroll going wild while image is rendered in visibility: 'hidden'
+    // We can't use display: none or not render image, because we do need `onLoad` to trigger and read it's dimensions
+    const wrapperStyleOverride = camera ? {} : {
+      overflow: 'hidden'
+    };
+    if (orientation) {
+      imgStyle.transform = getCssFromImageOrientation(orientation);
+    }
+    const srcToDisplay = isHDAvailable && isHDActive && originalBinaryImageSrc ? originalBinaryImageSrc : src;
+    return /*#__PURE__*/React.createElement(ImageWrapper, {
+      "data-testid": "media-viewer-image-content",
+      onClick: this.onImageClicked,
+      ref: this.saveWrapperRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: wrapperStyleOverride
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "media-viewer-image-content"
+    }, /*#__PURE__*/React.createElement(Img, {
+      "data-testid": "media-viewer-image",
+      canDrag: canDrag,
+      isDragging: isDragging,
+      src: srcToDisplay,
+      alt: this.props.alt
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: imgStyle,
+      onLoad: this.onImgLoad,
+      onError: onError,
+      onMouseDown: this.startDragging,
+      shouldPixelate: zoomLevel.value > 1
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "media-viewer-image"
+    }), /*#__PURE__*/React.createElement(BaselineExtend, null), /*#__PURE__*/React.createElement(ZoomControls, {
+      zoomLevel: zoomLevel,
+      onChange: this.onZoomChange
+    }, this.renderHDIndicator()));
+  }
+}