Streamline live view (#9772)

* Break out live page * Improving layouts and add chip component * Improve default camera player sizing * Improve live updating * Cleanup and fit figma * Use fixed height * Masonry layout * Fix stuff * Don't force heights * Adjust scaling * Cleanup * remove sidebar (#9731) * remove sidebar * keep sidebar on mobile for now and add icons * Fix revalidation * Cleanup * Cleanup width * Add chips for activity on cameras * Remove dashboard from header * Use Inter font (#9735) * Show still image when no activity is occurring * remove unused search params * add playing check for webrtc * Don't use grid at all for single column * Fix height on mobile * a few style updates to better match figma (#9745) * Remove active objects when they become stationary * Move to sidebar only and make settings separate component * Fix layout * Animate visibility of chips * Sidebar is full screen * Fix tall aspect ratio cameras * Fix complicated aspect logic * remove * Adjust thumbnail aspect and add text * margin on single column layout * Smaller event thumb text * Simplify basic image view * Only show the red dot when camera is recording * Improve typing for camera toggles * animate chips with react-transition-group (#9763) * don't flash when going to still image * revalidate * tooltips and active tracking outline (#9766) * tooltips * fix tooltip provider and add active tracking outline * remove unused icon * remove figma comment * Get live mode working for jsmpeg * add small gradient below timeago on event thumbnails (#9767) * Create live mode hook and make sure jsmpeg can be used * Enforce env var * Use print * Remove unstable * Add tooltips to thumbnails * Put back vite * Format * Update web/src/components/player/JSMpegPlayer.tsx --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Co-authored-by: Blake Blackshear <blake@frigate.video>
2024-02-10 05:30:53 -07:00
parent f6a4c2a7b3
commit 64988c9be0
33 changed files with 1111 additions and 972 deletions
--- a/web/src/components/image/EventThumbnail.tsx
+++ b/web/src/components/image/EventThumbnail.tsx
@@ -0,0 +1,44 @@
+import { baseUrl } from "@/api/baseUrl";
+import { Event as FrigateEvent } from "@/types/event";
+import { LuStar } from "react-icons/lu";
+import TimeAgo from "../dynamic/TimeAgo";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+type EventThumbnailProps = {
+  event: FrigateEvent;
+  onFavorite?: (e: Event, event: FrigateEvent) => void;
+};
+export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
+          style={{
+            backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
+          }}
+        >
+          <LuStar
+            className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
+            onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
+            fill={event.retain_indefinitely ? "currentColor" : "none"}
+          />
+          <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
+            <div className="absolute left-1 bottom-0 text-xs text-white w-full">
+              <TimeAgo time={event.start_time * 1000} dense />
+            </div>
+          </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        {`${event.label} ${
+          event.sub_label ? `(${event.sub_label})` : ""
+        } detected with score of ${(event.data.score * 100).toFixed(0)}% ${
+          event.data.sub_label_score
+            ? `(${event.data.sub_label_score * 100}%)`
+            : ""
+        }`}
+      </TooltipContent>
+    </Tooltip>
+  );
+}