From 085e94486112c089e1f80fc114474f49052af15d Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 16 Oct 2025 14:59:32 +0300
Subject: [PATCH] ChapterEditor: Add keyboard shortcuts for video playback
 controls

Implemented keyboard shortcuts for play/pause (Space), jump backward (ArrowLeft), and jump forward (ArrowRight) in the chapters editor. Shortcuts are disabled when typing in input fields to prevent interference with text entry.
---
 .../chapters-editor/client/src/App.tsx        | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx
index 669803d6..b1dd8985 100644
--- a/frontend-tools/chapters-editor/client/src/App.tsx
+++ b/frontend-tools/chapters-editor/client/src/App.tsx
@@ -6,6 +6,7 @@ import EditingTools from '@/components/EditingTools';
 import ClipSegments from '@/components/ClipSegments';
 import MobilePlayPrompt from '@/components/IOSPlayPrompt';
 import useVideoChapters from '@/hooks/useVideoChapters';
+import { useEffect } from 'react';
 
 const App = () => {
     const {
@@ -67,6 +68,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} />