Inline SSO ticket generation in server component, prefetch client page from home, remove client API roundtrip

2026-07-09 18:41:04 +02:00
1 parent cfb36e8007
commit 7fe3220359
@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import Link from "next/link";
+
+function ToolbarBtn({ onClick, title, children, href }: {
+  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, #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-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, #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>
+  );
+}