public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 21:39:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix partial implemented refresh for config useEffect, #869

Browse Source
This commit is contained in:
Simon
2025-01-27 21:17:42 +07:00
parent 759f57aa0c
commit 78528c4260
5 changed files with 46 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/Filterbar.tsx
View File

@@ -11,10 +11,10 @@ import { ViewStyles } from '../configuration/constants/ViewStyle';
type FilterbarProps = { type FilterbarProps = {
hideToggleText: string; hideToggleText: string;
viewStyleName: string; viewStyleName: string;
setRefresh?: (status: boolean) => void; showSort?: boolean;
}; };
const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps) => { const Filterbar = ({ hideToggleText, viewStyleName, showSort = true }: FilterbarProps) => {
const { userConfig, setPartialConfig } = useUserConfigStore(); const { userConfig, setPartialConfig } = useUserConfigStore();
const [showHidden, setShowHidden] = useState(false); const [showHidden, setShowHidden] = useState(false);
const isGridView = userConfig.config.view_style_home === ViewStyles.grid; const isGridView = userConfig.config.view_style_home === ViewStyles.grid;
@@ -29,7 +29,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
type="checkbox" type="checkbox"
checked={userConfig.config.hide_watched} checked={userConfig.config.hide_watched}
onChange={() => { onChange={() => {
setRefresh?.(true);
setPartialConfig({ hide_watched: !userConfig.config.hide_watched }); setPartialConfig({ hide_watched: !userConfig.config.hide_watched });
}} }}
/> />
@@ -46,7 +45,7 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
</div> </div>
</div> </div>
{showHidden && ( {showHidden && showSort && (
<div className="sort"> <div className="sort">
<div id="form"> <div id="form">
<span>Sort by:</span> <span>Sort by:</span>
@@ -55,7 +54,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
id="sort" id="sort"
value={userConfig.config.sort_by} value={userConfig.config.sort_by}
onChange={event => { onChange={event => {
setRefresh?.(true);
setPartialConfig({ sort_by: event.target.value as SortByType }); setPartialConfig({ sort_by: event.target.value as SortByType });
}} }}
> >
@@ -71,7 +69,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
id="sort-order" id="sort-order"
value={userConfig.config.sort_order} value={userConfig.config.sort_order}
onChange={event => { onChange={event => {
setRefresh?.(true);
setPartialConfig({ sort_order: event.target.value as SortOrderType }); setPartialConfig({ sort_order: event.target.value as SortOrderType });
}} }}
> >
@@ -81,9 +78,8 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
</div> </div>
</div> </div>
)} )}
<div className="view-icons"> <div className="view-icons">
{setShowHidden && ( {setShowHidden && showSort && (
<img <img
src={iconSort} src={iconSort}
alt="sort-icon" alt="sort-icon"

6
frontend/src/pages/ChannelVideo.tsx
View File

@@ -152,11 +152,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
</div> </div>
</div> </div>
<div className={`boxed-content ${gridView}`}> <div className={`boxed-content ${gridView}`}>
<Filterbar <Filterbar hideToggleText={'Hide watched videos:'} viewStyleName={ViewStyleNames.home} />
hideToggleText={'Hide watched videos:'}
viewStyleName={ViewStyleNames.home}
setRefresh={setRefresh}
/>
</div> </div>
{showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />} {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
<div className={`boxed-content ${gridView}`}> <div className={`boxed-content ${gridView}`}>

16
frontend/src/pages/Channels.tsx
View File

@@ -65,16 +65,14 @@ const Channels = () => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if (refresh) { const channelListResponse = await loadChannelList(
const channelListResponse = await loadChannelList( currentPage,
currentPage, userConfig.config.show_subed_only,
userConfig.config.show_subed_only, );
);
setChannelListResponse(channelListResponse); setChannelListResponse(channelListResponse);
setShowNotification(false); setShowNotification(false);
setRefresh(false); setRefresh(false);
}
})(); })();
}, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]); }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);

