add fast add, use toggles

frontend/src/api/actions/updateDownloadQueue.ts

@@ -1,6 +1,6 @@
 import APIClient from '../../functions/APIClient';
 
-const updateDownloadQueue = async (youtubeIdStrings: string, autostart: boolean) => {
+const updateDownloadQueue = async (youtubeIdStrings: string, autostart: boolean, flat: boolean) => {
   const urls = [];
   const containsMultiple = youtubeIdStrings.includes('\n');
 
@@ -16,12 +16,12 @@ const updateDownloadQueue = async (youtubeIdStrings: string, autostart: boolean)
     urls.push({ youtube_id: youtubeIdStrings, status: 'pending' });
   }
 
-  let params = '';
+  const searchParams = new URLSearchParams();
-  if (autostart) {
+  if (autostart) searchParams.append('autostart', 'true');
-    params = '?autostart=true';
+  if (flat) searchParams.append('flat', 'true');
-  }
+  const endpoint = `/api/download/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
 
-  return APIClient(`/api/download/${params}`, {
+  return APIClient(endpoint, {
     method: 'POST',
     body: { data: [...urls] },
   });

frontend/src/components/DownloadListItem.tsx

@@ -57,8 +57,9 @@ const DownloadListItem = ({ download, setRefresh }: DownloadListItemProps) => {
         </div>
 
         <p>
-          Published: {formatDate(download.published)} | Duration: {download.duration} |{' '}
+          {download.published && <span>Published: {formatDate(download.published)} | </span>}
-          {download.youtube_id}
+          <span>Duration: {download.duration} | </span>
+          <span>{download.youtube_id}</span>
         </p>
 
         {download.message && <p className="danger-zone">{download.message}</p>}

frontend/src/pages/Download.tsx

@@ -33,9 +33,9 @@ type Download = {
   channel_name: string;
   duration: string;
   message?: string;
-  published: string;
+  published: string | null;
   status: string;
-  timestamp: number;
+  timestamp: number | null;
   title: string;
   vid_thumb_url: string;
   vid_type: string;
@@ -61,6 +61,8 @@ const Download = () => {
 
   const [refresh, setRefresh] = useState(false);
   const [showHiddenForm, setShowHiddenForm] = useState(false);
+  const [addAsAutoStart, setAddAsAutoStart] = useState(false);
+  const [addAsFlat, setAddAsFlat] = useState(false);
   const [showQueueActions, setShowQueueActions] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [downloadPending, setDownloadPending] = useState(false);
@@ -215,6 +217,46 @@ const Download = () => {
             {showHiddenForm && (
               <div className="show-form">
                 <div>
+                  <div className="toggle">
+                    <div className="toggleBox">
+                      <input
+                        id="hide_watched"
+                        type="checkbox"
+                        checked={addAsFlat}
+                        onChange={() => setAddAsFlat(!addAsFlat)}
+                      />
+                      {addAsFlat ? (
+                        <label htmlFor="" className="onbtn">
+                          On
+                        </label>
+                      ) : (
+                        <label htmlFor="" className="ofbtn">
+                          Off
+                        </label>
+                      )}
+                    </div>
+                    <span>Fast add</span>
+                  </div>
+                  <div className="toggle">
+                    <div className="toggleBox">
+                      <input
+                        id="hide_watched"
+                        type="checkbox"
+                        checked={addAsAutoStart}
+                        onChange={() => setAddAsAutoStart(!addAsAutoStart)}
+                      />
+                      {addAsAutoStart ? (
+                        <label htmlFor="" className="onbtn">
+                          On
+                        </label>
+                      ) : (
+                        <label htmlFor="" className="ofbtn">
+                          Off
+                        </label>
+                      )}
+                    </div>
+                    <span>Auto Download</span>
+                  </div>
                   <textarea
                     value={downloadQueueText}
                     onChange={e => setDownloadQueueText(e.target.value)}
@@ -226,24 +268,13 @@ const Download = () => {
                     label="Add to queue"
                     onClick={async () => {
                       if (downloadQueueText.trim()) {
-                        await updateDownloadQueue(downloadQueueText, false);
+                        await updateDownloadQueue(downloadQueueText, addAsAutoStart, addAsFlat);
                         setDownloadQueueText('');
                         setRefresh(true);
                         setShowHiddenForm(false);
                       }
                     }}
                   />{' '}
-                  <Button
-                    label="Download now"
-                    onClick={async () => {
-                      if (downloadQueueText.trim()) {
-                        await updateDownloadQueue(downloadQueueText, true);
-                        setDownloadQueueText('');
-                        setRefresh(true);
-                        setShowHiddenForm(false);
-                      }
-                    }}
-                  />
                 </div>
               </div>
             )}