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

@@ -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.

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