mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
status betterify
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -78,7 +78,7 @@
|
||||
<script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script>
|
||||
<script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
|
||||
<title>Roomba Rover</title>
|
||||
<script type="module" crossorigin src="/assets/index-BdBRYVYh.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-CTUSBKKf.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DRk-dX1r.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -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'} />
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user