add vid_type_filter to home and playlist views

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';

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
           <option value="true">Watched only</option>
           <option value="false">Unwatched only</option>
         </select>
-      </div>
-      {/* <div className="toggle">
-        <span>{hideToggleText}</span>
-        <div className="toggleBox">
-          <input
-            id="hide_watched"
-            type="checkbox"
-            checked={userConfig.hide_watched}
-            onChange={() => {
-              handleUserConfigUpdate({ hide_watched: !userConfig.hide_watched });
+        {showTypeFilter && (
+          <select
+            value={userConfig.vid_type_filter === null ? '' : userConfig.vid_type_filter}
+            onChange={event => {
+              handleUserConfigUpdate({
+                vid_type_filter:
+                  event.target.value === '' ? null : (event.target.value as VideoTypes),
+              });
             }}
-          />
-
-          {userConfig.hide_watched ? (
-            <label htmlFor="" className="onbtn">
-              On
-            </label>
-          ) : (
-            <label htmlFor="" className="ofbtn">
-              Off
-            </label>
-          )}
-        </div>
-      </div> */}
+          >
+            <option value="">All Types</option>
+            <option value="videos">Videos</option>
+            <option value="streams">Streams</option>
+            <option value="shorts">Shorts</option>
+          </select>
+        )}
+      </div>
 
       {showHidden && (
         <div className="sort">

frontend/src/pages/ChannelVideo.tsx

@@ -163,10 +163,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
         </div>
 
         <div className={`boxed-content ${gridView}`}>
-          <Filterbar
-            hideToggleText={'Hide watched videos:'}
-            viewStyle={ViewStyleNames.Home as ViewStyleNamesType}
-          />
+          <Filterbar viewStyle={ViewStyleNames.Home as ViewStyleNamesType} />
         </div>
 
         <EmbeddableVideoPlayer videoId={videoId} />

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 = () => {
           <h1>Recent Videos</h1>
         </div>
 
-        <Filterbar
-          hideToggleText="Show unwatched only:"
-          viewStyle={ViewStyleNames.Home as ViewStyleNamesType}
-        />
+        <Filterbar viewStyle={ViewStyleNames.Home as ViewStyleNamesType} showTypeFilter={true} />
       </div>
 
       <div className={`boxed-content ${gridView}`}>

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 = () => {
 
       <div className={`boxed-content ${gridView}`}>
         <Filterbar
-          hideToggleText="Hide watched videos:"
           viewStyle={ViewStyleNames.Home as ViewStyleNamesType} // its a list of videos, so ViewStyleNames.Home
           showSort={false}
+          showTypeFilter={true}
         />
       </div>
 

frontend/src/stores/UserConfigStore.ts

@@ -18,6 +18,7 @@ export const useUserConfigStore = create<UserConfigState>(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',