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);