React video player causing issues on the onPause event. It glitches with the seek bar of the video

[adil-hashmy]

Current Behavior

I'm encountering an issue with the React video player where the onPause event works fine for pausing the video, but it causes glitches with the seek bar functionality. If I try to forward or rewind the video using the seek bar, it pauses the video instead of seeking.

Expected Behavior

The seek bar should forward or rewind the video instead of pausing it.

Environment

• Browser: Google chrome
• Operating system: Windows

Note

If I use the onSeek event and pass setVideoPause(false), the seek bar works fine. However, there is flickering in the video player. I believe this is logical because it first sets videopause to true to pause, and then with the onSeek event, it sets videopause to false.

Code

`import ReactPlayer from "react-player";
import replay_icon from "../src/assets/replay_icon.png";

const VideoPlayer = ({ url, cb, videopause, setVideoPause }) => {
return (
<>
<div
className={${videopause ? "sm:w-[70%] sm:ml-10 md:ml-0 md:w-[50%]" : "sm:w-[55%] md:w-[58%]"} rounded-lg relative flex }>
<ReactPlayer
className="react-player"
auto
url={url}
width="100%"
height="100%"
muted={true}
controls={!videopause}
playing={!videopause}
onEnded={cb}
onPause={() => setVideoPause(true)}
/>
{videopause && (
<>

<img
src={replay_icon}
alt="replay_icon"
className="absolute w-8"
style={{
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
onClick={() => setVideoPause(false)}
/>
</>
)}

</>
);
};

export default VideoPlayer;`