@atlaskit/media-viewer 54.8.21 → 54.8.23

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

@@ -0,0 +1,292 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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';
+var clientRectangle = function clientRectangle(el) {
+  var clientWidth = el.clientWidth,
+    clientHeight = el.clientHeight;
+  return new Rectangle(clientWidth, clientHeight);
+};
+var naturalSizeRectangle = function naturalSizeRectangle(el) {
+  var naturalWidth = el.naturalWidth,
+    naturalHeight = el.naturalHeight;
+  return new Rectangle(naturalWidth, naturalHeight);
+};
+var initialState = {
+  zoomLevel: new ZoomLevel(1),
+  isHDActive: false,
+  isHDActivating: false,
+  isHDAvailable: false,
+  isDragging: false,
+  cursorPos: new Vector2(0, 0),
+  hasBeenLoadedOnce: false
+};
+export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
+  function InteractiveImgComponent() {
+    var _this;
+    _classCallCheck(this, InteractiveImgComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, InteractiveImgComponent, [].concat(args));
+    _defineProperty(_this, "state", initialState);
+    _defineProperty(_this, "saveWrapperRef", function (ref) {
+      return _this.wrapper = ref;
+    });
+    _defineProperty(_this, "onImageClicked", function (e) {
+      var _this$props = _this.props,
+        onClose = _this$props.onClose,
+        onBlanketClicked = _this$props.onBlanketClicked;
+      if (e.target === e.currentTarget && onBlanketClicked) {
+        onBlanketClicked();
+      }
+      closeOnDirectClick(onClose)(e);
+    });
+    _defineProperty(_this, "onImgLoad", function (ev) {
+      var _this$props2 = _this.props,
+        onLoad = _this$props2.onLoad,
+        originalBinaryImageSrc = _this$props2.originalBinaryImageSrc;
+      var _this$state = _this.state,
+        hasBeenLoadedOnce = _this$state.hasBeenLoadedOnce,
+        oldZoomLevel = _this$state.zoomLevel,
+        currentCamera = _this$state.camera;
+      var _this$state2 = _this.state,
+        isHDActivating = _this$state2.isHDActivating,
+        isHDAvailable = _this$state2.isHDAvailable,
+        isHDActive = _this$state2.isHDActive;
+      if (!_this.wrapper) {
+        return;
+      }
+      var viewport = clientRectangle(_this.wrapper);
+      var originalImgRect = naturalSizeRectangle(ev.currentTarget);
+      var camera = new Camera(viewport, originalImgRect);
+      var 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%)
+         */
+        var previousImageWidth = currentCamera.originalImg.width;
+        var 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: camera,
+        zoomLevel: newZoomLevel,
+        hasBeenLoadedOnce: true,
+        isHDActivating: isHDActivating,
+        isHDAvailable: isHDAvailable,
+        isHDActive: isHDActive
+      });
+    });
+    _defineProperty(_this, "onResize", function () {
+      var camera = _this.state.camera;
+      if (!_this.wrapper || !camera) {
+        return;
+      }
+      var oldZoomLevel = _this.state.zoomLevel;
+      var newViewport = clientRectangle(_this.wrapper);
+      var newCamera = camera.resizedViewport(newViewport);
+      var newZoomLevel = zoomLevelAfterResize(newCamera, camera, oldZoomLevel);
+      _this.setState({
+        camera: newCamera,
+        zoomLevel: newZoomLevel
+      });
+    });
+    _defineProperty(_this, "onZoomChange", function (nextZoomLevel) {
+      var camera = _this.state.camera;
+      var _this2 = _this,
+        wrapper = _this2.wrapper;
+      if (!wrapper || !camera) {
+        return;
+      }
+      var scrollLeft = wrapper.scrollLeft,
+        scrollTop = wrapper.scrollTop;
+      var prevOffset = new Vector2(scrollLeft, scrollTop);
+      var _this$state3 = _this.state,
+        prevZoomLevel = _this$state3.zoomLevel,
+        prevIsHDActive = _this$state3.isHDActive,
+        prevIsHDActivating = _this$state3.isHDActivating;
+      var isHDActive = prevIsHDActive || nextZoomLevel.value >= 1;
+      var isHDActivating = prevIsHDActivating || !prevIsHDActive && isHDActive;
+      _this.setState({
+        zoomLevel: nextZoomLevel,
+        isHDActive: isHDActive,
+        isHDActivating: isHDActivating
+      }, function () {
+        var _camera$scaledOffset = camera.scaledOffset(prevOffset, prevZoomLevel.value, nextZoomLevel.value),
+          x = _camera$scaledOffset.x,
+          y = _camera$scaledOffset.y;
+        wrapper.scrollLeft = x;
+        wrapper.scrollTop = y;
+      });
+    });
+    _defineProperty(_this, "startDragging", function (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", function (ev) {
+      ev.preventDefault();
+      _this.setState({
+        isDragging: false
+      });
+    });
+    _defineProperty(_this, "panImage", function (ev) {
+      if (_this.state.isDragging && _this.wrapper) {
+        var cursorPos = new Vector2(ev.screenX, ev.screenY);
+        var delta = _this.state.cursorPos.sub(cursorPos);
+        _this.setState({
+          cursorPos: cursorPos
+        });
+        _this.wrapper.scrollLeft += delta.x;
+        _this.wrapper.scrollTop += delta.y;
+      }
+    });
+    return _this;
+  }
+  _inherits(InteractiveImgComponent, _React$Component);
+  return _createClass(InteractiveImgComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.state = initialState;
+      window.addEventListener('resize', this.onResize);
+      document.addEventListener('mousemove', this.panImage);
+      document.addEventListener('mouseup', this.stopDragging);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.onResize);
+      document.removeEventListener('mousemove', this.panImage);
+      document.removeEventListener('mouseup', this.stopDragging);
+    }
+  }, {
+    key: "renderHDIndicator",
+    value: function renderHDIndicator() {
+      var _this$state4 = this.state,
+        isHDActivating = _this$state4.isHDActivating,
+        isHDAvailable = _this$state4.isHDAvailable,
+        isHDActive = _this$state4.isHDActive;
+      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"
+        }))
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        src = _this$props3.src,
+        originalBinaryImageSrc = _this$props3.originalBinaryImageSrc,
+        orientation = _this$props3.orientation,
+        onError = _this$props3.onError;
+      var _this$state5 = this.state,
+        zoomLevel = _this$state5.zoomLevel,
+        isHDAvailable = _this$state5.isHDAvailable,
+        isHDActive = _this$state5.isHDActive,
+        camera = _this$state5.camera,
+        isDragging = _this$state5.isDragging;
+      var canDrag = camera && zoomLevel.value > camera.scaleToFit || false;
+      // We use style attr instead of SC prop for perf reasons
+      var 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
+      var wrapperStyleOverride = camera ? {} : {
+        overflow: 'hidden'
+      };
+      if (orientation) {
+        imgStyle.transform = getCssFromImageOrientation(orientation);
+      }
+      var 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()));
+    }
+  }]);
+}(React.Component);