44
frontend/src/pages/Home.tsx
View File

@@ -129,30 +129,24 @@ const Home = () => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if ( const videos = await loadVideoListByFilter({
refreshVideoList || page: currentPage,
pagination?.current_page === undefined || watch: userMeConfig.hide_watched ? 'unwatched' : undefined,
currentPage !== pagination?.current_page sort: userMeConfig.sort_by,
) { order: userMeConfig.sort_order,
const videos = await loadVideoListByFilter({ });
page: currentPage,
watch: userMeConfig.hide_watched ? 'unwatched' : undefined,
sort: userMeConfig.sort_by,
order: userMeConfig.sort_order,
});
try { try {
const continueVideoResponse = await loadVideoListByFilter({ watch: 'continue' }); const continueVideoResponse = await loadVideoListByFilter({ watch: 'continue' });
setContinueVideoResponse(continueVideoResponse); setContinueVideoResponse(continueVideoResponse);
} catch (error) { } catch (error) {
console.log('Server error on continue vids?'); console.log('Server error on continue vids?');
console.error(error); console.error(error);
}
setVideoReponse(videos);
setRefreshVideoList(false);
} }
setVideoReponse(videos);
setRefreshVideoList(false);
})(); })();
}, [ }, [
refreshVideoList, refreshVideoList,
@@ -190,11 +184,7 @@ const Home = () => {
<h1>Recent Videos</h1> <h1>Recent Videos</h1>
</div> </div>
<Filterbar <Filterbar hideToggleText="Hide watched:" viewStyleName={ViewStyleNames.home} />
hideToggleText="Hide watched:"
viewStyleName={ViewStyleNames.home}
setRefresh={setRefreshVideoList}
/>
</div> </div>
<div className={`boxed-content ${gridView}`}> <div className={`boxed-content ${gridView}`}>

41
frontend/src/pages/Playlist.tsx
View File

@@ -90,34 +90,27 @@ const Playlist = () => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if ( const playlist = await loadPlaylistById(playlistId);
refresh || const video = await loadVideoListByFilter({
pagination?.current_page === undefined || playlist: playlistId,
currentPage !== pagination?.current_page page: currentPage,
) { watch: hideWatched ? 'unwatched' : undefined,
const playlist = await loadPlaylistById(playlistId); sort: 'downloaded', // downloaded or published? or playlist sort order?
const video = await loadVideoListByFilter({ });
playlist: playlistId,
page: currentPage,
watch: hideWatched ? 'unwatched' : undefined,
sort: 'downloaded', // downloaded or published? or playlist sort order?
});
const isCustomPlaylist = playlist?.data?.playlist_type === 'custom'; const isCustomPlaylist = playlist?.data?.playlist_type === 'custom';
if (!isCustomPlaylist) { if (!isCustomPlaylist) {
const channel = await loadChannelById(playlist.data.playlist_channel_id); const channel = await loadChannelById(playlist.data.playlist_channel_id);
setChannelResponse(channel); setChannelResponse(channel);
}
setPlaylistResponse(playlist);
setVideoResponse(video);
setRefresh(false);
} }
setPlaylistResponse(playlist);
setVideoResponse(video);
setRefresh(false);
})(); })();
// Do not add hideWatched this will not work as expected!
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [playlistId, refresh, currentPage, pagination?.current_page]); }, [playlistId, userConfig.config.hide_watched, refresh, currentPage, pagination?.current_page]);
if (!playlistId || !playlist) { if (!playlistId || !playlist) {
return `Playlist ${playlistId} not found!`; return `Playlist ${playlistId} not found!`;
@@ -320,7 +313,7 @@ const Playlist = () => {
<Filterbar <Filterbar
hideToggleText="Hide watched videos:" hideToggleText="Hide watched videos:"
viewStyleName={ViewStyleNames.playlist} viewStyleName={ViewStyleNames.playlist}
setRefresh={setRefresh} showSort={false}
/> />
</div> </div>