From 3cd97e084d3de37ea1ff2711d89da82b362b878b Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Sun, 26 Oct 2025 11:12:16 +0200 Subject: [PATCH] fix: If jumping 10 forward / backward via the arrow keys on keyboard, time in the editor window is not updated. #138 --- frontend-tools/chapters-editor/client/src/App.tsx | 8 +++++--- .../client/src/components/TimelineControls.tsx | 9 +++++---- frontend-tools/video-editor/client/src/App.tsx | 8 +++++--- .../client/src/components/TimelineControls.tsx | 9 +++++---- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx index 1fefad96..4e0b8f1c 100644 --- a/frontend-tools/chapters-editor/client/src/App.tsx +++ b/frontend-tools/chapters-editor/client/src/App.tsx @@ -96,7 +96,8 @@ const App = () => { case 'ArrowLeft': event.preventDefault(); if (videoRef.current) { - const newTime = Math.max(currentTime - 10, 0); + // Use the video element's current time directly to avoid stale state + const newTime = Math.max(videoRef.current.currentTime - 10, 0); handleMobileSafeSeek(newTime); logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime)); } @@ -104,7 +105,8 @@ const App = () => { case 'ArrowRight': event.preventDefault(); if (videoRef.current) { - const newTime = Math.min(currentTime + 10, duration); + // Use the video element's current time directly to avoid stale state + const newTime = Math.min(videoRef.current.currentTime + 10, duration); handleMobileSafeSeek(newTime); logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime)); } @@ -117,7 +119,7 @@ const App = () => { return () => { document.removeEventListener('keydown', handleKeyDown); }; - }, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]); + }, [handlePlay, handleMobileSafeSeek, duration, videoRef]); return (
diff --git a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx index f7e79066..1f609713 100644 --- a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx +++ b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx @@ -589,12 +589,13 @@ const TimelineControls = ({ // Update display time and check for transitions between segments and empty spaces useEffect(() => { - // Always update display time to match current video time when playing + // Always update display time to match current video time if (videoRef.current) { - // If video is playing, always update the displayed time in the tooltip + // Always update display time when current time changes (both playing and paused) + setDisplayTime(currentTime); + + // If video is playing, also update the tooltip and perform segment checks if (!videoRef.current.paused) { - setDisplayTime(currentTime); - // Also update clicked time to keep them in sync when playing // This ensures correct time is shown when pausing setClickedTime(currentTime); diff --git a/frontend-tools/video-editor/client/src/App.tsx b/frontend-tools/video-editor/client/src/App.tsx index a8a48bb6..5428a068 100644 --- a/frontend-tools/video-editor/client/src/App.tsx +++ b/frontend-tools/video-editor/client/src/App.tsx @@ -253,7 +253,8 @@ const App = () => { case 'ArrowLeft': event.preventDefault(); if (videoRef.current) { - const newTime = Math.max(currentTime - 10, 0); + // Use the video element's current time directly to avoid stale state + const newTime = Math.max(videoRef.current.currentTime - 10, 0); handleMobileSafeSeek(newTime); logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime)); } @@ -261,7 +262,8 @@ const App = () => { case 'ArrowRight': event.preventDefault(); if (videoRef.current) { - const newTime = Math.min(currentTime + 10, duration); + // Use the video element's current time directly to avoid stale state + const newTime = Math.min(videoRef.current.currentTime + 10, duration); handleMobileSafeSeek(newTime); logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime)); } @@ -274,7 +276,7 @@ const App = () => { return () => { document.removeEventListener('keydown', handleKeyDown); }; - }, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]); + }, [handlePlay, handleMobileSafeSeek, duration, videoRef]); return (
diff --git a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx index a43fc8d0..f24a9920 100644 --- a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx +++ b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx @@ -779,12 +779,13 @@ const TimelineControls = ({ // Update display time and check for transitions between segments and empty spaces useEffect(() => { - // Always update display time to match current video time when playing + // Always update display time to match current video time if (videoRef.current) { - // If video is playing, always update the displayed time in the tooltip + // Always update display time when current time changes (both playing and paused) + setDisplayTime(currentTime); + + // If video is playing, also update the tooltip and perform segment checks if (!videoRef.current.paused) { - setDisplayTime(currentTime); - // Also update clicked time to keep them in sync when playing // This ensures correct time is shown when pausing setClickedTime(currentTime);