Not better not worse

web/apps/cast/src/components/PhotoAuditorium.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 interface PhotoAuditoriumProps {
     url: string;
@@ -10,41 +10,15 @@ export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
     nextSlideUrl,
     showNextSlide,
 }) => {
-    const [showPreloadedNextSlide, setShowPreloadedNextSlide] = useState(false);
-    const [nextSlidePrerendered, setNextSlidePrerendered] = useState(false);
-    const [prerenderTime, setPrerenderTime] = useState<number | null>(null);
-
     useEffect(() => {
-        let timeout: NodeJS.Timeout;
-        let timeout2: NodeJS.Timeout;
-
-        if (nextSlidePrerendered) {
-            const elapsedTime = prerenderTime ? Date.now() - prerenderTime : 0;
-            const delayTime = Math.max(10000 - elapsedTime, 0);
-
-            if (elapsedTime >= 10000) {
-                setShowPreloadedNextSlide(true);
-            } else {
-                timeout = setTimeout(() => {
-                    setShowPreloadedNextSlide(true);
-                }, delayTime);
-            }
-
-            if (showNextSlide) {
-                timeout2 = setTimeout(() => {
-                    showNextSlide();
-                    setNextSlidePrerendered(false);
-                    setPrerenderTime(null);
-                    setShowPreloadedNextSlide(false);
-                }, delayTime);
-            }
-        }
+        const timeoutId = window.setTimeout(() => {
+            showNextSlide();
+        }, 10000);
 
         return () => {
-            if (timeout) clearTimeout(timeout);
-            if (timeout2) clearTimeout(timeout2);
+            if (timeoutId) clearTimeout(timeoutId);
         };
-    }, [nextSlidePrerendered, showNextSlide, prerenderTime]);
+    }, [showNextSlide]);
 
     return (
         <div
@@ -70,23 +44,18 @@ export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
                 }}
             >
                 <img
-                    src={url}
+                    src={nextSlideUrl}
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100%",
-                        display: showPreloadedNextSlide ? "none" : "block",
+                        display: "none",
                     }}
                 />
                 <img
-                    src={nextSlideUrl}
+                    src={url}
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100%",
-                        display: showPreloadedNextSlide ? "block" : "none",
-                    }}
-                    onLoad={() => {
-                        setNextSlidePrerendered(true);
-                        setPrerenderTime(Date.now());
                     }}
                 />
             </div>

web/apps/cast/src/pages/slideshow.tsx

@@ -24,7 +24,6 @@ export default function Slideshow() {
     const [collectionFiles, setCollectionFiles] = useState<EnteFile[]>([]);
     const [currentFileId, setCurrentFileId] = useState<number | undefined>();
     const [currentFileURL, setCurrentFileURL] = useState<string | undefined>();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [nextFileURL, setNextFileURL] = useState<string | undefined>();
 
     const router = useRouter();
@@ -158,7 +157,7 @@ export default function Slideshow() {
     return (
         <PhotoAuditorium
             url={currentFileURL}
-            nextSlideUrl={currentFileURL}
+            nextSlideUrl={nextFileURL}
             showNextSlide={showNextSlide}
         />
     );