From d9fae64afb9354505abbba934d99ac87a948345e Mon Sep 17 00:00:00 2001 From: n8detar Date: Sat, 16 Apr 2022 15:26:30 -0700 Subject: [PATCH] Download queue list & Show ignored functionality --- tubearchivist/www/src/lib/getDownloads.ts | 17 +++ tubearchivist/www/src/pages/download.tsx | 149 ++++++++++++++++----- tubearchivist/www/src/types/download.ts | 154 ++++++++++++++++++++++ 3 files changed, 288 insertions(+), 32 deletions(-) create mode 100644 tubearchivist/www/src/lib/getDownloads.ts create mode 100755 tubearchivist/www/src/types/download.ts diff --git a/tubearchivist/www/src/lib/getDownloads.ts b/tubearchivist/www/src/lib/getDownloads.ts new file mode 100644 index 0000000..43155fe --- /dev/null +++ b/tubearchivist/www/src/lib/getDownloads.ts @@ -0,0 +1,17 @@ +import { Download } from "../types/download"; +import { TA_BASE_URL } from "./constants"; + +export const getDownloads = async (token: string): Promise => { + 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(); +}; diff --git a/tubearchivist/www/src/pages/download.tsx b/tubearchivist/www/src/pages/download.tsx index 079c1f8..15d5b9f 100755 --- a/tubearchivist/www/src/pages/download.tsx +++ b/tubearchivist/www/src/pages/download.tsx @@ -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("grid"); + const [ignoredStatus, setIgnoredStatus] = useState(false); const handleSetViewstyle = (selectedViewStyle: ViewStyle) => { setViewStyle(selectedViewStyle); }; + const handleSetIgnoredStatus = (selectedIgnoredStatus: IgnoredStatus) => { + setIgnoredStatus(selectedIgnoredStatus); + }; + return ( <> @@ -100,27 +125,36 @@ const Download: NextPage = () => {
Show only ignored videos: -
- console.log("toggleCheckbox(this)")} - type="checkbox" - /> - {/* {% if not show_subed_only %} */} - - {/* {% else %} */} - - {/* {% endif %} */} -
+ {ignoredStatus && +
+ handleSetIgnoredStatus(false)} + type="checkbox" + checked + /> + +
+ } + {!ignoredStatus && +
+ handleSetIgnoredStatus(true)} + type="checkbox" + /> + +
+ }
{ {/* grid view */} { {/* list view */}
-
- {/* {% if show_ignored_only %} */} -

Ignored from download

- - {/* onclick="deleteQueue(this)" */} - {/* {% else %} */} -

Download queue

- - {/* onclick="deleteQueue(this)" */} - {/* {% endif %} */} -
- {/*

Total videos: {channels?.data?.length}

*/} - {/*
*/} + {ignoredStatus && +
+

Ignored from download

+ +
+ } + {!ignoredStatus && +
+

Download queue

+ +
+ } +

Total videos: {downloads?.data?.length} {!downloads?.data?.length &&

No videos queued for download. Press rescan subscriptions to check if there are any new videos.

}

+
+ {downloads.data && + downloads?.data?.map((video) => { + return ( +
+
+ video_thumb + {ignoredStatus && ignored} + {/* {% if show_ignored_only %} */} + {/* ignored */} + {!ignoredStatus && queued} + {/* {% else %} */} + {/* queued */} + {/* {% endif %} */} +
+
+

{video?.title}Video Title

+ {video?.channel?.channel_indexed && {video?.channel?.channel_name} Channel Name Link} + {/* {% if video.source.channel_indexed %} */} + {/* {{ video.source.channel_name }} */} + {!video?.channel?.channel_indexed && {video?.channel?.channel_name} Channel Name No Link} + {/* {% else %} */} + {/* {{ video.source.channel_name }} */} + {/* {% endif %} */} +

Published: {video?.published} | Duration: {video?.player?.duration_str} | {video?.youtube_id}

+ {/*

Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}

*/} + {ignoredStatus && +
+ + +
+ } + {/* {% if show_ignored_only %} */} + {/* */} + {/* */} + {!ignoredStatus && +
+ + +
+ } + {/* {% else %} */} + {/* */} + {/* */} + {/* {% endif %} */} +
+
+ ); + }) + } {/* {% if results %} */} {/* {% for video in results %} */} {/*
*/} @@ -181,7 +265,8 @@ const Download: NextPage = () => { {/*
*/} {/* {% endfor %} */} {/* {% endif %} */} - {/*
*/} + +
{/* */} diff --git a/tubearchivist/www/src/types/download.ts b/tubearchivist/www/src/types/download.ts new file mode 100755 index 0000000..ca10aa8 --- /dev/null +++ b/tubearchivist/www/src/types/download.ts @@ -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; +}