diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx index 2210a570..13f36443 100644 --- a/frontend/src/components/EmbeddableVideoPlayer.tsx +++ b/frontend/src/components/EmbeddableVideoPlayer.tsx @@ -29,14 +29,12 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { const [, setSearchParams] = useSearchParams(); const [refresh, setRefresh] = useState(true); - const [loading, setLoading] = useState(false); const [videoResponse, setVideoResponse] = useState(); const [playlists, setPlaylists] = useState(); useEffect(() => { (async () => { - setLoading(true); const videoResponse = await loadVideoById(videoId); const playlistIds = videoResponse.data.playlist; @@ -68,7 +66,6 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { inlinePlayerRef.current?.scrollIntoView(); setRefresh(false); - setLoading(false); })(); }, [videoId, refresh]); @@ -103,6 +100,9 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { sponsorBlock={sponsorblock} embed={true} autoplay={true} + onWatchStateChanged={() => { + setRefresh(true); + }} />
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx index 216b9bb7..027c43e8 100644 --- a/frontend/src/components/VideoPlayer.tsx +++ b/frontend/src/components/VideoPlayer.tsx @@ -54,6 +54,7 @@ const handleTimeUpdate = watched: boolean, sponsorBlock?: SponsorBlockType, setSponsorSegmentSkipped?: Dispatch>, + onWatchStateChanged?: (status: boolean) => void, ) => async (videoTag: VideoTag) => { const currentTime = Number(videoTag.currentTarget.currentTime); @@ -93,6 +94,8 @@ const handleTimeUpdate = id: youtubeId, is_watched: true, }); + + onWatchStateChanged?.(true); } } } @@ -103,6 +106,7 @@ type VideoPlayerProps = { sponsorBlock?: SponsorBlockType; embed?: boolean; autoplay?: boolean; + onWatchStateChanged?: (status: boolean) => void; onVideoEnd?: () => void; }; @@ -111,6 +115,7 @@ const VideoPlayer = ({ sponsorBlock, embed, autoplay = false, + onWatchStateChanged, onVideoEnd, }: VideoPlayerProps) => { const [searchParams] = useSearchParams(); @@ -182,6 +187,7 @@ const VideoPlayer = ({ watched, sponsorBlock, setSkippedSegments, + onWatchStateChanged, )} onPause={async (videoTag: VideoTag) => { const currentTime = Number(videoTag.currentTarget.currentTime); diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx index a6f5ac20..fce0fb2b 100644 --- a/frontend/src/pages/Video.tsx +++ b/frontend/src/pages/Video.tsx @@ -121,7 +121,6 @@ const Video = () => { const navigate = useNavigate(); const isAdmin = useIsAdmin(); - const [loading, setLoading] = useState(false); const [videoEnded, setVideoEnded] = useState(false); const [playlistAutoplay, setPlaylistAutoplay] = useState( localStorage.getItem('playlistAutoplay') === 'true', @@ -143,8 +142,6 @@ const Video = () => { useEffect(() => { (async () => { - setLoading(true); - const videoResponse = await loadVideoById(videoId); const simmilarVideosResponse = await loadSimmilarVideosById(videoId); const customPlaylistsResponse = await loadPlaylistList({ type: 'custom' }); @@ -157,8 +154,6 @@ const Video = () => { setCustomPlaylistsResponse(customPlaylistsResponse); setCommentsResponse(commentsResponse); setRefreshVideoList(false); - - setLoading(false); })(); }, [videoId, refreshVideoList]); @@ -218,6 +213,9 @@ const Video = () => { video={videoResponse} sponsorBlock={sponsorBlock} autoplay={playlistAutoplay} + onWatchStateChanged={() => { + setRefreshVideoList(true); + }} onVideoEnd={() => { setVideoEnded(true); }}