Epicnabbo-Catalogus-Updated-Daily/src/app/client/client-view.tsx

"use client";

import Link from "next/link";
import { type ReactNode, useCallback, useEffect, useState } from "react";

function ToolbarBtn({
	onClick,
	title,
	children,
	href,
}: {
	onClick?: () => void;
	title: string;
	children: ReactNode;
	href?: string;
}) {
	const cls =
		"w-9 h-9 sm:w-10 sm:h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
	const style = {
		borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
		background:
			"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
		color:
			"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
	} as const;
	if (href) {
		return (
			<Link href={href} className={cls} style={style} title={title}>
				{children}
			</Link>
		);
	}
	return (
		<button
			onClick={onClick}
			className={cls}
			style={style}
			title={title}
			type="button"
		>
			{children}
		</button>
	);
}

export function ClientView({
	ticket,
	clientUrl,
	hotelName,
	initialOnline,
}: {
	ticket: string;
	clientUrl: string;
	hotelName: string;
	initialOnline: number;
}) {
	const [_isFullscreen, setIsFullscreen] = useState(false);
	const [onlineCount, setOnlineCount] = useState(initialOnline);

	useEffect(() => {
		const interval = setInterval(async () => {
			try {
				const res = await fetch("/api/online/count");
				if (res.ok) setOnlineCount((await res.json()).count ?? 0);
			} catch {}
		}, 15000);
		return () => clearInterval(interval);
	}, []);

	const toggleFullscreen = useCallback(() => {
		if (!document.fullscreenElement) {
			document.documentElement.requestFullscreen().catch(() => {});
			setIsFullscreen(true);
		} else {
			document.exitFullscreen().catch(() => {});
			setIsFullscreen(false);
		}
	}, []);

	useEffect(() => {
		function onChange() {
			setIsFullscreen(!!document.fullscreenElement);
		}
		document.addEventListener("fullscreenchange", onChange);
		return () => document.removeEventListener("fullscreenchange", onChange);
	}, []);

	const base = clientUrl.replace(/(\?|&)sso=[^&]*/, "");
	const sep = base.includes("?") ? "&" : "?";
	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;

	return (
		<div
			className="relative w-screen h-screen overflow-hidden"
			style={{ backgroundColor: "var(--color-background)" }}
		>
			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
				<ToolbarBtn href="/" title="Home">
					<svg
						width="18"
						height="18"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
						role="img"
						aria-label="Home"
					>
						<title>Home</title>
						<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
						<polyline points="9 22 9 12 15 12 15 22" />
					</svg>
				</ToolbarBtn>
				<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
					<svg
						width="18"
						height="18"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
						role="img"
						aria-label="Reload"
					>
						<title>Reload</title>
						<polyline points="23 4 23 10 17 10" />
						<polyline points="1 20 1 14 7 14" />
						<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
					</svg>
				</ToolbarBtn>
				<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
					<svg
						width="18"
						height="18"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
						role="img"
						aria-label="Fullscreen"
					>
						<title>Fullscreen</title>
						<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
					</svg>
				</ToolbarBtn>
				<div
					className="h-9 sm:h-10 px-2 sm:px-3 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
						background:
							"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
						color:
							"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
					}}
					title="Online users"
				>
					<svg
						width="18"
						height="18"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
						role="img"
						aria-label="Online users"
					>
						<title>Online users</title>
						<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
						<circle cx="12" cy="7" r="4" />
					</svg>
					<span className="text-xs font-bold">{onlineCount}</span>
				</div>
			</div>

			<iframe
				id="nitro"
				src={clientSrc}
				className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
				title={hotelName}
				allow="autoplay; fullscreen; gamepad"
			/>
		</div>
	);
}