CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: If jumping 10 forward / backward via the arrow keys on keyboard, time in the editor window is not updated. #138

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-26 11:12:16 +02:00
parent 25c73b3d07
commit 3cd97e084d
4 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend-tools/chapters-editor/client/src/App.tsx
View File

@ -96,7 +96,8 @@ const App = () => {
case 'ArrowLeft': case 'ArrowLeft':
event.preventDefault(); event.preventDefault();
if (videoRef.current) { 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); handleMobileSafeSeek(newTime);
logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime)); logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime));
} }
@ -104,7 +105,8 @@ const App = () => {
case 'ArrowRight': case 'ArrowRight':
event.preventDefault(); event.preventDefault();
if (videoRef.current) { 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); handleMobileSafeSeek(newTime);
logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime)); logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime));
} }
@ -117,7 +119,7 @@ const App = () => {
return () => { return () => {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
}; };
}, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]); }, [handlePlay, handleMobileSafeSeek, duration, videoRef]);
return ( return (
<div className="bg-background min-h-screen"> <div className="bg-background min-h-screen">

7
frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
View File

@ -589,12 +589,13 @@ const TimelineControls = ({
// Update display time and check for transitions between segments and empty spaces // Update display time and check for transitions between segments and empty spaces
useEffect(() => { 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 (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)
if (!videoRef.current.paused) {
setDisplayTime(currentTime); setDisplayTime(currentTime);
// If video is playing, also update the tooltip and perform segment checks
if (!videoRef.current.paused) {
// Also update clicked time to keep them in sync when playing // Also update clicked time to keep them in sync when playing
// This ensures correct time is shown when pausing // This ensures correct time is shown when pausing
setClickedTime(currentTime); setClickedTime(currentTime);

8
frontend-tools/video-editor/client/src/App.tsx
View File

@ -253,7 +253,8 @@ const App = () => {
case 'ArrowLeft': case 'ArrowLeft':
event.preventDefault(); event.preventDefault();
if (videoRef.current) { 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); handleMobileSafeSeek(newTime);
logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime)); logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime));
} }
@ -261,7 +262,8 @@ const App = () => {
case 'ArrowRight': case 'ArrowRight':
event.preventDefault(); event.preventDefault();
if (videoRef.current) { 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); handleMobileSafeSeek(newTime);
logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime)); logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime));
} }
@ -274,7 +276,7 @@ const App = () => {
return () => { return () => {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
}; };
}, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]); }, [handlePlay, handleMobileSafeSeek, duration, videoRef]);
return ( return (
<div className="bg-background min-h-screen"> <div className="bg-background min-h-screen">

7
frontend-tools/video-editor/client/src/components/TimelineControls.tsx
View File

@ -779,12 +779,13 @@ const TimelineControls = ({
// Update display time and check for transitions between segments and empty spaces // Update display time and check for transitions between segments and empty spaces
useEffect(() => { 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 (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)
if (!videoRef.current.paused) {
setDisplayTime(currentTime); setDisplayTime(currentTime);
// If video is playing, also update the tooltip and perform segment checks
if (!videoRef.current.paused) {
// Also update clicked time to keep them in sync when playing // Also update clicked time to keep them in sync when playing
// This ensures correct time is shown when pausing // This ensures correct time is shown when pausing
setClickedTime(currentTime); setClickedTime(currentTime);