Refac refresh video list when videoId changing

frontend/src/pages/ChannelVideo.tsx

@@ -45,6 +45,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
   const channel = channelResponse;
   const videoList = videoResponse?.data;
   const pagination = videoResponse?.paginate;
+  const refreshWhenVideoIdChanges = videoId !== null;
 
   const hasVideos = videoResponse?.data?.length !== 0;
 
@@ -80,6 +81,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
     channelId,
     pagination?.current_page,
     videoType,
+    refreshWhenVideoIdChanges,
   ]);
 
   if (!channel) {

frontend/src/pages/Home.tsx

@@ -117,6 +117,7 @@ const Home = () => {
   const videoList = videoResponse?.data;
   const pagination = videoResponse?.paginate;
   const continueVideos = continueVideoResponse?.data;
+  const refreshWhenVideoIdChanges = videoId !== null;
 
   const hasVideos = videoResponse?.data?.length !== 0;
 
@@ -152,6 +153,7 @@ const Home = () => {
     userConfig.hide_watched,
     currentPage,
     pagination?.current_page,
+    refreshWhenVideoIdChanges,
   ]);
 
   return (

frontend/src/pages/Playlist.tsx

@@ -56,6 +56,7 @@ const Playlist = () => {
   const palylistEntries = playlistResponse?.playlist_entries;
   const videoArchivedCount = Number(palylistEntries?.filter(video => video.downloaded).length);
   const videoInPlaylistCount = pagination?.total_hits;
+  const refreshWhenVideoIdChanges = videoId !== null;
 
   const view = userConfig.view_style_home;
   const gridItems = userConfig.grid_items;
@@ -86,7 +87,14 @@ const Playlist = () => {
       setRefresh(false);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlistId, userConfig.hide_watched, refresh, currentPage, pagination?.current_page]);
+  }, [
+    playlistId,
+    userConfig.hide_watched,
+    refresh,
+    currentPage,
+    pagination?.current_page,
+    refreshWhenVideoIdChanges,
+  ]);
 
   if (!playlistId || !playlist) {
     return `Playlist ${playlistId} not found!`;

frontend/src/pages/Search.tsx

@@ -56,6 +56,7 @@ const Search = () => {
   const playlistList = searchResults?.results.playlist_results;
   const fulltextList = searchResults?.results.fulltext_results;
   const queryType = searchResults?.queryType;
+  const refreshWhenVideoIdChanges = videoId !== null;
 
   const hasSearchQuery = searchTerm.length > 0;
   const hasVideos = Number(videoList?.length) > 0;
@@ -89,7 +90,7 @@ const Search = () => {
     } else {
       setSearchResults(EmptySearchResponse);
     }
-  }, [debouncedSearchTerm, refresh]);
+  }, [debouncedSearchTerm, refresh, refreshWhenVideoIdChanges]);
 
   const fetchResults = async (searchQuery: string) => {
     const searchResults = await loadSearch(searchQuery);