add vid_type filter for download list view

backend/download/serializers.py

@@ -42,6 +42,9 @@ class DownloadListQuerySerializer(
     filter = serializers.ChoiceField(
         choices=["pending", "ignore"], required=False
     )
+    vid_type = serializers.ChoiceField(
+        choices=VideoTypeEnum.values_known(), required=False
+    )
     channel = serializers.CharField(required=False, help_text="channel ID")
     page = serializers.IntegerField(required=False)
 

backend/download/views.py

@@ -65,6 +65,12 @@ class DownloadApiListView(ApiBaseView):
                 {"term": {"channel_id": {"value": filter_channel}}}
             )
 
+        vid_type_filter = validated_data.get("vid_type")
+        if vid_type_filter:
+            must_list.append(
+                {"term": {"vid_type": {"value": vid_type_filter}}}
+            )
+
         self.data["query"] = {"bool": {"must": must_list}}
 
         self.get_document_list(request)

frontend/src/api/loader/loadDownloadQueue.ts

@@ -1,11 +1,17 @@
 import APIClient from '../../functions/APIClient';
 import { DownloadResponseType } from '../../pages/Download';
 
-const loadDownloadQueue = async (page: number, channelId: string | null, showIgnored: boolean) => {
+const loadDownloadQueue = async (
+  page: number,
+  channelId: string | null,
+  vid_type: string | null,
+  showIgnored: boolean,
+) => {
   const searchParams = new URLSearchParams();
 
   if (page) searchParams.append('page', page.toString());
   if (channelId) searchParams.append('channel', channelId);
+  if (vid_type) searchParams.append('vid_type', vid_type);
   searchParams.append('filter', showIgnored ? 'ignore' : 'pending');
 
   const endpoint = `/api/download/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;

frontend/src/pages/Download.tsx

@@ -53,6 +53,7 @@ const Download = () => {
 
   const channelFilterFromUrl = searchParams.get('channel');
   const ignoredOnlyParam = searchParams.get('ignored');
+  const vidTypeFilterFromUrl = searchParams.get('vid-type');
 
   const [refresh, setRefresh] = useState(false);
   const [showHiddenForm, setShowHiddenForm] = useState(false);
@@ -104,6 +105,7 @@ const Download = () => {
         const videosResponse = await loadDownloadQueue(
           currentPage,
           channelFilterFromUrl,
+          vidTypeFilterFromUrl,
           showIgnored,
         );
         const { data: channelResponseData } = videosResponse ?? {};
@@ -123,7 +125,7 @@ const Download = () => {
 
   useEffect(() => {
     setRefresh(true);
-  }, [channelFilterFromUrl, currentPage, showIgnored]);
+  }, [channelFilterFromUrl, vidTypeFilterFromUrl, currentPage, showIgnored]);
 
   useEffect(() => {
     (async () => {
@@ -257,6 +259,26 @@ const Download = () => {
             </div>
           </div>
           <div className="view-icons">
+            <select
+              name="vid_type_filter"
+              id="vid_type_filter"
+              value={vidTypeFilterFromUrl || 'all'}
+              onChange={async event => {
+                const value = event.currentTarget.value;
+                const params = searchParams;
+                if (value !== 'all') {
+                  params.set('vid-type', value);
+                } else {
+                  params.delete('vid-type');
+                }
+                setSearchParams(params);
+              }}
+            >
+              <option value="all">all types</option>
+              <option value="videos">Videos</option>
+              <option value="streams">Streams</option>
+              <option value="shorts">Shorts</option>
+            </select>
             {channelAggsList && channelAggsList.length > 1 && (
               <select
                 name="channel_filter"
@@ -275,7 +297,7 @@ const Download = () => {
                   setSearchParams(params);
                 }}
               >
-                <option value="all">all</option>
+                <option value="all">all channels</option>
                 {channelAggsList.map(channel => {
                   const [name, id] = channel.key;
                   const count = channel.doc_count;