diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx index 718bf84..0da6aa9 100644 --- a/src/components/common/VideoPlayer/VideoPlayer.tsx +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -191,7 +191,7 @@ export const VideoPlayer = React.forwardRef( if (autoPlay && identifier) { setStartPlay(true); setPlaying(true); - togglePlay(undefined, true); + togglePlay(true); } }, [autoPlay, startPlay, identifier]); @@ -216,7 +216,7 @@ export const VideoPlayer = React.forwardRef( const toggleRef = useRef(null); const { downloadVideo } = useContext(MyContext); - const togglePlay = async (event?: any, isPlay?: boolean) => { + const togglePlay = async (isPlay?: boolean) => { if (!videoRef.current) return; setStartPlay(true); @@ -230,16 +230,12 @@ export const VideoPlayer = React.forwardRef( }); getSrc(); } - if (playing && !isPlay) { - videoRef.current.pause(); - } else { - await videoRef.current.play(); - } - if (isPlay) { - setPlaying(true); - } else { - setPlaying(!playing); - } + + if (isPlay) setPlaying(true); + else setPlaying(prevState => !prevState); + + if (playing && !isPlay) videoRef.current.pause(); + else await videoRef.current.play(); }; const onVolumeChange = (_: any, value: number | number[]) => { @@ -475,20 +471,15 @@ export const VideoPlayer = React.forwardRef( videoRef.current.src = src; videoRef.current.load(); videoRef.current.currentTime = currentTime; - if (playing) { - await videoRef.current.play(); - } + if (playing) await videoRef.current.play(); + setPlaying(true); }; const refetchInInterval = () => { try { const interval = setInterval(() => { - if (status?.current === "DOWNLOADED") { - refetch(); - } - if (status?.current === "READY") { - clearInterval(interval); - } + if (status?.current === "DOWNLOADED") refetch(); + if (status?.current === "READY") clearInterval(interval); }, 7500); } catch (error) { console.log(error); @@ -830,7 +821,7 @@ export const VideoPlayer = React.forwardRef( poster={!startPlay ? poster : ""} onTimeUpdate={updateProgress} autoPlay={autoplay} - onClick={togglePlay} + onClick={() => togglePlay()} onEnded={handleEnded} // onLoadedMetadata={handleLoadedMetadata} onCanPlay={handleCanPlay} @@ -861,7 +852,7 @@ export const VideoPlayer = React.forwardRef( sx={{ color: "rgba(255, 255, 255, 0.7)", }} - onClick={togglePlay} + onClick={() => togglePlay()} > {playing ? : } @@ -935,7 +926,7 @@ export const VideoPlayer = React.forwardRef( sx={{ color: "rgba(255, 255, 255, 0.7)", }} - onClick={togglePlay} + onClick={() => togglePlay()} > {playing ? : }