Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add touch support for player actions to support Android browsers #329

Merged
merged 5 commits into from
Jan 4, 2024
Merged

Add touch support for player actions to support Android browsers #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e2e6f37
Change progress bar event listener to work with touch actions
masaball Jan 3, 2024
07260cd
Add event listener for touch to set current time
masaball Jan 3, 2024
b61efcd
Add play/pause on touch functionality
masaball Jan 4, 2024
826b14a
Update VideoJSPlayer.js
masaball Jan 4, 2024
d91aaa6
Specify event type in JSDoc comments
masaball Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,32 @@ function VideoJSPlayer({
}
};

/**
* Toggle play/pause on video touch for mobile browsers
* @param {Object} e onTouchEnd 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 {Object} e onTouchStart 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.
Expand Down Expand Up @@ -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}
></video>
</React.Fragment>
) : (
Expand Down
5 changes: 3 additions & 2 deletions src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -399,7 +399,8 @@ function ProgressBar({ player, handleTimeUpdate, initCurrentTime, times, options
data-srcindex={srcIndex}
className="vjs-custom-progress"
onChange={updateProgress}
onMouseMove={(e) => handleMouseMove(e, false)}
onPointerDown={(e) => handleMouseMove(e, false)}
onPointerMove={(e) => handleMouseMove(e, false)}
id="slider-range"
ref={sliderRangeRef}
tabIndex={0}
Expand Down