From e0f13e963569e9f465f64ce50ad0debf3def5f84 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Sun, 19 Oct 2025 14:03:23 +0300
Subject: [PATCH] Add keyboard shortcuts for video playback

Implemented keyboard shortcuts for play/pause (spacebar) and seeking backward/forward (arrow keys) in the video editor. Shortcuts are disabled when typing in input fields to prevent interference.
---
 .../video-editor/client/src/App.tsx           | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/frontend-tools/video-editor/client/src/App.tsx b/frontend-tools/video-editor/client/src/App.tsx
index a51f6379..a8a48bb6 100644
--- a/frontend-tools/video-editor/client/src/App.tsx
+++ b/frontend-tools/video-editor/client/src/App.tsx
@@ -236,6 +236,46 @@ const App = () => {
       });
   };
 
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Don't handle keyboard shortcuts if user is typing in an input field
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+        return;
+      }
+
+      switch (event.code) {
+        case 'Space':
+          event.preventDefault(); // Prevent default spacebar behavior (scrolling, button activation)
+          handlePlay();
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          if (videoRef.current) {
+            const newTime = Math.max(currentTime - 10, 0);
+            handleMobileSafeSeek(newTime);
+            logger.debug('Jumped backward 10 seconds to:', formatDetailedTime(newTime));
+          }
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          if (videoRef.current) {
+            const newTime = Math.min(currentTime + 10, duration);
+            handleMobileSafeSeek(newTime);
+            logger.debug('Jumped forward 10 seconds to:', formatDetailedTime(newTime));
+          }
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handlePlay, handleMobileSafeSeek, currentTime, duration, videoRef]);
+
   return (
     <div className="bg-background min-h-screen">
       <MobilePlayPrompt videoRef={videoRef} onPlay={handlePlay} />