From 281ddde15c11f9a18ca75b588f29e27d6b207281 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:16:04 -0500
Subject: [PATCH] fix thumbnails and annotation offset math

---
 .../overlay/detail/ObjectLifecycle.tsx        |  4 +---
 .../overlay/detail/ReviewDetailDialog.tsx     | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/src/components/overlay/detail/ObjectLifecycle.tsx b/web/src/components/overlay/detail/ObjectLifecycle.tsx
index 3e6569f05..2dc5d2033 100644
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@@ -119,9 +119,7 @@ export default function ObjectLifecycle({
       return 0;
     }
 
-    return (
-      (config.cameras[event.camera]?.detect?.annotation_offset || 0) / 1000
-    );
+    return config.cameras[event.camera]?.detect?.annotation_offset || 0;
   }, [config, event]);
 
   const [annotationOffset, setAnnotationOffset] = useState<number>(
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 16654e938..0d81f043b 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -223,16 +223,16 @@ function EventItem({
         onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
         key={event.id}
       >
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
+        {event.has_snapshot && (
+          <>
+            <div className="pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
+          </>
+        )}
         <img
           ref={imgRef}
           className={cn(
-            "aspect-video select-none rounded-lg object-contain transition-opacity",
-            event.has_snapshot &&
-              event.plus_id == undefined &&
-              config?.plus.enabled &&
-              "cursor-pointer",
+            "select-none rounded-lg object-contain transition-opacity",
           )}
           style={
             isIOS
@@ -251,7 +251,13 @@ function EventItem({
         />
         {hovered && (
           <div>
-            <div className="absolute right-1 top-1 flex items-center gap-2">
+            <div
+              className={cn(
+                "absolute",
+                event.has_snapshot ? "right-1" : "left-1",
+                "top-1 flex items-center gap-2",
+              )}
+            >
               <Tooltip>
                 <TooltipTrigger asChild>
                   <a