tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-25 13:10:15 +00:00
Code Issues Projects Releases Wiki Activity

chore: add ts types and /video/id page

Browse Source
This commit is contained in:
Sean Norwood 2022-04-17 00:49:52 +00:00
parent df30173ba3
commit c3a9c23736
6 changed files with 701 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
tubearchivist/www/src/pages/video/[videoId].tsx Normal file
View File

@ -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 <h1>Loading...</h1>;
return (
<Layout>
<CustomHead title={data?.data?.title} />
<VideoPlayer showStats={false} isHome={false} selectedVideo={data.data} />
<div className="boxed-content">
<div className="title-bar">
{/* {% if cast %} */}
{/* <google-cast-launcher id="castbutton"></google-cast-launcher> */}
{/* {% endif %} */}
<h1 id="video-title">{data?.data?.title}</h1>
</div>
<div className="info-box info-box-3">
<div className="info-box-item">
<div className="round-img">
<a href="{% url 'channel_id' video.channel.channel_id %}">
<NextImage
src={`${TA_BASE_URL}/cache/channels/${data.data.channel.channel_id}_thumb.jpg`}
alt="channel-thumb"
width={90}
height={90}
/>
</a>
</div>
<div>
<h3>
<a href="{% url 'channel_id' video.channel.channel_id %}">
{" "}
{data?.data?.channel?.channel_name}{" "}
</a>
</h3>
{/* {% if video.channel.channel_subs >= 1000000 %} */}
<p>Subscribers: {data?.data?.channel?.channel_subs} </p>
{/* {% else %} */}
{/* <p>Subscribers: video.channel.channel_subs|intcomma </p> */}
{/* {% endif %} */}
</div>
</div>
<div className="info-box-item">
<div>
<p>Published: {data?.data?.published} </p>
<p>Last refreshed: {data?.data?.vid_last_refresh} </p>
<p className="video-info-watched">
Watched:
{/* {% if video.player.watched %} */}
<img
src="/img/icon-seen.svg"
alt="seen-icon"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as unwatched"
/>
{/* {% else %} */}
<img
src="/img/icon-unseen.svg"
alt="unseen-icon"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as watched"
/>
{/* {% endif %} */}
</p>
{/* {% if video.active %} */}
<p>
Youtube:{" "}
<a
href={`https://www.youtube.com/watch?v=${data?.data?.youtube_id}`}
target="_blank"
rel="noreferrer"
>
Active
</a>
</p>
{/* {% else %} */}
<p>Youtube: Deactivated</p>
{/* {% endif %} */}
<a download="" href={`/media/${data?.data?.media_url}`}>
<button id="download-item">Download File</button>
</a>
<button
// onClick="deleteConfirm()"
id="delete-item"
>
Delete Video
</button>
<div className="delete-confirm" id="delete-button">
<span>Are you sure? </span>
<button
className="danger-button"
// onclick="deleteVideo(this)"
data-id="{{ video.youtube_id }}"
data-redirect="{{ video.channel.channel_id }}"
>
Delete
</button>{" "}
<button
// onClick="cancelDelete()"
>
Cancel
</button>
</div>
</div>
</div>
<div className="info-box-item">
<div>
<p className="thumb-icon">
<img src="/img/icon-eye.svg" alt="views" />:
{data.data.stats.view_count}{" "}
</p>
<p className="thumb-icon like">
<img src="/img/icon-thumb.svg" alt="thumbs-up" />:
{data.data.stats.like_count}{" "}
</p>
{/* {% if video.stats.dislike_count %} */}
{data.data.stats.dislike_count > 0 ? (
<p className="thumb-icon">
<img
className="dislike"
src="/img/icon-thumb.svg"
alt="thumbs-down"
/>
: {data?.data?.stats?.dislike_count}{" "}
</p>
) : null}
{/* {% endif %} */}
{/* {% if video.stats.average_rating %} */}
{data.data.stats.average_rating ? (
<p className="rating-stars">
Rating:
{/* {% for star in video.stats.average_rating %} */}
<img src={`img/icon-star-{{ star }}.svg`} alt="{{ star }}" />
{/* {% endfor %} */}
</p>
) : null}
{/* {% endif %} */}
</div>
</div>
</div>
{/* {% if video.description %} */}
<div className="info-box-item description-box">
<p>
Description:{" "}
<button
// onClick="textReveal()"
id="text-reveal-button"
>
Show
</button>
</p>
<div id="text-reveal" className="description-text">
{data?.data?.description}
</div>
</div>
{/* {% endif %} */}
{/* {% if playlist_nav %} */}
{/* {% for playlist_item in playlist_nav %} */}
<div className="playlist-wrap">
<a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
<h3>
Playlist playlist_item.playlist_meta.current_idx|add:1 :
playlist_item.playlist_meta.playlist_name{" "}
</h3>
</a>
<div className="playlist-nav">
<div className="playlist-nav-item">
{/* {% if playlist_item.playlist_previous %} */}
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<img
src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}"
alt="previous thumbnail"
/>
</a>
<div className="playlist-desc">
<p>Previous:</p>
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<h3>
{" "}
playlist_item.playlist_previous.idx|add:1
playlist_item.playlist_previous.title{" "}
</h3>
</a>
</div>
{/* {% endif %} */}
</div>
<div className="playlist-nav-item">
{/* {% if playlist_item.playlist_next %} */}
<div className="playlist-desc">
<p>Next:</p>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<h3>
{" "}
playlist_item.playlist_next.idx|add:1
playlist_item.playlist_next.title
</h3>
</a>
</div>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<img
src="/cache/{{ playlist_item.playlist_next.vid_thumb }}"
alt="previous thumbnail"
/>
</a>
{/* {% endif %} */}
</div>
</div>
</div>
{/* {% endfor %}
{% endif %} */}
</div>
</Layout>
);
};
export default Video;

