From 4173a2286047c76efbb25327f264eed340b022b5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:32:49 -0600
Subject: [PATCH] fix long press in review

---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 11 +++++++++--
 web/src/hooks/use-press.ts                           |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 5c9ccb0a2..dbf60d40b 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -21,6 +21,8 @@ import { cn } from "@/lib/utils";
 import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
 import { baseUrl } from "@/api/baseUrl";
+import usePress from "@/hooks/use-press";
+import { LongPressReactEvents } from "use-long-press";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -49,7 +51,7 @@ export default function PreviewThumbnailPlayer({
 
   const [ignoreClick, setIgnoreClick] = useState(false);
   const handleOnClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
+    (e: LongPressReactEvents<Element>) => {
       if (!ignoreClick) {
         onClick(review, e.metaKey, false);
       }
@@ -77,6 +79,11 @@ export default function PreviewThumbnailPlayer({
     onClick(review, true, false);
   });
 
+  const bindClickAndLongPress = usePress({
+    onLongPress: () => onClick(review, true, false),
+    onPress: (e) => handleOnClick(e),
+  })();
+
   // playback
 
   const relevantPreview = useMemo(() => {
@@ -176,7 +183,7 @@ export default function PreviewThumbnailPlayer({
       className="relative size-full cursor-pointer"
       onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
       onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
-      onClick={handleOnClick}
+      {...bindClickAndLongPress}
       onAuxClick={(e) => {
         if (e.button === 1) {
           window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus();
diff --git a/web/src/hooks/use-press.ts b/web/src/hooks/use-press.ts
index 5115541ec..6e97ce11b 100644
--- a/web/src/hooks/use-press.ts
+++ b/web/src/hooks/use-press.ts
@@ -10,7 +10,7 @@ import {
 export default function usePress(
   options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & {
     onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>;
-    onPress: () => void;
+    onPress: (event: LongPressReactEvents<Element>) => void;
   },
 ) {
   const { onLongPress, onPress, ...actualOptions } = options;
@@ -43,9 +43,9 @@ export default function usePress(
   return useCallback(
     () => ({
       ...bind(),
-      onClick: () => {
+      onClick: (event: LongPressReactEvents<HTMLDivElement>) => {
         if (!hasLongPress) {
-          onPress();
+          onPress(event);
         }
       },
     }),