make segment height static

This commit is contained in:
Josh Hawkins 2024-03-26 13:55:36 -05:00
parent 6fbd272acf
commit c5fa3cc0ad
4 changed files with 8 additions and 26 deletions

View File

@ -166,7 +166,7 @@ export function MotionReviewTimeline({
// 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;

View File

@ -100,8 +100,7 @@ export function useCameraMotionNextTimestamp(
alignStartDateToTimeline(timeRangeSegmentEnd)) %
segmentDuration;
const startIndex =
offset > 0 ? Math.floor(offset / (segmentDuration / 15)) : 0;
const startIndex = Math.abs(Math.floor(offset / 15));
for (
let i = startIndex;

View File

@ -40,6 +40,7 @@ function useDraggableElement({
setIsDragging,
setDraggableElementPosition,
}: DraggableElementProps) {
const segmentHeight = 8;
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
@ -134,15 +135,9 @@ function useDraggableElement({
const timestampToPixels = useCallback(
(time: number) => {
const { scrollHeight: timelineHeight } =
timelineRef.current as HTMLDivElement;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
return ((timelineStartAligned - time) / segmentDuration) * segmentHeight;
},
[segmentDuration, timelineRef, timelineStartAligned, timelineDuration],
[segmentDuration, timelineStartAligned],
);
const updateDraggableElementPosition = useCallback(
@ -225,11 +220,7 @@ function useDraggableElement({
clientYPosition &&
segments
) {
const { scrollHeight: timelineHeight, scrollTop: scrolled } =
timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const { scrollTop: scrolled } = timelineRef.current;
const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
@ -371,11 +362,7 @@ function useDraggableElement({
!isDragging &&
segments.length > 0
) {
const { scrollHeight: timelineHeight, scrollTop: scrolled } =
timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const { scrollTop: scrolled } = timelineRef.current;
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);

View File

@ -40,13 +40,9 @@ export function useTimelineUtils({
const getVisibleTimelineDuration = useCallback(() => {
if (timelineRef?.current && timelineDuration) {
const {
scrollHeight: timelineHeight,
clientHeight: visibleTimelineHeight,
} = timelineRef.current;
const { clientHeight: visibleTimelineHeight } = timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const segmentHeight = 8;
const visibleTime =
(visibleTimelineHeight / segmentHeight) * segmentDuration;