feat: add image zoom options (#984)

app/assets/javascripts/Components/Files/FilePreviewModal.tsx

@@ -10,6 +10,7 @@ import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
 import { isFileTypePreviewable } from './isFilePreviewable'
+import { PreviewComponent } from './PreviewComponent'
 
 type Props = {
   application: WebApplication
@@ -17,22 +18,6 @@ type Props = {
   onDismiss: () => void
 }
 
-const getPreviewComponentForFile = (file: SNFile, objectUrl: string) => {
-  if (file.mimeType.startsWith('image/')) {
-    return <img src={objectUrl} />
-  }
-
-  if (file.mimeType.startsWith('video/')) {
-    return <video className="w-full h-full" src={objectUrl} controls />
-  }
-
-  if (file.mimeType.startsWith('audio/')) {
-    return <audio src={objectUrl} controls />
-  }
-
-  return <object className="w-full h-full" data={objectUrl} />
-}
-
 export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
@@ -132,9 +117,9 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
           </div>
         </div>
         <div className="flex flex-grow min-h-0 overflow-auto">
-          <div className="flex flex-grow items-center justify-center">
+          <div className="flex flex-grow items-center justify-center relative">
             {objectUrl ? (
-              getPreviewComponentForFile(file, objectUrl)
+              <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : isLoadingFile ? (
               <div className="sk-spinner w-5 h-5 spinner-info"></div>
             ) : (

app/assets/javascripts/Components/Files/ImagePreview.tsx

@@ -0,0 +1,64 @@
+import { IconType } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { IconButton } from '../Button/IconButton'
+
+type Props = {
+  objectUrl: string
+}
+
+export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
+  const initialImgHeightRef = useRef<number>()
+
+  const [imageZoomPercent, setImageZoomPercent] = useState(100)
+  const [imageHeight, setImageHeight] = useState(initialImgHeightRef.current)
+
+  useEffect(() => {
+    if (initialImgHeightRef.current) {
+      setImageHeight(imageZoomPercent * (initialImgHeightRef.current / 100))
+    }
+  }, [imageZoomPercent])
+
+  return (
+    <div className="flex items-center justify-center w-full h-full overflow-auto">
+      <img
+        src={objectUrl}
+        height={imageHeight}
+        ref={(imgElement) => {
+          if (!initialImgHeightRef.current) {
+            initialImgHeightRef.current = imgElement?.height
+          }
+        }}
+      />
+      <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
+        <span className="mr-1.5">Zoom:</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon="add"
+          title="Zoom In"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => percent + 10)
+          }}
+        />
+        <span className="mx-2">{imageZoomPercent}%</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon={'subtract' as IconType}
+          title="Zoom Out"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => {
+              const newPercent = percent - 10
+              if (newPercent >= 10) {
+                return newPercent
+              } else {
+                return percent
+              }
+            })
+          }}
+        />
+      </div>
+    </div>
+  )
+}

app/assets/javascripts/Components/Files/PreviewComponent.tsx

@@ -0,0 +1,24 @@
+import { SNFile } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { ImagePreview } from './ImagePreview'
+
+type Props = {
+  file: SNFile
+  objectUrl: string
+}
+
+export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
+  if (file.mimeType.startsWith('image/')) {
+    return <ImagePreview objectUrl={objectUrl} />
+  }
+
+  if (file.mimeType.startsWith('video/')) {
+    return <video className="w-full h-full" src={objectUrl} controls />
+  }
+
+  if (file.mimeType.startsWith('audio/')) {
+    return <audio src={objectUrl} controls />
+  }
+
+  return <object className="w-full h-full" data={objectUrl} />
+}