From 0c0d9c66d2b2e270aeb6fe3a2e60dbf6e4284b43 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Tue, 30 Sep 2025 11:04:46 +0300
Subject: [PATCH] fix: On mobile, pause the video on second tap only

---
 .../components/video-player/VideoJSPlayer.jsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index f9d181c3..e0570e8e 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2085,7 +2085,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             }, 100);
                         }
 
-                        /* const setupMobilePlayPause = () => {
+                        const setupMobilePlayPause = () => {
                             const playerEl = playerRef.current.el();
                             const videoEl = playerEl.querySelector('video');
 
@@ -2134,10 +2134,23 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                                             e.preventDefault();
                                             e.stopPropagation();
 
+                                            // Check if controls are currently visible by examining control bar
+                                            const controlBar = playerRef.current.getChild('controlBar');
+                                            const controlBarEl = controlBar ? controlBar.el() : null;
+                                            const isControlsVisible =
+                                                controlBarEl &&
+                                                window.getComputedStyle(controlBarEl).opacity !== '0' &&
+                                                window.getComputedStyle(controlBarEl).visibility !== 'hidden';
+
                                             if (playerRef.current.paused()) {
+                                                // Always play if video is paused
                                                 playerRef.current.play();
-                                            } else {
+                                            } else if (isControlsVisible) {
+                                                // Only pause if controls are actually visible
                                                 playerRef.current.pause();
+                                            } else {
+                                                // If controls are not visible, just show them (trigger user activity)
+                                                playerRef.current.userActive(true);
                                             }
                                         }
                                     }
@@ -2153,8 +2166,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                                 videoEl.addEventListener('touchstart', handleTouchStart, { passive: true });
                                 videoEl.addEventListener('touchend', handleTouchEnd, { passive: false });
                             }
-                        }; */
-                        //setTimeout(setupMobilePlayPause, 100);
+                        };
+                        setTimeout(setupMobilePlayPause, 100);
 
                         // Get control bar and its children
                         const controlBar = playerRef.current.getChild('controlBar');