From 4587a14831ce4370aad0ce9ecc05c9ebaabd7a4d Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 11 Apr 2024 10:31:05 +0700 Subject: [PATCH 1/4] fix: Video - Console error shows up when playing video --- .../VideoPlayer/BaseVideoPlayer.tsx | 27 +++++++++++++++++-- .../VideoPlayerContexts/PlaybackContext.tsx | 3 ++- src/components/VideoPlayerContexts/types.ts | 1 + 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 9380ce43c46a..a52813e643a2 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -45,8 +45,18 @@ function BaseVideoPlayer({ isVideoHovered = false, }: VideoPlayerProps) { const styles = useThemeStyles(); - const {pauseVideo, playVideo, currentlyPlayingURL, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef, updateCurrentlyPlayingURL, videoResumeTryNumber} = - usePlaybackContext(); + const { + pauseVideo, + playVideo, + currentlyPlayingURL, + sharedElement, + originalParent, + shareVideoPlayerElements, + currentVideoPlayerRef, + updateCurrentlyPlayingURL, + videoResumeTryNumber, + resetVideoPlayerData, + } = usePlaybackContext(); const {isFullScreenRef} = useFullScreenContext(); const {isOffline} = useNetwork(); const [duration, setDuration] = useState(videoDuration * 1000); @@ -181,6 +191,19 @@ function BaseVideoPlayer({ currentVideoPlayerRef.current = videoPlayerRef.current; }, [url, currentVideoPlayerRef, isUploading]); + // const isCurrentlyURLSetRef = useRef(); + // isCurrentlyURLSetRef.current = isCurrentlyURLSet; + + useEffect( + () => () => { + if (!isCurrentlyURLSet) { + return; + } + + resetVideoPlayerData(); + }, + [resetVideoPlayerData, isCurrentlyURLSet], + ); // update shared video elements useEffect(() => { if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || isFullScreenRef.current) { diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx index 5306dccb565c..696ca70153f3 100644 --- a/src/components/VideoPlayerContexts/PlaybackContext.tsx +++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx @@ -99,8 +99,9 @@ function PlaybackContextProvider({children}: ChildrenProps) { pauseVideo, checkVideoPlaying, videoResumeTryNumber, + resetVideoPlayerData, }), - [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying], + [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, resetVideoPlayerData], ); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index 3dd29795199d..811e091ee49a 100644 --- a/src/components/VideoPlayerContexts/types.ts +++ b/src/components/VideoPlayerContexts/types.ts @@ -17,6 +17,7 @@ type PlaybackContext = { playVideo: () => void; pauseVideo: () => void; checkVideoPlaying: (statusCallback: StatusCallback) => void; + resetVideoPlayerData: () => void; }; type VolumeContext = { From 4fead04631b6b52447f27684c8233cdc972ebc32 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 11 Apr 2024 11:20:24 +0700 Subject: [PATCH 2/4] remove useless code --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index a52813e643a2..3e1a4e4dc44a 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -191,9 +191,6 @@ function BaseVideoPlayer({ currentVideoPlayerRef.current = videoPlayerRef.current; }, [url, currentVideoPlayerRef, isUploading]); - // const isCurrentlyURLSetRef = useRef(); - // isCurrentlyURLSetRef.current = isCurrentlyURLSet; - useEffect( () => () => { if (!isCurrentlyURLSet) { From 900bf1005dd8e4bd4c021675246bd571455cd6bc Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 11 Apr 2024 14:56:11 +0700 Subject: [PATCH 3/4] fix: add ref --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 3e1a4e4dc44a..cc76aa1b1212 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -191,15 +191,18 @@ function BaseVideoPlayer({ currentVideoPlayerRef.current = videoPlayerRef.current; }, [url, currentVideoPlayerRef, isUploading]); + const isCurrentlyURLSetRef = useRef(); + isCurrentlyURLSetRef.current = isCurrentlyURLSet; + useEffect( () => () => { - if (!isCurrentlyURLSet) { + if (!isCurrentlyURLSetRef.current) { return; } resetVideoPlayerData(); }, - [resetVideoPlayerData, isCurrentlyURLSet], + [resetVideoPlayerData], ); // update shared video elements useEffect(() => { From 89386b68336913fdc0d3dc2063e1843a2dafa38e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 15 Apr 2024 20:33:38 +0700 Subject: [PATCH 4/4] only calling setCurrentlyPlayingURL --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 6 +++--- src/components/VideoPlayerContexts/PlaybackContext.tsx | 4 ++-- src/components/VideoPlayerContexts/types.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index cc76aa1b1212..4e0523549c0d 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -55,7 +55,7 @@ function BaseVideoPlayer({ currentVideoPlayerRef, updateCurrentlyPlayingURL, videoResumeTryNumber, - resetVideoPlayerData, + setCurrentlyPlayingURL, } = usePlaybackContext(); const {isFullScreenRef} = useFullScreenContext(); const {isOffline} = useNetwork(); @@ -200,9 +200,9 @@ function BaseVideoPlayer({ return; } - resetVideoPlayerData(); + setCurrentlyPlayingURL(null); }, - [resetVideoPlayerData], + [setCurrentlyPlayingURL], ); // update shared video elements useEffect(() => { diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx index 696ca70153f3..0fe0fe378ba6 100644 --- a/src/components/VideoPlayerContexts/PlaybackContext.tsx +++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx @@ -95,13 +95,13 @@ function PlaybackContextProvider({children}: ChildrenProps) { sharedElement, currentVideoPlayerRef, shareVideoPlayerElements, + setCurrentlyPlayingURL, playVideo, pauseVideo, checkVideoPlaying, videoResumeTryNumber, - resetVideoPlayerData, }), - [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, resetVideoPlayerData], + [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, setCurrentlyPlayingURL], ); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index 811e091ee49a..e6a20ec090fe 100644 --- a/src/components/VideoPlayerContexts/types.ts +++ b/src/components/VideoPlayerContexts/types.ts @@ -17,7 +17,7 @@ type PlaybackContext = { playVideo: () => void; pauseVideo: () => void; checkVideoPlaying: (statusCallback: StatusCallback) => void; - resetVideoPlayerData: () => void; + setCurrentlyPlayingURL: React.Dispatch>; }; type VolumeContext = {