Add empty state

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>
+    );
+};