This commit is contained in:
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
+162
-153
@@ -1,172 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState, type ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { type ReactNode, useCallback, useEffect, useState } from "react";
|
||||
|
||||
function ToolbarBtn({
|
||||
onClick,
|
||||
title,
|
||||
children,
|
||||
href,
|
||||
onClick,
|
||||
title,
|
||||
children,
|
||||
href,
|
||||
}: {
|
||||
onClick?: () => void;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
href?: string;
|
||||
}) {
|
||||
const cls =
|
||||
"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";
|
||||
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>
|
||||
);
|
||||
const cls =
|
||||
"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";
|
||||
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,
|
||||
clientUrl,
|
||||
hotelName,
|
||||
initialOnline,
|
||||
}: {
|
||||
ticket: string;
|
||||
clientUrl: string;
|
||||
hotelName: string;
|
||||
initialOnline: number;
|
||||
ticket: string;
|
||||
clientUrl: string;
|
||||
hotelName: string;
|
||||
initialOnline: number;
|
||||
}) {
|
||||
const [_isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [onlineCount, setOnlineCount] = useState(initialOnline);
|
||||
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);
|
||||
}, []);
|
||||
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);
|
||||
}
|
||||
}, []);
|
||||
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);
|
||||
}, []);
|
||||
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)}`;
|
||||
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-4 left-4 z-50 flex items-center 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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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-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-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"
|
||||
>
|
||||
<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>
|
||||
return (
|
||||
<div
|
||||
className="relative w-screen h-screen overflow-hidden"
|
||||
style={{ backgroundColor: "var(--color-background)" }}
|
||||
>
|
||||
<div className="fixed top-4 left-4 z-50 flex items-center 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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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-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-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"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
}
|
||||
+21
-21
@@ -1,8 +1,8 @@
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { cached } from "@/lib/cache";
|
||||
import { issueSsoTicket } from "@/lib/auth/sso-ticket";
|
||||
import { cached } from "@/lib/cache";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { ClientView } from "./client-view";
|
||||
@@ -10,29 +10,29 @@ import { ClientView } from "./client-view";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ClientPage() {
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) redirect("/login");
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) redirect("/login");
|
||||
|
||||
const userId = Number(session.user.id);
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
const [hotelName, clientUrl] = await Promise.all([
|
||||
siteSettings.get("hotel_name", "Atom"),
|
||||
siteSettings.get("nitro_client_url", ""),
|
||||
]);
|
||||
const [hotelName, clientUrl] = await Promise.all([
|
||||
siteSettings.get("hotel_name", "Atom"),
|
||||
siteSettings.get("nitro_client_url", ""),
|
||||
]);
|
||||
|
||||
const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
|
||||
const ticket = await issueSsoTicket(prisma, userId, hotelName ?? "Atom", ip);
|
||||
const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
|
||||
const ticket = await issueSsoTicket(prisma, userId, hotelName ?? "Atom", ip);
|
||||
|
||||
const onlineCount = await cached("online_count", 10_000, () =>
|
||||
prisma.user.count({ where: { online: "1" } }),
|
||||
).catch(() => 0);
|
||||
const onlineCount = await cached("online_count", 10_000, () =>
|
||||
prisma.user.count({ where: { online: "1" } }),
|
||||
).catch(() => 0);
|
||||
|
||||
return (
|
||||
<ClientView
|
||||
ticket={ticket}
|
||||
clientUrl={clientUrl || "/nitro-client/"}
|
||||
hotelName={hotelName ?? "Atom"}
|
||||
initialOnline={onlineCount}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<ClientView
|
||||
ticket={ticket}
|
||||
clientUrl={clientUrl || "/nitro-client/"}
|
||||
hotelName={hotelName ?? "Atom"}
|
||||
initialOnline={onlineCount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user