Download queue list & Show ignored functionality

This commit is contained in:
n8detar 2022-04-16 15:26:30 -07:00
parent 7291511eb8
commit d9fae64afb
3 changed files with 288 additions and 32 deletions

View File

@ -0,0 +1,17 @@
import { Download } from "../types/download";
import { TA_BASE_URL } from "./constants";
export const getDownloads = async (token: string): Promise<Download> => {
const response = await fetch(`${TA_BASE_URL}/api/download/`, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Token ${token}`,
mode: "no-cors",
},
});
if (!response.ok) {
throw new Error("Error getting download queue information");
}
return response.json();
};

View File

@ -5,13 +5,17 @@ import { dehydrate, QueryClient, useQuery } from "react-query";
import { CustomHead } from "../components/CustomHead";
import { Layout } from "../components/Layout";
import NextImage from "next/image";
import { TA_BASE_URL } from "../lib/constants";
import { getDownloads } from "../lib/getDownloads";
import RescanIcon from "../images/icon-rescan.svg";
import DownloadIcon from "../images/icon-download.svg";
import AddIcon from "../images/icon-add.svg";
import GridViewIcon from "../images/icon-gridview.svg";
import ListViewIcon from "../images/icon-listview.svg";
type ViewStyle = "grid" | "list";
type IgnoredStatus = boolean;
export const getServerSideProps: GetServerSideProps = async (context) => {
const queryClient = new QueryClient();
@ -26,6 +30,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
}
await queryClient.prefetchQuery(["downloads", session.ta_token.token], () =>
getDownloads(session.ta_token.token)
);
return {
props: {
dehydratedState: dehydrate(queryClient),
@ -35,13 +43,30 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
const Download: NextPage = () => {
const { data: session } = useSession();
const {
data: downloads,
error,
isLoading,
} = useQuery(
["downloads", session.ta_token.token],
() => getDownloads(session.ta_token.token),
{
enabled: !!session?.ta_token?.token,
}
);
const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
setViewStyle(selectedViewStyle);
};
const handleSetIgnoredStatus = (selectedIgnoredStatus: IgnoredStatus) => {
setIgnoredStatus(selectedIgnoredStatus);
};
return (
<>
<CustomHead title="Downloads" />
@ -100,27 +125,36 @@ const Download: NextPage = () => {
<div className="view-controls">
<div className="toggle">
<span>Show only ignored videos:</span>
{ignoredStatus &&
<div className="toggleBox">
<input
id="show_ignored_only"
onClick={() => console.log("toggleCheckbox(this)")}
onChange={() => handleSetIgnoredStatus(false)}
type="checkbox"
checked
/>
{/* {% if not show_subed_only %} */}
<label htmlFor="" className="ofbtn">
Off
</label>
{/* {% else %} */}
<label htmlFor="" className="onbtn">
On
</label>
{/* {% endif %} */}
</div>
}
{!ignoredStatus &&
<div className="toggleBox">
<input
id="show_ignored_only"
onChange={() => handleSetIgnoredStatus(true)}
type="checkbox"
/>
<label htmlFor="" className="ofbtn">
Off
</label>
</div>
}
</div>
<div className="view-icons">
<NextImage
width={30}
height={44}
height={34}
src={GridViewIcon}
alt="grid view"
title="Switch to grid view"
@ -129,7 +163,7 @@ const Download: NextPage = () => {
{/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */}
<NextImage
width={30}
height={44}
height={34}
src={ListViewIcon}
alt="list view"
title="Switch to list view"
@ -138,19 +172,69 @@ const Download: NextPage = () => {
{/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */}
</div>
</div>
{ignoredStatus &&
<div className="title-split">
{/* {% if show_ignored_only %} */}
<h2>Ignored from download</h2>
<button data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
{/* onclick="deleteQueue(this)" */}
{/* {% else %} */}
<button onClick={() => console.log("deleteQueue(this)")} data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
</div>
}
{!ignoredStatus &&
<div className="title-split">
<h2>Download queue</h2>
<button data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
{/* onclick="deleteQueue(this)" */}
<button onClick={() => console.log("deleteQueue(this)")} data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
</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}`}>
{downloads.data &&
downloads?.data?.map((video) => {
return (
<div key={video?.youtube_id} 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>}
{/* {% if show_ignored_only %} */}
{/* <span>ignored</span> */}
{!ignoredStatus && <span>queued</span>}
{/* {% else %} */}
{/* <span>queued</span> */}
{/* {% endif %} */}
</div>
{/* <h3>Total videos: {channels?.data?.length}</h3> */}
{/* <div className="dl-list {{ view_style }}"> */}
<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>}
{/* {% 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>}
{/* {% else %} */}
{/* <span>{{ video.source.channel_name }}</span> */}
{/* {% endif %} */}
<p>Published: {video?.published} | Duration: {video?.player?.duration_str} | {video?.youtube_id}</p>
{/* <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p> */}
{ignoredStatus &&
<div>
<button data-id={`${video?.youtube_id}`} onClick={() => console.log("forgetIgnore(this)")}>Forget</button>
<button data-id={`${video?.youtube_id}`} onClick={() => console.log("addSingle(this)")}>Add to queue</button>
</div>
}
{/* {% if show_ignored_only %} */}
{/* <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button> */}
{/* <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button> */}
{!ignoredStatus &&
<div>
<button data-id={`${video?.youtube_id}`} onClick={() => console.log("toIgnore(this)")}>Ignore</button>
<button id={`${video?.youtube_id}`} data-id={`${video?.youtube_id}`} onClick={() => console.log("downloadNow(this)")}>Download now</button>
</div>
}
{/* {% else %} */}
{/* <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button> */}
{/* <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button> */}
{/* {% endif %} */}
</div>
</div>
);
})
}
{/* {% if results %} */}
{/* {% for video in results %} */}
{/* <div className="dl-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}"> */}
@ -181,7 +265,8 @@ const Download: NextPage = () => {
{/* </div> */}
{/* {% endfor %} */}
{/* {% endif %} */}
{/* </div> */}
</div>
</div>
{/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
</Layout>

View File

@ -0,0 +1,154 @@
export interface Download {
data: Datum[];
config: Config;
paginate: boolean;
}
export interface Config {
archive: Archive;
default_view: DefaultView;
subscriptions: Subscriptions;
downloads: Downloads;
application: Application;
scheduler: Scheduler;
}
export interface Application {
app_root: string;
cache_dir: string;
videos: string;
file_template: string;
colors: string;
enable_cast: boolean;
REDIS_HOST: string;
es_url: string;
es_auth: string[];
HOST_UID: number;
HOST_GID: number;
}
export interface Archive {
sort_by: string;
sort_order: string;
page_size: number;
}
export interface DefaultView {
home: string;
channel: string;
downloads: string;
playlist: string;
}
export interface Downloads {
limit_count: boolean;
limit_speed: boolean;
sleep_interval: number;
autodelete_days: boolean;
format: boolean;
add_metadata: boolean;
add_thumbnail: boolean;
subtitle: boolean;
subtitle_source: boolean;
subtitle_index: boolean;
throttledratelimit: boolean;
integrate_ryd: boolean;
integrate_sponsorblock: boolean;
}
export interface Scheduler {
update_subscribed: boolean;
download_pending: boolean;
check_reindex: CheckReindex;
check_reindex_days: number;
thumbnail_check: CheckReindex;
run_backup: CheckReindex;
run_backup_rotate: number;
}
export interface CheckReindex {
minute: string;
hour: string;
day_of_week: string;
}
export interface Subscriptions {
auto_search: boolean;
auto_download: boolean;
channel_size: number;
}
export interface Datum {
active: boolean;
category: Category[];
channel: Channel;
date_downloaded: number;
description: string;
media_url: string;
player: Player;
playlist: Playlist[];
published: string;
stats: Stats;
tags: string[];
title: string;
vid_last_refresh: LastRefresh;
vid_thumb_base64: string;
vid_thumb_url: string;
youtube_id: string;
}
export enum Category {
ScienceTechnology = "Science & Technology",
}
export interface Channel {
channel_active: boolean;
channel_banner_url: ChannelBannerURL;
channel_description: string;
channel_id: ChannelID;
channel_last_refresh: LastRefresh;
channel_name: ChannelName;
channel_subs: number;
channel_subscribed: boolean;
channel_thumb_url: ChannelThumbURL;
channel_tvart_url: boolean;
channel_views: number;
channel_indexed: boolean;
}
export enum ChannelBannerURL {
CacheChannelsUCFhXFikryT4AFcLkLw2LBLABannerJpg = "/cache/channels/UCFhXFikryT4aFcLkLw2LBLA_banner.jpg",
}
export enum ChannelID {
UCFhXFikryT4AFcLkLw2LBLA = "UCFhXFikryT4aFcLkLw2LBLA",
}
export enum LastRefresh {
The05APR2022 = "05 Apr, 2022",
}
export enum ChannelName {
NileRed = "NileRed",
}
export enum ChannelThumbURL {
CacheChannelsUCFhXFikryT4AFcLkLw2LBLAThumbJpg = "/cache/channels/UCFhXFikryT4aFcLkLw2LBLA_thumb.jpg",
}
export interface Player {
watched: boolean;
duration: number;
duration_str: string;
}
export enum Playlist {
PLbaramj7Nly5K5AsvQoI9PJQhy47PfDAF = "PLbaramj7Nly5K5AsvQoI9PJQhy47pfDAf",
}
export interface Stats {
view_count: number;
like_count: number;
dislike_count: number;
average_rating: null;
}