From 5e73257b71cc53098ac8c69dff086943825e1206 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 16:15:57 +0530
Subject: [PATCH 01/14] debug

---
 web/apps/cast/src/components/Slide.tsx |  6 +++---
 web/apps/cast/src/services/cast.ts     | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/apps/cast/src/components/Slide.tsx b/web/apps/cast/src/components/Slide.tsx
index 8309f8bc2c..4df36c4c1d 100644
--- a/web/apps/cast/src/components/Slide.tsx
+++ b/web/apps/cast/src/components/Slide.tsx
@@ -11,7 +11,7 @@ interface SlideViewProps {
  * 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 }) => {
+export const SlideView: React.FC<SlideViewProps> = ({ url }) => {
     return (
         <div
             style={{
@@ -35,14 +35,14 @@ export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
                     backdropFilter: "blur(10px)",
                 }}
             >
-                <img
+                {/* <img
                     src={nextURL}
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100%",
                         display: "none",
                     }}
-                />
+                /> */}
                 <img
                     src={url}
                     style={{
diff --git a/web/apps/cast/src/services/cast.ts b/web/apps/cast/src/services/cast.ts
index 8cb99c2416..a33c749f51 100644
--- a/web/apps/cast/src/services/cast.ts
+++ b/web/apps/cast/src/services/cast.ts
@@ -120,6 +120,7 @@ export const renderableImageURLs = async function* (castData: CastData) {
 
             if (!isFileEligibleForCast(file)) continue;
 
+            console.log("will start createRenderableURL", new Date());
             try {
                 urls.push(await createRenderableURL(castToken, file));
                 haveEligibleFiles = true;
@@ -128,6 +129,8 @@ export const renderableImageURLs = async function* (castData: CastData) {
                 continue;
             }
 
+            console.log("did end createRenderableURL", new Date());
+
             // Need at least a pair.
             //
             // There are two scenarios:
@@ -137,7 +140,7 @@ export const renderableImageURLs = async function* (castData: CastData) {
             // - Subsequently, urls will have the "next" / "preloaded" URL left
             //   over from the last time. We'll promote that to being the one
             //   that'll get displayed, and preload another one.
-            if (urls.length < 2) continue;
+            // if (urls.length < 2) continue;
 
             // The last element of previousURLs is the URL that is currently
             // being shown on screen.
@@ -150,15 +153,17 @@ export const renderableImageURLs = async function* (castData: CastData) {
             // The URL that'll now get displayed on screen.
             const url = ensure(urls.shift());
             // The URL that we're preloading for next time around.
-            const nextURL = ensure(urls[0]);
+            const nextURL = ""; //ensure(urls[0]);
 
             previousURLs.push(url);
 
             const urlPair: RenderableImageURLPair = [url, nextURL];
 
             const elapsedTime = Date.now() - lastYieldTime;
-            if (elapsedTime > 0 && elapsedTime < slideDuration)
+            if (elapsedTime > 0 && elapsedTime < slideDuration) {
+                console.log("waiting", slideDuration - elapsedTime);
                 await wait(slideDuration - elapsedTime);
+            }
 
             lastYieldTime = Date.now();
             yield urlPair;

From f45902e290187c99731782b18456313b86f9ec9e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 16:30:34 +0530
Subject: [PATCH 02/14] Try without the workaround

---
 web/apps/cast/src/services/pair.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/apps/cast/src/services/pair.ts b/web/apps/cast/src/services/pair.ts
index 0364cf4916..e7318e4395 100644
--- a/web/apps/cast/src/services/pair.ts
+++ b/web/apps/cast/src/services/pair.ts
@@ -119,10 +119,10 @@ export const advertiseCode = (
     // We don't use the media features of the Cast SDK.
     options.skipPlayersLoad = true;
     // TODO:Is this required? The docs say "(The default type of a message bus
-    // is JSON; if not provided here)."
-    options.customNamespaces = Object.assign({});
-    options.customNamespaces[namespace] =
-        cast.framework.system.MessageType.JSON;
+    // // is JSON; if not provided here)."
+    // options.customNamespaces = Object.assign({});
+    // options.customNamespaces[namespace] =
+    //     cast.framework.system.MessageType.JSON;
     // Do not stop the casting if the receiver is unreachable. A user should be
     // able to start a cast on their phone and then put it away, leaving the
     // cast running on their big screen.

From 83a84295ba954e7ba3c0dc0c91e702287fe81698 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 16:35:31 +0530
Subject: [PATCH 03/14] Fix the condition

---
 web/apps/cast/src/services/cast.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/apps/cast/src/services/cast.ts b/web/apps/cast/src/services/cast.ts
index a33c749f51..38f203db24 100644
--- a/web/apps/cast/src/services/cast.ts
+++ b/web/apps/cast/src/services/cast.ts
@@ -103,10 +103,10 @@ export const renderableImageURLs = async function* (castData: CastData) {
      */
     let lastYieldTime = Date.now();
 
-    // The first time around advance the lastYieldTime into the future so that
+    // The first time around regress the lastYieldTime into the past so that
     // we don't wait around too long for the first slide (we do want to wait a
     // bit, for the user to see the checkmark animation as reassurance).
-    lastYieldTime += 7500; /* 7.5 s */
+    lastYieldTime -= slideDuration - 2500; /* wait at most 2.5 s */
 
     while (true) {
         const encryptedFiles = shuffled(

From ff25971611c328622f7804c6071fd09a8cb9044a Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:13:03 +0530
Subject: [PATCH 04/14] Clear TODO

---
 web/apps/cast/src/services/pair.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/apps/cast/src/services/pair.ts b/web/apps/cast/src/services/pair.ts
index e7318e4395..893681d32b 100644
--- a/web/apps/cast/src/services/pair.ts
+++ b/web/apps/cast/src/services/pair.ts
@@ -118,11 +118,6 @@ export const advertiseCode = (
     const options = new cast.framework.CastReceiverOptions();
     // We don't use the media features of the Cast SDK.
     options.skipPlayersLoad = true;
-    // TODO:Is this required? The docs say "(The default type of a message bus
-    // // is JSON; if not provided here)."
-    // options.customNamespaces = Object.assign({});
-    // options.customNamespaces[namespace] =
-    //     cast.framework.system.MessageType.JSON;
     // Do not stop the casting if the receiver is unreachable. A user should be
     // able to start a cast on their phone and then put it away, leaving the
     // cast running on their big screen.

From 079bdbd4cda776e65e14d78042eff1a7c0760022 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:19:20 +0530
Subject: [PATCH 05/14] styled

---
 .../src/components/PairedSuccessfullyOverlay.tsx   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx b/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
index 88f4d7c1fc..3e5cd582b0 100644
--- a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
+++ b/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
@@ -1,3 +1,4 @@
+import { styled } from "@mui/material";
 import { FilledCircleCheck } from "./FilledCircleCheck";
 
 export const PairedSuccessfullyOverlay: React.FC = () => {
@@ -44,3 +45,16 @@ export const PairedSuccessfullyOverlay: React.FC = () => {
         </div>
     );
 };
+
+export const PairingSuccessful_ = styled("div")`
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    background-color: black;
+`;

From 5e1fdd656512ed7bc2e5a8159635a33c08fcca44 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:22:27 +0530
Subject: [PATCH 06/14] Use

---
 ...ssfullyOverlay.tsx => PairingComplete.tsx} | 29 ++++---------------
 web/apps/cast/src/pages/slideshow.tsx         |  4 +--
 2 files changed, 7 insertions(+), 26 deletions(-)
 rename web/apps/cast/src/components/{PairedSuccessfullyOverlay.tsx => PairingComplete.tsx} (59%)

diff --git a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx b/web/apps/cast/src/components/PairingComplete.tsx
similarity index 59%
rename from web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
rename to web/apps/cast/src/components/PairingComplete.tsx
index 3e5cd582b0..3d56ace853 100644
--- a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
+++ b/web/apps/cast/src/components/PairingComplete.tsx
@@ -1,22 +1,9 @@
 import { styled } from "@mui/material";
 import { FilledCircleCheck } from "./FilledCircleCheck";
 
-export const PairedSuccessfullyOverlay: React.FC = () => {
+export const PairingComplete: React.FC = () => {
     return (
-        <div
-            style={{
-                position: "fixed",
-                top: 0,
-                right: 0,
-                height: "100%",
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                zIndex: 100,
-                backgroundColor: "black",
-            }}
-        >
+        <PairingComplete_>
             <div
                 style={{
                     display: "flex",
@@ -42,19 +29,13 @@ export const PairedSuccessfullyOverlay: React.FC = () => {
                     <br /> This should only take a few seconds.
                 </p>
             </div>
-        </div>
+        </PairingComplete_>
     );
 };
 
-export const PairingSuccessful_ = styled("div")`
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
+const PairingComplete_ = styled("div")`
     display: flex;
+    min-height: 100svh;
     justify-content: center;
     align-items: center;
-    z-index: 100;
-    background-color: black;
 `;
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 98426a8579..50317dca87 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -1,5 +1,5 @@
 import log from "@/next/log";
-import { PairedSuccessfullyOverlay } from "components/PairedSuccessfullyOverlay";
+import { PairingComplete } from "components/PairingComplete";
 import { SlideView } from "components/Slide";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -48,7 +48,7 @@ export default function Slideshow() {
 
     console.log("Rendering slideshow", { loading, imageURL, nextImageURL });
 
-    if (loading) return <PairedSuccessfullyOverlay />;
+    if (loading) return <PairingComplete />;
 
     return <SlideView url={imageURL} nextURL={nextImageURL} />;
 }

From 1e5f5ff506dbcab6ff2a1cabbbf9619d39334161 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:26:31 +0530
Subject: [PATCH 07/14] Convert

---
 .../cast/src/components/PairingComplete.tsx   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/web/apps/cast/src/components/PairingComplete.tsx b/web/apps/cast/src/components/PairingComplete.tsx
index 3d56ace853..6681ccb648 100644
--- a/web/apps/cast/src/components/PairingComplete.tsx
+++ b/web/apps/cast/src/components/PairingComplete.tsx
@@ -4,31 +4,14 @@ import { FilledCircleCheck } from "./FilledCircleCheck";
 export const PairingComplete: React.FC = () => {
     return (
         <PairingComplete_>
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    flexDirection: "column",
-                    textAlign: "center",
-                }}
-            >
+            <Items>
                 <FilledCircleCheck />
-                <h2
-                    style={{
-                        marginBottom: 0,
-                    }}
-                >
-                    Pairing Complete
-                </h2>
-                <p
-                    style={{
-                        lineHeight: "1.5rem",
-                    }}
-                >
+                <h2>Pairing Complete</h2>
+                <p>
                     We're preparing your album.
                     <br /> This should only take a few seconds.
                 </p>
-            </div>
+            </Items>
         </PairingComplete_>
     );
 };
@@ -38,4 +21,17 @@ const PairingComplete_ = styled("div")`
     min-height: 100svh;
     justify-content: center;
     align-items: center;
+
+    line-height: 1.5rem;
+
+    h2 {
+        margin-block-end: 0;
+    }
+`;
+
+const Items = styled("div")`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 `;

From 39bf379788edf166bfefe36e4fa1ffab924ae410 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:27:52 +0530
Subject: [PATCH 08/14] Uncomment TODO leftover

---
 web/apps/cast/src/components/Slide.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/apps/cast/src/components/Slide.tsx b/web/apps/cast/src/components/Slide.tsx
index 4df36c4c1d..8309f8bc2c 100644
--- a/web/apps/cast/src/components/Slide.tsx
+++ b/web/apps/cast/src/components/Slide.tsx
@@ -11,7 +11,7 @@ interface SlideViewProps {
  * 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 }) => {
+export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
     return (
         <div
             style={{
@@ -35,14 +35,14 @@ export const SlideView: React.FC<SlideViewProps> = ({ url }) => {
                     backdropFilter: "blur(10px)",
                 }}
             >
-                {/* <img
+                <img
                     src={nextURL}
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100%",
                         display: "none",
                     }}
-                /> */}
+                />
                 <img
                     src={url}
                     style={{

From 805c80face27620af1ea834dee366a42ba2e0380 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:29:51 +0530
Subject: [PATCH 09/14] Inline

---
 .../cast/src/components/PairingComplete.tsx   | 37 ------------------
 web/apps/cast/src/pages/slideshow.tsx         | 38 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 38 deletions(-)
 delete mode 100644 web/apps/cast/src/components/PairingComplete.tsx

diff --git a/web/apps/cast/src/components/PairingComplete.tsx b/web/apps/cast/src/components/PairingComplete.tsx
deleted file mode 100644
index 6681ccb648..0000000000
--- a/web/apps/cast/src/components/PairingComplete.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { styled } from "@mui/material";
-import { FilledCircleCheck } from "./FilledCircleCheck";
-
-export const PairingComplete: React.FC = () => {
-    return (
-        <PairingComplete_>
-            <Items>
-                <FilledCircleCheck />
-                <h2>Pairing Complete</h2>
-                <p>
-                    We're preparing your album.
-                    <br /> This should only take a few seconds.
-                </p>
-            </Items>
-        </PairingComplete_>
-    );
-};
-
-const PairingComplete_ = styled("div")`
-    display: flex;
-    min-height: 100svh;
-    justify-content: center;
-    align-items: center;
-
-    line-height: 1.5rem;
-
-    h2 {
-        margin-block-end: 0;
-    }
-`;
-
-const Items = styled("div")`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-`;
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 50317dca87..cc14c6d081 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -1,5 +1,6 @@
 import log from "@/next/log";
-import { PairingComplete } from "components/PairingComplete";
+import { styled } from "@mui/material";
+import { FilledCircleCheck } from "components/FilledCircleCheck";
 import { SlideView } from "components/Slide";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -52,3 +53,38 @@ export default function Slideshow() {
 
     return <SlideView url={imageURL} nextURL={nextImageURL} />;
 }
+
+const PairingComplete: React.FC = () => {
+    return (
+        <PairingComplete_>
+            <Items>
+                <FilledCircleCheck />
+                <h2>Pairing Complete</h2>
+                <p>
+                    We're preparing your album.
+                    <br /> This should only take a few seconds.
+                </p>
+            </Items>
+        </PairingComplete_>
+    );
+};
+
+const PairingComplete_ = styled("div")`
+    display: flex;
+    min-height: 100svh;
+    justify-content: center;
+    align-items: center;
+
+    line-height: 1.5rem;
+
+    h2 {
+        margin-block-end: 0;
+    }
+`;
+
+const Items = styled("div")`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+`;

From 477e30232c25748060ab194ce5334476dd9335c2 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:35:20 +0530
Subject: [PATCH 10/14] Add empty state

---
 web/apps/cast/src/pages/slideshow.tsx | 50 +++++++++++++++++++--------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index cc14c6d081..25cc792bb4 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -10,6 +10,7 @@ export default function Slideshow() {
     const [loading, setLoading] = useState(true);
     const [imageURL, setImageURL] = useState<string | undefined>();
     const [nextImageURL, setNextImageURL] = useState<string | undefined>();
+    const [isEmpty, setIsEmpty] = useState(false);
 
     const router = useRouter();
 
@@ -25,8 +26,10 @@ export default function Slideshow() {
                 while (!stop) {
                     const { value: urls, done } = await urlGenerator.next();
                     if (done) {
-                        log.warn("Empty collection");
-                        pair();
+                        // No items in this callection can be shown.
+                        setIsEmpty(true);
+                        // Go back to pairing screen after 3 seconds.
+                        setTimeout(pair, 3000);
                         return;
                     }
 
@@ -50,26 +53,33 @@ export default function Slideshow() {
     console.log("Rendering slideshow", { loading, imageURL, nextImageURL });
 
     if (loading) return <PairingComplete />;
+    if (isEmpty) return <NoItems />;
 
     return <SlideView url={imageURL} nextURL={nextImageURL} />;
 }
 
 const PairingComplete: React.FC = () => {
     return (
-        <PairingComplete_>
-            <Items>
-                <FilledCircleCheck />
-                <h2>Pairing Complete</h2>
-                <p>
-                    We're preparing your album.
-                    <br /> This should only take a few seconds.
-                </p>
-            </Items>
-        </PairingComplete_>
+        <Message>
+            <FilledCircleCheck />
+            <h2>Pairing Complete</h2>
+            <p>
+                We're preparing your album.
+                <br /> This should only take a few seconds.
+            </p>
+        </Message>
     );
 };
 
-const PairingComplete_ = styled("div")`
+const Message: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return (
+        <Message_>
+            <MessageItems>{children}</MessageItems>
+        </Message_>
+    );
+};
+
+const Message_ = styled("div")`
     display: flex;
     min-height: 100svh;
     justify-content: center;
@@ -82,9 +92,21 @@ const PairingComplete_ = styled("div")`
     }
 `;
 
-const Items = styled("div")`
+const MessageItems = styled("div")`
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 `;
+
+const NoItems: React.FC = () => {
+    return (
+        <Message>
+            <h2>Try another album</h2>
+            <p>
+                This album has no photos that can be shown here
+                <br /> Please try another album
+            </p>
+        </Message>
+    );
+};

From 5aab9e798eceb89d6f693bfa13ddc5882d43cc0f Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:47:06 +0530
Subject: [PATCH 11/14] Rename

---
 .../{LargeType.tsx => PairingCode.tsx}        | 22 +++++++++++--------
 web/apps/cast/src/pages/index.tsx             |  4 ++--
 web/apps/cast/src/pages/slideshow.tsx         |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)
 rename web/apps/cast/src/components/{LargeType.tsx => PairingCode.tsx} (76%)

diff --git a/web/apps/cast/src/components/LargeType.tsx b/web/apps/cast/src/components/PairingCode.tsx
similarity index 76%
rename from web/apps/cast/src/components/LargeType.tsx
rename to web/apps/cast/src/components/PairingCode.tsx
index 42ccb65e9f..7649e4dea6 100644
--- a/web/apps/cast/src/components/LargeType.tsx
+++ b/web/apps/cast/src/components/PairingCode.tsx
@@ -1,6 +1,6 @@
 import { styled } from "@mui/material";
 
-const colourPool = [
+const colors = [
     "#87CEFA", // Light Blue
     "#90EE90", // Light Green
     "#F08080", // Light Coral
@@ -23,27 +23,31 @@ const colourPool = [
     "#808000", // Light Olive
 ];
 
-export const LargeType = ({ chars }: { chars: string[] }) => {
+interface PairingCodeProps {
+    code: string;
+}
+
+export const PairingCode: React.FC<PairingCodeProps> = ({ code }) => {
     return (
-        <Container style={{}}>
-            {chars.map((char, i) => (
+        <PairingCode_>
+            {code.split("").map((char, i) => (
                 <span
                     key={i}
                     style={{
-                        // alternating background
+                        // Alternating background.
                         backgroundColor: i % 2 === 0 ? "#2e2e2e" : "#5e5e5e",
-                        // varying colors
-                        color: colourPool[i % colourPool.length],
+                        // Varying colors.
+                        color: colors[i % colors.length],
                     }}
                 >
                     {char}
                 </span>
             ))}
-        </Container>
+        </PairingCode_>
     );
 };
 
-const Container = styled("div")`
+const PairingCode_ = styled("div")`
     font-size: 4rem;
     font-weight: bold;
     font-family: monospace;
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index 175d75bbcd..abd9631500 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import log from "@/next/log";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
-import { LargeType } from "components/LargeType";
+import { PairingCode } from "components/PairingCode";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { storeCastData } from "services/cast";
@@ -98,7 +98,7 @@ export default function Index() {
                         }}
                     >
                         {pairingCode ? (
-                            <LargeType chars={pairingCode.split("")} />
+                            <PairingCode code={pairingCode} />
                         ) : (
                             <EnteSpinner />
                         )}
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 25cc792bb4..d117f6da7d 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -29,7 +29,7 @@ export default function Slideshow() {
                         // No items in this callection can be shown.
                         setIsEmpty(true);
                         // Go back to pairing screen after 3 seconds.
-                        setTimeout(pair, 3000);
+                        setTimeout(pair, 5000);
                         return;
                     }
 

From 415258c86deeba4a298dc17b59c8e46560fd413d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:52:55 +0530
Subject: [PATCH 12/14] Cleanup

---
 web/apps/cast/src/pages/index.tsx | 101 ++++++++++++++----------------
 1 file changed, 46 insertions(+), 55 deletions(-)

diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index abd9631500..c70f7e981b 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import log from "@/next/log";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
+import { styled } from "@mui/material";
 import { PairingCode } from "components/PairingCode";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -65,65 +66,55 @@ export default function Index() {
     };
 
     return (
-        <>
+        <Container>
+            <img width={150} src="/images/ente.svg" />
+            <h1>
+                Enter this code on <b>Ente Photos</b> to pair this screen
+            </h1>
             <div
                 style={{
-                    height: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
+                    borderRadius: "10px",
+                    overflow: "hidden",
                 }}
             >
-                <div
-                    style={{
-                        textAlign: "center",
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                    }}
-                >
-                    <img width={150} src="/images/ente.svg" />
-                    <h1
-                        style={{
-                            fontWeight: "normal",
-                        }}
-                    >
-                        Enter this code on <b>Ente Photos</b> to pair this
-                        screen
-                    </h1>
-                    <div
-                        style={{
-                            borderRadius: "10px",
-                            overflow: "hidden",
-                        }}
-                    >
-                        {pairingCode ? (
-                            <PairingCode code={pairingCode} />
-                        ) : (
-                            <EnteSpinner />
-                        )}
-                    </div>
-                    <p
-                        style={{
-                            fontSize: "1.2rem",
-                        }}
-                    >
-                        Visit{" "}
-                        <a
-                            style={{
-                                textDecoration: "none",
-                                color: "#87CEFA",
-                                fontWeight: "bold",
-                            }}
-                            href="https://ente.io/cast"
-                            target="_blank"
-                        >
-                            ente.io/cast
-                        </a>{" "}
-                        for help
-                    </p>
-                </div>
+                {pairingCode ? (
+                    <PairingCode code={pairingCode} />
+                ) : (
+                    <EnteSpinner />
+                )}
             </div>
-        </>
+            <p
+                style={{
+                    fontSize: "1.2rem",
+                }}
+            >
+                Visit{" "}
+                <a
+                    style={{
+                        textDecoration: "none",
+                        color: "#87CEFA",
+                        fontWeight: "bold",
+                    }}
+                    href="https://ente.io/cast"
+                    target="_blank"
+                >
+                    ente.io/cast
+                </a>{" "}
+                for help
+            </p>
+        </Container>
     );
 }
+
+const Container = styled("div")`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    h1 {
+        font-weight: normal;
+    }
+`;

From 74fd98c398320d684dd1039cc8f1cbd6a422ce38 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:58:56 +0530
Subject: [PATCH 13/14] Position spinner

---
 web/apps/cast/src/components/PairingCode.tsx |  3 +++
 web/apps/cast/src/pages/index.tsx            | 24 ++++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/apps/cast/src/components/PairingCode.tsx b/web/apps/cast/src/components/PairingCode.tsx
index 7649e4dea6..fa1474bafc 100644
--- a/web/apps/cast/src/components/PairingCode.tsx
+++ b/web/apps/cast/src/components/PairingCode.tsx
@@ -48,6 +48,9 @@ export const PairingCode: React.FC<PairingCodeProps> = ({ code }) => {
 };
 
 const PairingCode_ = styled("div")`
+    border-radius: 10px;
+    overflow: hidden;
+
     font-size: 4rem;
     font-weight: bold;
     font-family: monospace;
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index c70f7e981b..949ea3fb4e 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -71,18 +71,7 @@ export default function Index() {
             <h1>
                 Enter this code on <b>Ente Photos</b> to pair this screen
             </h1>
-            <div
-                style={{
-                    borderRadius: "10px",
-                    overflow: "hidden",
-                }}
-            >
-                {pairingCode ? (
-                    <PairingCode code={pairingCode} />
-                ) : (
-                    <EnteSpinner />
-                )}
-            </div>
+            {pairingCode ? <PairingCode code={pairingCode} /> : <Spinner />}
             <p
                 style={{
                     fontSize: "1.2rem",
@@ -118,3 +107,14 @@ const Container = styled("div")`
         font-weight: normal;
     }
 `;
+
+const Spinner: React.FC = () => (
+    <Spinner_>
+        <EnteSpinner />
+    </Spinner_>
+);
+
+const Spinner_ = styled("div")`
+    /* Roughly same height as the pairing code section to roduce layout shift */
+    margin-block: 1.7rem;
+`;

From 402d0a917ea114947804ad4581fe470636debc7d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 20:00:35 +0530
Subject: [PATCH 14/14] Everything

---
 web/apps/cast/src/pages/index.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index 949ea3fb4e..e703c879f6 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -72,21 +72,9 @@ export default function Index() {
                 Enter this code on <b>Ente Photos</b> to pair this screen
             </h1>
             {pairingCode ? <PairingCode code={pairingCode} /> : <Spinner />}
-            <p
-                style={{
-                    fontSize: "1.2rem",
-                }}
-            >
+            <p>
                 Visit{" "}
-                <a
-                    style={{
-                        textDecoration: "none",
-                        color: "#87CEFA",
-                        fontWeight: "bold",
-                    }}
-                    href="https://ente.io/cast"
-                    target="_blank"
-                >
+                <a href="https://ente.io/cast" target="_blank">
                     ente.io/cast
                 </a>{" "}
                 for help
@@ -106,6 +94,15 @@ const Container = styled("div")`
     h1 {
         font-weight: normal;
     }
+
+    p {
+        font-size: 1.2rem;
+    }
+    a {
+        text-decoration: none;
+        color: #87cefa;
+        font-weight: bold;
+    }
 `;
 
 const Spinner: React.FC = () => (