remco/Epicnabbo-Catalogus-Updated-Daily
1
0 Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: render toolbar via portal to body so it stays visible in fullscreen

Browse Source
This commit is contained in:
openhands committed 2026-07-26 17:36:00 +02:00
1 parent 2a727b2a71
commit e464fac102
1 file changed
+107 -94
Download Patch File Download Diff File Expand all files Collapse all files
src/app/client/client-view.tsx
+107 -94
View File
@@ -3,7 +3,13 @@
import { LogOut } from "lucide-react";
import Link from "next/link";
import { signOut } from "next-auth/react";
import { type ReactNode, useCallback, useEffect, useState } from "react";
import {
type ReactNode,
useCallback,
useEffect,
useState,
} from "react";
import { createPortal } from "react-dom";
function ToolbarBtn({
onClick,
@@ -91,110 +97,117 @@ export function ClientView({
const sep = base.includes("?") ? "&" : "?";
const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
const toolbar = (
<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-[9999] flex items-center gap-1 sm:gap-2">
<ToolbarBtn href="/" title="Home">
<svg
width="14"
height="14"
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="14"
height="14"
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="14"
height="14"
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-7 sm:h-8 px-1.5 sm:px-2 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="14"
height="14"
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-[10px] sm:text-xs font-bold">{onlineCount}</span>
</div>
<ToolbarBtn
onClick={() => signOut({ callbackUrl: "/" })}
title="Logout"
>
<LogOut size={14} />
</ToolbarBtn>
</div>
);
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="14"
height="14"
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="14"
height="14"
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="14"
height="14"
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-7 sm:h-8 px-1.5 sm:px-2 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="14"
height="14"
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-[10px] sm:text-xs font-bold">{onlineCount}</span>
</div>
<ToolbarBtn
onClick={() => signOut({ callbackUrl: "/" })}
title="Logout"
>
<LogOut size={14} />
</ToolbarBtn>
</div>
{mounted && createPortal(toolbar, document.body)}
<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"
allow="autoplay; gamepad"
/>
</div>
);