diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx index 4b6735093..73d5fae10 100644 --- a/web/src/components/timeline/EventReviewTimeline.tsx +++ b/web/src/components/timeline/EventReviewTimeline.tsx @@ -15,7 +15,7 @@ export type EventReviewTimelineProps = { segmentDuration: number; timestampSpread: number; timelineStart: number; - timelineDuration?: number; + timelineEnd: number; showHandlebar?: boolean; handlebarTime?: number; showMinimap?: boolean; @@ -30,7 +30,7 @@ export function EventReviewTimeline({ segmentDuration, timestampSpread, timelineStart, - timelineDuration = 24 * 60 * 60, + timelineEnd, showHandlebar = false, handlebarTime, showMinimap = false, @@ -46,6 +46,10 @@ export function EventReviewTimeline({ const timelineRef = useRef(null); const currentTimeRef = useRef(null); const observer = useRef(null); + const timelineDuration = useMemo( + () => timelineEnd - timelineStart, + [timelineEnd, timelineStart] + ); const { alignDateToTimeline } = useEventUtils(events, segmentDuration); diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx index 42b4e88f7..68c44ab14 100644 --- a/web/src/pages/UIPlayground.tsx +++ b/web/src/pages/UIPlayground.tsx @@ -188,7 +188,7 @@ function UIPlayground() { segmentDuration={60} // seconds per segment timestampSpread={15} // minutes between each major timestamp timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects - timelineDuration={24 * 60 * 60} // in minutes, defaults to 24 hours + timelineEnd={Math.floor(Date.now() / 1000) + 2 * 60 * 60} // end of timeline - timestamp showHandlebar // show / hide the handlebar handlebarTime={Math.floor(Date.now() / 1000) - 27 * 60} // set the time of the handlebar showMinimap // show / hide the minimap