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

refactor: update TABS to include hideInNav property and filter in BottomNav; enhance image popup styling and loading indicator

Browse Source
This commit is contained in:
Space
2026-03-01 13:21:19 +01:00
parent 6ec08f30f0
commit b4528920da
5 changed files with 84 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
tv/src/App.tsx
View File

@@ -123,8 +123,8 @@ function App() {
{/* 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]">
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/75 backdrop-blur-sm p-12">
<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-[82vw]">
{imagePopup.caption && (
<h2 className="text-4xl font-bold text-white tracking-tight text-center">
{imagePopup.caption}
@@ -133,7 +133,8 @@ function App() {
<img
src={imagePopup.image_url}
alt="TV display"
className="max-w-full max-h-[78vh] rounded-2xl object-contain shadow-xl"
className="max-w-full max-h-[72vh] rounded-2xl object-contain shadow-xl"
style={{ display: "block" }}
/>
</div>
</div>
@@ -142,7 +143,12 @@ function App() {
{/* 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>
<p className="text-gray-600 text-lg">
Waiting for content
<span className="dot-1">.</span>
<span className="dot-2">.</span>
<span className="dot-3">.</span>
</p>
</div>
)}
</div>

11
tv/src/index.css
View File

@@ -2,4 +2,13 @@
body {
@apply bg-gray-900 text-white h-screen w-screen flex items-center justify-center;
}
}
@keyframes dot-blink {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}
.dot-1 { animation: dot-blink 1.4s infinite 0s; }
.dot-2 { animation: dot-blink 1.4s infinite 0.2s; }
.dot-3 { animation: dot-blink 1.4s infinite 0.4s; }