Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use touch events for mobile review timeline #10212

Merged
merged 5 commits into from
Mar 3, 2024
Merged

Use touch events for mobile review timeline #10212

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b50ad87
mobile touch events
hawkeye217 Mar 3, 2024
93b6d11
rebase
hawkeye217 Mar 3, 2024
77b8dcf
fix scroll mode
hawkeye217 Mar 3, 2024
62fa09a
clean up deps and remove unneeded useeffect
hawkeye217 Mar 3, 2024
dea3ed5
remove vite
hawkeye217 Mar 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 9 additions & 16 deletions web/src/components/timeline/EventReviewTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,37 +157,30 @@ 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"
}`}
>
<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 ${
Expand Down
24 changes: 19 additions & 5 deletions web/src/hooks/use-handle-dragging.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>;
Expand Down Expand Up @@ -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);
Expand All @@ -43,7 +46,9 @@ function useDraggableHandler({
);

const handleMouseUp = useCallback(
(e: MouseEvent) => {
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
e.preventDefault();
e.stopPropagation();
if (isDragging) {
Expand Down Expand Up @@ -91,7 +96,9 @@ function useDraggableHandler({
);

const handleMouseMove = useCallback(
(e: MouseEvent) => {
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
) => {
if (
!contentRef.current ||
!timelineRef.current ||
Expand All @@ -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,
Expand All @@ -120,7 +134,7 @@ function useDraggableHandler({
visibleTimelineHeight - timelineTop + parentScrollTop,
Math.max(
segmentHeight + scrolled,
e.clientY - timelineTop + parentScrollTop,
clientY - timelineTop + parentScrollTop,
),
);

Expand Down
12 changes: 6 additions & 6 deletions web/vite.config.ts
View file
Open in desktop
Copy link
Sponsor Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to undo this

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was in the process when you commented 😂

Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,24 @@ export default defineConfig({
server: {
proxy: {
"/api": {
target: "http://localhost:5000",
target: "http://192.168.5.4:5000",
ws: true,
},
"/vod": {
target: "http://localhost:5000",
target: "http://192.168.5.4:5000",
},
"/clips": {
target: "http://localhost:5000",
target: "http://192.168.5.4:5000",
},
"/exports": {
target: "http://localhost:5000",
target: "http://192.168.5.4:5000",
},
"/ws": {
target: "ws://localhost:5000",
target: "ws://192.168.5.4:5000",
ws: true,
},
"/live": {
target: "ws://localhost:5000",
target: "ws://192.168.5.4:5000",
changeOrigin: true,
ws: true,
},
Expand Down
Loading