better alignment of motion timeline segments

blakeblackshear · Mar 26, 2024 · 81baf28 · 81baf28
1 parent 3da16b1
commit 81baf28
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -82,7 +82,7 @@ export function useCameraMotionNextTimestamp(
  });
 
  const noMotionRanges = useMemo(() => {
- if (!motionData || !reviewItems) {
+ if (!motionData || !reviewItems || !motionData) {
  return;
  }