From b8d30410358966c10ce5d9ca7c6a9873ae59937e Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 12:52:32 -0400
Subject: [PATCH] feat(DirectorySlideshow): enhance slideshow controls with
 persistent pause state and improved index handling

---
 src/app/components/DirectorySlideshow.tsx | 40 ++++++++++++++---------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/app/components/DirectorySlideshow.tsx b/src/app/components/DirectorySlideshow.tsx
index b7ba68d..daecf09 100644
--- a/src/app/components/DirectorySlideshow.tsx
+++ b/src/app/components/DirectorySlideshow.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function DirectorySlideshow({ path }: Props) {
   const [images, setImages]   = useState<EntryInfo[]>([]);
   const [idx, setIdx]         = useState(0);
-  const [paused, setPaused]   = useState(false);
+  const [paused, setPaused]   = useState(() => localStorage.getItem('slideshow.paused') === '1');
   const [touched, setTouched] = useState(false);
   const touchTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
@@ -24,7 +24,8 @@ export default function DirectorySlideshow({ path }: Props) {
           return IMAGE_EXTS.has(ext);
         });
         setImages(imgs);
-        setIdx(0);
+        const saved = parseInt(localStorage.getItem(`slideshow.idx:${path}`) ?? '0', 10);
+        setIdx(imgs.length > 0 ? Math.min(saved, imgs.length - 1) : 0);
       })
       .catch(() => setImages([]));
   }, [path]);
@@ -35,6 +36,11 @@ export default function DirectorySlideshow({ path }: Props) {
     return () => clearInterval(t);
   }, [images.length, paused]);
 
+  useEffect(() => {
+    if (images.length === 0) return;
+    localStorage.setItem(`slideshow.idx:${path}`, String(idx));
+  }, [idx, path, images.length]);
+
   useEffect(() => () => clearTimeout(touchTimer.current), []);
 
   if (images.length === 0) return null;
@@ -73,23 +79,25 @@ export default function DirectorySlideshow({ path }: Props) {
               </button>
             </div>
 
-            {/* Dots + pause */}
-            <div className={`absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 transition-opacity duration-200 ${controlsVisible}`}>
+            {/* Pause / play — centered */}
+            <div className={`absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-200 ${controlsVisible}`}>
               <button
-                onClick={() => setPaused(p => !p)}
-                className="p-0.5 rounded-full bg-black/50 text-white hover:bg-black/70"
+                onClick={() => setPaused(p => { const next = !p; localStorage.setItem('slideshow.paused', next ? '1' : '0'); return next; })}
+                className="pointer-events-auto p-3 rounded-full bg-black/50 text-white hover:bg-black/70"
               >
-                {paused ? <Play className="w-3 h-3" /> : <Pause className="w-3 h-3" />}
+                {paused ? <Play className="w-7 h-7" /> : <Pause className="w-7 h-7" />}
               </button>
-              <div className="flex gap-1.5">
-                {images.map((_, i) => (
-                  <button
-                    key={i}
-                    onClick={() => setIdx(i)}
-                    className={`w-1.5 h-1.5 rounded-full transition-colors ${i === idx ? 'bg-white' : 'bg-white/40'}`}
-                  />
-                ))}
-              </div>
+            </div>
+
+            {/* Dots */}
+            <div className={`absolute bottom-0 left-0 right-0 flex justify-center gap-1.5 py-1.5 transition-opacity duration-200 ${controlsVisible}`}>
+              {images.map((_, i) => (
+                <button
+                  key={i}
+                  onClick={() => setIdx(i)}
+                  className={`w-1.5 h-1.5 rounded-full transition-colors ${i === idx ? 'bg-white' : 'bg-white/40'}`}
+                />
+              ))}
             </div>
           </>
         )}