diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index 912293b69..f79446097 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -633,189 +633,29 @@ export default function Events({ path, ...props }) { {showInProgress ? : } - {showInProgress && ongoingEvents.map((event, _) => { - return ( - -
(viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))} - > -
- onSave(e, event.id, !event.retain_indefinitely)} - fill={event.retain_indefinitely ? 'currentColor' : 'none'} - /> - {event.end_time ? null : ( -
- In progress -
- )} -
-
-
-
- {event.label.replaceAll('_', ' ')} - {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null} -
- -
- - {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })} -
- - - -
-
- ( {getDurationFromTimestamps(event.start_time, event.end_time)} ) -
-
-
- - {event.camera.replaceAll('_', ' ')} -
- {event.zones.length ? ( -
- - {event.zones.join(', ').replaceAll('_', ' ')} -
- ) : null} -
- - {(event?.data?.top_score || event.top_score || 0) == 0 - ? null - : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} - {(event?.data?.sub_label_score || 0) == 0 - ? null - : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} -
-
- -
- onDelete(e, event.id, event.retain_indefinitely)} - /> - - onDownloadClick(e, event)} - /> -
-
-
- {viewEvent !== event.id ? null : ( -
-
-
- - - - -
- -
- {eventDetailType == 'clip' && event.has_clip ? ( -
- - onEventFrameSelected(event, frame, seekSeconds) - } - /> -
- { - this.player = player; - this.player.on('playing', () => { - setEventOverlay(undefined); - }); - }} - onDispose={() => { - this.player = null; - }} - > - {eventOverlay ? ( - - ) : null} - -
-
- ) : null} - - {eventDetailType == 'image' || !event.has_clip ? ( -
- {`${event.label} -
- ) : null} -
-
-
- )} - - ); - })} + {showInProgress && + ongoingEvents.map((event, _) => { + return ( + + ); + })} ) : null} @@ -827,186 +667,25 @@ export default function Events({ path, ...props }) { return page.map((event, j) => { const lastEvent = lastPage && page.length === j + 1; return ( - -
(viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))} - > -
- onSave(e, event.id, !event.retain_indefinitely)} - fill={event.retain_indefinitely ? 'currentColor' : 'none'} - /> - {event.end_time ? null : ( -
- In progress -
- )} -
-
-
-
- {event.label.replaceAll('_', ' ')} - {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null} -
- -
- - {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })} -
- - - -
-
- ( {getDurationFromTimestamps(event.start_time, event.end_time)} ) -
-
-
- - {event.camera.replaceAll('_', ' ')} -
- {event.zones.length ? ( -
- - {event.zones.join(', ').replaceAll('_', ' ')} -
- ) : null} -
- - {(event?.data?.top_score || event.top_score || 0) == 0 - ? null - : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} - {(event?.data?.sub_label_score || 0) == 0 - ? null - : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} -
-
- -
- onDelete(e, event.id, event.retain_indefinitely)} - /> - - onDownloadClick(e, event)} - /> -
-
-
- {viewEvent !== event.id ? null : ( -
-
-
- - - - -
- -
- {eventDetailType == 'clip' && event.has_clip ? ( -
- - onEventFrameSelected(event, frame, seekSeconds) - } - /> -
- { - this.player = player; - this.player.on('playing', () => { - setEventOverlay(undefined); - }); - }} - onDispose={() => { - this.player = null; - }} - > - {eventOverlay ? ( - - ) : null} - -
-
- ) : null} - - {eventDetailType == 'image' || !event.has_clip ? ( -
- {`${event.label} -
- ) : null} -
-
-
- )} - + ); }); }) @@ -1018,3 +697,201 @@ export default function Events({ path, ...props }) { ); } + +function Event({ + className = '', + config, + event, + eventDetailType, + eventOverlay, + setEventOverlay, + viewEvent, + setViewEvent, + lastEvent, + lastEventRef, + uploading, + handleEventDetailTabChange, + onEventFrameSelected, + onDelete, + onDownloadClick, + onSave, + showSubmitToPlus, +}) { + const apiHost = useApiHost(); + + return ( +
+
(viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))} + > +
+ onSave(e, event.id, !event.retain_indefinitely)} + fill={event.retain_indefinitely ? 'currentColor' : 'none'} + /> + {event.end_time ? null : ( +
+ In progress +
+ )} +
+
+
+
+ {event.label.replaceAll('_', ' ')} + {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null} +
+ +
+ + {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })} +
+ - + +
+
+ ( {getDurationFromTimestamps(event.start_time, event.end_time)} ) +
+
+
+ + {event.camera.replaceAll('_', ' ')} +
+ {event.zones.length ? ( +
+ + {event.zones.join(', ').replaceAll('_', ' ')} +
+ ) : null} +
+ + {(event?.data?.top_score || event.top_score || 0) == 0 + ? null + : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} + {(event?.data?.sub_label_score || 0) == 0 + ? null + : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} +
+
+ +
+ onDelete(e, event.id, event.retain_indefinitely)} + /> + + onDownloadClick(e, event)} + /> +
+
+
+ {viewEvent !== event.id ? null : ( +
+
+
+ + + + +
+ +
+ {eventDetailType == 'clip' && event.has_clip ? ( +
+ onEventFrameSelected(event, frame, seekSeconds)} + /> +
+ { + this.player = player; + this.player.on('playing', () => { + setEventOverlay(undefined); + }); + }} + onDispose={() => { + this.player = null; + }} + > + {eventOverlay ? ( + + ) : null} + +
+
+ ) : null} + + {eventDetailType == 'image' || !event.has_clip ? ( +
+ {`${event.label} +
+ ) : null} +
+
+
+ )} +
+ ); +}