Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Use touch events for mobile review timeline (#10212)

Browse Source 
* mobile touch events

* rebase

* fix scroll mode

* clean up deps and remove unneeded useeffect

* remove vite
This commit is contained in:
Josh Hawkins 2024-03-03 13:50:38 -06:00 committed by GitHub
parent c74eb75554
commit a515697e08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/timeline/EventReviewTimeline.tsx
View File

@ -157,23 +157,13 @@ export function EventReviewTimeline({
}
}, [isDragging, onHandlebarDraggingChange]);
useEffect(() => {
generateSegments();
// TODO: touch events for mobile
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [generateSegments, timelineStart, handleMouseUp, handleMouseMove]);
return (
<div
ref={timelineRef}
onMouseMove={handleMouseMove}
onTouchMove={handleMouseMove}
onMouseUp={handleMouseUp}
onTouchEnd={handleMouseUp}
className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
}`}
@ -181,13 +171,16 @@ export function EventReviewTimeline({
<div className="flex flex-col">{segments}</div>
{showHandlebar && (
<div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
<div className={`flex items-center justify-center `}>
<div
className="flex items-center justify-center touch-none select-none"
onMouseDown={handleMouseDown}
onTouchStart={handleMouseDown}
>
<div
ref={scrollTimeRef}
className={`relative w-full ${
isDragging ? "cursor-grabbing" : "cursor-grab"
}`}
onMouseDown={handleMouseDown}
>
<div
className={`bg-destructive rounded-full mx-auto ${

24
web/src/hooks/use-handle-dragging.ts
View File

@ -1,5 +1,6 @@
import { useCallback, useEffect } from "react";
import scrollIntoView from "scroll-into-view-if-needed";
import { isMobile } from "react-device-detect";
type DragHandlerProps = {
contentRef: React.RefObject<HTMLElement>;
@ -34,7 +35,9 @@ function useDraggableHandler({
setIsDragging,
}: DragHandlerProps) {
const handleMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
@ -43,7 +46,9 @@ function useDraggableHandler({
);
const handleMouseUp = useCallback(
(e: MouseEvent) => {
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
e.preventDefault();
e.stopPropagation();
if (isDragging) {
@ -91,7 +96,9 @@ function useDraggableHandler({
);
const handleMouseMove = useCallback(
(e: MouseEvent) => {
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
if (
!contentRef.current ||
!timelineRef.current ||
@ -100,10 +107,17 @@ function useDraggableHandler({
return;
}
let clientY;
if (isMobile && e.nativeEvent instanceof TouchEvent) {
clientY = e.nativeEvent.touches[0].clientY;
} else if (e.nativeEvent instanceof MouseEvent) {
clientY = e.nativeEvent.clientY;
}
e.preventDefault();
e.stopPropagation();
if (showHandlebar && isDragging) {
if (showHandlebar && isDragging && clientY) {
const {
scrollHeight: timelineHeight,
clientHeight: visibleTimelineHeight,
@ -120,7 +134,7 @@ function useDraggableHandler({
visibleTimelineHeight - timelineTop + parentScrollTop,
Math.max(
segmentHeight + scrolled,
e.clientY - timelineTop + parentScrollTop,
clientY - timelineTop + parentScrollTop,
),
);