Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-06-04 01:16:52 +02:00
Code Issues Projects Releases Wiki Activity

Add in progress events to recordings view

Browse Source
This commit is contained in:
Jason Hunter 2022-02-08 19:17:42 -05:00 committed by Blake Blackshear
parent a3fa3cb716
commit 54b88fb4a9
2 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frigate/http.py
View File

@ -524,12 +524,17 @@ def recordings(camera_name):
FROM C2 FROM C2
WHERE cnt = 0 WHERE cnt = 0
) )
SELECT id, label, camera, top_score, start_time, end_time
FROM event
WHERE camera = ? AND end_time IS NULL
UNION ALL
SELECT MIN(id) as id, label, camera, MAX(top_score) as top_score, MIN(ts) AS start_time, max(ts) AS end_time SELECT MIN(id) as id, label, camera, MAX(top_score) as top_score, MIN(ts) AS start_time, max(ts) AS end_time
FROM C3 FROM C3
GROUP BY label, grpnum GROUP BY label, grpnum
ORDER BY start_time;""", ORDER BY start_time;""",
camera_name, camera_name,
camera_name, camera_name,
camera_name,
) )
event: Event event: Event

50
web/src/components/RecordingPlaylist.jsx
View File

@ -21,25 +21,31 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate, se
events={recording.events} events={recording.events}
selected={recording.date === selectedDate} selected={recording.date === selectedDate}
> >
{recording.recordings.slice().reverse().map((item, i) => ( {recording.recordings
<div className="mb-2 w-full"> .slice()
<div .reverse()
className={`flex w-full text-md text-white px-8 py-2 mb-2 ${ .map((item, i) => (
i === 0 ? 'border-t border-white border-opacity-50' : '' <div className="mb-2 w-full">
}`} <div
> className={`flex w-full text-md text-white px-8 py-2 mb-2 ${
<div className="flex-1"> i === 0 ? 'border-t border-white border-opacity-50' : ''
<Link href={`/recording/${camera}/${recording.date}/${item.hour}`} type="text"> }`}
{item.hour}:00 >
</Link> <div className="flex-1">
<Link href={`/recording/${camera}/${recording.date}/${item.hour}`} type="text">
{item.hour}:00
</Link>
</div>
<div className="flex-1 text-right">{item.events.length} Events</div>
</div> </div>
<div className="flex-1 text-right">{item.events.length} Events</div> {item.events
.slice()
.reverse()
.map((event) => (
<EventCard camera={camera} event={event} delay={item.delay} />
))}
</div> </div>
{item.events.slice().reverse().map((event) => ( ))}
<EventCard camera={camera} event={event} delay={item.delay} />
))}
</div>
))}
</ExpandableList> </ExpandableList>
); );
} }
@ -83,8 +89,10 @@ export function ExpandableList({ title, events = 0, children, selected = false }
export function EventCard({ camera, event, delay }) { export function EventCard({ camera, event, delay }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const start = fromUnixTime(event.start_time); const start = fromUnixTime(event.start_time);
const end = fromUnixTime(event.end_time); let duration = 0;
const duration = addSeconds(new Date(0), differenceInSeconds(end, start)); if (event.end_time) {
duration = addSeconds(new Date(0), differenceInSeconds(fromUnixTime(event.end_time), start));
}
const position = differenceInSeconds(start, startOfHour(start)); const position = differenceInSeconds(start, startOfHour(start));
const offset = Object.entries(delay) const offset = Object.entries(delay)
.map(([p, d]) => (position > p ? d : 0)) .map(([p, d]) => (position > p ? d : 0))
@ -102,7 +110,9 @@ export function EventCard({ camera, event, delay }) {
<div className="flex-1"> <div className="flex-1">
<div className="text-2xl text-white leading-tight capitalize">{event.label}</div> <div className="text-2xl text-white leading-tight capitalize">{event.label}</div>
<div className="text-xs md:text-normal text-gray-300">Start: {format(start, 'HH:mm:ss')}</div> <div className="text-xs md:text-normal text-gray-300">Start: {format(start, 'HH:mm:ss')}</div>
<div className="text-xs md:text-normal text-gray-300">Duration: {format(duration, 'mm:ss')}</div> <div className="text-xs md:text-normal text-gray-300">
Duration: {duration ? format(duration, 'mm:ss') : 'In Progress'}
</div>
</div> </div>
<div className="text-lg text-white text-right leading-tight">{(event.top_score * 100).toFixed(1)}%</div> <div className="text-lg text-white text-right leading-tight">{(event.top_score * 100).toFixed(1)}%</div>
</div> </div>