From a82e4b1c51b19fa9be26dcd9119327bf41ef478d Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Mon, 2 Jun 2025 23:36:37 +0700
Subject: [PATCH] add play/pause toggle shortcut key, #898

---
 frontend/src/components/VideoPlayer.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
index 152883c5..7684e24a 100644
--- a/frontend/src/components/VideoPlayer.tsx
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -150,6 +150,7 @@ const VideoPlayer = ({
   const resetPlaybackSpeedPressed = useKeyPress('=');
   const arrowRightPressed = useKeyPress('ArrowRight');
   const arrowLeftPressed = useKeyPress('ArrowLeft');
+  const pPausedPressed = useKeyPress('p');
 
   const videoId = video.youtube_id;
   const videoUrl = video.media_url;
@@ -214,6 +215,16 @@ const VideoPlayer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mutePressed]);
 
+  useEffect(() => {
+    if (pPausedPressed) {
+      if (videoRef.current?.paused) {
+        videoRef.current.play();
+      } else {
+        videoRef.current?.pause();
+      }
+    }
+  }, [pPausedPressed]);
+
   useEffect(() => {
     if (increasePlaybackSpeedPressed) {
       const newSpeed = playbackSpeedIndex + 1;
@@ -400,6 +411,10 @@ const VideoPlayer = ({
                 <td>Show help</td>
                 <td>?</td>
               </tr>
+              <tr>
+                <td>Toggle pause play</td>
+                <td>p</td>
+              </tr>
               <tr>
                 <td>Toggle mute</td>
                 <td>m</td>