Add play/pause functionality on spacebar (#187)

* Add play/pause functionality on spacebar

* Type keyboard event and remove unused var

src/views/VideoView/VideoView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { RouteComponentProps, useParams } from '@reach/router'
 import {
   ChannelContainer,
@@ -31,6 +31,23 @@ const VideoView: React.FC<RouteComponentProps> = () => {
 
   const videoID = data?.video?.id
 
+  const [playing, setPlaying] = useState<boolean>(true)
+  const handleUserKeyPress = useCallback((event: Event) => {
+    const { keyCode } = event as KeyboardEvent
+    if (keyCode === 32) {
+      event.preventDefault()
+      setPlaying((prevState) => !prevState)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleUserKeyPress)
+
+    return () => {
+      window.removeEventListener('keydown', handleUserKeyPress)
+    }
+  }, [handleUserKeyPress])
+
   useEffect(() => {
     if (!videoID) {
       return
@@ -66,7 +83,13 @@ const VideoView: React.FC<RouteComponentProps> = () => {
       <PlayerWrapper>
         <PlayerContainer>
           {data?.video ? (
-            <VideoPlayer src={data.video.media.location} autoplay fluid posterUrl={data.video.thumbnailUrl} />
+            <VideoPlayer
+              playing={playing}
+              src={data.video.media.location}
+              autoplay
+              fluid
+              posterUrl={data.video.thumbnailUrl}
+            />
           ) : (
             <PlayerPlaceholder />
           )}