From 5804fc09e66126d320e4d57099bfb7d00bfb81b5 Mon Sep 17 00:00:00 2001 From: Simon Date: Mon, 11 Aug 2025 20:46:16 +0700 Subject: [PATCH] add vid_type_filter to home and playlist views --- backend/user/serializers.py | 5 ++- backend/user/src/user_config.py | 2 + frontend/src/api/actions/updateUserConfig.ts | 3 +- frontend/src/components/Filterbar.tsx | 46 ++++++++------------ frontend/src/pages/ChannelVideo.tsx | 5 +-- frontend/src/pages/Home.tsx | 8 ++-- frontend/src/pages/Playlist.tsx | 5 ++- frontend/src/stores/UserConfigStore.ts | 1 + 8 files changed, 37 insertions(+), 38 deletions(-) diff --git a/backend/user/serializers.py b/backend/user/serializers.py index 2a8a6f47..8f5cbd51 100644 --- a/backend/user/serializers.py +++ b/backend/user/serializers.py @@ -5,7 +5,7 @@ from common.src.helper import get_stylesheets from rest_framework import serializers from user.models import Account -from video.src.constants import OrderEnum, SortEnum +from video.src.constants import OrderEnum, SortEnum, VideoTypeEnum class AccountSerializer(serializers.ModelSerializer): @@ -37,6 +37,9 @@ class UserMeConfigSerializer(serializers.Serializer): view_style_channel = serializers.ChoiceField(choices=["grid", "list"]) view_style_downloads = serializers.ChoiceField(choices=["grid", "list"]) view_style_playlist = serializers.ChoiceField(choices=["grid", "list"]) + vid_type_filter = serializers.ChoiceField( + choices=VideoTypeEnum.values_known(), allow_null=True + ) grid_items = serializers.IntegerField(max_value=7, min_value=3) hide_watched = serializers.BooleanField(allow_null=True) file_size_unit = serializers.ChoiceField(choices=["binary", "metric"]) diff --git a/backend/user/src/user_config.py b/backend/user/src/user_config.py index c9861926..137fa681 100644 --- a/backend/user/src/user_config.py +++ b/backend/user/src/user_config.py @@ -20,6 +20,7 @@ class UserConfigType(TypedDict, total=False): view_style_channel: str view_style_downloads: str view_style_playlist: str + vid_type_filter: str | None grid_items: int hide_watched: bool | None file_size_unit: str @@ -43,6 +44,7 @@ class UserConfig: view_style_channel="list", view_style_downloads="list", view_style_playlist="grid", + vid_type_filter=None, grid_items=3, hide_watched=False, file_size_unit="binary", diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts index 038384fc..2f2a3a4e 100644 --- a/frontend/src/api/actions/updateUserConfig.ts +++ b/frontend/src/api/actions/updateUserConfig.ts @@ -1,6 +1,6 @@ import { ViewStylesType } from '../../configuration/constants/ViewStyle'; import APIClient from '../../functions/APIClient'; -import { SortByType, SortOrderType } from '../loader/loadVideoListByPage'; +import { SortByType, SortOrderType, VideoTypes } from '../loader/loadVideoListByPage'; export type ColourVariants = | 'dark.css' @@ -31,6 +31,7 @@ export type UserConfigType = { view_style_channel: ViewStylesType; view_style_downloads: ViewStylesType; view_style_playlist: ViewStylesType; + vid_type_filter: VideoTypes | null; grid_items: number; hide_watched: boolean | null; file_size_unit: 'binary' | 'metric'; diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx index 73b5a473..7a27aeac 100644 --- a/frontend/src/components/Filterbar.tsx +++ b/frontend/src/components/Filterbar.tsx @@ -13,15 +13,16 @@ import { SortByType, SortOrderEnum, SortOrderType, + VideoTypes, } from '../api/loader/loadVideoListByPage'; type FilterbarProps = { - hideToggleText: string; viewStyle: ViewStyleNamesType; showSort?: boolean; + showTypeFilter?: boolean; }; -const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProps) => { +const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: FilterbarProps) => { const { userConfig, setUserConfig } = useUserConfigStore(); const [showHidden, setShowHidden] = useState(false); @@ -29,8 +30,6 @@ const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProp const currentViewStyle = userConfig[viewStyle]; const isGridView = currentViewStyle === ViewStylesEnum.Grid; - console.log(hideToggleText); - useEffect(() => { if (!showSort) { return; @@ -67,30 +66,23 @@ const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProp - - {/*
- {hideToggleText} -
- { - handleUserConfigUpdate({ hide_watched: !userConfig.hide_watched }); + {showTypeFilter && ( + + )} +
{showHidden && (
diff --git a/frontend/src/pages/ChannelVideo.tsx b/frontend/src/pages/ChannelVideo.tsx index 1b798a77..522140a1 100644 --- a/frontend/src/pages/ChannelVideo.tsx +++ b/frontend/src/pages/ChannelVideo.tsx @@ -163,10 +163,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
- +
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 917af3a6..6e05b26f 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -4,6 +4,7 @@ import Routes from '../configuration/routes/RouteList'; import Pagination from '../components/Pagination'; import loadVideoListByFilter, { VideoListByFilterResponseType, + VideoTypes, WatchTypes, WatchTypesEnum, } from '../api/loader/loadVideoListByPage'; @@ -141,6 +142,7 @@ const Home = () => { : ((userConfig.hide_watched ? WatchTypesEnum.Watched : WatchTypesEnum.Unwatched) as WatchTypes), + type: userConfig.vid_type_filter as VideoTypes, sort: userConfig.sort_by, order: userConfig.sort_order, }); @@ -162,6 +164,7 @@ const Home = () => { userConfig.sort_by, userConfig.sort_order, userConfig.hide_watched, + userConfig.vid_type_filter, currentPage, pagination?.current_page, videoId, @@ -194,10 +197,7 @@ const Home = () => {

Recent Videos

- +
diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx index b3c2c91f..fc3777d5 100644 --- a/frontend/src/pages/Playlist.tsx +++ b/frontend/src/pages/Playlist.tsx @@ -24,6 +24,7 @@ import ScrollToTopOnNavigate from '../components/ScrollToTop'; import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer'; import Button from '../components/Button'; import loadVideoListByFilter, { + VideoTypes, WatchTypes, WatchTypesEnum, } from '../api/loader/loadVideoListByPage'; @@ -88,6 +89,7 @@ const Playlist = () => { : ((userConfig.hide_watched ? WatchTypesEnum.Watched : WatchTypesEnum.Unwatched) as WatchTypes), + type: userConfig.vid_type_filter as VideoTypes, }); setPlaylistResponse(playlist); @@ -106,6 +108,7 @@ const Playlist = () => { }, [ playlistId, userConfig.hide_watched, + userConfig.vid_type_filter, refresh, currentPage, pagination?.current_page, @@ -343,9 +346,9 @@ const Playlist = () => {
diff --git a/frontend/src/stores/UserConfigStore.ts b/frontend/src/stores/UserConfigStore.ts index 077715c5..e4d2c812 100644 --- a/frontend/src/stores/UserConfigStore.ts +++ b/frontend/src/stores/UserConfigStore.ts @@ -18,6 +18,7 @@ export const useUserConfigStore = create(set => ({ view_style_channel: ViewStylesEnum.List as ViewStylesType, view_style_downloads: ViewStylesEnum.List as ViewStylesType, view_style_playlist: ViewStylesEnum.Grid as ViewStylesType, + vid_type_filter: null, grid_items: 3, hide_watched: false, file_size_unit: 'binary',