Fix watched state update for both player styles

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<VideoResponseType>();
   const [playlists, setPlaylists] = useState<PlaylistList>();
 
   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);
+            }}
           />
 
           <div className="player-title boxed-content">

frontend/src/components/VideoPlayer.tsx

@@ -54,6 +54,7 @@ const handleTimeUpdate =
     watched: boolean,
     sponsorBlock?: SponsorBlockType,
     setSponsorSegmentSkipped?: Dispatch<SetStateAction<SponsorSegmentsSkippedType>>,
+    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);

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);
         }}