Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(Player): handle touch events when sliding volume slider on mobile

Browse source
This commit is contained in:
Botzy 2025-02-25 17:26:20 +02:00
parent 8fb09b0026
commit e979b185b0
1 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/Slider/Slider.js
View file

@ -31,14 +31,18 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
const retainThumb = React.useCallback(() => {
window.addEventListener('blur', onBlur);
window.addEventListener('mouseup', onMouseUp);
window.addEventListener('touchend', onTouchEnd);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('touchmove', onTouchMove);
document.documentElement.className = classnames(document.documentElement.className, styles['active-slider-within']);
}, []);
const releaseThumb = React.useCallback(() => {
cancelThumbAnimation();
window.removeEventListener('blur', onBlur);
window.removeEventListener('mouseup', onMouseUp);
window.removeEventListener('touchend', onTouchEnd);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('touchmove', onTouchMove);
const classList = document.documentElement.className.split(' ');
const classIndex = classList.indexOf(styles['active-slider-within']);
if (classIndex !== -1) {
@ -85,6 +89,36 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
retainThumb();
}, []);
const onTouchStart = React.useCallback((event) => {
const touch = event.touches[0];
const value = calculateValueForMouseX(touch.clientX);
if (typeof onSlideRef.current === 'function') {
onSlideRef.current(value);
}
retainThumb();
event.preventDefault();
}, []);
const onTouchMove = React.useCallback((event) => {
requestThumbAnimation(() => {
const touch = event.touches[0];
const value = calculateValueForMouseX(touch.clientX);
if (typeof onSlideRef.current === 'function') {
onSlideRef.current(value);
}
});
event.preventDefault();
}, []);
const onTouchEnd = React.useCallback((event) => {
const touch = event.changedTouches[0];
const value = calculateValueForMouseX(touch.clientX);
if (typeof onCompleteRef.current === 'function') {
onCompleteRef.current(value);
}
releaseThumb();
}, []);
React.useLayoutEffect(() => {
if (!routeFocused || disabled) {
releaseThumb();
@ -98,7 +132,7 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
const thumbPosition = Math.max(0, Math.min(1, (valueRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown} onTouchStart={onTouchStart}>
<div className={styles['layer']}>
<div className={classnames(styles['track'], { [styles['audio-boost']]: audioBoost })} />
</div>