space/tv-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

testing something

Browse Source
This commit is contained in:
Space
2026-03-01 12:31:14 +01:00
parent e724dec0b7
commit 6ec08f30f0
7 changed files with 412 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
tv/src/App.tsx
View File

@@ -1,11 +1,22 @@
import { useEffect, useState } from "react";
interface TextState {
showing: boolean;
title: string;
}
interface ImagePopupState {
showing: boolean;
image_url: string;
caption: string;
}
function App() {
const [screenStatus, setScreenStatus] = useState<
"notfullscreen" | "fullscreen"
>("notfullscreen");
const [text, setText] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [textState, setTextState] = useState<TextState>({ showing: false, title: "" });
const [imagePopup, setImagePopup] = useState<ImagePopupState>({ showing: false, image_url: "", caption: "" });
useEffect(() => {
const handleFullscreenChange = () => {
@@ -31,16 +42,17 @@ function App() {
)
.then((response) => response.json())
.then((data) => {
setText(data.state?.text ?? "");
setImageUrl(data.state?.image_url ?? "");
const state = data.state ?? {};
setTextState(state.text ?? { showing: false, title: "" });
setImagePopup(state.image_popup ?? { showing: false, image_url: "", caption: "" });
})
.catch((error) => {
console.error("Error pulling state:", error);
});
};
handlePullState(); // Initial pull when entering fullscreen
const interval = setInterval(handlePullState, 5000); // Poll every 5 seconds
handlePullState();
const interval = setInterval(handlePullState, 5000);
return () => clearInterval(interval);
}
@@ -71,7 +83,7 @@ function App() {
TV View
</h1>
<p className="text-gray-500 text-sm max-w-xs">
Enter fullscreen mode to enter fullscreen mode.
Enter fullscreen mode to start displaying content.
</p>
</div>
@@ -97,18 +109,41 @@ function App() {
</button>
</div>
) : (
<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"
/>
<div className="w-screen h-screen relative">
{/* Text popup modal */}
{textState.showing && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/70 backdrop-blur-sm">
<div className="bg-gray-900 border border-gray-700 rounded-3xl px-16 py-12 shadow-2xl max-w-3xl w-full mx-8">
<h1 className="text-6xl font-bold tracking-tight text-white text-center">
{textState.title}
</h1>
</div>
</div>
)}
{text && (
<h1 className="text-4xl font-bold tracking-tight text-white">
{text}
</h1>
{/* Image popup modal */}
{imagePopup.showing && imagePopup.image_url && (
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/75 backdrop-blur-sm">
<div className="flex flex-col items-center gap-5 p-6 bg-gray-950/80 rounded-3xl border border-white/10 shadow-2xl max-w-[90vw] max-h-[92vh]">
{imagePopup.caption && (
<h2 className="text-4xl font-bold text-white tracking-tight text-center">
{imagePopup.caption}
</h2>
)}
<img
src={imagePopup.image_url}
alt="TV display"
className="max-w-full max-h-[78vh] rounded-2xl object-contain shadow-xl"
/>
</div>
</div>
)}
{/* Background idle state */}
{!textState.showing && !imagePopup.showing && (
<div className="flex items-center justify-center w-full h-full">
<p className="text-gray-600 text-lg">Waiting for content...</p>
</div>
)}
</div>
)}