233 lines
9.2 KiB
TypeScript
233 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
import { ContentCard, SkeletonCard } from "@/components/public/ui";
|
|
|
|
export default function ClientPage() {
|
|
const t = useTranslations("pages.client");
|
|
const [ticket, setTicket] = useState<string | null>(null);
|
|
const [clientUrl, setClientUrl] = useState("/nitro-client/");
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [errorType, setErrorType] = useState<"auth" | "generic" | null>(null);
|
|
const [hotelName, setHotelName] = useState("");
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [onlineCount, setOnlineCount] = useState(0);
|
|
const fetchedRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (fetchedRef.current) return;
|
|
fetchedRef.current = true;
|
|
|
|
async function fetchTicket() {
|
|
try {
|
|
const res = await fetch("/api/client/sso");
|
|
if (res.status === 401) {
|
|
setErrorType("auth");
|
|
setError(t("errors.unauthorized"));
|
|
return;
|
|
}
|
|
if (!res.ok) throw new Error("SSO fetch failed");
|
|
const data = await res.json();
|
|
setTicket(data.ticket);
|
|
setHotelName(data.hotelName);
|
|
if (data.clientUrl) setClientUrl(data.clientUrl);
|
|
} catch {
|
|
setErrorType("generic");
|
|
setError(t("errors.generic"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchTicket();
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
async function fetchOnline() {
|
|
try {
|
|
const res = await fetch("/api/online/count");
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setOnlineCount(data.count ?? 0);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
fetchOnline();
|
|
const interval = setInterval(fetchOnline, 15000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const toggleFullscreen = useCallback(() => {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(() => {});
|
|
setIsFullscreen(true);
|
|
} else {
|
|
document.exitFullscreen().catch(() => {});
|
|
setIsFullscreen(false);
|
|
}
|
|
}, [setIsFullscreen]);
|
|
|
|
useEffect(() => {
|
|
function onFullscreenChange() {
|
|
setIsFullscreen(!!document.fullscreenElement);
|
|
}
|
|
document.addEventListener("fullscreenchange", onFullscreenChange);
|
|
return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
|
|
}, []);
|
|
|
|
const getClientSrc = useCallback(() => {
|
|
if (!ticket) return "";
|
|
const base = clientUrl.replace(/(\?|&)sso=[^&]*/, "");
|
|
const sep = base.includes("?") ? "&" : "?";
|
|
return `${base}${sep}sso=${encodeURIComponent(ticket)}`;
|
|
}, [clientUrl, ticket]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center" style={{ backgroundColor: "var(--color-background)", padding: "2rem" }}>
|
|
<SkeletonCard lines={2} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderHeader() {
|
|
return (
|
|
<header
|
|
className="flex h-14 items-center justify-between border-b px-6 shrink-0"
|
|
style={{ backgroundColor: "var(--color-navbar)", borderColor: "var(--color-primary, #eeb425)" }}
|
|
>
|
|
<span className="font-bold text-lg" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{hotelName || "Atom"}</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="relative flex h-2.5 w-2.5">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
|
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
|
</span>
|
|
<span className="text-sm font-bold" style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
|
|
{onlineCount} Online
|
|
</span>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
if (errorType === "auth") {
|
|
return (
|
|
<div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
|
|
{renderHeader()}
|
|
<main className="flex-1 flex items-center justify-center">
|
|
<ContentCard icon="🔒" title={t("title")} subtitle={t("errors.unauthorized")}>
|
|
<div style={{ textAlign: "center", marginTop: "1rem" }}>
|
|
<Link href="/login" className="btn btn-primary">
|
|
{t("errors.loginRedirect")}
|
|
</Link>
|
|
</div>
|
|
</ContentCard>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (errorType === "generic" || !ticket) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
|
|
{renderHeader()}
|
|
<main className="flex-1 flex items-center justify-center">
|
|
<p className="text-center" style={{ color: "var(--color-text-muted)" }}>
|
|
{error ?? t("errors.generic")}
|
|
</p>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const clientSrc = getClientSrc();
|
|
|
|
return (
|
|
<div className="relative w-screen h-screen overflow-hidden" style={{ backgroundColor: "var(--color-background)" }}>
|
|
{/* Floating Toolbar */}
|
|
<div className="fixed top-4 left-4 z-50 flex items-center gap-2">
|
|
{/* Home Button */}
|
|
<Link
|
|
href="/"
|
|
className="w-10 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"
|
|
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, #1a1a2e)",
|
|
}}
|
|
title="Home"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<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>
|
|
</Link>
|
|
|
|
{/* Reload Button */}
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="w-10 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"
|
|
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, #1a1a2e)",
|
|
}}
|
|
title="Reload"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<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>
|
|
</button>
|
|
|
|
{/* Fullscreen Button */}
|
|
<button
|
|
onClick={toggleFullscreen}
|
|
className="w-10 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"
|
|
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, #1a1a2e)",
|
|
}}
|
|
title="Fullscreen"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<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>
|
|
</button>
|
|
|
|
{/* Online Count Button */}
|
|
<div
|
|
className="h-10 px-3 rounded-lg border-2 flex items-center justify-center gap-1.5 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, #1a1a2e)",
|
|
}}
|
|
title="Online users"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<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>
|
|
|
|
{/* Game Iframe */}
|
|
<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>
|
|
);
|
|
}
|