administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 16:44:29 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-04 08:42:20 -06:00
parent e6e792cb21
commit 550c3af2dd
1 changed files with 1 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -243,8 +243,6 @@ function useDraggableElement({
segments.length > 0 && segments.length > 0 &&
fullTimelineHeight fullTimelineHeight
) { ) {
console.log("triggering scroll");
const { scrollTop: scrolled } = timelineRef.current; const { scrollTop: scrolled } = timelineRef.current;
const parentScrollTop = getCumulativeScrollTop(timelineRef.current); const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
@ -283,77 +281,17 @@ function useDraggableElement({
const start = Math.max(0, Math.floor(scrolled / segmentHeight)); const start = Math.max(0, Math.floor(scrolled / segmentHeight));
console.log("newElementposition", newElementPosition);
const relativePosition = newElementPosition - scrolled; const relativePosition = newElementPosition - scrolled;
const segmentIndex = const segmentIndex =
Math.floor(relativePosition / segmentHeight) + start + 1; Math.floor(relativePosition / segmentHeight) + start + 1;
console.log(
"segments",
segments,
"segment index",
segmentIndex,
"start",
start,
);
const targetSegmentTime = segments[segmentIndex]; const targetSegmentTime = segments[segmentIndex];
console.log("segment time:", new Date(targetSegmentTime * 1000));
if (targetSegmentTime === undefined) return; if (targetSegmentTime === undefined) return;
const segmentEnd = (segmentIndex - 1) * segmentHeight - scrolled;
const segmentStart = segmentIndex * segmentHeight - scrolled; const segmentStart = segmentIndex * segmentHeight - scrolled;
console.log(
"relative position",
relativePosition,
"segment end ",
segmentEnd,
"segment start",
segmentStart,
);
const offset = Math.min(segmentStart - relativePosition, segmentHeight); const offset = Math.min(segmentStart - relativePosition, segmentHeight);
// targetSegmentId =
// targetSegmentTime + (offset / segmentHeight) * segmentDuration;
// console.log(
// "target segment time",
// new Date(targetSegmentTime * 1000),
// "offset",
// offset,
// "final calc:",
// new Date(targetSegmentId * 1000),
// );
// updateDraggableElementPosition(
// newElementPosition,
// targetSegmentId,
// false,
// true,
// );
// }
// segments.forEach((segmentElement: HTMLDivElement) => {
// const rect = segmentElement.getBoundingClientRect();
// const segmentTop =
// rect.top + scrolled - timelineTopAbsolute - segmentHeight;
// const segmentBottom =
// rect.bottom + scrolled - timelineTopAbsolute - segmentHeight;
// // Check if handlebar position falls within the segment bounds
// if (
// newElementPosition >= segmentTop &&
// newElementPosition <= segmentBottom
// ) {
// targetSegmentId = parseFloat(
// segmentElement.getAttribute("data-segment-id") || "0",
// );
// offset = Math.min(
// segmentBottom - newElementPosition,
// segmentHeight,
// );
// return;
// }
// });
if ((draggingAtTopEdge || draggingAtBottomEdge) && scrollEdgeSize) { if ((draggingAtTopEdge || draggingAtBottomEdge) && scrollEdgeSize) {
if (draggingAtTopEdge) { if (draggingAtTopEdge) {
const intensity = Math.max( const intensity = Math.max(
@ -385,8 +323,6 @@ function useDraggableElement({
? targetSegmentTime ? targetSegmentTime
: targetSegmentTime + segmentDuration * (offset / segmentHeight); : targetSegmentTime + segmentDuration * (offset / segmentHeight);
console.log("set time", new Date(setTime * 1000));
updateDraggableElementPosition( updateDraggableElementPosition(
newElementPosition, newElementPosition,
setTime, setTime,
@ -444,99 +380,23 @@ function useDraggableElement({
!isDragging && !isDragging &&
segments.length > 0 segments.length > 0
) { ) {
console.log(
"Firing to find segment",
new Date(draggableElementTime * 1000),
);
// const segments = Array.from(
// timelineRef.current.querySelectorAll(".segment"),
// ) as HTMLDivElement[];
// if (segments.length == 0) {
// // still set initial time on handlebar
// updateDraggableElementPosition(
// 0,
// draggableElementTime,
// elementScrollIntoView,
// true,
// );
// return;
// }
const { scrollTop: scrolled } = timelineRef.current;
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime); const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
if (!userInteracting) { if (!userInteracting) {
scrollToSegment(alignedSegmentTime); scrollToSegment(alignedSegmentTime);
} }
const timelineRect = timelineRef.current.getBoundingClientRect();
const timelineTopAbsolute = timelineRect.top;
const segmentIndex = segments.findIndex( const segmentIndex = segments.findIndex(
(time) => time === alignedSegmentTime, (time) => time === alignedSegmentTime,
); );
console.log(
"aligned segment time",
new Date(alignedSegmentTime * 1000),
"segment index",
segmentIndex,
"segment duration",
segmentDuration,
);
if (segmentIndex !== 0) { if (segmentIndex !== 0) {
// const segmentTop = (segmentIndex - 1) * segmentHeight;
// const segmentBottom = segmentIndex * segmentHeight;
// console.log(
// "relative position",
// relativePosition,
// "segment top",
// segmentTop,
// "segment bottom",
// segmentBottom,
// );
// offset = Math.min(segmentBottom - relativePosition, segmentHeight);
// const segmentStartTime = targetSegmentTime;
// targetSegmentId =
// segmentStartTime + (offset / segmentHeight) * segmentDuration;
// console.log(
// "target segment time",
// new Date(targetSegmentTime * 1000),
// "offset",
// offset,
// "final calc:",
// new Date(targetSegmentId * 1000),
// );
const segmentEnd = (segmentIndex - 1) * segmentHeight;
const segmentStart = segmentIndex * segmentHeight; const segmentStart = segmentIndex * segmentHeight;
console.log(
"***** segment index",
segmentIndex,
"segment start",
segmentStart,
"segment end",
segmentEnd,
"scrolled",
scrolled,
"timeline top abs",
timelineTopAbsolute,
);
// const relativePosition =
// ((draggableElementTime - alignedSegmentTime) / segmentDuration) *
// segmentHeight;
// console.log("relative pos", relativePosition);
// const offset = Math.min(segmentStart - relativePosition, segmentHeight);
const offset = const offset =
((draggableElementTime - alignedSegmentTime) / segmentDuration) * ((draggableElementTime - alignedSegmentTime) / segmentDuration) *
segmentHeight; segmentHeight;
// subtract half the height of the handlebar cross bar (4px) for pixel perfection // subtract half the height of the handlebar cross bar (4px) for pixel perfection
const newElementPosition = segmentStart - offset - 2; const newElementPosition = segmentStart - offset - 2;
console.log("offset", offset, "new pos", newElementPosition);
updateDraggableElementPosition( updateDraggableElementPosition(
newElementPosition, newElementPosition,
@ -549,33 +409,6 @@ function useDraggableElement({
setElementScrollIntoView(false); setElementScrollIntoView(false);
} }
} }
// const segmentElement = timelineRef.current.querySelector(
// `[data-segment-id="${alignedSegmentTime}"]`,
// );
// if (segmentElement) {
// const timelineRect = timelineRef.current.getBoundingClientRect();
// const timelineTopAbsolute = timelineRect.top;
// const rect = segmentElement.getBoundingClientRect();
// const segmentTop = rect.top + scrolled - timelineTopAbsolute;
// const offset =
// ((draggableElementTime - alignedSegmentTime) / segmentDuration) *
// segmentHeight;
// // subtract half the height of the handlebar cross bar (4px) for pixel perfection
// const newElementPosition = segmentTop - offset - 2;
// updateDraggableElementPosition(
// newElementPosition,
// draggableElementTime,
// elementScrollIntoView,
// true,
// );
// if (initialScrollIntoViewOnly) {
// setElementScrollIntoView(false);
// }
// }
} }
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -621,11 +454,6 @@ function useDraggableElement({
), ),
); );
console.log(
"Firing for collapsed",
new Date(draggableElementTime * 1000),
);
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime); const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
if (segments.includes(alignedSegmentTime)) { if (segments.includes(alignedSegmentTime)) {