Merge pull request #2520 from MuhammadUmer44/feature-space-bar-media-…

…controls

[Graph Mindset]: Media Player Add spacebar play/pause control

src/components/mindset/components/MediaPlayer/index.tsx

@@ -85,9 +85,9 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     }
   }, [playingTime, isSeeking, setIsSeeking, playerRef])
 
-  const togglePlay = () => {
+  const togglePlay = useCallback(() => {
     setIsPlaying(!isPlaying)
-  }
+  }, [isPlaying, setIsPlaying])
 
   const handlePlay = useCallback(() => {
     setIsPlaying(true)
@@ -102,6 +102,24 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     setStatus('error')
   }
 
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Space') {
+        event.preventDefault()
+        togglePlay()
+      }
+    },
+    [togglePlay],
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleKeyDown])
+
   const edges = useMemo(() => {
     const edgesFiltered = dataInitial?.links.filter((link) => link?.properties?.start) || []