Added add to download queue function.

tubearchivist/www/src/lib/getDownloads.ts

@@ -1,4 +1,5 @@
 import { Download } from "../types/download";
+import { DownloadResponse } from "../types/download";
 import { TA_BASE_URL } from "./constants";
 
 export const getDownloads = async (token: string): Promise<Download> => {
@@ -15,3 +16,26 @@ export const getDownloads = async (token: string): Promise<Download> => {
   }
   return response.json();
 };
+
+export const sendDownloads = async (token: string, input: string): Promise<DownloadResponse> => {
+  var data = {
+    "data": [{
+      "youtube_id": input,
+      "status": "pending"
+    }]
+  };
+  const response = await fetch(`${TA_BASE_URL}/api/download/`, {
+    body: JSON.stringify(data),
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Token ${token}`,
+      mode: "no-cors",
+    },
+    method: "POST"
+  });
+  if (!response.ok) {
+    throw new Error("Error adding content to the download queue.");
+  }
+  return response.json();
+};

tubearchivist/www/src/pages/download.tsx

@@ -7,6 +7,7 @@ import { Layout } from "../components/Layout";
 import NextImage from "next/image";
 import { TA_BASE_URL } from "../lib/constants";
 import { getDownloads } from "../lib/getDownloads";
+import { sendDownloads } from "../lib/getDownloads";
 import RescanIcon from "../images/icon-rescan.svg";
 import DownloadIcon from "../images/icon-download.svg";
 import AddIcon from "../images/icon-add.svg";
@@ -16,6 +17,8 @@ import ListViewIcon from "../images/icon-listview.svg";
 
 type ViewStyle = "grid" | "list";
 type IgnoredStatus = boolean;
+type FormHidden = boolean;
+
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const queryClient = new QueryClient();
@@ -58,6 +61,7 @@ const Download: NextPage = () => {
 
     const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads);
     const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
+    const [formHidden, setFormHidden] = useState<FormHidden>(true);
 
     const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
         setViewStyle(selectedViewStyle);
@@ -67,6 +71,16 @@ const Download: NextPage = () => {
         setIgnoredStatus(selectedIgnoredStatus);
     };
 
+    const handleSetFormHidden = (selectedFormHidden: FormHidden) => {
+        setFormHidden(selectedFormHidden);
+    };
+
+    const addToDownloadQueue = event => {
+        event.preventDefault();
+        sendDownloads(session.ta_token.token, event.target.vid_url.value);
+        handleSetFormHidden(true);
+    }
+
     return (
         <>
             <CustomHead title="Downloads" />
@@ -110,16 +124,17 @@ const Download: NextPage = () => {
                                 src={AddIcon}
                                 alt="add-icon"
                                 title="Add to download queue"
-                                onClick={() => console.log("showForm()")}
+                                onClick={() => formHidden ? handleSetFormHidden(false) : handleSetFormHidden(true)}
                             />
                             <p>Add to download queue</p>
-                            <div className="show-form">
-                                <form id="hidden-form" action="/downloads/" method="post">
-                                {/* {% csrf_token %}
-                                    {{ subscribe_form }} */}
-                                <button type="submit">Add to download queue</button>
-                                </form>
-                            </div>
+                            {!formHidden &&
+                                <div className="show-form">
+                                    <form id="hidden-form" onSubmit={addToDownloadQueue}>
+                                        <textarea name="vid_url" cols={40} rows={4} placeholder="Enter Video Urls or IDs here..." required id="id_vid_url" spellCheck="false" />
+                                        <button type="submit">Add to download queue</button>
+                                    </form>
+                                </div>
+                            }
                         </div>
                     </div>
                     <div className="view-controls">
@@ -185,11 +200,11 @@ const Download: NextPage = () => {
                             </div>
                         }
                     <h3>Total videos: {downloads?.data?.length} {!downloads?.data?.length && <p>No videos queued for download. Press rescan subscriptions to check if there are any new videos.</p>}</h3>
-                    <div className={`dl-list  ${viewStyle}`}>
+                    <div className={`dl-list ${viewStyle}`}>
                         {downloads.data &&
-                            downloads?.data?.map((video) => {
+                            downloads?.data?.map((video,i) => {
                                 return (
-                                    <div key={video?.youtube_id} className={`dl-item ${viewStyle}`} >
+                                    <div key={i} className={`dl-item ${viewStyle}`}>
                                         <div className={`dl-thumb ${viewStyle}`}>
                                             <img src={`${TA_BASE_URL}${video?.vid_thumb_url}`} alt="video_thumb"></img>
                                             {ignoredStatus && <span>ignored</span>}
@@ -201,11 +216,11 @@ const Download: NextPage = () => {
                                             {/* {% endif %} */}
                                         </div>
                                         <div className={`dl-desc ${viewStyle}`}>
-                                            <h3>{video?.title}Video Title</h3>
-                                            {video?.channel?.channel_indexed && <a href={`/channel/${video?.channel?.channel_id}`}>{video?.channel?.channel_name} Channel Name Link</a>}
+                                            <h3>{video?.title}</h3>
+                                            {video?.channel?.channel_indexed && <a href={`/channel/${video?.channel?.channel_id}`}>{video?.channel?.channel_name}</a>}
                                             {/* {% if video.source.channel_indexed %} */}
                                                 {/* <a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a> */}
-                                            {!video?.channel?.channel_indexed && <span>{video?.channel?.channel_name} Channel Name No Link</span>}
+                                            {!video?.channel?.channel_indexed && <span>{video?.channel?.channel_name}</span>}
                                             {/* {% else %} */}
                                                 {/* <span>{{ video.source.channel_name }}</span> */}
                                             {/* {% endif %} */}

tubearchivist/www/src/styles/globals.css

@@ -326,9 +326,9 @@ button:hover {
   filter: var(--img-filter);
 }
 
-#hidden-form {
+/* #hidden-form {
   display: none;
-}
+} */
 
 #text-reveal {
   height: 0px;

tubearchivist/www/src/types/download.ts

@@ -4,6 +4,12 @@ export interface Download {
   paginate: boolean;
 }
 
+export interface DownloadResponse {
+  data: Datum[];
+  message: string;
+
+}
+
 export interface Config {
   archive: Archive;
   default_view: DefaultView;
@@ -95,6 +101,7 @@ export interface Datum {
   vid_thumb_base64: string;
   vid_thumb_url: string;
   youtube_id: string;
+  status: "pending";
 }
 
 export enum Category {