Improve desktop timeline view (#9150)

* Break apart mobile and desktop timeline views * Set aspect ratio for player correctly * more modest default width * Add timeline item card * Get video player to fit * get layout going * More work on youtube view * Get video scaling working * Better dialog sizes * Show all timelines for day * Add full day of timelines * Improve hooks * Fix previews * Separate mobile and desktop views and don't rerender * cleanup * Optimizations and improvements * make preview dates more efficient * Remove seekbar and use timeline as seekbar * Improve background and scrubbing
2024-01-01 09:37:07 -06:00
parent 0ee81c7526
commit 160e331035
10 changed files with 663 additions and 88 deletions
--- a/web/src/components/card/TimelineItemCard.tsx
+++ b/web/src/components/card/TimelineItemCard.tsx
@@ -0,0 +1,76 @@
+import { getTimelineItemDescription } from "@/utils/timelineUtil";
+import { Button } from "../ui/button";
+import Logo from "../Logo";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import VideoPlayer from "../player/VideoPlayer";
+import { Card } from "../ui/card";
+
+type TimelineItemCardProps = {
+  timeline: Timeline;
+  relevantPreview: Preview | undefined;
+  onSelect: () => void;
+};
+export default function TimelineItemCard({
+  timeline,
+  relevantPreview,
+  onSelect,
+}: TimelineItemCardProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  return (
+    <Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
+      <div className="w-1/2 p-2">
+        {relevantPreview && (
+          <VideoPlayer
+            options={{
+              preload: "auto",
+              height: "114",
+              width: "202",
+              autoplay: true,
+              controls: false,
+              fluid: false,
+              muted: true,
+              loadingSpinner: false,
+              sources: [
+                {
+                  src: `${relevantPreview.src}`,
+                  type: "video/mp4",
+                },
+              ],
+            }}
+            seekOptions={{}}
+            onReady={(player) => {
+              player.pause(); // autoplay + pause is required for iOS
+              player.currentTime(timeline.timestamp - relevantPreview.start);
+            }}
+          />
+        )}
+      </div>
+      <div className="px-2 py-1 w-1/2">
+        <div className="capitalize font-semibold text-sm">
+          {getTimelineItemDescription(timeline)}
+        </div>
+        <div className="text-sm">
+          {formatUnixTimestampToDateTime(timeline.timestamp, {
+            strftime_fmt:
+              config?.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p",
+            time_style: "medium",
+            date_style: "medium",
+          })}
+        </div>
+        <Button
+          className="absolute bottom-1 right-1"
+          size="sm"
+          variant="secondary"
+        >
+          <div className="w-8 h-8">
+            <Logo />
+          </div>
+          +
+        </Button>
+      </div>
+    </Card>
+  );
+}