Image zoom rotate (#7425)

* [image file view] added a zoomer(enable users to zoom in/out the image)

* [image file view] added 'rotate'(rotate the image in counter-clockwise direction and save it)

* [image file view] fixup

* [image file view] keep the 'prev/next' icons displayed on top of the image which is zoomed in

* [image file view] improved the display of the 'image saved' tip

* [image file view] don't offer 'zoom in/out' & 'rotate' for images with errors

* [image file view] don't offer 'rotate' for PSD & HEIC files

* [image file view] enable HEIC files to be viewed online

frontend/src/components/file-view/image-zoomer.js

@@ -0,0 +1,63 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input } from 'reactstrap';
+import Icon from '../../components/icon';
+
+import '../../metadata/components/data-process-setter/gallery-slider-setter/index.css';
+
+const SCALE_OPTIONS = [0.25, 0.5, 1, 1.5, 2];
+const SCALE_MIN = SCALE_OPTIONS[0];
+const SCALE_MAX = SCALE_OPTIONS[SCALE_OPTIONS.length - 1];
+
+const ImageZoomer = ({ setImageScale }) => {
+
+  const [curScale, setScale] = useState(1);
+
+  const scaleImage = useCallback((scale) => {
+    setImageScale(scale);
+  }, [setImageScale]);
+
+  const changeScale = useCallback((e) => {
+    const scale = Number(e.target.value);
+    setScale(scale);
+    scaleImage(scale);
+  }, [scaleImage]);
+
+  const zoomIn = useCallback(() => {
+    const scale = SCALE_OPTIONS[SCALE_OPTIONS.indexOf(curScale) + 1];
+    setScale(scale);
+    scaleImage(scale);
+  }, [curScale, scaleImage]);
+
+  const zoomOut = useCallback(() => {
+    const scale = SCALE_OPTIONS[SCALE_OPTIONS.indexOf(curScale) - 1];
+    setScale(scale);
+    scaleImage(scale);
+  }, [curScale, scaleImage]);
+
+  return (
+    <div className='metadata-slider-container image-zoomer ml-0'>
+      <Button className="metadata-slider-icon-button" onClick={zoomOut} disabled={curScale == SCALE_MIN}>
+        <Icon symbol='minus_sign' className='metadata-slider-icon' />
+      </Button>
+      <Input
+        type="range"
+        min={SCALE_MIN}
+        max={SCALE_MAX}
+        step="any"
+        value={curScale}
+        onChange={changeScale}
+        className="metadata-slider"
+      />
+      <Button className="metadata-slider-icon-button" onClick={zoomIn} disabled={curScale == SCALE_MAX}>
+        <Icon symbol='plus_sign' className='metadata-slider-icon' />
+      </Button>
+    </div>
+  );
+};
+
+ImageZoomer.propTypes = {
+  setImageScale: PropTypes.func
+};
+
+export default ImageZoomer;