Import React, { useEffect, useRef, useState } from 'react'; import video

from '../../assets/building.mp4';
import throttle from 'lodash/throttle';

export default function VideoPlayer() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);

useEffect(() => {
const handleScroll = throttle(() => {
const currentScrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;

const isScrolling = currentScrollTop > 0;

if (isScrolling && !isPlaying) {
setIsPlaying(true);
} else if (!isScrolling && isPlaying) {
setIsPlaying(false);
}
}, 200);

window.addEventListener('scroll', handleScroll);

return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [isPlaying]);

useEffect(() => {
if (isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === 'ArrowLeft') {
e.preventDefault();
const currentTime = videoRef.current.currentTime;
const durationForGoingBack = 1;
videoRef.current.currentTime = currentTime - durationForGoingBack;
}
};

window.addEventListener('keydown', handleKeyDown);

return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, []);

const handleMouseEnter = () => {
videoRef.current.pause();
};

return (
<div
style={{ width: '100%', height: '100%', overflow: 'hidden' }}
onMouseEnter={handleMouseEnter}
>
<video ref={videoRef} loop muted playsInline style={{ width: '100%', height: '100%' }}>
<source src={video} type="video/mp4" />
</video>
</div>
);
}

почему во время скролла видео не пермативается назад по моему все должно норм работать ?

!ро научитесь читать закрепы