19
tubearchivist/www/src/styles/globals.css
View File

@ -50,6 +50,13 @@ h3 {
color: var(--accent-font-light); 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, p,
i, i,
li { li {
@ -347,6 +354,18 @@ button:hover {
height: 100vh; height: 100vh;
} }
.notifications {
text-align: center;
width: 80%;
margin: auto;
}
.sponsorblock {
text-align: center;
width: 80%;
margin: auto;
}
.video-player video, .video-player video,
.video-main video { .video-main video {
max-height: 80vh; max-height: 80vh;

139
tubearchivist/www/src/types/playlist.ts
View File

@ -1,104 +1,103 @@
export interface Playlist { export interface Playlist {
data: Datum[]; data?: Data;
config: Config; config?: Config;
paginate: boolean;
} }
export interface Config { export interface Config {
archive: Archive; archive?: Archive;
default_view: DefaultView; default_view?: DefaultView;
subscriptions: Subscriptions; subscriptions?: Subscriptions;
downloads: Downloads; downloads?: Downloads;
application: Application; application?: Application;
scheduler: Scheduler; scheduler?: Scheduler;
} }
export interface Application { export interface Application {
app_root: string; app_root?: string;
cache_dir: string; cache_dir?: string;
videos: string; videos?: string;
file_template: string; file_template?: string;
colors: string; colors?: string;
enable_cast: boolean; enable_cast?: boolean;
REDIS_HOST: string; REDIS_HOST?: string;
es_url: string; es_url?: string;
es_auth: string[]; es_auth?: string[];
HOST_UID: number; HOST_UID?: number;
HOST_GID: number; HOST_GID?: number;
} }
export interface Archive { export interface Archive {
sort_by: string; sort_by?: string;
sort_order: string; sort_order?: string;
page_size: number; page_size?: number;
} }
export interface DefaultView { export interface DefaultView {
home: string; home?: string;
channel: string; channel?: string;
downloads: string; downloads?: string;
playlist: string; playlist?: string;
} }
export interface Downloads { export interface Downloads {
limit_count: boolean; limit_count?: boolean;
limit_speed: boolean; limit_speed?: boolean;
sleep_interval: number; sleep_interval?: number;
autodelete_days: boolean; autodelete_days?: boolean;
format: boolean; format?: boolean;
add_metadata: boolean; add_metadata?: boolean;
add_thumbnail: boolean; add_thumbnail?: boolean;
subtitle: boolean; subtitle?: boolean;
subtitle_source: boolean; subtitle_source?: boolean;
subtitle_index: boolean; subtitle_index?: boolean;
throttledratelimit: boolean; throttledratelimit?: boolean;
integrate_ryd: boolean; integrate_ryd?: boolean;
integrate_sponsorblock: boolean; integrate_sponsorblock?: boolean;
} }
export interface Scheduler { export interface Scheduler {
update_subscribed: boolean; update_subscribed?: boolean;
download_pending: boolean; download_pending?: boolean;
check_reindex: CheckReindex; check_reindex?: CheckReindex;
check_reindex_days: number; check_reindex_days?: number;
thumbnail_check: CheckReindex; thumbnail_check?: CheckReindex;
run_backup: CheckReindex; run_backup?: CheckReindex;
run_backup_rotate: number; run_backup_rotate?: number;
} }
export interface CheckReindex { export interface CheckReindex {
minute: string; minute?: string;
hour: string; hour?: string;
day_of_week: string; day_of_week?: string;
} }
export interface Subscriptions { export interface Subscriptions {
auto_search: boolean; auto_search?: boolean;
auto_download: boolean; auto_download?: boolean;
channel_size: number; channel_size?: number;
} }
export interface Datum { export interface Data {
playlist_active: boolean; playlist_active?: boolean;
playlist_channel: PlaylistChannel; playlist_channel?: PlaylistChannel;
playlist_channel_id: string; playlist_channel_id?: string;
playlist_description: boolean; playlist_description?: boolean;
playlist_entries: PlaylistEntry[]; playlist_entries?: PlaylistEntry[];
playlist_id: string; playlist_id?: string;
playlist_last_refresh: string; playlist_last_refresh?: string;
playlist_name: string; playlist_name?: string;
playlist_subscribed: boolean; playlist_subscribed?: boolean;
playlist_thumbnail: string; playlist_thumbnail?: string;
} }
export enum PlaylistChannel { export enum PlaylistChannel {
NileRed = "NileRed", RyanGeorge = "Ryan George",
} }
export interface PlaylistEntry { export interface PlaylistEntry {
youtube_id: string; youtube_id?: string;
title: string; title?: string;
uploader: PlaylistChannel; uploader?: PlaylistChannel;
idx: number; idx?: number;
downloaded: boolean; downloaded?: boolean;
} }

104
tubearchivist/www/src/types/playlists.ts Normal file
View File

@ -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;
}

205
tubearchivist/www/src/types/video.ts
View File

@ -1,153 +1,124 @@
export interface Videos { export interface Video {
data: Datum[]; data?: Data;
config: Config; config?: Config;
paginate: boolean;
} }
export interface Config { export interface Config {
archive: Archive; archive?: Archive;
default_view: DefaultView; default_view?: DefaultView;
subscriptions: Subscriptions; subscriptions?: Subscriptions;
downloads: Downloads; downloads?: Downloads;
application: Application; application?: Application;
scheduler: Scheduler; scheduler?: Scheduler;
} }
export interface Application { export interface Application {
app_root: string; app_root?: string;
cache_dir: string; cache_dir?: string;
videos: string; videos?: string;
file_template: string; file_template?: string;
colors: string; colors?: string;
enable_cast: boolean; enable_cast?: boolean;
REDIS_HOST: string; REDIS_HOST?: string;
es_url: string; es_url?: string;
es_auth: string[]; es_auth?: string[];
HOST_UID: number; HOST_UID?: number;
HOST_GID: number; HOST_GID?: number;
} }
export interface Archive { export interface Archive {
sort_by: string; sort_by?: string;
sort_order: string; sort_order?: string;
page_size: number; page_size?: number;
} }
export interface DefaultView { export interface DefaultView {
home: string; home?: string;
channel: string; channel?: string;
downloads: string; downloads?: string;
playlist: string; playlist?: string;
} }
export interface Downloads { export interface Downloads {
limit_count: boolean; limit_count?: boolean;
limit_speed: boolean; limit_speed?: boolean;
sleep_interval: number; sleep_interval?: number;
autodelete_days: boolean; autodelete_days?: boolean;
format: boolean; format?: boolean;
add_metadata: boolean; add_metadata?: boolean;
add_thumbnail: boolean; add_thumbnail?: boolean;
subtitle: boolean; subtitle?: boolean;
subtitle_source: boolean; subtitle_source?: boolean;
subtitle_index: boolean; subtitle_index?: boolean;
throttledratelimit: boolean; throttledratelimit?: boolean;
integrate_ryd: boolean; integrate_ryd?: boolean;
integrate_sponsorblock: boolean; integrate_sponsorblock?: boolean;
} }
export interface Scheduler { export interface Scheduler {
update_subscribed: boolean; update_subscribed?: boolean;
download_pending: boolean; download_pending?: boolean;
check_reindex: CheckReindex; check_reindex?: CheckReindex;
check_reindex_days: number; check_reindex_days?: number;
thumbnail_check: CheckReindex; thumbnail_check?: CheckReindex;
run_backup: CheckReindex; run_backup?: CheckReindex;
run_backup_rotate: number; run_backup_rotate?: number;
} }
export interface CheckReindex { export interface CheckReindex {
minute: string; minute?: string;
hour: string; hour?: string;
day_of_week: string; day_of_week?: string;
} }
export interface Subscriptions { export interface Subscriptions {
auto_search: boolean; auto_search?: boolean;
auto_download: boolean; auto_download?: boolean;
channel_size: number; channel_size?: number;
} }
export interface Datum { export interface Data {
active: boolean; active?: boolean;
category: Category[]; category?: string[];
channel: Channel; channel?: Channel;
date_downloaded: number; date_downloaded?: number;
description: string; description?: string;
media_url: string; media_url?: string;
player: Player; player?: Player;
playlist: Playlist[]; playlist?: string[];
published: string; published?: string;
stats: Stats; stats?: Stats;
tags: string[]; tags?: string[];
title: string; title?: string;
vid_last_refresh: LastRefresh; vid_last_refresh?: string;
vid_thumb_base64: string; vid_thumb_base64?: string;
vid_thumb_url: string; vid_thumb_url?: string;
youtube_id: string; youtube_id?: string;
}
export enum Category {
ScienceTechnology = "Science & Technology",
} }
export interface Channel { export interface Channel {
channel_active: boolean; channel_active?: boolean;
channel_banner_url: ChannelBannerURL; channel_banner_url?: string;
channel_description: string; channel_description?: string;
channel_id: ChannelID; channel_id?: string;
channel_last_refresh: LastRefresh; channel_last_refresh?: string;
channel_name: ChannelName; channel_name?: string;
channel_subs: number; channel_subs?: number;
channel_subscribed: boolean; channel_subscribed?: boolean;
channel_thumb_url: ChannelThumbURL; channel_thumb_url?: string;
channel_tvart_url: boolean; channel_tvart_url?: boolean;
channel_views: number; 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",
} }
export interface Player { export interface Player {
watched: boolean; watched?: boolean;
duration: number; duration?: number;
duration_str: string; duration_str?: string;
}
export enum Playlist {
PLbaramj7Nly5K5AsvQoI9PJQhy47PfDAF = "PLbaramj7Nly5K5AsvQoI9PJQhy47pfDAf",
} }
export interface Stats { export interface Stats {
view_count: number; view_count?: number;
like_count: number; like_count?: number;
dislike_count: number; dislike_count?: number;
average_rating: null; average_rating?: null;
} }

153
tubearchivist/www/src/types/videos.ts Normal file
View File

@ -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;
}