diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx index 13d36d0d1..a299cf9ec 100644 --- a/web/src/components/player/PreviewPlayer.tsx +++ b/web/src/components/player/PreviewPlayer.tsx @@ -272,25 +272,12 @@ class PreviewVideoController extends PreviewController { return false; } - const seekTime = time - this.preview.start; - - if ( - isAndroid && - isChrome && - this.scrubbing && - Math.abs(seekTime - this.previewRef.current.currentTime) > 400 - ) { - // android/chrome has incorrect timestamps sent that are before the expected seek time - return false; - } + const seekTime = Math.max(0, time - this.preview.start); if (this.seeking) { - this.timeToSeek = time; + this.timeToSeek = seekTime; } else { - this.previewRef.current.currentTime = Math.max( - 0, - time - this.preview.start, - ); + this.previewRef.current.currentTime = seekTime; this.seeking = true; } @@ -303,16 +290,15 @@ class PreviewVideoController extends PreviewController { } if (this.timeToSeek) { - const diff = - Math.round(this.timeToSeek) - - Math.round(this.previewRef.current.currentTime + this.preview.start); + const diff = Math.round( + this.timeToSeek - this.previewRef.current.currentTime, + ); const scrubLimit = isMobile ? 1 : 0.5; if (Math.abs(diff) >= scrubLimit) { // only seek if there is an appropriate amount of time difference - this.previewRef.current.currentTime = - this.timeToSeek - this.preview.start; + this.previewRef.current.currentTime = this.timeToSeek; } else { this.seeking = false; this.timeToSeek = undefined; diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index 6d10667e4..e3676e747 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -24,7 +24,7 @@ type PreviewPlayerProps = { review: ReviewSegment; allPreviews?: Preview[]; scrollLock?: boolean; - onTimeUpdate?: React.Dispatch>; + onTimeUpdate?: (time: number | undefined) => void; setReviewed: (review: ReviewSegment) => void; onClick: (reviewId: string, ctrl: boolean) => void; }; diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx index 6f5462481..c3d2aac9e 100644 --- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx +++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx @@ -120,13 +120,13 @@ export default function DynamicVideoPlayer({ const onTimeUpdate = useCallback( (time: number) => { - if (!controller || !onTimestampUpdate || time == 0) { + if (isScrubbing || !controller || !onTimestampUpdate || time == 0) { return; } onTimestampUpdate(controller.getProgress(time)); }, - [controller, onTimestampUpdate], + [controller, onTimestampUpdate, isScrubbing], ); // state of playback player @@ -176,7 +176,13 @@ export default function DynamicVideoPlayer({ onTimeUpdate={onTimeUpdate} onPlayerLoaded={onPlayerLoaded} onClipEnded={onClipEnded} - onPlaying={() => setIsLoading(false)} + onPlaying={() => { + if (isScrubbing) { + playerRef.current?.pause(); + } + + setIsLoading(false); + }} > {config && focusedItem && ( (); + const onPreviewTimeUpdate = useCallback( + (time: number | undefined) => { + if (!time) { + setPreviewTime(time); + return; + } + + if (!previewTime || time > previewTime) { + setPreviewTime(time); + } + }, + [previewTime, setPreviewTime], + ); + // review interaction const [hasUpdate, setHasUpdate] = useState(false); @@ -483,7 +497,7 @@ function DetectionReview({ allPreviews={relevantPreviews} setReviewed={markItemAsReviewed} scrollLock={scrollLock} - onTimeUpdate={setPreviewTime} + onTimeUpdate={onPreviewTimeUpdate} onClick={onSelectReview} />