diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index 7b5ffac64..cbcebd386 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -26,8 +26,8 @@ type PreviewPlayerProps = { review: ReviewSegment; relevantPreview?: Preview; autoPlayback?: boolean; - setReviewed?: () => void; - onClick?: () => void; + setReviewed?: (reviewId: string) => void; + onClick?: (reviewId: string) => void; }; type Preview = { @@ -53,6 +53,22 @@ export default function PreviewThumbnailPlayer({ const [progress, setProgress] = useState(0); const [imgRef, imgLoaded, onImgLoad] = useImageLoaded(); + // interaction + + const handleOnClick = useCallback(() => { + if (onClick) { + onClick(review.id); + } + }, [review, onClick]); + + const handleSetReviewed = useCallback(() => { + if (setReviewed) { + setReviewed(review.id); + } + }, [review, setReviewed]); + + // playback + const playingBack = useMemo(() => playback, [playback, autoPlayback]); useEffect(() => { @@ -110,7 +126,7 @@ export default function PreviewThumbnailPlayer({ className="relative w-full h-full cursor-pointer" onMouseEnter={isMobile ? undefined : () => onPlayback(true)} onMouseLeave={isMobile ? undefined : () => onPlayback(false)} - onClick={onClick} + onClick={handleOnClick} > {playingBack && (
@@ -118,7 +134,7 @@ export default function PreviewThumbnailPlayer({ review={review} relevantPreview={relevantPreview} setProgress={setProgress} - setReviewed={setReviewed} + setReviewed={handleSetReviewed} />
)} @@ -194,7 +210,7 @@ type PreviewContentProps = { review: ReviewSegment; relevantPreview: Preview | undefined; setProgress?: (progress: number) => void; - setReviewed?: () => void; + setReviewed?: (reviewId: string) => void; }; function PreviewContent({ review, @@ -256,7 +272,7 @@ function PreviewContent({ lastPercent < 50 && playerPercent > 50 ) { - setReviewed(); + setReviewed(review.id); } setLastPercent(playerPercent); @@ -321,7 +337,7 @@ const MIN_LOAD_TIMEOUT_MS = 200; type InProgressPreviewProps = { review: ReviewSegment; setProgress?: (progress: number) => void; - setReviewed?: () => void; + setReviewed?: (reviewId: string) => void; }; function InProgressPreview({ review, @@ -355,7 +371,7 @@ function InProgressPreview({ } if (setReviewed && key == Math.floor(previewFrames.length / 2)) { - setReviewed(); + setReviewed(review.id); } setKey(key + 1); diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx index 8bac89d64..d31fefbbf 100644 --- a/web/src/views/events/DesktopEventView.tsx +++ b/web/src/views/events/DesktopEventView.tsx @@ -304,8 +304,8 @@ export default function DesktopEventView({ markItemAsReviewed(value.id)} - onClick={() => onSelectReview(value.id)} + setReviewed={markItemAsReviewed} + onClick={onSelectReview(value.id} /> {lastRow && !reachedEnd && } diff --git a/web/src/views/events/MobileEventView.tsx b/web/src/views/events/MobileEventView.tsx index d4ef788d5..75622013f 100644 --- a/web/src/views/events/MobileEventView.tsx +++ b/web/src/views/events/MobileEventView.tsx @@ -223,7 +223,7 @@ export default function MobileEventView({ review={value} relevantPreview={relevantPreview} autoPlayback={minimapBounds.end == value.start_time} - setReviewed={() => markItemAsReviewed(value.id)} + setReviewed={markItemAsReviewed} /> {lastRow && !reachedEnd && }