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