Merge pull request #330 from BloomBooks/videoControls2

fix: Pause for touch on video (BL-13957) (#330)

src/video.ts

@@ -57,6 +57,7 @@ export class Video {
         }
         this.getVideoElements().forEach(videoElement => {
             videoElement.removeAttribute("controls");
+            videoElement.addEventListener("click", this.handleVideoClick);
             const playButton = this.wrapVideoIcon(
                 videoElement,
                 // Alternatively, we could import the Material UI icon, make this file a TSX, and use
@@ -68,7 +69,6 @@ export class Video {
                 "videoPlayIcon"
             );
             playButton.addEventListener("click", this.handlePlayClick);
-            videoElement.addEventListener("click", this.handlePlayClick);
             const pauseButton = this.wrapVideoIcon(
                 videoElement,
                 getPauseIcon("#ffffff"),
@@ -156,6 +156,15 @@ export class Video {
         }
     };
 
+    private handleVideoClick = (ev: MouseEvent) => {
+        const video = ev.currentTarget as HTMLVideoElement;
+        if (video.paused) {
+            this.handlePlayClick(ev);
+        } else {
+            this.handlePauseClick(ev);
+        }
+    };
+
     private handleReplayClick = (ev: MouseEvent) => {
         ev.stopPropagation(); // we don't want the navigation bar to toggle on and off
         ev.preventDefault();