diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx index 99e923b..718bf84 100644 --- a/src/components/common/VideoPlayer/VideoPlayer.tsx +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -216,7 +216,7 @@ export const VideoPlayer = React.forwardRef( const toggleRef = useRef(null); const { downloadVideo } = useContext(MyContext); - const togglePlay = (event?: any, isPlay?: boolean) => { + const togglePlay = async (event?: any, isPlay?: boolean) => { if (!videoRef.current) return; setStartPlay(true); @@ -233,7 +233,7 @@ export const VideoPlayer = React.forwardRef( if (playing && !isPlay) { videoRef.current.pause(); } else { - videoRef.current.play(); + await videoRef.current.play(); } if (isPlay) { setPlaying(true); @@ -249,12 +249,12 @@ export const VideoPlayer = React.forwardRef( setIsMuted(false); }; - const onProgressChange = (_: any, value: number | number[]) => { + const onProgressChange = async (_: any, value: number | number[]) => { if (!videoRef.current) return; videoRef.current.currentTime = value as number; setProgress(value as number); if (!playing) { - videoRef.current.play(); + await videoRef.current.play(); setPlaying(true); } }; @@ -322,10 +322,11 @@ export const VideoPlayer = React.forwardRef( handleCanPlay(); videoRef.current.volume = videoPlaying.volume; videoRef.current.currentTime = videoPlaying.currentTime; - videoRef.current.play(); - setPlaying(true); - setStartPlay(true); - dispatch(setVideoPlaying(null)); + videoRef.current.play().then(() => { + setPlaying(true); + setStartPlay(true); + dispatch(setVideoPlaying(null)); + }); } }, [videoPlaying, identifier, src]); @@ -468,14 +469,14 @@ export const VideoPlayer = React.forwardRef( return hours + remainingMinutes + ":" + remainingSeconds; } - const reloadVideo = () => { + const reloadVideo = async () => { if (!videoRef.current) return; const currentTime = videoRef.current.currentTime; videoRef.current.src = src; videoRef.current.load(); videoRef.current.currentTime = currentTime; if (playing) { - videoRef.current.play(); + await videoRef.current.play(); } }; diff --git a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx index bc701d8..360beb7 100644 --- a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx +++ b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx @@ -123,7 +123,7 @@ export const VideoPlayerGlobal: React.FC = ({ const increaseSpeed = (wrapOverflow = true) => { const changedSpeed = playbackRate + speedChange; - let newSpeed = wrapOverflow + const newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed); @@ -146,7 +146,7 @@ export const VideoPlayerGlobal: React.FC = ({ if (playing) { videoRef.current.pause(); } else { - videoRef.current.play(); + await videoRef.current.play(); } setPlaying(prev => !prev); }; @@ -158,12 +158,12 @@ export const VideoPlayerGlobal: React.FC = ({ setIsMuted(false); }; - const onProgressChange = (_: any, value: number | number[]) => { + const onProgressChange = async (_: any, value: number | number[]) => { if (!videoRef.current) return; videoRef.current.currentTime = value as number; setProgress(value as number); if (!playing) { - videoRef.current.play(); + await videoRef.current.play(); setPlaying(true); } }; @@ -252,7 +252,7 @@ export const VideoPlayerGlobal: React.FC = ({ function formatTime(seconds: number): string { seconds = Math.floor(seconds); - let minutes: number | string = Math.floor(seconds / 60); + const minutes: number | string = Math.floor(seconds / 60); let hours: number | string = Math.floor(minutes / 60); let remainingSeconds: number | string = seconds % 60; @@ -275,7 +275,7 @@ export const VideoPlayerGlobal: React.FC = ({ return hours + remainingMinutes + ":" + remainingSeconds; } - const reloadVideo = () => { + const reloadVideo = async () => { if (!videoRef.current) return; const src = videoRef.current.src; const currentTime = videoRef.current.currentTime; @@ -283,7 +283,7 @@ export const VideoPlayerGlobal: React.FC = ({ videoRef.current.load(); videoRef.current.currentTime = currentTime; if (playing) { - videoRef.current.play(); + await videoRef.current.play(); } }; @@ -466,14 +466,14 @@ export const VideoPlayerGlobal: React.FC = ({ useEffect(() => { if (element) { - let oldElement = document.getElementById("videoPlayer"); + const oldElement = document.getElementById("videoPlayer"); if (oldElement && oldElement?.parentNode) { oldElement?.parentNode.replaceChild(element, oldElement); videoRef.current = element; setPlaying(true); setCanPlay(true); setStartPlay(true); - videoRef?.current?.addEventListener("click", () => {}); + //videoRef?.current?.addEventListener("click", () => {}); videoRef?.current?.addEventListener("timeupdate", updateProgress); videoRef?.current?.addEventListener("ended", handleEnded); }