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]); }, [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 ( return (
<div <div
ref={timelineRef} ref={timelineRef}
onMouseMove={handleMouseMove}
onTouchMove={handleMouseMove}
onMouseUp={handleMouseUp}
onTouchEnd={handleMouseUp}
className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${ className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto" isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
}`} }`}
@ -181,13 +171,16 @@ export function EventReviewTimeline({
<div className="flex flex-col">{segments}</div> <div className="flex flex-col">{segments}</div>
{showHandlebar && ( {showHandlebar && (
<div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar"> <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 <div
ref={scrollTimeRef} ref={scrollTimeRef}
className={`relative w-full ${ className={`relative w-full ${
isDragging ? "cursor-grabbing" : "cursor-grab" isDragging ? "cursor-grabbing" : "cursor-grab"
}`} }`}
onMouseDown={handleMouseDown}
> >
<div <div
className={`bg-destructive rounded-full mx-auto ${ 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 { useCallback, useEffect } from "react";
import scrollIntoView from "scroll-into-view-if-needed"; import scrollIntoView from "scroll-into-view-if-needed";
import { isMobile } from "react-device-detect";
type DragHandlerProps = { type DragHandlerProps = {
contentRef: React.RefObject<HTMLElement>; contentRef: React.RefObject<HTMLElement>;
@ -34,7 +35,9 @@ function useDraggableHandler({
setIsDragging, setIsDragging,
}: DragHandlerProps) { }: DragHandlerProps) {
const handleMouseDown = useCallback( const handleMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => { (
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setIsDragging(true); setIsDragging(true);
@ -43,7 +46,9 @@ function useDraggableHandler({
); );
const handleMouseUp = useCallback( const handleMouseUp = useCallback(
(e: MouseEvent) => { (
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (isDragging) { if (isDragging) {
@ -91,7 +96,9 @@ function useDraggableHandler({
); );
const handleMouseMove = useCallback( const handleMouseMove = useCallback(
(e: MouseEvent) => { (
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
if ( if (
!contentRef.current || !contentRef.current ||
!timelineRef.current || !timelineRef.current ||
@ -100,10 +107,17 @@ function useDraggableHandler({
return; 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.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (showHandlebar && isDragging) { if (showHandlebar && isDragging && clientY) {
const { const {
scrollHeight: timelineHeight, scrollHeight: timelineHeight,
clientHeight: visibleTimelineHeight, clientHeight: visibleTimelineHeight,
@ -120,7 +134,7 @@ function useDraggableHandler({
visibleTimelineHeight - timelineTop + parentScrollTop, visibleTimelineHeight - timelineTop + parentScrollTop,
Math.max( Math.max(
segmentHeight + scrolled, segmentHeight + scrolled,
e.clientY - timelineTop + parentScrollTop, clientY - timelineTop + parentScrollTop,
), ),
); );