From b83067d0ee2fff9dfc502030eb7807fcf399c3a7 Mon Sep 17 00:00:00 2001
From: audric <audric@loki.network>
Date: Wed, 11 Aug 2021 14:10:09 +1000
Subject: [PATCH] onclick on video pause the video

Relates #1843
---
 ts/components/Lightbox.tsx | 40 +++++++++-----------------------------
 1 file changed, 9 insertions(+), 31 deletions(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index e69b28143..b1ccbd1cd 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -196,6 +196,7 @@ const Icon = ({
   />
 );
 
+// tslint:disable-next-line: max-func-body-length
 export const LightboxObject = ({
   objectURL,
   contentType,
@@ -216,37 +217,12 @@ export const LightboxObject = ({
     return false;
   }, []);
 
-  const playVideo = () => {
-    if (!videoRef) {
-      return;
-    }
-
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-
-    if (current.paused) {
-      void current.play();
-    } else {
-      current.pause();
-    }
-  };
-
-  const pauseVideo = () => {
-    if (!videoRef) {
-      return;
-    }
-
-    const { current } = videoRef;
-    if (current) {
-      current.pause();
-    }
-  };
-
   // auto play video on showing a video attachment
   useUnmount(() => {
-    pauseVideo();
+    if (!videoRef?.current) {
+      return;
+    }
+    videoRef.current.pause.pause();
   });
 
   if (isImageTypeSupported) {
@@ -263,13 +239,15 @@ export const LightboxObject = ({
   const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType);
   if (isVideoTypeSupported) {
     if (urlToLoad) {
-      playVideo();
+      if (videoRef?.current.paused) {
+        void videoRef.current.play();
+      }
     }
+
     return (
       <video
         role="button"
         ref={videoRef}
-        onClick={playVideo}
         controls={true}
         style={styles.object as any}
         key={urlToLoad}