Refactor history viewer to show player / timeline for full hour and use preview while scrubbing timeline (#9051)

* Move history card view to separate view and create timeline view

* Get custom time scrubber working

* Add back nav

* Show timeline bounding boxes

* Implement seeking limiter

* Use browser history to allow back button to close timeline viewer

* Fix mobile timeline and add more icons for detections

* Play when item is initially visible

web/src/components/card/HistoryCard.tsx

@@ -10,11 +10,12 @@ import {
   getTimelineIcon,
   getTimelineItemDescription,
 } from "@/utils/timelineUtil";
+import { Button } from "../ui/button";
 
 type HistoryCardProps = {
   timeline: Card;
   relevantPreview?: Preview;
-  shouldAutoPlay: boolean;
+  isMobile: boolean;
   onClick?: () => void;
   onDelete?: () => void;
 };
@@ -22,7 +23,7 @@ type HistoryCardProps = {
 export default function HistoryCard({
   relevantPreview,
   timeline,
-  shouldAutoPlay,
+  isMobile,
   onClick,
   onDelete,
 }: HistoryCardProps) {
@@ -42,11 +43,12 @@ export default function HistoryCard({
         relevantPreview={relevantPreview}
         startTs={Object.values(timeline.entries)[0].timestamp}
         eventId={Object.values(timeline.entries)[0].source_id}
-        shouldAutoPlay={shouldAutoPlay}
+        isMobile={isMobile}
+        onClick={onClick}
       />
-      <div className="p-2">
+      <>
         <div className="text-sm flex justify-between items-center">
-          <div>
+          <div className="pl-1 pt-1">
             <LuClock className="h-5 w-5 mr-2 inline" />
             {formatUnixTimestampToDateTime(timeline.time, {
               strftime_fmt:
@@ -55,35 +57,38 @@ export default function HistoryCard({
               date_style: "medium",
             })}
           </div>
-          <LuTrash
-            className="w-5 h-5 m-1 cursor-pointer"
-            stroke="#f87171"
-            onClick={(e: Event) => {
-              e.stopPropagation();
+          <Button className="px-2 py-2" variant="ghost" size="xs">
+            <LuTrash
+              className="w-5 h-5 stroke-red-500"
+              onClick={(e: Event) => {
+                e.stopPropagation();
 
-              if (onDelete) {
-                onDelete();
-              }
-            }}
-          />
+                if (onDelete) {
+                  onDelete();
+                }
+              }}
+            />
+          </Button>
         </div>
-        <div className="capitalize text-sm flex items-center mt-1">
+        <div className="pl-1 capitalize text-sm flex items-center mt-1">
           <HiOutlineVideoCamera className="h-5 w-5 mr-2 inline" />
           {timeline.camera.replaceAll("_", " ")}
         </div>
-        <div className="my-2 text-sm font-medium">Activity:</div>
-        {Object.entries(timeline.entries).map(([_, entry]) => {
-          return (
-            <div
-              key={entry.timestamp}
-              className="flex text-xs capitalize my-1 items-center"
-            >
-              {getTimelineIcon(entry)}
-              {getTimelineItemDescription(entry)}
-            </div>
-          );
-        })}
-      </div>
+        <div className="pl-1 my-2">
+          <div className="text-sm font-medium">Activity:</div>
+          {Object.entries(timeline.entries).map(([_, entry], idx) => {
+            return (
+              <div
+                key={idx}
+                className="flex text-xs capitalize my-1 items-center"
+              >
+                {getTimelineIcon(entry)}
+                {getTimelineItemDescription(entry)}
+              </div>
+            );
+          })}
+        </div>
+      </>
     </Card>
   );
 }