From 81baf285a9b80f7d92608a6216a6297cd65310dc Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:09:04 -0500
Subject: [PATCH] better alignment of motion timeline segments

---
 .../components/timeline/EventReviewTimeline.tsx  |  2 +-
 web/src/components/timeline/EventSegment.tsx     | 10 +++++-----
 web/src/components/timeline/MotionSegment.tsx    | 16 ++++++++--------
 web/src/components/timeline/SummaryTimeline.tsx  |  2 +-
 web/src/components/timeline/segment-metadata.tsx |  4 ++--
 web/src/hooks/use-camera-activity.ts             |  2 +-
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 56f2f64722..bccf43cd21 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -166,7 +166,7 @@ export function EventReviewTimeline({
 
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
-    const segmentCount = timelineDuration / segmentDuration;
+    const segmentCount = Math.ceil(timelineDuration / segmentDuration);
 
     return Array.from({ length: segmentCount }, (_, index) => {
       const segmentTime = timelineStartAligned - index * segmentDuration;
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 9fa2d025de..ab8f30157b 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -139,7 +139,7 @@ export function EventSegment({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
 
-  const segmentClasses = `h-2 relative w-full ${
+  const segmentClasses = `h-[8px] relative w-full ${
     showMinimap
       ? isInMinimapRange
         ? "bg-secondary-highlight"
@@ -149,7 +149,7 @@ export function EventSegment({
       : ""
   } ${
     isFirstSegmentInMinimap || isLastSegmentInMinimap
-      ? "relative h-2 border-b-2 border-neutral-600"
+      ? "relative h-[8px] border-b-2 border-neutral-600"
       : ""
   }`;
 
@@ -230,16 +230,16 @@ export function EventSegment({
           {severityValue === displaySeverityType && (
             <HoverCard openDelay={200} closeDelay={100}>
               <HoverCardTrigger asChild>
-                <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
+                <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-[8px] z-10 cursor-pointer">
                   <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
                     <div className="flex justify-center">
                       <div
-                        className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
+                        className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-[8px] ml-[2px] z-10 cursor-pointer"
                         data-severity={severityValue}
                       >
                         <div
                           key={`${segmentKey}_${index}_primary_data`}
-                          className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
+                          className={`w-full h-[8px] bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
                         ></div>
                       </div>
                     </div>
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 279f69a9ae..c7b30b7414 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -144,7 +144,7 @@ export function MotionSegment({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
 
-  const segmentClasses = `h-2 relative w-full ${
+  const segmentClasses = `h-[8px] relative w-full ${
     showMinimap
       ? isInMinimapRange
         ? "bg-secondary-highlight"
@@ -154,7 +154,7 @@ export function MotionSegment({
       : ""
   } ${
     isFirstSegmentInMinimap || isLastSegmentInMinimap
-      ? "relative h-2 border-b-2 border-gray-500"
+      ? "relative h-[8px] border-b-2 border-gray-500"
       : ""
   }`;
 
@@ -223,9 +223,9 @@ export function MotionSegment({
             </>
           )}
 
-          <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
-            <div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
-              <div className="flex justify-center">
+          <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-[8px] z-10 cursor-pointer">
+            <div className="flex flex-row justify-center w-[20px] md:w-[40px] pt-[1px] mb-[1px]">
+              <div className="flex justify-center mb-[1px]">
                 <div
                   key={`${segmentKey}_motion_data_1`}
                   data-motion-value={secondHalfSegmentWidth}
@@ -237,7 +237,7 @@ export function MotionSegment({
               </div>
             </div>
 
-            <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
+            <div className="flex flex-row justify-center pb-[1px] w-[20px] md:w-[40px]">
               <div className="flex justify-center">
                 <div
                   key={`${segmentKey}_motion_data_2`}
@@ -256,11 +256,11 @@ export function MotionSegment({
               if (severityValue > 0) {
                 return (
                   <React.Fragment key={index}>
-                    <div className="absolute right-0 h-2 z-10">
+                    <div className="absolute right-0 h-[8px] z-10">
                       <div
                         key={`${segmentKey}_${index}_secondary_data`}
                         className={`
-                          w-1 h-2 bg-gradient-to-r
+                          w-1 h-[8px] bg-gradient-to-r
                           ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
                           ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
                           ${severityColors[severityValue]}
diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx
index 29fe116805..f915cfca65 100644
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/web/src/components/timeline/SummaryTimeline.tsx
@@ -57,7 +57,7 @@ export function SummaryTimeline({
 
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
-    const segmentCount = reviewTimelineDuration / segmentDuration;
+    const segmentCount = Math.ceil(reviewTimelineDuration / segmentDuration);
 
     if (segmentHeight) {
       return Array.from({ length: segmentCount }, (_, index) => {
diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index a0f3031751..349f56276d 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -59,7 +59,7 @@ export function MinimapBounds({
 export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
   return (
     <div className="absolute">
-      <div className="flex items-end content-end w-[12px] h-2">
+      <div className="flex items-end content-end w-[12px] h-[8px]">
         <div
           className={`pointer-events-none select-none h-0.5 ${
             timestamp.getMinutes() % timestampSpread === 0 &&
@@ -84,7 +84,7 @@ export function Timestamp({
   segmentKey,
 }: TimestampSegmentProps) {
   return (
-    <div className="absolute left-[15px] h-2 z-10">
+    <div className="absolute left-[15px] h-[8px] z-10">
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
         <div
           key={`${segmentKey}_timestamp`}
diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 9ecc7187cf..d8cb3c5064 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -82,7 +82,7 @@ export function useCameraMotionNextTimestamp(
   });
 
   const noMotionRanges = useMemo(() => {
-    if (!motionData || !reviewItems) {
+    if (!motionData || !reviewItems || !motionData) {
       return;
     }