This commit is contained in:
2026-03-01 11:23:48 +01:00
parent eeeef2674a
commit 9b418a11c2
5 changed files with 414 additions and 40 deletions

View File

@@ -4,6 +4,8 @@ function App() {
const [screenStatus, setScreenStatus] = useState<
"notfullscreen" | "fullscreen"
>("notfullscreen");
const [text, setText] = useState("");
const [imageUrl, setImageUrl] = useState("");
useEffect(() => {
const handleFullscreenChange = () => {
@@ -21,14 +23,48 @@ function App() {
};
}, []);
useEffect(() => {
if (screenStatus === "fullscreen") {
const handlePullState = () => {
fetch(
"https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329/pull_full",
)
.then((response) => response.json())
.then((data) => {
setText(data.state?.text ?? "");
setImageUrl(data.state?.image_url ?? "");
})
.catch((error) => {
console.error("Error pulling state:", error);
});
};
handlePullState(); // Initial pull when entering fullscreen
const interval = setInterval(handlePullState, 5000); // Poll every 5 seconds
return () => clearInterval(interval);
}
}, [screenStatus]);
return (
<>
{screenStatus === "notfullscreen" ? (
<div className="flex flex-col items-center gap-8 px-8 text-center">
<div className="flex flex-col items-center gap-2">
<div className="w-16 h-16 rounded-2xl bg-gray-800 border border-gray-700 flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 8V6a2 2 0 012-2h8a2 2 0 012 2v2M6 16v2a2 2 0 002 2h8a2 2 0 002-2v-2M3 12h18" />
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-8 h-8 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 8V6a2 2 0 012-2h8a2 2 0 012 2v2M6 16v2a2 2 0 002 2h8a2 2 0 002-2v-2M3 12h18"
/>
</svg>
</div>
<h1 className="text-3xl font-semibold tracking-tight text-white">
@@ -43,17 +79,37 @@ function App() {
onClick={() => document.documentElement.requestFullscreen()}
className="group flex items-center gap-2 bg-white text-gray-900 font-medium px-6 py-3 rounded-xl hover:bg-gray-200 active:scale-95 transition-all duration-150 cursor-pointer"
>
<svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-5h-4m4 0v4m0-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 8V4m0 0h4M4 4l5 5m11-5h-4m4 0v4m0-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
/>
</svg>
Go Fullscreen
</button>
</div>
) : (
<div className="flex flex-col items-center gap-4 text-center">
<h1 className="text-4xl font-bold tracking-tight text-white">
Fullscreen Active, yay
</h1>
<div className="flex flex-col items-center gap-6 text-center w-full h-full justify-center">
{imageUrl && (
<img
src={imageUrl}
alt="TV display"
className="max-w-full max-h-[70vh] rounded-2xl object-contain shadow-2xl"
/>
)}
{text && (
<h1 className="text-4xl font-bold tracking-tight text-white">
{text}
</h1>
)}
</div>
)}
</>