package/dist/esm/viewers/image/interactive-img.js

@@ -1,302 +1,7 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { Camera } from '@atlaskit/media-ui/camera/camera';
-import { getCssFromImageOrientation } from '@atlaskit/media-ui/imageMetaData/getCssFromImageOrientation';
-import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
-import { Rectangle } from '@atlaskit/media-ui/rectangle';
-import { Vector2 } from '@atlaskit/media-ui/vector2';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import { MAX_RESOLUTION } from '@atlaskit/media-client/constants';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
-import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
-import Spinner from '@atlaskit/spinner/spinner';
-import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
-import { ZoomLevel } from '../../domain/zoomLevel';
-import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
-import { ZoomControls } from '../../zoomControls';
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
-export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
-  var isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
-  var zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
-  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
-}
-var clientRectangle = function clientRectangle(el) {
-  var clientWidth = el.clientWidth,
-    clientHeight = el.clientHeight;
-  return new Rectangle(clientWidth, clientHeight);
-};
-var naturalSizeRectangle = function naturalSizeRectangle(el) {
-  var naturalWidth = el.naturalWidth,
-    naturalHeight = el.naturalHeight;
-  return new Rectangle(naturalWidth, naturalHeight);
-};
-var initialState = {
-  zoomLevel: new ZoomLevel(1),
-  isHDActive: false,
-  isHDActivating: false,
-  isHDAvailable: false,
-  isDragging: false,
-  cursorPos: new Vector2(0, 0),
-  hasBeenLoadedOnce: false
-};
-export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
-  function InteractiveImgComponent() {
-    var _this;
-    _classCallCheck(this, InteractiveImgComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, InteractiveImgComponent, [].concat(args));
-    _defineProperty(_this, "state", initialState);
-    _defineProperty(_this, "saveWrapperRef", function (ref) {
-      return _this.wrapper = ref;
-    });
-    _defineProperty(_this, "onImageClicked", function (e) {
-      var _this$props = _this.props,
-        onClose = _this$props.onClose,
-        onBlanketClicked = _this$props.onBlanketClicked;
-      if (e.target === e.currentTarget && onBlanketClicked) {
-        onBlanketClicked();
-      }
-      closeOnDirectClick(onClose)(e);
-    });
-    _defineProperty(_this, "onImgLoad", function (ev) {
-      var _this$props2 = _this.props,
-        onLoad = _this$props2.onLoad,
-        originalBinaryImageSrc = _this$props2.originalBinaryImageSrc;
-      var _this$state = _this.state,
-        hasBeenLoadedOnce = _this$state.hasBeenLoadedOnce,
-        oldZoomLevel = _this$state.zoomLevel,
-        currentCamera = _this$state.camera;
-      var _this$state2 = _this.state,
-        isHDActivating = _this$state2.isHDActivating,
-        isHDAvailable = _this$state2.isHDAvailable,
-        isHDActive = _this$state2.isHDActive;
-      if (!_this.wrapper) {
-        return;
-      }
-      var viewport = clientRectangle(_this.wrapper);
-      var originalImgRect = naturalSizeRectangle(ev.currentTarget);
-      var camera = new Camera(viewport, originalImgRect);
-      var 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%)
-         */
-        var previousImageWidth = currentCamera.originalImg.width;
-        var 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: camera,
-        zoomLevel: newZoomLevel,
-        hasBeenLoadedOnce: true,
-        isHDActivating: isHDActivating,
-        isHDAvailable: isHDAvailable,
-        isHDActive: isHDActive
-      });
-    });
-    _defineProperty(_this, "onResize", function () {
-      var camera = _this.state.camera;
-      if (!_this.wrapper || !camera) {
-        return;
-      }
-      var oldZoomLevel = _this.state.zoomLevel;
-      var newViewport = clientRectangle(_this.wrapper);
-      var newCamera = camera.resizedViewport(newViewport);
-      var newZoomLevel = zoomLevelAfterResize(newCamera, camera, oldZoomLevel);
-      _this.setState({
-        camera: newCamera,
-        zoomLevel: newZoomLevel
-      });
-    });
-    _defineProperty(_this, "onZoomChange", function (nextZoomLevel) {
-      var camera = _this.state.camera;
-      var _this2 = _this,
-        wrapper = _this2.wrapper;
-      if (!wrapper || !camera) {
-        return;
-      }
-      var scrollLeft = wrapper.scrollLeft,
-        scrollTop = wrapper.scrollTop;
-      var prevOffset = new Vector2(scrollLeft, scrollTop);
-      var _this$state3 = _this.state,
-        prevZoomLevel = _this$state3.zoomLevel,
-        prevIsHDActive = _this$state3.isHDActive,
-        prevIsHDActivating = _this$state3.isHDActivating;
-      var isHDActive = prevIsHDActive || nextZoomLevel.value >= 1;
-      var isHDActivating = prevIsHDActivating || !prevIsHDActive && isHDActive;
-      _this.setState({
-        zoomLevel: nextZoomLevel,
-        isHDActive: isHDActive,
-        isHDActivating: isHDActivating
-      }, function () {
-        var _camera$scaledOffset = camera.scaledOffset(prevOffset, prevZoomLevel.value, nextZoomLevel.value),
-          x = _camera$scaledOffset.x,
-          y = _camera$scaledOffset.y;
-        wrapper.scrollLeft = x;
-        wrapper.scrollTop = y;
-      });
-    });
-    _defineProperty(_this, "startDragging", function (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", function (ev) {
-      ev.preventDefault();
-      _this.setState({
-        isDragging: false
-      });
-    });
-    _defineProperty(_this, "panImage", function (ev) {
-      if (_this.state.isDragging && _this.wrapper) {
-        var cursorPos = new Vector2(ev.screenX, ev.screenY);
-        var delta = _this.state.cursorPos.sub(cursorPos);
-        _this.setState({
-          cursorPos: cursorPos
-        });
-        _this.wrapper.scrollLeft += delta.x;
-        _this.wrapper.scrollTop += delta.y;
-      }
-    });
-    return _this;
-  }
-  _inherits(InteractiveImgComponent, _React$Component);
-  return _createClass(InteractiveImgComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.state = initialState;
-      window.addEventListener('resize', this.onResize);
-      document.addEventListener('mousemove', this.panImage);
-      document.addEventListener('mouseup', this.stopDragging);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.onResize);
-      document.removeEventListener('mousemove', this.panImage);
-      document.removeEventListener('mouseup', this.stopDragging);
-    }
-  }, {
-    key: "renderHDIndicator",
-    value: function renderHDIndicator() {
-      var _this$state4 = this.state,
-        isHDActivating = _this$state4.isHDActivating,
-        isHDAvailable = _this$state4.isHDAvailable,
-        isHDActive = _this$state4.isHDActive;
-      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"
-        }))
-      );
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        src = _this$props3.src,
-        originalBinaryImageSrc = _this$props3.originalBinaryImageSrc,
-        orientation = _this$props3.orientation,
-        onError = _this$props3.onError;
-      var _this$state5 = this.state,
-        zoomLevel = _this$state5.zoomLevel,
-        isHDAvailable = _this$state5.isHDAvailable,
-        isHDActive = _this$state5.isHDActive,
-        camera = _this$state5.camera,
-        isDragging = _this$state5.isDragging;
-      var canDrag = camera && zoomLevel.value > camera.scaleToFit || false;
-      // We use style attr instead of SC prop for perf reasons
-      var 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
-      var wrapperStyleOverride = camera ? {} : {
-        overflow: 'hidden'
-      };
-      if (orientation) {
-        imgStyle.transform = getCssFromImageOrientation(orientation);
-      }
-      var 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()));
-    }
-  }]);
-}(React.Component);
+import { InteractiveImgComponent } from './interactive-img-component';
 export var InteractiveImg = withAnalyticsEvents({
   onBlanketClicked: function onBlanketClicked(createAnalyticsEvent) {
     var event = createAnalyticsEvent(createClosedEvent('blanket'));

package/dist/esm/viewers/image/zoom-level-after-resize.js

@@ -0,0 +1,6 @@
+import { ZoomLevel } from '../../domain/zoomLevel';
+export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
+  var isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
+  var zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
+  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
+}

package/dist/esm/viewers/svg/clientRectangle.js

@@ -0,0 +1,6 @@
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+export var clientRectangle = function clientRectangle(el) {
+  var clientWidth = el.clientWidth,
+    clientHeight = el.clientHeight;
+  return new Rectangle(clientWidth, clientHeight);
+};

package/dist/esm/viewers/svg/index.js

@@ -1,20 +1,22 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useIntl } from 'react-intl';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import MediaSvg from '@atlaskit/media-svg/media-svg';
 import { Camera } from '@atlaskit/media-ui/camera/camera';
 import { messages } from '@atlaskit/media-ui/messages';
 import { Vector2 } from '@atlaskit/media-ui/vector2';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { BaselineExtend } from '../../styleWrappers';
+import { MediaViewerError } from '../../MediaViewerError';
+import { createClosedEvent } from '../../analytics/events/ui/closed';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { BaselineExtend } from '../../styleWrappers';
 import { ZoomControls } from '../../zoomControls';
-import { createClosedEvent } from '../../analytics/events/ui/closed';
-import MediaSvg from '@atlaskit/media-svg/media-svg';
-import { MediaViewerError } from '../../errors';
-import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
 import { ImageWrapper } from './ImageWrapper';
+import { clientRectangle } from './clientRectangle';
 import { getErrorReason } from './errors';
-import { useIntl } from 'react-intl';
+import { naturalSizeRectangle } from './naturalSizeRectangle';
+import { zoomLevelAfterResize } from './zoomLevelAfterResize';
 var SvgViewerBase = function SvgViewerBase(_ref) {
   var identifier = _ref.identifier,
     onLoad = _ref.onLoad,

package/dist/esm/viewers/svg/naturalSizeRectangle.js

@@ -0,0 +1,10 @@
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+export var naturalSizeRectangle = function naturalSizeRectangle(el) {
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  var naturalWidth = el.naturalWidth,
+    naturalHeight = el.naturalHeight,
+    width = el.width,
+    height = el.height;
+  return new Rectangle(naturalWidth || width, naturalHeight || height);
+};

package/dist/esm/viewers/svg/zoomLevelAfterResize.js

@@ -0,0 +1,6 @@
+import { ZoomLevel } from '../../domain/zoomLevel';
+export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
+  var isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
+  var zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
+  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
+}