Merge pull request #1295 from VanshajPoonia/fix/1293-production-zoom-scroll

Fix production zoom scroll behavior

Author: rohan-pandeyy

frontend/src/components/Media/ImageViewer.tsx

@@ -18,11 +18,15 @@ export const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>(
   ({ imagePath, alt, rotation, resetSignal }, ref) => {
     const zoomableImageRef = useRef<ZoomableImageRef>(null);
 
-    useImperativeHandle(ref, () => ({
-      zoomIn: () => zoomableImageRef.current?.zoomIn(),
-      zoomOut: () => zoomableImageRef.current?.zoomOut(),
-      reset: () => zoomableImageRef.current?.reset(),
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn: () => zoomableImageRef.current?.zoomIn(),
+        zoomOut: () => zoomableImageRef.current?.zoomOut(),
+        reset: () => zoomableImageRef.current?.reset(),
+      }),
+      [],
+    );
 
     return (
       <ZoomableImage
@@ -35,3 +39,5 @@ export const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>(
     );
   },
 );
+
+ImageViewer.displayName = 'ImageViewer';

frontend/src/components/Media/MediaThumbnails.tsx

@@ -1,5 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import {
+  PLACEHOLDER_IMAGE_SRC,
+  handlePlaceholderImageError,
+} from '@/utils/imageFallback';
 
 interface MediaThumbnailsProps {
   images: Array<{
@@ -117,14 +121,10 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
             } cursor-pointer transition-all duration-200 hover:scale-105`}
           >
             <img
-              src={convertFileSrc(image.thumbnailPath) || '/placeholder.svg'}
+              src={convertFileSrc(image.thumbnailPath) || PLACEHOLDER_IMAGE_SRC}
               alt={`thumbnail-${index}`}
               className="h-full w-full object-cover"
-              onError={(e) => {
-                const img = e.target as HTMLImageElement;
-                img.onerror = null;
-                img.src = '/placeholder.svg';
-              }}
+              onError={handlePlaceholderImageError}
             />
           </div>
         ))}

frontend/src/components/Media/MediaView.tsx

@@ -51,20 +51,25 @@ export function MediaView({
 
   // Custom hooks
   const { viewState, handlers } = useImageViewControls();
+  const resetViewerState = useCallback(() => {
+    handlers.resetZoom();
+    setResetSignal((s) => s + 1);
+  }, [handlers]);
+
   // Navigation handlers
   const handleNextImage = useCallback(() => {
     if (currentViewIndex < images.length - 1) {
       dispatch(setCurrentViewIndex(currentViewIndex + 1));
-      handlers.resetZoom();
+      resetViewerState();
     }
-  }, [dispatch, handlers, currentViewIndex, images.length]);
+  }, [dispatch, resetViewerState, currentViewIndex, images.length]);
 
   const handlePreviousImage = useCallback(() => {
     if (currentViewIndex > 0) {
       dispatch(setCurrentViewIndex(currentViewIndex - 1));
-      handlers.resetZoom();
+      resetViewerState();
     }
-  }, [dispatch, handlers, currentViewIndex]);
+  }, [dispatch, resetViewerState, currentViewIndex]);
 
   const handleClose = useCallback(() => {
     dispatch(closeImageView());
@@ -74,9 +79,9 @@ export function MediaView({
   const handleThumbnailClick = useCallback(
     (index: number) => {
       dispatch(setCurrentViewIndex(index));
-      handlers.resetZoom();
+      resetViewerState();
     },
-    [dispatch, handlers],
+    [dispatch, resetViewerState],
   );
 
   const location = useLocation();
@@ -85,8 +90,8 @@ export function MediaView({
   // Loop to first image handler for slideshow
   const handleLoopToStart = useCallback(() => {
     dispatch(setCurrentViewIndex(0));
-    handlers.resetZoom();
-  }, [dispatch, handlers]);
+    resetViewerState();
+  }, [dispatch, resetViewerState]);
 
   // Slideshow functionality
   const { isSlideshowActive, toggleSlideshow } = useSlideshow(
@@ -142,9 +147,8 @@ export function MediaView({
 
   const handleResetZoom = useCallback(() => {
     imageViewerRef.current?.reset();
-    handlers.resetZoom();
-    setResetSignal((s) => s + 1);
-  }, [handlers]);
+    resetViewerState();
+  }, [resetViewerState]);
 
   // Keyboard navigation
   useKeyboardNavigation({
@@ -164,6 +168,7 @@ export function MediaView({
 
   // Safe variables
   const currentImagePath = currentImage.path;
+  const currentImageKey = currentImage.id || currentImage.path;
   // console.log(currentImage);
   const currentImageAlt = `image-${currentViewIndex}`;
   return (
@@ -190,6 +195,7 @@ export function MediaView({
       >
         {type === 'image' && (
           <ImageViewer
+            key={currentImageKey}
             ref={imageViewerRef}
             imagePath={currentImagePath}
             alt={currentImageAlt}