administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

make segment height static

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/timeline/MotionReviewTimeline.tsx
View File

@ -166,7 +166,7 @@ export function MotionReviewTimeline({
// Generate segments for the timeline // Generate segments for the timeline
const generateSegments = useCallback(() => { const generateSegments = useCallback(() => {
const segmentCount = timelineDuration / segmentDuration; const segmentCount = Math.ceil(timelineDuration / segmentDuration);
return Array.from({ length: segmentCount }, (_, index) => { return Array.from({ length: segmentCount }, (_, index) => {
const segmentTime = timelineStartAligned - index * segmentDuration; const segmentTime = timelineStartAligned - index * segmentDuration;

3
web/src/hooks/use-camera-activity.ts
View File

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

21
web/src/hooks/use-draggable-element.ts
View File

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

8
web/src/hooks/use-timeline-utils.ts
View File

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