From c3a9c237366e2fcd797ba409e8ab8763fbad8c88 Mon Sep 17 00:00:00 2001 From: Sean Norwood Date: Sun, 17 Apr 2022 00:49:52 +0000 Subject: [PATCH] chore: add ts types and /video/id page --- .../www/src/pages/video/[videoId].tsx | 268 ++++++++++++++++++ tubearchivist/www/src/styles/globals.css | 19 ++ tubearchivist/www/src/types/playlist.ts | 139 +++++---- tubearchivist/www/src/types/playlists.ts | 104 +++++++ tubearchivist/www/src/types/video.ts | 205 ++++++-------- tubearchivist/www/src/types/videos.ts | 153 ++++++++++ 6 files changed, 701 insertions(+), 187 deletions(-) create mode 100644 tubearchivist/www/src/pages/video/[videoId].tsx create mode 100644 tubearchivist/www/src/types/playlists.ts create mode 100644 tubearchivist/www/src/types/videos.ts diff --git a/tubearchivist/www/src/pages/video/[videoId].tsx b/tubearchivist/www/src/pages/video/[videoId].tsx new file mode 100644 index 0000000..560d349 --- /dev/null +++ b/tubearchivist/www/src/pages/video/[videoId].tsx @@ -0,0 +1,268 @@ +import { GetServerSideProps, NextPage } from "next"; +import NextImage from "next/image"; +import { getSession, useSession } from "next-auth/react"; +import { useRouter } from "next/router"; +import { dehydrate, QueryClient, useQuery } from "react-query"; +import { CustomHead } from "../../components/CustomHead"; +import { Layout } from "../../components/Layout"; +import { TA_BASE_URL } from "../../lib/constants"; +import { getVideo } from "../../lib/getVideos"; +import VideoPlayer from "../../components/VideoPlayer/VideoPlayer"; + +export const getServerSideProps: GetServerSideProps = async (context) => { + const queryClient = new QueryClient(); + const session = await getSession(context); + const videoId = context.query.videoId; + + if (!session) { + return { + redirect: { + destination: "/auth/login", + permanent: false, + }, + }; + } + + await queryClient.prefetchQuery(["video", videoId], () => + getVideo(session.ta_token.token, videoId as string) + ); + + return { + props: { + dehydratedState: dehydrate(queryClient), + session, + }, + }; +}; + +const Video: NextPage = () => { + const router = useRouter(); + const { videoId } = router.query; + const { data: session } = useSession(); + const { data, error, isLoading } = useQuery( + ["video", session.ta_token.token], + () => getVideo(session.ta_token.token, videoId as string), + { + enabled: !!session?.ta_token?.token, + } + ); + + if (isLoading) return

Loading...

; + + return ( + + + + +
+
+ {/* {% if cast %} */} + {/* */} + {/* {% endif %} */} +

{data?.data?.title}

+
+
+
+
+ + + +
+
+

+ + {" "} + {data?.data?.channel?.channel_name}{" "} + +

+ {/* {% if video.channel.channel_subs >= 1000000 %} */} +

Subscribers: {data?.data?.channel?.channel_subs}

+ {/* {% else %} */} + {/*

Subscribers: video.channel.channel_subs|intcomma

*/} + {/* {% endif %} */} +
+
+
+
+

Published: {data?.data?.published}

+

Last refreshed: {data?.data?.vid_last_refresh}

+

+ Watched: + {/* {% if video.player.watched %} */} + seen-icon + {/* {% else %} */} + unseen-icon + {/* {% endif %} */} +

+ {/* {% if video.active %} */} +

+ Youtube:{" "} + + Active + +

+ {/* {% else %} */} +

Youtube: Deactivated

+ {/* {% endif %} */} + + + + +
+ Are you sure? + {" "} + +
+
+
+
+
+

+ views: + {data.data.stats.view_count}{" "} +

+

+ thumbs-up: + {data.data.stats.like_count}{" "} +

+ {/* {% if video.stats.dislike_count %} */} + {data.data.stats.dislike_count > 0 ? ( +

+ thumbs-down + : {data?.data?.stats?.dislike_count}{" "} +

+ ) : null} + + {/* {% endif %} */} + {/* {% if video.stats.average_rating %} */} + {data.data.stats.average_rating ? ( +

+ Rating: + {/* {% for star in video.stats.average_rating %} */} + {{ star }} + {/* {% endfor %} */} +

+ ) : null} + {/* {% endif %} */} +
+
+
+ {/* {% if video.description %} */} +
+

+ Description:{" "} + +

+
+ {data?.data?.description} +
+
+ {/* {% endif %} */} + + {/* {% if playlist_nav %} */} + {/* {% for playlist_item in playlist_nav %} */} + + + {/* {% endfor %} + {% endif %} */} +
+ + ); +}; + +export default Video; diff --git a/tubearchivist/www/src/styles/globals.css b/tubearchivist/www/src/styles/globals.css index a1a9c96..be109d6 100644 --- a/tubearchivist/www/src/styles/globals.css +++ b/tubearchivist/www/src/styles/globals.css @@ -50,6 +50,13 @@ h3 { color: var(--accent-font-light); } +h4 { + font-size: 0.7em; + margin-bottom: 7px; + font-family: Sen-Regular, sans-serif; + color: var(--accent-font-light); +} + p, i, li { @@ -347,6 +354,18 @@ button:hover { height: 100vh; } +.notifications { + text-align: center; + width: 80%; + margin: auto; +} + +.sponsorblock { + text-align: center; + width: 80%; + margin: auto; +} + .video-player video, .video-main video { max-height: 80vh; diff --git a/tubearchivist/www/src/types/playlist.ts b/tubearchivist/www/src/types/playlist.ts index 50c22f4..b947008 100644 --- a/tubearchivist/www/src/types/playlist.ts +++ b/tubearchivist/www/src/types/playlist.ts @@ -1,104 +1,103 @@ export interface Playlist { - data: Datum[]; - config: Config; - paginate: boolean; + data?: Data; + config?: Config; } export interface Config { - archive: Archive; - default_view: DefaultView; - subscriptions: Subscriptions; - downloads: Downloads; - application: Application; - scheduler: Scheduler; + 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; + 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; + sort_by?: string; + sort_order?: string; + page_size?: number; } export interface DefaultView { - home: string; - channel: string; - downloads: string; - playlist: string; + 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; + 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; + 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; + minute?: string; + hour?: string; + day_of_week?: string; } export interface Subscriptions { - auto_search: boolean; - auto_download: boolean; - channel_size: number; + auto_search?: boolean; + auto_download?: boolean; + channel_size?: number; } -export interface Datum { - playlist_active: boolean; - playlist_channel: PlaylistChannel; - playlist_channel_id: string; - playlist_description: boolean; - playlist_entries: PlaylistEntry[]; - playlist_id: string; - playlist_last_refresh: string; - playlist_name: string; - playlist_subscribed: boolean; - playlist_thumbnail: string; +export interface Data { + playlist_active?: boolean; + playlist_channel?: PlaylistChannel; + playlist_channel_id?: string; + playlist_description?: boolean; + playlist_entries?: PlaylistEntry[]; + playlist_id?: string; + playlist_last_refresh?: string; + playlist_name?: string; + playlist_subscribed?: boolean; + playlist_thumbnail?: string; } export enum PlaylistChannel { - NileRed = "NileRed", + RyanGeorge = "Ryan George", } export interface PlaylistEntry { - youtube_id: string; - title: string; - uploader: PlaylistChannel; - idx: number; - downloaded: boolean; + youtube_id?: string; + title?: string; + uploader?: PlaylistChannel; + idx?: number; + downloaded?: boolean; } diff --git a/tubearchivist/www/src/types/playlists.ts b/tubearchivist/www/src/types/playlists.ts new file mode 100644 index 0000000..1911127 --- /dev/null +++ b/tubearchivist/www/src/types/playlists.ts @@ -0,0 +1,104 @@ +export interface Playlists { + 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 { + playlist_active: boolean; + playlist_channel: PlaylistChannel; + playlist_channel_id: string; + playlist_description: boolean; + playlist_entries: PlaylistEntry[]; + playlist_id: string; + playlist_last_refresh: string; + playlist_name: string; + playlist_subscribed: boolean; + playlist_thumbnail: string; +} + +export enum PlaylistChannel { + NileRed = "NileRed", +} + +export interface PlaylistEntry { + youtube_id: string; + title: string; + uploader: PlaylistChannel; + idx: number; + downloaded: boolean; +} diff --git a/tubearchivist/www/src/types/video.ts b/tubearchivist/www/src/types/video.ts index 14f131f..6132688 100644 --- a/tubearchivist/www/src/types/video.ts +++ b/tubearchivist/www/src/types/video.ts @@ -1,153 +1,124 @@ -export interface Videos { - data: Datum[]; - config: Config; - paginate: boolean; +export interface Video { + data?: Data; + config?: Config; } export interface Config { - archive: Archive; - default_view: DefaultView; - subscriptions: Subscriptions; - downloads: Downloads; - application: Application; - scheduler: Scheduler; + 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; + 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; + sort_by?: string; + sort_order?: string; + page_size?: number; } export interface DefaultView { - home: string; - channel: string; - downloads: string; - playlist: string; + 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; + 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; + 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; + minute?: string; + hour?: string; + day_of_week?: string; } export interface Subscriptions { - auto_search: boolean; - auto_download: boolean; - channel_size: number; + 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 Data { + active?: boolean; + category?: string[]; + channel?: Channel; + date_downloaded?: number; + description?: string; + media_url?: string; + player?: Player; + playlist?: string[]; + published?: string; + stats?: Stats; + tags?: string[]; + title?: string; + vid_last_refresh?: string; + vid_thumb_base64?: string; + vid_thumb_url?: string; + youtube_id?: string; } 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; -} - -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", + channel_active?: boolean; + channel_banner_url?: string; + channel_description?: string; + channel_id?: string; + channel_last_refresh?: string; + channel_name?: string; + channel_subs?: number; + channel_subscribed?: boolean; + channel_thumb_url?: string; + channel_tvart_url?: boolean; + channel_views?: number; } export interface Player { - watched: boolean; - duration: number; - duration_str: string; -} - -export enum Playlist { - PLbaramj7Nly5K5AsvQoI9PJQhy47PfDAF = "PLbaramj7Nly5K5AsvQoI9PJQhy47pfDAf", + watched?: boolean; + duration?: number; + duration_str?: string; } export interface Stats { - view_count: number; - like_count: number; - dislike_count: number; - average_rating: null; + view_count?: number; + like_count?: number; + dislike_count?: number; + average_rating?: null; } diff --git a/tubearchivist/www/src/types/videos.ts b/tubearchivist/www/src/types/videos.ts new file mode 100644 index 0000000..eab2055 --- /dev/null +++ b/tubearchivist/www/src/types/videos.ts @@ -0,0 +1,153 @@ +export interface Videos { + 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 { + Comedy = "Comedy", +} + +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; +} + +export enum ChannelBannerURL { + CacheChannelsUCh9IfI45Mmk59EDvSWtuuhQBannerJpg = "/cache/channels/UCh9IfI45mmk59eDvSWtuuhQ_banner.jpg", +} + +export enum ChannelID { + UCh9IfI45Mmk59EDvSWtuuhQ = "UCh9IfI45mmk59eDvSWtuuhQ", +} + +export enum LastRefresh { + The15APR2022 = "15 Apr, 2022", +} + +export enum ChannelName { + RyanGeorge = "Ryan George", +} + +export enum ChannelThumbURL { + CacheChannelsUCh9IfI45Mmk59EDvSWtuuhQThumbJpg = "/cache/channels/UCh9IfI45mmk59eDvSWtuuhQ_thumb.jpg", +} + +export interface Player { + watched?: boolean; + duration?: number; + duration_str?: string; +} + +export enum Playlist { + PLREUFLEgWzCFru2DUUQoPPzSjcKovP1 = "PLRE-UFLEgWzCFru2DUUQoP_PzSjcKovP1", +} + +export interface Stats { + view_count?: number; + like_count?: number; + dislike_count?: number; + average_rating?: null; +}