Add in progress events to recordings view

This commit is contained in:
Jason Hunter 2022-02-08 19:17:42 -05:00 committed by Blake Blackshear
parent 3189467a36
commit e433bec17f
2 changed files with 35 additions and 20 deletions

View File

@ -524,12 +524,17 @@ def recordings(camera_name):
FROM C2
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
FROM C3
GROUP BY label, grpnum
ORDER BY start_time;""",
camera_name,
camera_name,
camera_name,
)
event: Event

View File

@ -21,7 +21,10 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate, se
events={recording.events}
selected={recording.date === selectedDate}
>
{recording.recordings.slice().reverse().map((item, i) => (
{recording.recordings
.slice()
.reverse()
.map((item, i) => (
<div className="mb-2 w-full">
<div
className={`flex w-full text-md text-white px-8 py-2 mb-2 ${
@ -35,7 +38,10 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate, se
</div>
<div className="flex-1 text-right">{item.events.length} Events</div>
</div>
{item.events.slice().reverse().map((event) => (
{item.events
.slice()
.reverse()
.map((event) => (
<EventCard camera={camera} event={event} delay={item.delay} />
))}
</div>
@ -83,8 +89,10 @@ export function ExpandableList({ title, events = 0, children, selected = false }
export function EventCard({ camera, event, delay }) {
const apiHost = useApiHost();
const start = fromUnixTime(event.start_time);
const end = fromUnixTime(event.end_time);
const duration = addSeconds(new Date(0), differenceInSeconds(end, start));
let duration = 0;
if (event.end_time) {
duration = addSeconds(new Date(0), differenceInSeconds(fromUnixTime(event.end_time), start));
}
const position = differenceInSeconds(start, startOfHour(start));
const offset = Object.entries(delay)
.map(([p, d]) => (position > p ? d : 0))
@ -102,7 +110,9 @@ export function EventCard({ camera, event, delay }) {
<div className="flex-1">
<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">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 className="text-lg text-white text-right leading-tight">{(event.top_score * 100).toFixed(1)}%</div>
</div>