Rearrange

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

@@ -1,27 +1,17 @@
-import { useEffect } from "react";
-
-interface PhotoAuditoriumProps {
+interface SlideViewProps {
+    /** The URL of the image to show. */
     url: string;
-    nextSlideUrl: string;
-    showNextSlide: () => void;
+    /** The URL of the next image that we will transition to. */
+    nextURL: string;
 }
-export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
-    url,
-    nextSlideUrl,
-    showNextSlide,
-}) => {
-    useEffect(() => {
-        console.log("showing slide");
-        const timeoutId = window.setTimeout(() => {
-            console.log("showing next slide  timer");
-            showNextSlide();
-        }, 10000);
-
-        return () => {
-            if (timeoutId) clearTimeout(timeoutId);
-        };
-    }, []);
 
+/**
+ * Show the image at {@link url} in a full screen view.
+ *
+ * Also show {@link nextURL} in an hidden image view to prepare the browser for
+ * an imminent transition to it.
+ */
+export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
     return (
         <div
             style={{
@@ -46,7 +36,7 @@ export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
                 }}
             >
                 <img
-                    src={nextSlideUrl}
+                    src={nextURL}
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100%",

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

@@ -3,7 +3,7 @@ import { isNonWebImageFileExtension } from "@/media/formats";
 import { nameAndExtension } from "@/next/file";
 import log from "@/next/log";
 import PairedSuccessfullyOverlay from "components/PairedSuccessfullyOverlay";
-import { PhotoAuditorium } from "components/PhotoAuditorium";
+import { SlideView } from "components/Slide";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import {
@@ -181,13 +181,21 @@ export default function Slideshow() {
         }
     };
 
+    useEffect(() => {
+        if (loading) return;
+
+        console.log("showing slide");
+        const timeoutId = window.setTimeout(() => {
+            console.log("showing next slide  timer");
+            showNextSlide();
+        }, 10000);
+
+        return () => {
+            if (timeoutId) clearTimeout(timeoutId);
+        };
+    }, [loading]);
+
     if (loading) return <PairedSuccessfullyOverlay />;
 
-    return (
-        <PhotoAuditorium
-            url={currentFileURL}
-            nextSlideUrl={nextFileURL}
-            showNextSlide={showNextSlide}
-        />
-    );
+    return <SlideView url={currentFileURL} nextURL={nextFileURL} />;
 }