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 && }