From 614c950e6766319782c646efef76ce637d21a310 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Apr 2023 10:11:54 -0600
Subject: [PATCH] Get box overlay working

---
 web/src/components/TimelineSummary.jsx |  2 +-
 web/src/routes/Events.jsx              | 64 +++++++++++++++++---------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 155129be9..c25ee2a53 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -22,7 +22,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
 
   const onSelectMoment = async (index) => {
     setTimeIndex(index);
-    onFrameSelected(eventTimeline[index].timestamp);
+    onFrameSelected(eventTimeline[index]);
   };
 
   if (!eventTimeline || !config) {
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 8aa0b9a90..d99d6e000 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -61,6 +61,7 @@ export default function Events({ path, ...props }) {
   });
   const [uploading, setUploading] = useState([]);
   const [viewEvent, setViewEvent] = useState();
+  const [eventOverlay, setEventOverlay] = useState();
   const [eventDetailType, setEventDetailType] = useState('clip');
   const [downloadEvent, setDownloadEvent] = useState({
     id: null,
@@ -181,14 +182,15 @@ export default function Events({ path, ...props }) {
     onFilter(name, items);
   };
 
-  const onEventFrameSelected = (event, frameTime) => {
+  const onEventFrameSelected = (event, frame) => {
     const eventDuration = event.end_time - event.start_time;
 
     if (this.player) {
       this.player.pause();
       const videoOffset = this.player.duration() - eventDuration;
-      const startTime = videoOffset + (frameTime - event.start_time);
+      const startTime = videoOffset + (frame.timestamp - event.start_time);
       this.player.currentTime(startTime);
+      setEventOverlay(frame);
     }
   };
 
@@ -588,27 +590,45 @@ export default function Events({ path, ...props }) {
                             <div>
                               <TimelineSummary
                                 event={event}
-                                onFrameSelected={(frameTime) => onEventFrameSelected(event, frameTime)}
-                              />
-                              <VideoPlayer
-                                options={{
-                                  preload: 'auto',
-                                  autoplay: true,
-                                  sources: [
-                                    {
-                                      src: `${apiHost}vod/event/${event.id}/master.m3u8`,
-                                      type: 'application/vnd.apple.mpegurl',
-                                    },
-                                  ],
-                                }}
-                                seekOptions={{ forward: 10, backward: 5 }}
-                                onReady={(player) => {
-                                  this.player = player;
-                                }}
-                                onDispose={() => {
-                                  this.player = null;
-                                }}
+                                onFrameSelected={(frame) => onEventFrameSelected(event, frame)}
                               />
+                              <div>
+                                <VideoPlayer
+                                  options={{
+                                    preload: 'auto',
+                                    autoplay: true,
+                                    sources: [
+                                      {
+                                        src: `${apiHost}vod/event/${event.id}/master.m3u8`,
+                                        type: 'application/vnd.apple.mpegurl',
+                                      },
+                                    ],
+                                  }}
+                                  seekOptions={{ forward: 10, backward: 5 }}
+                                  onReady={(player) => {
+                                    this.player = player;
+                                  }}
+                                  onDispose={() => {
+                                    this.player = null;
+                                  }}
+                                >
+
+                                  {eventOverlay ? (
+                                    <div
+                                      className="absolute border-4 border-red-600"
+                                      style={{left: `${Math.round(
+                                        eventOverlay.data.box[0] * 100
+                                      )}%`, top: `${Math.round(eventOverlay.data.box[1] * 100)}%`, right: `${Math.round(
+                                        (1 - eventOverlay.data.box[2]) * 100
+                                      )}%`, bottom: `${Math.round((1 - eventOverlay.data.box[3]) * 100)}%`}}
+                                    >
+                                      {eventOverlay.class_type == 'entered_zone' ? (
+                                        <div className="absolute w-2 h-2 bg-red-600 left-[50%] bottom-0" />
+                                      ) : null}
+                                    </div>
+                                  ) : null}
+                                </VideoPlayer>
+                              </div>
                             </div>
                           ) : null}