Added add to download queue function.

This commit is contained in:
n8detar 2022-04-16 18:03:17 -07:00
parent add20a4a6a
commit 72cbf2ba04
4 changed files with 62 additions and 16 deletions

View File

@ -1,4 +1,5 @@
import { Download } from "../types/download"; import { Download } from "../types/download";
import { DownloadResponse } from "../types/download";
import { TA_BASE_URL } from "./constants"; import { TA_BASE_URL } from "./constants";
export const getDownloads = async (token: string): Promise<Download> => { export const getDownloads = async (token: string): Promise<Download> => {
@ -15,3 +16,26 @@ export const getDownloads = async (token: string): Promise<Download> => {
} }
return response.json(); 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();
};

View File

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

4
tubearchivist/www/src/styles/globals.css Normal file → Executable file
View File

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

View File

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