make watched filter nullable dropdown

frontend/src/api/actions/updateUserConfig.ts

@@ -32,7 +32,7 @@ export type UserConfigType = {
   view_style_downloads: ViewStylesType;
   view_style_playlist: ViewStylesType;
   grid_items: number;
-  hide_watched: boolean;
+  hide_watched: boolean | null;
   file_size_unit: 'binary' | 'metric';
   show_ignored_only: boolean;
   show_subed_only: boolean;

frontend/src/api/loader/loadVideoListByPage.ts

@@ -36,7 +36,7 @@ export const SortOrderEnum = {
 
 export type VideoTypes = 'videos' | 'streams' | 'shorts';
 
-export type WatchTypes = 'watched' | 'unwatched' | 'continue';
+export type WatchTypes = 'watched' | 'unwatched' | 'continue' | null;
 export const WatchTypesEnum = {
   Watched: 'watched',
   Unwatched: 'unwatched',

frontend/src/components/Filterbar.tsx

@@ -29,6 +29,8 @@ const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProp
   const currentViewStyle = userConfig[viewStyle];
   const isGridView = currentViewStyle === ViewStylesEnum.Grid;
 
+  console.log(hideToggleText);
+
   useEffect(() => {
     if (!showSort) {
       return;
@@ -52,7 +54,21 @@ const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProp
 
   return (
     <div className="view-controls three">
-      <div className="toggle">
+      <div>
+        <select
+          value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
+          onChange={event => {
+            handleUserConfigUpdate({
+              hide_watched: event.target.value === '' ? null : event.target.value === 'true',
+            });
+          }}
+        >
+          <option value="">All</option>
+          <option value="true">Watched only</option>
+          <option value="false">Unwatched only</option>
+        </select>
+      </div>
+      {/* <div className="toggle">
         <span>{hideToggleText}</span>
         <div className="toggleBox">
           <input
@@ -74,7 +90,7 @@ const Filterbar = ({ hideToggleText, viewStyle, showSort = true }: FilterbarProp
             </label>
           )}
         </div>
-      </div>
+      </div> */}
 
       {showHidden && (
         <div className="sort">

frontend/src/pages/ChannelVideo.tsx

@@ -73,7 +73,12 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
       const videos = await loadVideoListByFilter({
         channel: channelId,
         page: currentPage,
-        watch: userConfig.hide_watched ? (WatchTypesEnum.Unwatched as WatchTypes) : undefined,
+        watch:
+          userConfig.hide_watched === null
+            ? null
+            : ((userConfig.hide_watched
+                ? WatchTypesEnum.Watched
+                : WatchTypesEnum.Unwatched) as WatchTypes),
         sort: userConfig.sort_by,
         order: userConfig.sort_order,
         type: videoType,

frontend/src/pages/Home.tsx

@@ -135,7 +135,12 @@ const Home = () => {
     (async () => {
       const videos = await loadVideoListByFilter({
         page: currentPage,
-        watch: userConfig.hide_watched ? (WatchTypesEnum.Unwatched as WatchTypes) : undefined,
+        watch:
+          userConfig.hide_watched === null
+            ? null
+            : ((userConfig.hide_watched
+                ? WatchTypesEnum.Watched
+                : WatchTypesEnum.Unwatched) as WatchTypes),
         sort: userConfig.sort_by,
         order: userConfig.sort_order,
       });

frontend/src/pages/Playlist.tsx

@@ -72,7 +72,6 @@ const Playlist = () => {
 
   const viewStyle = userConfig.view_style_home; // its a list of videos, so view_style_home
   const gridItems = userConfig.grid_items;
-  const hideWatched = userConfig.hide_watched;
   const isGridView = viewStyle === ViewStylesEnum.Grid;
   const gridView = isGridView ? `boxed-${gridItems}` : '';
   const gridViewGrid = isGridView ? `grid-${gridItems}` : '';
@@ -83,7 +82,12 @@ const Playlist = () => {
       const video = await loadVideoListByFilter({
         playlist: playlistId,
         page: currentPage,
-        watch: hideWatched ? (WatchTypesEnum.Unwatched as WatchTypes) : undefined,
+        watch:
+          userConfig.hide_watched === null
+            ? null
+            : ((userConfig.hide_watched
+                ? WatchTypesEnum.Watched
+                : WatchTypesEnum.Unwatched) as WatchTypes),
       });
 
       setPlaylistResponse(playlist);