feat: add looping functionality to slideshow for seamless experience (#1100)

Co-authored-by: Rahul Harpal <51887323+rahulharpal1603@users.noreply.github.com>

Author: monu808

frontend/src/components/Media/MediaView.tsx

@@ -81,10 +81,18 @@ export function MediaView({
   const location = useLocation();
   const { toggleFavourite } = useToggleFav();
 
+  // Loop to first image handler for slideshow
+  const handleLoopToStart = useCallback(() => {
+    dispatch(setCurrentViewIndex(0));
+    handlers.resetZoom();
+  }, [dispatch, handlers]);
+
   // Slideshow functionality
   const { isSlideshowActive, toggleSlideshow } = useSlideshow(
     totalImages,
     handleNextImage,
+    handleLoopToStart,
+    currentViewIndex,
   );
 
   /** Opens the system file explorer at the current image's location. */

frontend/src/hooks/useSlideshow.ts

@@ -1,14 +1,28 @@
 import { useState, useEffect, useCallback } from 'react';
 
-export const useSlideshow = (totalImages: number, onNextImage: () => void) => {
+export const useSlideshow = (
+  totalImages: number,
+  onNextImage: () => void,
+  onLoopToStart?: () => void,
+  currentIndex?: number,
+) => {
   const [isSlideshowActive, setIsSlideshowActive] = useState(false);
 
   useEffect(() => {
     let slideshowInterval: NodeJS.Timeout | null = null;
 
     if (isSlideshowActive && totalImages > 1) {
       slideshowInterval = setInterval(() => {
-        onNextImage();
+        // Loop back to first image when at the end
+        if (
+          currentIndex !== undefined &&
+          onLoopToStart &&
+          currentIndex >= totalImages - 1
+        ) {
+          onLoopToStart();
+        } else {
+          onNextImage();
+        }
       }, 3000);
     }
 
@@ -17,7 +31,13 @@ export const useSlideshow = (totalImages: number, onNextImage: () => void) => {
         clearInterval(slideshowInterval);
       }
     };
-  }, [isSlideshowActive, totalImages, onNextImage]);
+  }, [
+    isSlideshowActive,
+    totalImages,
+    onNextImage,
+    onLoopToStart,
+    currentIndex,
+  ]);
 
   const toggleSlideshow = useCallback(() => {
     setIsSlideshowActive((prev) => !prev);