administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 12:15:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Cleanup and fit figma

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-07 06:24:29 -07:00
parent eb98cb4fbf
commit 1c869187d9
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/pages/Live.tsx
View File

@ -13,15 +13,19 @@ function Live() {
// recent events // recent events
const [recentCutoff, setRecentCutoff] = useState<Date>(new Date()); const [recentCutoff, setRecentCutoff] = useState<number>(0);
useEffect(() => { useEffect(() => {
const date = new Date();
date.setHours(date.getHours() - 12);
setRecentCutoff(date.getTime() / 1000);
const intervalId: NodeJS.Timeout = setInterval(() => { const intervalId: NodeJS.Timeout = setInterval(() => {
const date = new Date(); const date = new Date();
date.setHours(date.getHours() - 4); date.setHours(date.getHours() - 4);
setRecentCutoff(date); setRecentCutoff(date.getTime() / 1000);
}, 3600000); }, 30000);
return () => clearInterval(intervalId); return () => clearInterval(intervalId);
}, [3600000]); }, [30000]);
const { data: events, mutate: updateEvents } = useSWR<FrigateEvent[]>([ const { data: events, mutate: updateEvents } = useSWR<FrigateEvent[]>([
"events", "events",
{ limit: 10, after: recentCutoff }, { limit: 10, after: recentCutoff },
@ -63,7 +67,8 @@ function Live() {
{events.map((event) => { {events.map((event) => {
return ( return (
<div <div
className="relative rounded min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center mr-4" key={event.id}
className="relative rounded bg-cover w-40 h-24 bg-no-repeat bg-center mr-4"
style={{ style={{
backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`, backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
}} }}
@ -83,7 +88,13 @@ function Live() {
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4"> <div className="mt-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
{cameras.map((camera) => { {cameras.map((camera) => {
return <LivePlayer className=" rounded-2xl" cameraConfig={camera} />; return (
<LivePlayer
key={camera.name}
className="rounded-2xl"
cameraConfig={camera}
/>
);
})} })}
</div> </div>
</> </>