From 50e4b82b0111d1254f0e86b430fc8771a3f955af Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Apr 2023 08:47:48 -0600
Subject: [PATCH] Move player logic back to clips

---
 web/src/components/TimelineSummary.jsx | 39 ++---------------
 web/src/routes/Events.jsx              | 59 +++++++++++++++++---------
 2 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 7947406c8..155129be9 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -1,19 +1,14 @@
 import { h } from 'preact';
 import useSWR from 'swr';
-import Heading from './Heading';
 import ActivityIndicator from './ActivityIndicator';
 import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
 import PlayIcon from '../icons/Play';
 import ExitIcon from '../icons/Exit';
 import { Zone } from '../icons/Zone';
 import { useState } from 'preact/hooks';
-import { useApiHost } from '../api';
 import Button from './Button';
-import VideoPlayer from './VideoPlayer';
 
-export default function TimelineSummary({ event }) {
-  const apiHost = useApiHost();
-  const eventDuration = event.end_time - event.start_time;
+export default function TimelineSummary({ event, onFrameSelected }) {
   const { data: eventTimeline } = useSWR([
     'timeline',
     {
@@ -23,16 +18,11 @@ export default function TimelineSummary({ event }) {
 
   const { data: config } = useSWR('config');
 
-  const [timeIndex, setTimeIndex] = useState(0);
+  const [timeIndex, setTimeIndex] = useState(-1);
 
   const onSelectMoment = async (index) => {
     setTimeIndex(index);
-
-    if (this.player) {
-      const videoOffset = this.player.duration() - eventDuration;
-      const startTime = videoOffset + (eventTimeline[index].timestamp - event.start_time);
-      this.player.currentTime(startTime);
-    }
+    onFrameSelected(eventTimeline[index].timestamp);
   };
 
   if (!eventTimeline || !config) {
@@ -68,29 +58,6 @@ export default function TimelineSummary({ event }) {
           )}
         </div>
       </div>
-
-      <div className="text-center">
-        <Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
-        <VideoPlayer
-          options={{
-            preload: 'auto',
-            autoplay: false,
-            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;
-          }}
-        />
-      </div>
     </div>
   );
 }
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 99ea30943..8aa0b9a90 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -181,6 +181,17 @@ export default function Events({ path, ...props }) {
     onFilter(name, items);
   };
 
+  const onEventFrameSelected = (event, frameTime) => {
+    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);
+      this.player.currentTime(startTime);
+    }
+  };
+
   const datePicker = useRef();
 
   const downloadButton = useRef();
@@ -283,7 +294,7 @@ export default function Events({ path, ...props }) {
   };
 
   const handleEventDetailTabChange = (index) => {
-    setEventDetailType(index == 0 ? 'clip' : index == 1 ? 'image' : 'timeline');
+    setEventDetailType(index == 0 ? 'clip' : 'image');
   };
 
   if (!config) {
@@ -563,34 +574,42 @@ export default function Events({ path, ...props }) {
                       <div className="mx-auto max-w-7xl">
                         <div className="flex justify-center w-full py-2">
                           <Tabs
-                            selectedIndex={
-                              event.has_clip && eventDetailType == 'clip' ? 0 : eventDetailType == 'timeline' ? 2 : 1
-                            }
+                            selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}
                             onChange={handleEventDetailTabChange}
                             className="justify"
                           >
                             <TextTab text="Clip" disabled={!event.has_clip} />
                             <TextTab text={event.has_snapshot ? 'Snapshot' : 'Thumbnail'} />
-                            <TextTab text="Timeline" disabled={!event.has_clip} />
                           </Tabs>
                         </div>
 
                         <div>
                           {eventDetailType == 'clip' && event.has_clip ? (
-                            <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={() => {}}
-                            />
+                            <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;
+                                }}
+                              />
+                            </div>
                           ) : null}
 
                           {eventDetailType == 'image' || !event.has_clip ? (
@@ -606,8 +625,6 @@ export default function Events({ path, ...props }) {
                               />
                             </div>
                           ) : null}
-
-                          {eventDetailType == 'timeline' ? <TimelineSummary event={event} /> : null}
                         </div>
                       </div>
                     </div>