Merge pull request #114 from TKOaly/rolling-ads

Add rollings ads

src/app/(infoscreen)/@ad/page.tsx

@@ -1,14 +1,55 @@
+'use client';
+
 import { Slide } from '@/components/Carousel';
+import Logo from '@/components/Logo';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+type AdType = {
+	url: string;
+	from?: Date;
+	until: Date;
+};
+
+const ads: AdType[] = [
+	{ url: '/fuksiaiset.png', until: new Date(2024, 9, 29) },
+	{ url: '/atkytp.png', until: new Date(2024, 10, 15) },
+];
+
+const Ad = () => {
+	const [ad, setAd] = useState<AdType | undefined>(undefined);
+
+	useEffect(() => {
+		const getAd = () => {
+			const validAds = ads.filter(
+				(ad) =>
+					ad.until > new Date() && (!ad.from || ad.from < new Date())
+			);
+
+			setAd(validAds[new Date().getMinutes() % validAds.length]);
+		};
+
+		getAd();
+
+		const interval = setInterval(() => getAd(), 60 * 1000);
+		return () => clearInterval(interval);
+	}, [setAd]);
+
+	// Fallback to spinning logo if no valid ads are available
+	if (ads.length === 0 || !ad)
+		return (
+			<Slide className="items-center justify-center bg-black text-yellow-400">
+				<Logo />
+			</Slide>
+		);
 
-const Ad = async () => {
 	return (
 		<Slide>
 			<div className="relative size-full">
 				<Image
 					fill
 					className="object-cover"
-					src={'/atkytp.png'}
+					src={ad.url}
 					alt={'Ad picture'}
 				/>
 			</div>

src/app/(infoscreen)/layout.tsx

@@ -1,12 +1,12 @@
-import { Carousel, Slide, type SlideElement } from '@/components/Carousel';
-import Logo from '@/components/Logo';
+import { Carousel, type SlideElement } from '@/components/Carousel';
 
 type CarouselLayoutProps = Record<string, SlideElement>;
 
 const CarouselLayout = ({
 	events,
 	restaurants,
 	ad,
+	transit,
 	lectures,
 	ilotalo,
 	children,
@@ -15,12 +15,9 @@ const CarouselLayout = ({
 		<main className="flex max-h-screen min-h-screen">
 			<Carousel loop duration={40} delay={20000}>
 				{events}
-				<Slide className="items-center justify-center bg-black text-yellow-400">
-					<Logo />
-				</Slide>
-				{/* transit */}
-				{restaurants}
 				{ad}
+				{restaurants}
+				{transit}
 				{lectures}
 				{ilotalo}
 				{children}