add check if is image element

src/script/components/ZoomableImage/ZoomableImage.tsx

@@ -21,6 +21,8 @@ import React, {HTMLProps, RefObject, useEffect, useRef, useState} from 'react';
 
 import {containerStyle, imageStyle} from './ZoomableImage.style';
 
+import {isHTMLImageElement} from '../../guards/HTMLElement';
+
 type Offset = {
   x: number;
   y: number;
@@ -54,12 +56,9 @@ function calculateMaxOffset(containerRef: RefObject<HTMLDivElement>, imgRef: Ref
 
   const containerRect = containerRef.current.getBoundingClientRect();
 
-  const maxXOffset = (containerRect.width - imgRef.current.naturalWidth) / 2;
-  const maxYOffset = (containerRect.height - imgRef.current.naturalHeight) / 2;
-
   return {
-    maxXOffset: maxXOffset,
-    maxYOffset: maxYOffset,
+    maxXOffset: (containerRect.width - imgRef.current.naturalWidth) / 2,
+    maxYOffset: (containerRect.height - imgRef.current.naturalHeight) / 2,
   };
 }
 
@@ -82,7 +81,11 @@ export const ZoomableImage = (props: ZoomableImageProps) => {
   const zoomScale = isZoomEnabled ? 1 : imageRatio;
 
   const handleMouseClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    const element = event.target as HTMLImageElement;
+    const element = event.target;
+
+    if (!isHTMLImageElement(element)) {
+      return;
+    }
 
     if (!canZoomImage && !isZoomEnabled) {
       return;

src/script/guards/HTMLElement.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export const isHTMLImageElement = (element: any): element is HTMLImageElement => element.nodeName === 'IMG';