Add in progress events to recordings view

frigate/http.py

@@ -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

web/src/components/RecordingPlaylist.jsx

@@ -21,25 +21,31 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate, se
         events={recording.events}
         selected={recording.date === selectedDate}
       >
-        {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 ${
-                i === 0 ? 'border-t border-white border-opacity-50' : ''
-              }`}
-            >
-              <div className="flex-1">
-                <Link href={`/recording/${camera}/${recording.date}/${item.hour}`} type="text">
-                  {item.hour}:00
-                </Link>
+        {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 ${
+                  i === 0 ? 'border-t border-white border-opacity-50' : ''
+                }`}
+              >
+                <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 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>
-            {item.events.slice().reverse().map((event) => (
-              <EventCard camera={camera} event={event} delay={item.delay} />
-            ))}
-          </div>
-        ))}
+          ))}
       </ExpandableList>
     );
   }
@@ -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>