fix: On mobile, pause the video on second tap only

This commit is contained in:
Yiannis Christodoulou 2025-09-30 11:04:46 +03:00
parent fa85e5768a
commit 0c0d9c66d2

View File

@ -2085,7 +2085,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}, 100); }, 100);
} }
/* const setupMobilePlayPause = () => { const setupMobilePlayPause = () => {
const playerEl = playerRef.current.el(); const playerEl = playerRef.current.el();
const videoEl = playerEl.querySelector('video'); const videoEl = playerEl.querySelector('video');
@ -2134,10 +2134,23 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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()) { if (playerRef.current.paused()) {
// Always play if video is paused
playerRef.current.play(); playerRef.current.play();
} else { } else if (isControlsVisible) {
// Only pause if controls are actually visible
playerRef.current.pause(); 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('touchstart', handleTouchStart, { passive: true });
videoEl.addEventListener('touchend', handleTouchEnd, { passive: false }); videoEl.addEventListener('touchend', handleTouchEnd, { passive: false });
} }
}; */ };
//setTimeout(setupMobilePlayPause, 100); setTimeout(setupMobilePlayPause, 100);
// Get control bar and its children // Get control bar and its children
const controlBar = playerRef.current.getChild('controlBar'); const controlBar = playerRef.current.getChild('controlBar');