feat: Tested scroll mode change

src/components/GridView/ScrollImage.tsx

@@ -8,9 +8,18 @@ interface ScrollImageProps {
   index: number;
   currentImage: number | undefined;
   setCurrentImage: React.Dispatch<React.SetStateAction<number | undefined>>;
+  transitionOngoing: boolean;
+  setTransitionOngoing: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImageProps) => {
+const ScrollImage = ({
+  image,
+  currentImage,
+  setCurrentImage,
+  index,
+  setTransitionOngoing,
+  transitionOngoing,
+}: ScrollImageProps) => {
   const isMobile = typeof screen.orientation !== 'undefined';
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -39,7 +48,8 @@ const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImag
   };
 
   useEffect(() => {
-    if (isVisible) {
+    if (!transitionOngoing && isVisible) {
+      setTransitionOngoing(true);
       setCurrentImage(index);
 
       if (mediaIsVideo) {

src/components/GridView/ScrollView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo,  useState } from 'react';
 import { NostrImage, urlFix } from '../nostrImageDownload';
 import { Settings } from '../../utils/useNav';
 import AuthorProfile from '../AuthorProfile';
@@ -7,6 +7,8 @@ import useProfile from '../../utils/useProfile';
 import ScrollImage from './ScrollImage';
 import { ViewMode } from '../SlideShow';
 
+type NostrImageWithIndex = NostrImage & { index: number };
+
 type ScrollViewProps = {
   settings: Settings;
   images: NostrImage[];
@@ -16,11 +18,33 @@ type ScrollViewProps = {
 };
 
 const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMode }: ScrollViewProps) => {
+  const [transitionOngoing, setTransitionOngoing] = useState(false);
+
+  useEffect(() => {
+    if (setTransitionOngoing) {
+      setTimeout(() => {
+        setTransitionOngoing(false);
+      }, 500);
+    }
+  }, [transitionOngoing]);
+
   const sortedImages = useMemo(
     () => images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
     [images] // settings is not used here, but we need to include it to trigger a re-render when it changes
   );
 
+  const nearImages = useMemo(() => {
+    const result: NostrImageWithIndex[] = [];
+    const pos = Math.max(0, (currentImage || 0) - 2);
+    console.log(currentImage, pos);
+
+    for (let i = pos; i < sortedImages.length && i < pos + 5; i++) {
+      result.push({ ...sortedImages[i], index: i });
+    }
+    console.log(result);
+    return result;
+  }, [sortedImages, currentImage]);
+
   useEffect(() => {
     if (currentImage) {
       console.log('setting hash to #sc' + currentImage);
@@ -40,14 +64,16 @@ const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMo
       <Helmet>
         <title>{title}</title>
       </Helmet>
-
-      {sortedImages.map((image, idx) => (
+      {transitionOngoing && <div style={{position: 'fixed', left: '1em', top: '1em', zIndex: 1000}}>TO</div>}
+      {nearImages.map(image => (
         <ScrollImage
           key={image.url}
           image={image}
-          index={idx}
+          index={image.index}
           currentImage={currentImage}
           setCurrentImage={setCurrentImage}
+          transitionOngoing={transitionOngoing}
+          setTransitionOngoing={setTransitionOngoing}
         ></ScrollImage>
       ))}
 

src/components/SlideShow.tsx

@@ -79,7 +79,7 @@ const SlideShow = () => {
   const [state, setState] = useGlobalState();
   const { autoLogin, setAutoLogin } = useAutoLogin();
   const currentSubId = useRef('1');
-  const [currentImage, setCurrentImage] = useState<number | undefined>();
+  const [currentImage, setCurrentImage] = useState<number | undefined>(0);
 
   useEffect(() => {
     const fetch = () => {