From 42089403fd8a735c90b3d485e38093573dda2bae Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 4 May 2024 17:32:02 +0530
Subject: [PATCH] Account for processing in the timings

---
 web/apps/cast/src/pages/slideshow.tsx | 112 ++++++--------------------
 web/apps/cast/src/services/cast.ts    |  13 +++
 2 files changed, 36 insertions(+), 89 deletions(-)

diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 24f1bb4c57..bd3339b42b 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -16,101 +16,35 @@ export default function Slideshow() {
     const pair = () => router.push("/");
 
     useEffect(() => {
-        let urlGenerator: AsyncGenerator<[string, string], void>;
-        try {
-            urlGenerator = renderableImageURLs(readCastData());
-        } catch (e) {
-            log.error("Failed to prepare generator", e);
-            pair();
-        }
+        let stop = false;
 
-        advance(urlGenerator);
+        const loop = async () => {
+            try {
+                const urlGenerator = renderableImageURLs(readCastData());
+                while (!stop) {
+                    const { value: urls, done } = await urlGenerator.next();
+                    if (done) {
+                        log.warn("Empty collection");
+                        pair();
+                        return;
+                    }
 
-        const interval = window.setInterval(() => {
-            advance(urlGenerator);
-        }, 10000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    const advance = async (
-        urlGenerator: AsyncGenerator<[string, string], void>,
-    ) => {
-        try {
-            const { value: urls, done } = await urlGenerator.next();
-            if (done) {
-                log.warn("Empty collection");
+                    setImageURL(urls[0]);
+                    setNextImageURL(urls[1]);
+                    setLoading(false);
+                }
+            } catch (e) {
+                log.error("Failed to prepare generator", e);
                 pair();
-                return;
             }
+        };
 
-            setImageURL(urls[0]);
-            setNextImageURL(urls[1]);
-            setLoading(false);
-        } catch (e) {
-            log.error("Failed to generate image URL", e);
-            pair();
-        }
-    };
+        void loop();
 
-    /*
-    const showNextSlide = async () => {
-        try {
-            console.log("showNextSlide");
-            const currentIndex = collectionFiles.findIndex(
-                (file) => file.id === currentFileId,
-            );
-
-            console.log(
-                "showNextSlide-index",
-                currentIndex,
-                collectionFiles.length,
-            );
-
-            const nextIndex = (currentIndex + 1) % collectionFiles.length;
-            const nextNextIndex = (nextIndex + 1) % collectionFiles.length;
-
-            console.log(
-                "showNextSlide-nextIndex and nextNextIndex",
-                nextIndex,
-                nextNextIndex,
-            );
-
-            const nextFile = collectionFiles[nextIndex];
-            const nextNextFile = collectionFiles[nextNextIndex];
-
-            let nextURL: string;
-            try {
-                nextURL = await createRenderableURL(nextFile, castToken);
-            } catch (e) {
-                console.log("error in nextUrl", e);
-                return;
-            }
-
-            let nextNextURL: string;
-            try {
-                nextNextURL = await createRenderableURL(
-                    nextNextFile,
-                    castToken,
-                );
-            } catch (e) {
-                console.log("error in nextNextURL", e);
-                return;
-            }
-
-            setLoading(false);
-            setCurrentFileId(nextFile.id);
-            // TODO: These might be the same in case the album has < 3 files
-            // so commenting this out for now.
-            // if (currentFileURL) URL.revokeObjectURL(currentFileURL);
-            setCurrentFileURL(nextURL);
-            // if (nextFileURL) URL.revokeObjectURL(nextFileURL);
-            setNextFileURL(nextNextURL);
-        } catch (e) {
-            console.log("error in showNextSlide", e);
-        }
-    };
-    */
+        return () => {
+            stop = true;
+        };
+    }, []);
 
     if (loading) return <PairedSuccessfullyOverlay />;
 
diff --git a/web/apps/cast/src/services/cast.ts b/web/apps/cast/src/services/cast.ts
index 83e67b335d..4d01d0f2f7 100644
--- a/web/apps/cast/src/services/cast.ts
+++ b/web/apps/cast/src/services/cast.ts
@@ -9,6 +9,7 @@ import { CustomError, parseSharingErrorCodes } from "@ente/shared/error";
 import HTTPService from "@ente/shared/network/HTTPService";
 import { getCastFileURL, getEndpoint } from "@ente/shared/network/api";
 import localForage from "@ente/shared/storage/localForage";
+import { wait } from "@ente/shared/utils";
 import { detectMediaMIMEType } from "services/detect-type";
 import { Collection, CollectionPublicMagicMetadata } from "types/collection";
 import {
@@ -107,6 +108,13 @@ export const renderableImageURLs = async function* (castData: CastData) {
      */
     const urls: string[] = [""];
     let i = 0;
+    /**
+     * Time when we last yielded.
+     *
+     * We use this to keep an roughly periodic spacing between yields that
+     * accounts for the time we spend fetching and processing the images.
+     */
+    let lastYieldTime = Date.now();
 
     while (true) {
         const collection = await getCastCollection(castToken, collectionKey);
@@ -136,6 +144,11 @@ export const renderableImageURLs = async function* (castData: CastData) {
                 ensure(urls[0]),
                 ensure(urls[1]),
             ];
+
+            const elapsedTime = Date.now() - lastYieldTime;
+            if (elapsedTime < 10000) await wait(10000 - elapsedTime);
+
+            lastYieldTime = Date.now();
             yield urlPair;
         }