diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx index cc14c6d08..25cc792bb 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(); const [nextImageURL, setNextImageURL] = useState(); + 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 ; + if (isEmpty) return ; return ; } const PairingComplete: React.FC = () => { return ( - - - -

Pairing Complete

-

- We're preparing your album. -
This should only take a few seconds. -

-
-
+ + +

Pairing Complete

+

+ We're preparing your album. +
This should only take a few seconds. +

+
); }; -const PairingComplete_ = styled("div")` +const Message: React.FC = ({ children }) => { + return ( + + {children} + + ); +}; + +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 ( + +

Try another album

+

+ This album has no photos that can be shown here +
Please try another album +

+
+ ); +};