mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
private rover security! and styling updaes
This commit is contained in:
@@ -94,29 +94,13 @@ function InstanceMetadata({ remote }) {
|
||||
}
|
||||
|
||||
function RemoteMediaStrip({ remote }) {
|
||||
const roverSnapshots = (remote.roster || [])
|
||||
.map((rover) => ({
|
||||
id: rover.id,
|
||||
name: rover.name || rover.id,
|
||||
url: rover.snapshots?.latestUrl,
|
||||
updatedAt: rover.snapshots?.updatedAt,
|
||||
}))
|
||||
.filter((entry) => entry.url);
|
||||
const roomCameras = Array.isArray(remote.roomCameras) ? remote.roomCameras.filter((camera) => camera.snapshotUrl) : [];
|
||||
const items = [
|
||||
...roverSnapshots.map((entry) => ({ ...entry, kind: 'Rover' })),
|
||||
...roomCameras.map((entry) => ({ ...entry, name: entry.name || entry.id, url: entry.snapshotUrl, kind: 'Room' })),
|
||||
];
|
||||
if (!items.length) return null;
|
||||
if (!roomCameras.length) return null;
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-0.5 md:grid-cols-3">
|
||||
{items.map((item) => (
|
||||
<div key={`${item.kind}-${item.id}`} className="surface-muted overflow-hidden text-xs">
|
||||
<img src={item.url} alt={item.name} className="aspect-video w-full bg-black object-cover" loading="lazy" />
|
||||
<div className="flex items-center justify-between gap-0.5 p-0.5">
|
||||
<span className="truncate text-slate-200">{item.name}</span>
|
||||
<span className="text-[0.65rem] text-slate-500">{item.kind}</span>
|
||||
</div>
|
||||
<div className="flex gap-0.5 overflow-x-auto pb-0.5">
|
||||
{roomCameras.map((camera) => (
|
||||
<div key={camera.id} className="surface-muted w-28 shrink-0 overflow-hidden">
|
||||
<img src={camera.snapshotUrl} alt={camera.name || camera.id} className="h-14 w-full bg-black object-cover" loading="lazy" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -229,6 +229,14 @@ export default function RoverQueuesPanel({
|
||||
handleRequest(rover.id);
|
||||
}}
|
||||
>
|
||||
{externalMode && rover?.snapshots?.latestUrl ? (
|
||||
<img
|
||||
src={rover.snapshots.latestUrl}
|
||||
alt=""
|
||||
className="h-8 w-10 shrink-0 rounded border border-slate-700 bg-black object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<div className="flex items-center justify-between gap-0.5">
|
||||
<div className="flex min-w-0 items-center gap-0.5">
|
||||
|
||||
Reference in New Issue
Block a user