From bad62f4794615004beb3abb59ad3618fb9beb270 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Mon, 14 Oct 2024 17:22:51 -0500
Subject: [PATCH] fix: Pause for touch on video (BL-13957)

---
 src/video.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/video.ts b/src/video.ts
index 4d607d4d..b70193a3 100644
--- a/src/video.ts
+++ b/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();