feat: enhance comment functionality with timestamp range support

- Added timestampEnd to Comment and CommentReply interfaces. - Implemented logic for handling comment timestamp ranges in the comment composer and comments pane. - Updated video player and player core to support frame stepping and improved seeking functionality. - Introduced frame mode toggle for precise navigation during video playback. - Closes #12
2026-09-11 17:46:06 +00:00 · 2026-04-25 22:58:16 +03:00
parent 63f331d220
commit 378ca1977b
8 changed files with 537 additions and 110 deletions
@@ -17,6 +17,7 @@ import type { AnnotationCanvasHandle, AnnotationStroke } from '@/components/anno
 import type {
  Comment,
  CommentActionsConfig,
+  CommentReply,
  CommentTag,
  Version,
  VideoData,
@@ -31,7 +32,6 @@ interface UseCommentActionsParams extends CommentActionsConfig {
  setVideo: Dispatch<SetStateAction<VideoData | null>>;
  activeVersionId: string | null;
  activeVersion: (Version & { comments: Comment[] }) | undefined;
-  comments: Comment[];
  currentTime: number;
  isGuest: boolean;
  normalizedGuestName: string;
@@ -56,7 +56,6 @@ export function useCommentActions({
  setVideo,
  activeVersionId,
  activeVersion,
-  comments,
  currentTime,
  isGuest,
  normalizedGuestName,
@@ -83,6 +82,8 @@ export function useCommentActions({
  const [isUploadingAudio, setIsUploadingAudio] = useState(false);
  const [imageBlob, setImageBlob] = useState<File | null>(null);
  const [isUploadingImage, setIsUploadingImage] = useState(false);
+  const [commentRangeStart, setCommentRangeStart] = useState<number | null>(null);
+  const [commentRangeEnd, setCommentRangeEnd] = useState<number | null>(null);
  const imageInputRef = useRef<HTMLInputElement>(null);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const audioChunksRef = useRef<Blob[]>([]);
@@ -97,6 +98,8 @@ export function useCommentActions({
  const [isUploadingReplyAudio, setIsUploadingReplyAudio] = useState(false);
  const [replyImageBlob, setReplyImageBlob] = useState<File | null>(null);
  const [isUploadingReplyImage, setIsUploadingReplyImage] = useState(false);
+  const [replyRangeStart, setReplyRangeStart] = useState<number | null>(null);
+  const [replyRangeEnd, setReplyRangeEnd] = useState<number | null>(null);
  const replyImageInputRef = useRef<HTMLInputElement>(null);
  const replyMediaRecorderRef = useRef<MediaRecorder | null>(null);
  const replyAudioChunksRef = useRef<Blob[]>([]);
@@ -114,6 +117,38 @@ export function useCommentActions({

  const isMutatingRef = useRef(false);

+  const clearCommentRangeSelection = useCallback(() => {
+    setCommentRangeStart(null);
+    setCommentRangeEnd(null);
+  }, []);
+
+  const clearReplyRangeSelection = useCallback(() => {
+    setReplyRangeStart(null);
+    setReplyRangeEnd(null);
+  }, []);
+
+  const toggleCommentRangeSelection = useCallback(() => {
+    if (commentRangeStart === null || commentRangeEnd !== null) {
+      setCommentRangeStart(currentTime);
+      setCommentRangeEnd(null);
+      return;
+    }
+
+    setCommentRangeStart(Math.min(commentRangeStart, currentTime));
+    setCommentRangeEnd(Math.max(commentRangeStart, currentTime));
+  }, [commentRangeEnd, commentRangeStart, currentTime]);
+
+  const toggleReplyRangeSelection = useCallback(() => {
+    if (replyRangeStart === null || replyRangeEnd !== null) {
+      setReplyRangeStart(currentTime);
+      setReplyRangeEnd(null);
+      return;
+    }
+
+    setReplyRangeStart(Math.min(replyRangeStart, currentTime));
+    setReplyRangeEnd(Math.max(replyRangeStart, currentTime));
+  }, [currentTime, replyRangeEnd, replyRangeStart]);
+
  const getGuestUploadToken = useCallback(
    async (intent: 'audio' | 'image') => {
      if (!isGuest) return null;
@@ -151,11 +186,13 @@ export function useCommentActions({
      }

      const tempId = `temp-${Date.now()}`;
+      const commentTimestamp = commentRangeStart ?? currentTime;
      const serializedAnnotation = effectiveStrokes ? JSON.stringify(effectiveStrokes) : null;
      const optimisticComment: Comment = {
        id: tempId,
        content: voiceData || imageBlob ? commentText.trim() || null : commentText,
-        timestamp: currentTime,
+        timestamp: commentTimestamp,
+        timestampEnd: commentRangeEnd,
        voiceUrl: voiceData?.url ?? null,
        voiceDuration: voiceData?.duration ?? null,
        imageUrl: imageBlob ? URL.createObjectURL(imageBlob) : null,
@@ -186,6 +223,7 @@ export function useCommentActions({
      setImageBlob(null);
      setAnnotationStrokes(null);
      setIsAnnotating(false);
+      clearCommentRangeSelection();
      setViewingAnnotation(effectiveStrokes || null);

      setIsSubmittingComment(true);
@@ -217,7 +255,8 @@ export function useCommentActions({
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            content: voiceData || imageBlob ? commentText.trim() || null : commentText,
-            timestamp: currentTime,
+            timestamp: commentTimestamp,
+            ...(commentRangeEnd !== null && { timestampEnd: commentRangeEnd }),
            ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
            ...(imageData && { imageUrl: imageData.url }),
            ...(isGuest && normalizedGuestName && { guestName: normalizedGuestName }),
@@ -287,6 +326,8 @@ export function useCommentActions({
    },
    [
      commentText,
+      commentRangeEnd,
+      commentRangeStart,
      currentTime,
      activeVersion,
      activeVersionId,
@@ -304,6 +345,7 @@ export function useCommentActions({
      setSelectedTagId,
      setAnnotationStrokes,
      setIsAnnotating,
+      clearCommentRangeSelection,
      setViewingAnnotation,
      setVideo,
      fetchAssets,
@@ -594,10 +636,12 @@ export function useCommentActions({
      if (!activeVersion || !activeVersionId) return;

      const tempId = `temp-reply-${Date.now()}`;
-      const parentComment = comments.find((c) => c.id === parentId);
-      const optimisticReply = {
+      const replyTimestamp = replyRangeStart ?? currentTime;
+      const optimisticReply: CommentReply = {
        id: tempId,
        content: voiceData || replyImageBlob ? replyText.trim() || null : replyText,
+        timestamp: replyTimestamp,
+        timestampEnd: replyRangeEnd,
        voiceUrl: voiceData?.url ?? null,
        voiceDuration: voiceData?.duration ?? null,
        imageUrl: replyImageBlob ? URL.createObjectURL(replyImageBlob) : null,
@@ -634,6 +678,7 @@ export function useCommentActions({
      setReplyAudioBlob(null);
      setReplyRecordingTime(0);
      setReplyImageBlob(null);
+      clearReplyRangeSelection();

      setIsSubmittingReply(true);
      isMutatingRef.current = true;
@@ -664,7 +709,8 @@ export function useCommentActions({
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            content: voiceData || submittedImageData ? replyText.trim() || null : replyText,
-            timestamp: parentComment?.timestamp ?? currentTime,
+            timestamp: replyTimestamp,
+            ...(replyRangeEnd !== null && { timestampEnd: replyRangeEnd }),
            parentId,
            ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
            ...(submittedImageData && { imageUrl: submittedImageData.url }),
@@ -752,9 +798,10 @@ export function useCommentActions({
    },
    [
      replyText,
+      replyRangeEnd,
+      replyRangeStart,
      activeVersion,
      activeVersionId,
-      comments,
      currentTime,
      isGuest,
      normalizedGuestName,
@@ -764,6 +811,7 @@ export function useCommentActions({
      getGuestUploadToken,
      setVideo,
      fetchAssets,
+      clearReplyRangeSelection,
    ]
  );

@@ -1099,6 +1147,10 @@ export function useCommentActions({
    isUploadingAudio,
    imageBlob,
    setImageBlob,
+    commentRangeStart,
+    commentRangeEnd,
+    toggleCommentRangeSelection,
+    clearCommentRangeSelection,
    isUploadingImage,
    imageInputRef,
    handleAddComment,
@@ -1120,6 +1172,10 @@ export function useCommentActions({
    replyAudioBlob,
    replyImageBlob,
    setReplyImageBlob,
+    replyRangeStart,
+    replyRangeEnd,
+    toggleReplyRangeSelection,
+    clearReplyRangeSelection,
    isUploadingReplyAudio,
    isUploadingReplyImage,
    replyImageInputRef,
@@ -57,6 +57,8 @@ export function useVideoPlayer({
  const [videoDuration, setVideoDuration] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
+  const [isFrameMode, setIsFrameMode] = useState(false);
+  const [estimatedFrameRate, setEstimatedFrameRate] = useState<number | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const isDraggingRef = useRef(false);
  const [playbackSpeed, setPlaybackSpeed] = useState(1);
@@ -71,10 +73,69 @@ export function useVideoPlayer({
  const [cursorIdle, setCursorIdle] = useState(false);
  const cursorIdleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const bunnyRetryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const bunnyFrameCallbackIdRef = useRef<number | null>(null);
+  const bunnyFrameSampleRef = useRef<{ mediaTime: number; presentedFrames: number } | null>(null);
  const [isFullscreenMode, setIsFullscreenMode] = useState(false);
  const [showComments, setShowComments] = useState(true);
  const [isMobileCommentsOpen, setIsMobileCommentsOpen] = useState(false);

+  const frameStepSeconds = useMemo(() => {
+    if (estimatedFrameRate && Number.isFinite(estimatedFrameRate) && estimatedFrameRate > 0) {
+      return 1 / estimatedFrameRate;
+    }
+    return 1;
+  }, [estimatedFrameRate]);
+
+  const frameStepLabel = useMemo(() => {
+    if (estimatedFrameRate && Number.isFinite(estimatedFrameRate) && estimatedFrameRate > 0) {
+      return '1f';
+    }
+    return '1s';
+  }, [estimatedFrameRate]);
+
+  const stopBunnyFrameTracking = useCallback(() => {
+    const videoEl = videoRef.current;
+    const callbackId = bunnyFrameCallbackIdRef.current;
+    if (videoEl && callbackId !== null && typeof videoEl.cancelVideoFrameCallback === 'function') {
+      videoEl.cancelVideoFrameCallback(callbackId);
+    }
+    bunnyFrameCallbackIdRef.current = null;
+    bunnyFrameSampleRef.current = null;
+  }, [videoRef]);
+
+  const startBunnyFrameTracking = useCallback(() => {
+    const videoEl = videoRef.current;
+    if (!videoEl || typeof videoEl.requestVideoFrameCallback !== 'function') return;
+
+    stopBunnyFrameTracking();
+
+    const trackFrameRate = (
+      _now: number,
+      metadata: { mediaTime: number; presentedFrames: number }
+    ) => {
+      const previousSample = bunnyFrameSampleRef.current;
+      bunnyFrameSampleRef.current = {
+        mediaTime: metadata.mediaTime,
+        presentedFrames: metadata.presentedFrames,
+      };
+
+      if (previousSample) {
+        const deltaFrames = metadata.presentedFrames - previousSample.presentedFrames;
+        const deltaTime = metadata.mediaTime - previousSample.mediaTime;
+        if (deltaFrames > 0 && deltaTime > 0) {
+          const nextFrameRate = deltaFrames / deltaTime;
+          if (Number.isFinite(nextFrameRate) && nextFrameRate >= 12 && nextFrameRate <= 120) {
+            setEstimatedFrameRate(nextFrameRate);
+          }
+        }
+      }
+
+      bunnyFrameCallbackIdRef.current = videoEl.requestVideoFrameCallback(trackFrameRate);
+    };
+
+    bunnyFrameCallbackIdRef.current = videoEl.requestVideoFrameCallback(trackFrameRate);
+  }, [stopBunnyFrameTracking, videoRef]);
+
  useEffect(() => {
    isDraggingRef.current = isDragging;
  }, [isDragging]);
@@ -157,6 +218,7 @@ export function useVideoPlayer({
    setVideoDuration(0);
    setIsPlaying(false);
    setIsMuted(false);
+    setEstimatedFrameRate(null);
    setPlaybackSpeed(1);
    setQualityOptions((prev) => (versionChanged ? [] : prev));
    setSelectedQualityLevel(bunnySourcePreference === 'original' ? -2 : -1);
@@ -182,6 +244,7 @@ export function useVideoPlayer({
      clearTimeout(bunnyRetryTimerRef.current);
      bunnyRetryTimerRef.current = null;
    }
+    stopBunnyFrameTracking();

    const initPlayer = () => {
      if (isYoutube) {
@@ -343,6 +406,9 @@ export function useVideoPlayer({
            }
          }
          syncDuration();
+          if (!videoEl.paused) {
+            startBunnyFrameTracking();
+          }
        };

        const onPlay = () => {
@@ -351,15 +417,18 @@ export function useVideoPlayer({
            setBunnyPlaybackState('none');
          }
          syncDuration();
+          startBunnyFrameTracking();
        };

        const onPause = () => {
          setIsPlaying(false);
+          stopBunnyFrameTracking();
          saveProgress();
        };

        const onEnded = () => {
          setIsPlaying(false);
+          stopBunnyFrameTracking();
          saveProgress();
        };

@@ -535,6 +604,7 @@ export function useVideoPlayer({
          destroy: () => {
            destroyed = true;
            clearRetryTimer();
+            stopBunnyFrameTracking();
            videoEl.removeEventListener('loadedmetadata', onLoadedMetadata);
            videoEl.removeEventListener('play', onPlay);
            videoEl.removeEventListener('pause', onPause);
@@ -593,6 +663,7 @@ export function useVideoPlayer({
        clearTimeout(bunnyRetryTimerRef.current);
        bunnyRetryTimerRef.current = null;
      }
+      stopBunnyFrameTracking();
    };
  }, [
    activeProviderId,
@@ -606,6 +677,8 @@ export function useVideoPlayer({
    iframeRef,
    playerRef,
    scheduleWatchProgressSaveRef,
+    startBunnyFrameTracking,
+    stopBunnyFrameTracking,
    videoRef,
  ]);

@@ -667,6 +740,88 @@ export function useVideoPlayer({
    return videoDuration || activeVersion?.duration || 0;
  }, [videoDuration, activeVersion?.duration]);

+  const resolveSkipAmount = useCallback(
+    (seconds: number) => {
+      if (!isFrameMode) return seconds;
+      const direction = seconds === 0 ? 1 : Math.sign(seconds);
+      return frameStepSeconds * direction;
+    },
+    [frameStepSeconds, isFrameMode]
+  );
+
+  const handleFrameModeToggle = useCallback(() => {
+    setIsFrameMode((prev) => !prev);
+  }, []);
+
+  const handlePlayPause = useCallback(() => {
+    if (!playerRef.current) return;
+    if (isPlaying) {
+      playerRef.current.pauseVideo();
+    } else {
+      playerRef.current.playVideo();
+    }
+  }, [isPlaying, playerRef]);
+
+  const handleSeekToTimestamp = useCallback(
+    (
+      timestamp: number,
+      annotation?: string | null,
+      options?: { pauseAfterSeek?: boolean; timestampEnd?: number | null }
+    ) => {
+      setCurrentTime(timestamp);
+      if (playerRef.current?.seekTo) {
+        const playerState = playerRef.current.getPlayerState?.();
+        const ytPlayingState = window.YT?.PlayerState?.PLAYING ?? 1;
+        const ytBufferingState = window.YT?.PlayerState?.BUFFERING ?? 3;
+        const wasPlayingBeforeSeek =
+          typeof playerState === 'number'
+            ? playerState === ytPlayingState || playerState === ytBufferingState
+            : isPlaying;
+        const hasRangeEnd = options?.timestampEnd !== undefined && options.timestampEnd !== null;
+        const shouldPauseAfterSeek = options?.pauseAfterSeek || hasRangeEnd;
+
+        playerRef.current.seekTo(timestamp, true);
+        if (shouldPauseAfterSeek) {
+          playerRef.current.pauseVideo();
+        } else if (wasPlayingBeforeSeek) {
+          playerRef.current.playVideo();
+        } else {
+          playerRef.current.pauseVideo();
+        }
+      }
+      if (annotation) {
+        try {
+          const parsed = JSON.parse(annotation);
+          const safe = validateAnnotationStrokes(parsed);
+          setViewingAnnotation(safe as AnnotationStroke[] | null);
+        } catch {
+          setViewingAnnotation(null);
+        }
+      } else {
+        setViewingAnnotation(null);
+      }
+    },
+    [isPlaying, playerRef, setViewingAnnotation]
+  );
+
+  const handleMuteToggle = useCallback(() => {
+    if (!playerRef.current) return;
+    if (isMuted) {
+      playerRef.current.unMute();
+    } else {
+      playerRef.current.mute();
+    }
+    setIsMuted(!isMuted);
+  }, [isMuted, playerRef]);
+
+  const handleSkip = useCallback(
+    (seconds: number) => {
+      const newTime = Math.max(0, Math.min(duration, currentTime + resolveSkipAmount(seconds)));
+      handleSeekToTimestamp(newTime);
+    },
+    [currentTime, duration, handleSeekToTimestamp, resolveSkipAmount]
+  );
+
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (document.querySelector('[data-slot="dialog-content"]')) {
@@ -692,23 +847,11 @@ export function useVideoPlayer({
          break;
        case 'ArrowLeft':
          e.preventDefault();
-          if (playerRef.current) {
-            const newTime = Math.max(0, currentTime - 5);
-            if (playerRef.current.seekTo) {
-              playerRef.current.seekTo(newTime, true);
-            }
-            setCurrentTime(newTime);
-          }
+          handleSkip(-5);
          break;
        case 'ArrowRight':
          e.preventDefault();
-          if (playerRef.current) {
-            const newTime = Math.min(duration, currentTime + 5);
-            if (playerRef.current.seekTo) {
-              playerRef.current.seekTo(newTime, true);
-            }
-            setCurrentTime(newTime);
-          }
+          handleSkip(5);
          break;
        case 'ArrowUp':
          e.preventDefault();
@@ -797,73 +940,11 @@ export function useVideoPlayer({
    isMuted,
    playbackSpeed,
    speedOptions,
+    handleSkip,
    toggleFullscreen,
    playerRef,
  ]);

-  const handlePlayPause = useCallback(() => {
-    if (!playerRef.current) return;
-    if (isPlaying) {
-      playerRef.current.pauseVideo();
-    } else {
-      playerRef.current.playVideo();
-    }
-  }, [isPlaying, playerRef]);
-
-  const handleSeekToTimestamp = useCallback(
-    (timestamp: number, annotation?: string | null, options?: { pauseAfterSeek?: boolean }) => {
-      setCurrentTime(timestamp);
-      if (playerRef.current?.seekTo) {
-        const playerState = playerRef.current.getPlayerState?.();
-        const ytPlayingState = window.YT?.PlayerState?.PLAYING ?? 1;
-        const ytBufferingState = window.YT?.PlayerState?.BUFFERING ?? 3;
-        const wasPlayingBeforeSeek =
-          typeof playerState === 'number'
-            ? playerState === ytPlayingState || playerState === ytBufferingState
-            : isPlaying;
-
-        playerRef.current.seekTo(timestamp, true);
-        if (options?.pauseAfterSeek) {
-          playerRef.current.pauseVideo();
-        } else if (wasPlayingBeforeSeek) {
-          playerRef.current.playVideo();
-        } else {
-          playerRef.current.pauseVideo();
-        }
-      }
-      if (annotation) {
-        try {
-          const parsed = JSON.parse(annotation);
-          const safe = validateAnnotationStrokes(parsed);
-          setViewingAnnotation(safe as AnnotationStroke[] | null);
-        } catch {
-          setViewingAnnotation(null);
-        }
-      } else {
-        setViewingAnnotation(null);
-      }
-    },
-    [isPlaying, playerRef, setViewingAnnotation]
-  );
-
-  const handleMuteToggle = useCallback(() => {
-    if (!playerRef.current) return;
-    if (isMuted) {
-      playerRef.current.unMute();
-    } else {
-      playerRef.current.mute();
-    }
-    setIsMuted(!isMuted);
-  }, [isMuted, playerRef]);
-
-  const handleSkip = useCallback(
-    (seconds: number) => {
-      const newTime = Math.max(0, Math.min(duration, currentTime + seconds));
-      handleSeekToTimestamp(newTime);
-    },
-    [currentTime, duration, handleSeekToTimestamp]
-  );
-
  const handleSpeedChange = useCallback(
    (speed: number) => {
      setPlaybackSpeed(speed);
@@ -965,6 +1046,9 @@ export function useVideoPlayer({
    setVideoDuration,
    isPlaying,
    isMuted,
+    isFrameMode,
+    frameStepSeconds,
+    frameStepLabel,
    isDragging,
    playbackSpeed,
    qualityOptions,
@@ -982,6 +1066,7 @@ export function useVideoPlayer({
    handlePlayPause,
    handleSeekToTimestamp,
    handleMuteToggle,
+    handleFrameModeToggle,
    handleSkip,
    handleSpeedChange,
    handleQualityChange,