Cleanups and fix safari preview speed on iOS

web/src/components/Statusbar.tsx

@@ -65,7 +65,7 @@ export default function Statusbar({}) {
         const gpu = parseInt(stats.gpu);
 
         return (
-          <div className="flex items-center text-sm">
+          <div key={gpuTitle} className="flex items-center text-sm">
             <MdCircle
               className={`w-2 h-2 mr-2 ${
                 gpu < 50

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -184,6 +184,21 @@ function PreviewContent({
   setProgress,
   setReviewed,
 }: PreviewContentProps) {
+  const [manualPlayback, setManualPlayback] = useState(false);
+
+  useEffect(() => {
+    if (!manualPlayback || !playerRef.current) {
+      return;
+    }
+
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      if (playerRef.current) {
+        playerRef.current.currentTime(playerRef.current.currentTime()!! + 1);
+      }
+    }, 125);
+    return () => clearInterval(intervalId);
+  }, [manualPlayback, playerRef]);
+
   if (relevantPreview && playback) {
     return (
       <VideoPlayer
@@ -218,10 +233,16 @@ function PreviewContent({
             review.start_time - relevantPreview.start - 8
           );
 
-          player.playbackRate(isSafari ? 2 : 8);
+          if (isSafari) {
+            player.pause();
+            setManualPlayback(true);
+          } else {
+            player.playbackRate(8);
+          }
+
           player.currentTime(playerStartTime);
           player.on("timeupdate", () => {
-            if (!setProgress || playerRef.current?.paused()) {
+            if (!setProgress) {
               return;
             }
 
@@ -242,6 +263,7 @@ function PreviewContent({
 
             if (playerPercent > 100) {
               playerRef.current?.pause();
+              setManualPlayback(false);
               setProgress(100.0);
             } else {
               setProgress(playerPercent);

web/src/views/events/DesktopEventView.tsx

@@ -244,8 +244,6 @@ export default function DesktopEventView() {
     return <ActivityIndicator />;
   }
 
-  console.log("end of the timeline is " + after + " vs " + (Math.floor(Date.now() / 1000) + 2 * 60 * 60))
-
   return (
     <div className="relative w-full h-full">
       <div className="absolute flex justify-between left-0 top-0 right-0">
@@ -331,40 +329,25 @@ export default function DesktopEventView() {
         })}
       </div>
       <div className="absolute top-12 right-0 bottom-0">
-        {after != 0 && (<EventReviewTimeline
+        {after != 0 && (
+          <EventReviewTimeline
             segmentDuration={60}
             timestampSpread={15}
-          timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects
+            timelineStart={Math.floor(Date.now() / 1000)}
-          timelineEnd={after} // end of timeline - timestamp
+            timelineEnd={after}
             showMinimap
             minimapStartTime={minimapBounds.start}
             minimapEndTime={minimapBounds.end}
             events={reviewItems.all}
             severityType={severity}
             contentRef={contentRef}
-        />)}
+          />
+        )}
       </div>
     </div>
   );
 }
 
-/**
- *          <EventReviewTimeline
-            segmentDuration={60} // seconds per segment
-            timestampSpread={15} // minutes between each major timestamp
-            timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects
-            timelineEnd={Math.floor(Date.now() / 1000) + 2 * 60 * 60} // end of timeline - timestamp
-            showHandlebar // show / hide the handlebar
-            handlebarTime={Math.floor(Date.now() / 1000) - 27 * 60} // set the time of the handlebar
-            showMinimap // show / hide the minimap
-            minimapStartTime={Math.floor(Date.now() / 1000) - 35 * 60} // start time of the minimap - the earlier time (eg 1:00pm)
-            minimapEndTime={Math.floor(Date.now() / 1000) - 21 * 60} // end of the minimap - the later time (eg 3:00pm)
-            events={mockEvents} // events, including new has_been_reviewed and severity properties
-            severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
-            contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
-          />
- */
-
 function ReviewCalendarButton() {
   const disabledDates = useMemo(() => {
     const tomorrow = new Date();