From e2e6f37eca65d8ad9f1ef6acda3ad00a0b65df3a Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Wed, 3 Jan 2024 13:22:58 -0500 Subject: [PATCH 1/5] Change progress bar event listener to work with touch actions --- .../MediaPlayer/VideoJS/components/js/VideoJSProgress.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js index 3e5afe77..5c2622e5 100644 --- a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js +++ b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js @@ -362,7 +362,7 @@ function ProgressBar({ player, handleTimeUpdate, initCurrentTime, times, options role="slider" data-srcindex={t.sIndex} className="vjs-custom-progress-inactive" - onMouseMove={(e) => handleMouseMove(e, true)} + onPointerMove={(e) => handleMouseMove(e, true)} onClick={handleClick} key={t.sIndex} tabIndex={0} @@ -399,7 +399,7 @@ function ProgressBar({ player, handleTimeUpdate, initCurrentTime, times, options data-srcindex={srcIndex} className="vjs-custom-progress" onChange={updateProgress} - onMouseMove={(e) => handleMouseMove(e, false)} + onPointerMove={(e) => handleMouseMove(e, false)} id="slider-range" ref={sliderRangeRef} tabIndex={0} From 07260cd5124adb31a97a53c30315234542f8c598 Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Wed, 3 Jan 2024 16:26:06 -0500 Subject: [PATCH 2/5] Add event listener for touch to set current time --- .../MediaPlayer/VideoJS/components/js/VideoJSProgress.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js index 5c2622e5..476ccadf 100644 --- a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js +++ b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js @@ -399,6 +399,7 @@ function ProgressBar({ player, handleTimeUpdate, initCurrentTime, times, options data-srcindex={srcIndex} className="vjs-custom-progress" onChange={updateProgress} + onPointerDown={(e) => handleMouseMove(e, false)} onPointerMove={(e) => handleMouseMove(e, false)} id="slider-range" ref={sliderRangeRef} From b61efcdd510dfe8d60ecc9563a67c1fa0f4a376f Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Thu, 4 Jan 2024 11:48:33 -0500 Subject: [PATCH 3/5] Add play/pause on touch functionality --- .../MediaPlayer/VideoJS/VideoJSPlayer.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 07d3f2b4..68c3948d 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -458,6 +458,32 @@ function VideoJSPlayer({ } }; + /** + * Toggle play/pause on video touch for mobile browsers + * @param @param {Object} e onTouch event + */ + const mobilePlayToggle = (e) => { + if (e.changedTouches[0].clientX == touchX && e.changedTouches[0].clientY == touchY) { + if (player.paused()) { + player.play(); + } else { + player.pause(); + } + } + }; + + /** + * Save coordinates of touch start for comparison to touch end to prevent play/pause + * when user is scrolling. + * @param @param {Object} e onTouch event + */ + let touchX = null; + let touchY = null; + const saveTouchStartCoords = (e) => { + touchX = e.touches[0].clientX + touchY = e.touches[0].clientY + }; + /** * Clear currentNavItem and other related state variables to update the tracker * in structure navigation and highlights within the player. @@ -514,6 +540,8 @@ function VideoJSPlayer({ data-canvasindex={cIndex} ref={(node) => (playerRef.current = node)} className="video-js vjs-big-play-centered" + onTouchStart={saveTouchStartCoords} + onTouchEnd={mobilePlayToggle} > ) : ( From 826b14a3364fc8cf6a1bb06af8d1ff74b24a99a2 Mon Sep 17 00:00:00 2001 From: Mason Ballengee <68433277+masaball@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:54:49 -0500 Subject: [PATCH 4/5] Update VideoJSPlayer.js --- src/components/MediaPlayer/VideoJS/VideoJSPlayer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 68c3948d..28b9b7e0 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -460,7 +460,7 @@ function VideoJSPlayer({ /** * Toggle play/pause on video touch for mobile browsers - * @param @param {Object} e onTouch event + * @param {Object} e onTouch event */ const mobilePlayToggle = (e) => { if (e.changedTouches[0].clientX == touchX && e.changedTouches[0].clientY == touchY) { @@ -475,7 +475,7 @@ function VideoJSPlayer({ /** * Save coordinates of touch start for comparison to touch end to prevent play/pause * when user is scrolling. - * @param @param {Object} e onTouch event + * @param {Object} e onTouch event */ let touchX = null; let touchY = null; From d91aaa6383a667dbdc31dc9c87579c75037b6cef Mon Sep 17 00:00:00 2001 From: Mason Ballengee <68433277+masaball@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:56:31 -0500 Subject: [PATCH 5/5] Specify event type in JSDoc comments --- src/components/MediaPlayer/VideoJS/VideoJSPlayer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 28b9b7e0..7f0dbd1a 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -460,7 +460,7 @@ function VideoJSPlayer({ /** * Toggle play/pause on video touch for mobile browsers - * @param {Object} e onTouch event + * @param {Object} e onTouchEnd event */ const mobilePlayToggle = (e) => { if (e.changedTouches[0].clientX == touchX && e.changedTouches[0].clientY == touchY) { @@ -475,7 +475,7 @@ function VideoJSPlayer({ /** * Save coordinates of touch start for comparison to touch end to prevent play/pause * when user is scrolling. - * @param {Object} e onTouch event + * @param {Object} e onTouchStart event */ let touchX = null; let touchY = null;