From fdf8ab2a395ac9ac338063f6e2b3684acda7cec5 Mon Sep 17 00:00:00 2001
From: tigeren <tigeren@live.com>
Date: Fri, 29 Aug 2025 16:43:59 +0000
Subject: [PATCH] feat: add keyboard shortcuts for video controls and enhance
 deployment instructions

- Implemented keyboard shortcuts for video playback, including controls for play/pause, seek, fullscreen, and mute.
- Added deployment instructions for using Docker, including the definition of Dockerfile and docker-compose.yml.
---
 CLAUDE.md                       |  5 ++++
 src/components/video-viewer.tsx | 47 +++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index da65d66..a3d589f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -28,6 +28,11 @@ UI:
 8. the video card can be clicked, once clicked, a poped up video player will be displayed. it can be closed, fast forward, expand to full screen, etc.
 9. can bookmark/un-bookmark the video, can star the video
 
+Deployment:
+1. use docker compose to deploy the service
+2. Dockerfile should be defined
+3. docker-compose.yml should be defined.
+
 Development Rules:
 1. Everytime after making all the changes, run 'pnpm build' to verify the changes are compiling correct.
 2. Once added debug logs, don't delete it until told so.
diff --git a/src/components/video-viewer.tsx b/src/components/video-viewer.tsx
index f4b2716..8155eb1 100644
--- a/src/components/video-viewer.tsx
+++ b/src/components/video-viewer.tsx
@@ -86,6 +86,53 @@ export default function VideoViewer({
     }
   }, [isOpen, video]);
 
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!videoRef.current) return;
+
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          onClose();
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          videoRef.current.currentTime = Math.min(
+            videoRef.current.currentTime + 10,
+            videoRef.current.duration || 0
+          );
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          videoRef.current.currentTime = Math.max(
+            videoRef.current.currentTime - 10,
+            0
+          );
+          break;
+        case ' ':
+          e.preventDefault();
+          handlePlayPause();
+          break;
+        case 'f':
+        case 'F':
+          e.preventDefault();
+          handleFullscreen();
+          break;
+        case 'm':
+        case 'M':
+          e.preventDefault();
+          handleMute();
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
   const handlePlayPause = () => {
     if (videoRef.current) {
       if (isPlaying) {