From 70c2e22f3511edbdb21df8cb87317df9fb09cde8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 30 Apr 2021 09:50:43 +0530
Subject: [PATCH 1/3] Enable user to zoom beyond image size and add cleanup
 functions to image view

Signed-off-by: Jaiwanth <jaiwanth2011@gmail.com>
---
 src/components/views/elements/ImageView.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index fcacae2d393..7279a3d1535 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -114,6 +114,8 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
+        window.removeEventListener("resize", this.calculateZoom);
+        this.image.current.removeEventListener("load", this.calculateZoom);
     }
 
     private calculateZoom = () => {
@@ -159,8 +161,8 @@ export default class ImageView extends React.Component<IProps, IState> {
             });
             return;
         }
-        if (newZoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
+        if (newZoom >= 2 * this.state.maxZoom) {
+            this.setState({zoom: 2 * this.state.maxZoom});
             return;
         }
 

From 96eea27044d9ca8d6b0be7989f596256afa8698b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 30 Apr 2021 12:16:46 +0530
Subject: [PATCH 2/3] Modify cursor icon and display zoom in and out buttons
 for smaller images

---
 src/components/views/elements/ImageView.tsx | 52 ++++++++++-----------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 7279a3d1535..b08cc5913de 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -152,7 +152,8 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private zoom(delta: number) {
         const newZoom = this.state.zoom + delta;
-
+        // Compute the maxZoom based on the image size
+        const maxZoom = this.state.maxZoom === this.state.minZoom ? 2 * this.state.maxZoom : this.state.maxZoom;
         if (newZoom <= this.state.minZoom) {
             this.setState({
                 zoom: this.state.minZoom,
@@ -161,8 +162,8 @@ export default class ImageView extends React.Component<IProps, IState> {
             });
             return;
         }
-        if (newZoom >= 2 * this.state.maxZoom) {
-            this.setState({zoom: 2 * this.state.maxZoom});
+        if (newZoom >= maxZoom) {
+            this.setState({zoom: maxZoom});
             return;
         }
 
@@ -248,9 +249,13 @@ export default class ImageView extends React.Component<IProps, IState> {
         // other button than the left one
         if (ev.button !== 0) return;
 
-        // Zoom in if we are completely zoomed out
+        // Zoom in if we are completely zoomed out and increase the zoom factor for images
+        // smaller than the viewport size
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({zoom: this.state.maxZoom === this.state.minZoom
+                ? 2 * this.state.maxZoom
+                : this.state.maxZoom,
+            });
             return;
         }
 
@@ -318,13 +323,9 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     render() {
         const showEventMeta = !!this.props.mxEvent;
-        const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
-
         let cursor;
         if (this.state.moving) {
             cursor= "grabbing";
-        } else if (zoomingDisabled) {
-            cursor = "default";
         } else if (this.state.zoom === this.state.minZoom) {
             cursor = "zoom-in";
         } else {
@@ -415,24 +416,21 @@ export default class ImageView extends React.Component<IProps, IState> {
             );
         }
 
-        let zoomOutButton;
-        let zoomInButton;
-        if (!zoomingDisabled) {
-            zoomOutButton = (
-                <AccessibleTooltipButton
-                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                    title={_t("Zoom out")}
-                    onClick={this.onZoomOutClick}>
-                </AccessibleTooltipButton>
-            );
-            zoomInButton = (
-                <AccessibleTooltipButton
-                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                    title={_t("Zoom in")}
-                    onClick={ this.onZoomInClick }>
-                </AccessibleTooltipButton>
-            );
-        }
+
+        const zoomOutButton = (
+            <AccessibleTooltipButton
+                className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                title={_t("Zoom out")}
+                onClick={this.onZoomOutClick}>
+            </AccessibleTooltipButton>
+        );
+        const zoomInButton = (
+            <AccessibleTooltipButton
+                className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                title={_t("Zoom in")}
+                onClick={ this.onZoomInClick }>
+            </AccessibleTooltipButton>
+        );
 
         return (
             <FocusLock

From 3001f2b684a58371396bbfb063761316bb67aee9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 9 Aug 2022 15:49:37 +0530
Subject: [PATCH 3/3] Fix indentation

---
 src/components/views/elements/ImageView.tsx | 24 ++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index cb9efa56ae5..ae5522aa1cc 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -518,19 +518,19 @@ export default class ImageView extends React.Component<IProps, IState> {
         }
 
         const zoomOutButton = (
-                <AccessibleTooltipButton
-                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                    title={_t("Zoom out")}
-                    onClick={this.onZoomOutClick}
-                />
-            );
+            <AccessibleTooltipButton
+                className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                title={_t("Zoom out")}
+                onClick={this.onZoomOutClick}
+            />
+        );
         const zoomInButton = (
-                <AccessibleTooltipButton
-                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                    title={_t("Zoom in")}
-                    onClick={this.onZoomInClick}
-                />
-            );
+            <AccessibleTooltipButton
+                className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                title={_t("Zoom in")}
+                onClick={this.onZoomInClick}
+            />
+        );
 
         let title: JSX.Element;
         if (this.props.mxEvent?.getContent()) {