legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

status betterify

Browse Source
This commit is contained in:
legop3
2026-07-12 13:35:42 -04:00
parent 7286c5b36c
commit 7dfdf62c94
6 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/PtzCamera/index.jsx
+10 -6
View File
@@ -102,11 +102,15 @@ function PtzSnapshotPreview({ feed, label = 'PTZ Camera', className = 'h-full w-
) : (
<div className="flex h-full w-full items-center justify-center text-xs text-slate-400">Waiting for snapshot...</div>
)}
<div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-1 py-0.5 text-xs font-semibold text-white">
{label}
</div>
<div className="pointer-events-none absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs text-slate-100">
{feed?.error ? `Error: ${feed.error}` : feed?.status || 'connecting'}
{/*
Snapshot mode should look like the regular rover video player: the
camera name belongs to the surrounding card/menu, while the media pane
only exposes stream health in the small top-left diagnostic overlay.
*/}
<div className="pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]">
<div className="flex flex-col gap-0.5 leading-none">
<span>Status: {feed?.error ? `Error: ${feed.error}` : feed?.status || 'connecting'}</span>
</div>
</div>
</div>
);
@@ -536,7 +540,7 @@ function PtzMediaPane({ ptz, open, framed = true }) {
const media = (
<>
{isOperator ? (
<PtzLiveVideo enabled={open} startMuted={false} label={ptz?.name || 'PTZ Camera'} />
<PtzLiveVideo enabled={open} startMuted={false} />
) : (
<PtzSnapshotPreview feed={snapshot} label={ptz?.name || 'PTZ Camera'} />
)}
webui/src/components/PtzLiveVideo/index.jsx
+12 -2
View File
@@ -21,7 +21,7 @@ export default function PtzLiveVideo({
startMuted = true,
className = 'relative h-full w-full bg-black',
videoClassName = 'h-full w-full object-contain',
statusClassName = 'pointer-events-none absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs text-slate-100',
statusClassName = 'pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]',
label = null,
labelClassName = 'pointer-events-none absolute left-0 top-0 bg-black/70 px-1 py-0.5 text-xs font-semibold text-white',
fallback = null,
@@ -200,7 +200,17 @@ export default function PtzLiveVideo({
</div>
)}
{label ? <div className={labelClassName}>{label}</div> : null}
<div className={statusClassName}>{displayStatus}</div>
{/*
PTZ video uses the same low-profile diagnostic shape as the rover
players: no in-frame camera title, just a compact top-corner status.
This keeps the media pane visually interchangeable with rover streams
while still exposing WHEP/session failures during reconnects.
*/}
<div className={statusClassName}>
<div className="flex flex-col gap-0.5 leading-none">
<span>Status: {displayStatus}</span>
</div>
</div>
</div>
);
}