Loading...
; + } + + const cards = [ + { + title: 'Channels: ', + data: { + Subscribed: formatNumbers(channelStats.subscribed_true || 0), + Active: formatNumbers(channelStats.active_true || 0), + Total: formatNumbers(channelStats.doc_count || 0), + }, + }, + { + title: 'Playlists: ', + data: { + Subscribed: formatNumbers(playlistStats.subscribed_true || 0), + Active: formatNumbers(playlistStats.active_true || 0), + Total: formatNumbers(playlistStats.doc_count || 0), + }, + }, + { + title: `Downloads Pending: ${downloadStats.pending || 0}`, + data: { + Videos: formatNumbers(downloadStats.pending_videos || 0), + Shorts: formatNumbers(downloadStats.pending_shorts || 0), + Streams: formatNumbers(downloadStats.pending_streams || 0), + }, + }, + ]; + + return cards.map(card => { + return ( +Loading...
; + } + + return ( + <> +
+
+
+
+
+
+ | Name | +Videos | +
|---|---|
| + {name} + | +{formatNumbers(doc_count)} | +
+
+
+
+
+
+ | Name | +Duration | +
|---|---|
| + {name} + | +{duration_str} | +
+
+
+
+
+
+ );
+};
+
+export default BiggestChannelsStats;
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
new file mode 100644
index 00000000..3ba74841
--- /dev/null
+++ b/frontend/src/components/Button.tsx
@@ -0,0 +1,40 @@
+export interface ButtonProps {
+ id?: string;
+ name?: string;
+ className?: string;
+ type?: 'submit' | 'reset' | 'button' | undefined;
+ label?: string | JSX.Element | JSX.Element[];
+ children?: string | JSX.Element | JSX.Element[];
+ value?: string;
+ title?: string;
+ onClick?: () => void;
+}
+
+const Button = ({
+ id,
+ name,
+ className,
+ type,
+ label,
+ children,
+ value,
+ title,
+ onClick,
+}: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/frontend/src/components/ChannelBanner.tsx b/frontend/src/components/ChannelBanner.tsx
new file mode 100644
index 00000000..49a09442
--- /dev/null
+++ b/frontend/src/components/ChannelBanner.tsx
@@ -0,0 +1,21 @@
+import getApiUrl from '../configuration/getApiUrl';
+import defaultChannelImage from '/img/default-channel-banner.jpg';
+
+type ChannelIconProps = {
+ channel_id: string;
+};
+
+const ChannelBanner = ({ channel_id }: ChannelIconProps) => {
+ return (
+ | Name | +Media Size | +
|---|---|
| + {name} + | +{humanFileSize(media_size, useSI)} | +
}/cache/channels/${channel_id}_banner.jpg`})
{
+ currentTarget.onerror = null; // prevents looping
+ currentTarget.src = defaultChannelImage;
+ }}
+ />
+ );
+};
+
+export default ChannelBanner;
diff --git a/frontend/src/components/ChannelIcon.tsx b/frontend/src/components/ChannelIcon.tsx
new file mode 100644
index 00000000..383cc5bb
--- /dev/null
+++ b/frontend/src/components/ChannelIcon.tsx
@@ -0,0 +1,21 @@
+import getApiUrl from '../configuration/getApiUrl';
+import defaultChannelIcon from '/img/default-channel-icon.jpg';
+
+type ChannelIconProps = {
+ channel_id: string;
+};
+
+const ChannelIcon = ({ channel_id }: ChannelIconProps) => {
+ return (
+ }/cache/channels/${channel_id}_thumb.jpg`})
{
+ currentTarget.onerror = null; // prevents looping
+ currentTarget.src = defaultChannelIcon;
+ }}
+ />
+ );
+};
+
+export default ChannelIcon;
diff --git a/frontend/src/components/ChannelList.tsx b/frontend/src/components/ChannelList.tsx
new file mode 100644
index 00000000..b1a2ad07
--- /dev/null
+++ b/frontend/src/components/ChannelList.tsx
@@ -0,0 +1,83 @@
+import { Link } from 'react-router-dom';
+import { ChannelType } from '../pages/Channels';
+import { ViewLayoutType } from '../pages/Home';
+import Routes from '../configuration/routes/RouteList';
+import updateChannelSubscription from '../api/actions/updateChannelSubscription';
+import formatDate from '../functions/formatDates';
+import FormattedNumber from './FormattedNumber';
+import Button from './Button';
+import ChannelIcon from './ChannelIcon';
+import ChannelBanner from './ChannelBanner';
+
+type ChannelListProps = {
+ channelList: ChannelType[] | undefined;
+ viewLayout: ViewLayoutType;
+ refreshChannelList: (refresh: boolean) => void;
+};
+
+const ChannelList = ({ channelList, viewLayout, refreshChannelList }: ChannelListProps) => {
+ if (!channelList || channelList.length === 0) {
+ return No channels found.
; + } + + return ( + <> + {channelList.map(channel => { + return ( +
+
+ );
+ })}
+
+ );
+};
+
+export default ChannelList;
diff --git a/frontend/src/components/ChannelOverview.tsx b/frontend/src/components/ChannelOverview.tsx
new file mode 100644
index 00000000..c4c181dd
--- /dev/null
+++ b/frontend/src/components/ChannelOverview.tsx
@@ -0,0 +1,76 @@
+import { Link } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import updateChannelSubscription from '../api/actions/updateChannelSubscription';
+import FormattedNumber from './FormattedNumber';
+import Button from './Button';
+import ChannelIcon from './ChannelIcon';
+
+type ChannelOverviewProps = {
+ channelId: string;
+ channelname: string;
+ channelSubs: number;
+ channelSubscribed: boolean;
+ showSubscribeButton?: boolean;
+ isUserAdmin?: boolean;
+ setRefresh: (status: boolean) => void;
+};
+
+const ChannelOverview = ({
+ channelId,
+ channelSubs,
+ channelSubscribed,
+ channelname,
+ showSubscribeButton = false,
+ isUserAdmin,
+ setRefresh,
+}: ChannelOverviewProps) => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ + {channel.channel_name} +
+
+
+
+
+ Last refreshed: {formatDate(channel.channel_last_refresh)}
+ {channel.channel_subscribed && ( +
+
+
+ );
+};
+
+export default ChannelOverview;
diff --git a/frontend/src/components/CommentBox.tsx b/frontend/src/components/CommentBox.tsx
new file mode 100644
index 00000000..2b0c61a7
--- /dev/null
+++ b/frontend/src/components/CommentBox.tsx
@@ -0,0 +1,106 @@
+import iconThumb from '/img/icon-thumb.svg';
+import iconHeart from '/img/icon-heart.svg';
+import formatDate from '../functions/formatDates';
+import { Fragment, useState } from 'react';
+import Linkify from './Linkify';
+import formatNumbers from '../functions/formatNumbers';
+import Button from './Button';
+
+export type CommentReplyType = {
+ comment_id: string;
+ comment_text: string;
+ comment_timestamp: number;
+ comment_time_text: string;
+ comment_likecount: number;
+ comment_is_favorited: false;
+ comment_author: string;
+ comment_author_id: string;
+ comment_author_thumbnail: string;
+ comment_author_is_uploader: boolean;
+ comment_parent: string;
+};
+
+export type CommentsType = {
+ comment_id: string;
+ comment_text: string;
+ comment_timestamp: number;
+ comment_time_text: string;
+ comment_likecount: number;
+ comment_is_favorited: boolean;
+ comment_author: string;
+ comment_author_id: string;
+ comment_author_thumbnail: string;
+ comment_author_is_uploader: boolean;
+ comment_parent: string;
+ comment_replies?: CommentReplyType[];
+};
+
+type CommentBoxProps = {
+ comment: CommentsType;
+};
+
+const CommentBox = ({ comment }: CommentBoxProps) => {
+ const [showSubComments, setShowSubComments] = useState(false);
+
+ const hasSubComments =
+ comment.comment_replies !== undefined && comment.comment_replies.length > 0;
+
+ return (
+
+
+
+
+
+ + {channelname} +
+ +
+
+ );
+};
+
+export default CommentBox;
diff --git a/frontend/src/components/DownloadHistoryStats.tsx b/frontend/src/components/DownloadHistoryStats.tsx
new file mode 100644
index 00000000..935fa314
--- /dev/null
+++ b/frontend/src/components/DownloadHistoryStats.tsx
@@ -0,0 +1,41 @@
+import humanFileSize from '../functions/humanFileSize';
+import formatDate from '../functions/formatDates';
+import formatNumbers from '../functions/formatNumbers';
+import { DownloadHistoryStatsType } from '../pages/SettingsDashboard';
+
+type DownloadHistoryStatsProps = {
+ downloadHistoryStats?: DownloadHistoryStatsType;
+ useSI: boolean;
+};
+
+const DownloadHistoryStats = ({ downloadHistoryStats, useSI }: DownloadHistoryStatsProps) => {
+ if (!downloadHistoryStats) {
+ return + {comment.comment_author} +
+
+
+ {formatDate(comment.comment_timestamp * 1000)}
+
+ |
+
+
+ 
{' '}
+ {formatNumbers(comment.comment_likecount, { notation: 'compact' })}
+
+
+ {comment.comment_is_favorited && (
+ <>
+ |
+
+ 
+
+
+ )}
+
+
+ {hasSubComments && (
+ <>
+
+
+
+ {showSubComments &&
+ comment.comment_replies?.map(comment => {
+ return (
+
+
+ );
+ })}
+
+
+ )}
+ Loading...
; + } + + if (downloadHistoryStats.length === 0) { + return ( +
+
+ );
+ }
+
+ return downloadHistoryStats.map(({ date, count, media_size }) => {
+ const videoText = count === 1 ? 'Video' : 'Videos';
+ const intlDate = formatDate(date);
+
+ return (
+ No recent downloads
+
+
+ );
+ });
+};
+
+export default DownloadHistoryStats;
diff --git a/frontend/src/components/DownloadListItem.tsx b/frontend/src/components/DownloadListItem.tsx
new file mode 100644
index 00000000..16708923
--- /dev/null
+++ b/frontend/src/components/DownloadListItem.tsx
@@ -0,0 +1,108 @@
+import { Link } from 'react-router-dom';
+import Download from '../pages/Download';
+import Routes from '../configuration/routes/RouteList';
+import formatDate from '../functions/formatDates';
+import Button from './Button';
+import deleteDownloadById from '../api/actions/deleteDownloadById';
+import updateDownloadQueueStatusById from '../api/actions/updateDownloadQueueStatusById';
+import { useState } from 'react';
+import getApiUrl from '../configuration/getApiUrl';
+
+type DownloadListItemProps = {
+ view: string;
+ download: Download;
+ showIgnored: boolean;
+ setRefresh: (status: boolean) => void;
+};
+
+const DownloadListItem = ({ view, download, showIgnored, setRefresh }: DownloadListItemProps) => {
+ const [hideDownload, setHideDownload] = useState(false);
+
+ return (
+ {intlDate}
+
+ +{formatNumbers(count)} {videoText}
+
+ {humanFileSize(media_size, useSI)}
+
+
+ );
+};
+
+export default DownloadListItem;
diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx
new file mode 100644
index 00000000..e2c02140
--- /dev/null
+++ b/frontend/src/components/EmbeddableVideoPlayer.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import { SponsorBlockType, VideoResponseType } from '../pages/Video';
+import VideoPlayer, { VideoProgressType } from './VideoPlayer';
+import loadVideoById from '../api/loader/loadVideoById';
+import loadVideoProgressById from '../api/loader/loadVideoProgressById';
+import loadSponsorblockByVideoId from '../api/loader/loadSponsorblockByVideoId';
+import iconClose from '/img/icon-close.svg';
+import iconEye from '/img/icon-eye.svg';
+import iconThumb from '/img/icon-thumb.svg';
+import WatchedCheckBox from './WatchedCheckBox';
+import GoogleCast from './GoogleCast';
+import updateWatchedState from '../api/actions/updateWatchedState';
+import formatNumbers from '../functions/formatNumbers';
+import { Link, useSearchParams } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import loadPlaylistById from '../api/loader/loadPlaylistById';
+
+type Playlist = {
+ id: string;
+ name: string;
+};
+type PlaylistList = Playlist[];
+
+type EmbeddableVideoPlayerProps = {
+ videoId: string;
+};
+
+const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
+ const [, setSearchParams] = useSearchParams();
+
+ const [refresh, setRefresh] = useState(false);
+
+ const [videoResponse, setVideoResponse] = useState
+
+
+ }${download.vid_thumb_url}`})
+
+
+ {showIgnored && ignored}
+ {!showIgnored && queued}
+ {download.vid_type}
+ {download.auto_start && auto}
+
+
+
+
+ {download.channel_indexed && (
+ {download.channel_name}
+ )}
+ {!download.channel_indexed && {download.channel_name}}
+
+
+ {download.title}
+ ++ Published: {formatDate(download.published)} | Duration: {download.duration} |{' '} + {download.youtube_id} +
+ {download.message &&{download.message}
} +
+ {showIgnored && (
+ <>
+
+
+
+
+ );
+};
+
+export default EmbeddableVideoPlayer;
diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx
new file mode 100644
index 00000000..fc40537e
--- /dev/null
+++ b/frontend/src/components/Filterbar.tsx
@@ -0,0 +1,186 @@
+import { useEffect } from 'react';
+import iconSort from '/img/icon-sort.svg';
+import iconAdd from '/img/icon-add.svg';
+import iconSubstract from '/img/icon-substract.svg';
+import iconGridView from '/img/icon-gridview.svg';
+import iconListView from '/img/icon-listview.svg';
+import { SortByType, SortOrderType, ViewLayoutType } from '../pages/Home';
+import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig';
+
+type FilterbarProps = {
+ hideToggleText: string;
+ showHidden?: boolean;
+ hideWatched?: boolean;
+ isGridView?: boolean;
+ view: ViewLayoutType;
+ viewStyleName: string;
+ gridItems: number;
+ sortBy?: SortByType;
+ sortOrder?: SortOrderType;
+ userMeConfig: UserConfigType;
+ setShowHidden?: (showHidden: boolean) => void;
+ setHideWatched?: (hideWatched: boolean) => void;
+ setView: (view: ViewLayoutType) => void;
+ setSortBy?: (sortBy: SortByType) => void;
+ setSortOrder?: (sortOrder: SortOrderType) => void;
+ setGridItems: (gridItems: number) => void;
+ setRefresh?: (status: boolean) => void;
+};
+
+const Filterbar = ({
+ hideToggleText,
+ showHidden,
+ hideWatched,
+ isGridView,
+ view,
+ viewStyleName,
+ gridItems,
+ sortBy,
+ sortOrder,
+ userMeConfig,
+ setShowHidden,
+ setHideWatched,
+ setView,
+ setSortBy,
+ setSortOrder,
+ setGridItems,
+ setRefresh,
+}: FilterbarProps) => {
+ useEffect(() => {
+ (async () => {
+ if (
+ userMeConfig.hide_watched !== hideWatched ||
+ userMeConfig[viewStyleName.toString() as keyof typeof userMeConfig] !== view ||
+ userMeConfig.grid_items !== gridItems ||
+ userMeConfig.sort_by !== sortBy ||
+ userMeConfig.sort_order !== sortOrder
+ ) {
+ const userConfig: UserConfigType = {
+ hide_watched: hideWatched,
+ [viewStyleName.toString()]: view,
+ grid_items: gridItems,
+ sort_by: sortBy,
+ sort_order: sortOrder,
+ };
+
+ await updateUserConfig(userConfig);
+ setRefresh?.(true);
+ }
+ })();
+ }, [hideWatched, view, gridItems, sortBy, sortOrder, viewStyleName, setRefresh, userMeConfig]);
+
+ return (
+
+
+
+ 
{
+ setSearchParams({});
+ }}
+ />
+ {
+ await updateWatchedState({
+ id: videoId,
+ is_watched: status,
+ });
+
+ setRefresh(true);
+ }}
+ />
+ {cast && (
+ {
+ setRefresh(true);
+ }}
+ />
+ )}
+
+
+
+ 
+ {views}
+ {hasLikes && (
+ <>
+ |
+
+ {likes}
+
+ )}
+ {hasDislikes && (
+ <>
+ |
+
+ {dislikes}
+
+ )}
+
+
+
+
+
+
+ + {channelName} +
+ + {playlists?.map(({ id, name }) => { + return ( ++ {name} +
+ ); + })} +{name}
+ +
+
+ );
+};
+
+export default Filterbar;
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
new file mode 100644
index 00000000..54a24c62
--- /dev/null
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+
+export type TaUpdateType = {
+ version?: string;
+ is_breaking?: boolean;
+};
+
+interface Props {
+ version: string;
+ taUpdate?: TaUpdateType;
+}
+
+const Footer = ({ version, taUpdate }: Props) => {
+ const currentYear = new Date().getFullYear();
+
+ return (
+
+ {hideToggleText}
+
+
+ {showHidden && (
+
+ {
+ setHideWatched?.(!hideWatched);
+ }}
+ />
+
+ {!hideWatched && (
+
+ )}
+ {hideWatched && (
+
+ )}
+
+
+
+ )}
+
+
+ Sort by:
+
+
+
+
+ {setShowHidden && (
+ 
{
+ setShowHidden?.(!showHidden);
+ }}
+ id="animate-icon"
+ />
+ )}
+
+ {isGridView && (
+ 
{
+ setView('grid');
+ }}
+ alt="grid view"
+ />
+ 
{
+ setView('list');
+ }}
+ alt="list view"
+ />
+
+
+ {gridItems < 7 && (
+ 
{
+ setGridItems(gridItems + 1);
+ }}
+ alt="grid plus row"
+ />
+ )}
+ {gridItems > 3 && (
+ 
{
+ setGridItems(gridItems - 1);
+ }}
+ alt="grid minus row"
+ />
+ )}
+
+ )}
+
+
+ );
+};
+
+export default Footer;
diff --git a/frontend/src/components/FormattedNumber.tsx b/frontend/src/components/FormattedNumber.tsx
new file mode 100644
index 00000000..92d437d5
--- /dev/null
+++ b/frontend/src/components/FormattedNumber.tsx
@@ -0,0 +1,27 @@
+import formatNumbers from '../functions/formatNumbers';
+
+type FormattedNumberProps = {
+ text: string;
+ number: number;
+};
+
+const FormattedNumber = ({ text, number }: FormattedNumberProps) => {
+ let options = {};
+
+ if (number >= 1000000) {
+ options = {
+ notation: 'compact',
+ compactDisplay: 'long',
+ };
+ }
+
+ return (
+ <>
+
+ © 2021 - {currentYear}
+ TubeArchivist
+ {version}
+ {taUpdate?.version && (
+ <>
+
+ {taUpdate.version} available
+ {taUpdate.is_breaking && Breaking Changes!}
+ {' '}
+
+
+ Release Page
+ {' '}
+ |{' '}
+
+
+ )}
+
+ About |{' '}
+
+ GitHub
+ {' '}
+ |{' '}
+
+ Docker Hub
+ {' '}
+ |{' '}
+
+ Discord
+ {' '}
+ | Reddit
+
+
+ + {text} {formatNumbers(number, options)} +
+ + ); +}; + +export default FormattedNumber; diff --git a/frontend/src/components/GoogleCast.tsx b/frontend/src/components/GoogleCast.tsx new file mode 100644 index 00000000..55a0680b --- /dev/null +++ b/frontend/src/components/GoogleCast.tsx @@ -0,0 +1,230 @@ +import { useCallback, useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; +import { VideoType } from '../pages/Home'; +import updateWatchedState from '../api/actions/updateWatchedState'; +import updateVideoProgressById from '../api/actions/updateVideoProgressById'; +import watchedThreshold from '../functions/watchedThreshold'; +import { VideoProgressType } from './VideoPlayer'; + +const getURL = () => { + return window.location.origin; +}; + +function shiftCurrentTime(contentCurrentTime: number | undefined) { + console.log(contentCurrentTime); + if (contentCurrentTime === undefined) { + return 0; + } + + // Shift media back 3 seconds to prevent missing some of the content + if (contentCurrentTime > 5) { + return contentCurrentTime - 3; + } else { + return 0; + } +} + +async function castVideoProgress( + player: { + mediaInfo: { contentId: string | string[] }; + currentTime: number; + duration: number; + }, + video: VideoType | undefined, +) { + if (!video) { + console.log('castVideoProgress: Video to cast not found...'); + return; + } + const videoId = video.youtube_id; + + if (player.mediaInfo.contentId.includes(videoId)) { + const currentTime = player.currentTime; + const duration = player.duration; + + if (currentTime % 10 <= 1.0 && currentTime !== 0 && duration !== 0) { + // Check progress every 10 seconds or else progress is checked a few times a second + await updateVideoProgressById({ + youtubeId: videoId, + currentProgress: currentTime, + }); + + if (!video.player.watched) { + // Check if video is already marked as watched + if (watchedThreshold(currentTime, duration)) { + await updateWatchedState({ + id: videoId, + is_watched: true, + }); + } + } + } + } +} + +async function castVideoPaused( + player: { + currentTime: number; + duration: number; + mediaInfo: { contentId: string | string[] } | null; + }, + video: VideoType | undefined, +) { + if (!video) { + console.log('castVideoPaused: Video to cast not found...'); + return; + } + + const videoId = video?.youtube_id; + + const currentTime = player.currentTime; + const duration = player.duration; + + if (player.mediaInfo != null) { + if (player.mediaInfo.contentId.includes(videoId)) { + if (currentTime !== 0 && duration !== 0) { + await updateVideoProgressById({ + youtubeId: videoId, + currentProgress: currentTime, + }); + } + } + } +} + +type GoogleCastProps = { + video?: VideoType; + videoProgress?: VideoProgressType; + setRefresh?: () => void; +}; + +const GoogleCast = ({ video, videoProgress, setRefresh }: GoogleCastProps) => { + const [isConnected, setIsConnected] = useState(false); + + const setup = useCallback(() => { + const cast = globalThis.cast; + const chrome = globalThis.chrome; + + cast.framework.CastContext.getInstance().setOptions({ + receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID, // Use built in receiver app on cast device, see https://developers.google.com/cast/docs/styled_receiver if you want to be able to add a theme, splash screen or watermark. Has a $5 one time fee. + autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED, + }); + + const player = new cast.framework.RemotePlayer(); + + const playerController = new cast.framework.RemotePlayerController(player); + + // Add event listerner to check if a connection to a cast device is initiated + playerController.addEventListener( + cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, + function () { + setIsConnected(player.isConnected); + }, + ); + playerController.addEventListener( + cast.framework.RemotePlayerEventType.CURRENT_TIME_CHANGED, + function () { + castVideoProgress(player, video); + }, + ); + playerController.addEventListener( + cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED, + function () { + castVideoPaused(player, video); + setRefresh?.(); + }, + ); + }, [setRefresh, video]); + + const startPlayback = useCallback(() => { + const chrome = globalThis.chrome; + const cast = globalThis.cast; + const castSession = cast.framework.CastContext.getInstance().getCurrentSession(); + + const mediaUrl = video?.media_url; + const vidThumbUrl = video?.vid_thumb_url; + const contentTitle = video?.title; + const contentId = `${getURL()}${mediaUrl}`; + const contentImage = `${getURL()}${vidThumbUrl}`; + const contentType = 'video/mp4'; // Set content type, only videos right now so it is hard coded + + const contentSubtitles = []; + const videoSubtitles = video?.subtitles; // Array of subtitles + if (typeof videoSubtitles !== 'undefined') { + for (let i = 0; i < videoSubtitles.length; i++) { + const subtitle = new chrome.cast.media.Track(i, chrome.cast.media.TrackType.TEXT); + + subtitle.trackContentId = videoSubtitles[i].media_url; + subtitle.trackContentType = 'text/vtt'; + subtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES; + subtitle.name = videoSubtitles[i].name; + subtitle.language = videoSubtitles[i].lang; + subtitle.customData = null; + + contentSubtitles.push(subtitle); + } + } + + const mediaInfo = new chrome.cast.media.MediaInfo(contentId, contentType); // Create MediaInfo var that contains url and content type + // mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED; // Set type of stream, BUFFERED, LIVE, OTHER + mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata(); // Create metadata var and add it to MediaInfo + mediaInfo.metadata.title = contentTitle?.replace('&', '&'); // Set the video title + mediaInfo.metadata.images = [new chrome.cast.Image(contentImage)]; // Set the video thumbnail + // mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle(); + mediaInfo.tracks = contentSubtitles; + + const request = new chrome.cast.media.LoadRequest(mediaInfo); // Create request with the previously set MediaInfo. + // request.queueData = new chrome.cast.media.QueueData(); // See https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.QueueData for playlist support. + request.currentTime = shiftCurrentTime(videoProgress?.position); // Set video start position based on the browser video position + // request.activeTrackIds = contentActiveSubtitle; // Set active subtitle based on video player + + castSession.loadMedia(request).then( + function () { + console.log('media loaded'); + }, + function (error: { code: string }) { + console.log('Error', error, 'Error code: ' + error.code); + }, + ); // Send request to cast device + + // Do not add videoProgress?.position, this will cause loops! + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [video?.media_url, video?.subtitles, video?.title, video?.vid_thumb_url]); + + useEffect(() => { + // @ts-expect-error __onGCastApiAvailable is the google cast window hook ( source: https://developers.google.com/cast/docs/web_sender/integrate ) + window['__onGCastApiAvailable'] = function (isAvailable: boolean) { + if (isAvailable) { + setup(); + } + }; + }, [setup]); + + useEffect(() => { + console.log('isConnected', isConnected); + if (isConnected) { + startPlayback(); + } + }, [isConnected, startPlayback]); + + if (!video) { + returnVideo for cast not found...
; + } + + return ( + <> + <> +'); + } + + const words = workingText.split(' '); + + const formatedWords = words.map(w => addMarkup(w)); + + const html = DOMPurify.sanitize(formatedWords.join(' ')); + + return ; +}; + +export default Linkify; diff --git a/frontend/src/components/MoveVideoMenu.tsx b/frontend/src/components/MoveVideoMenu.tsx new file mode 100644 index 00000000..4853cc1b --- /dev/null +++ b/frontend/src/components/MoveVideoMenu.tsx @@ -0,0 +1,94 @@ +import iconClose from '/img/icon-close.svg'; +import iconArrowTop from '/img/icon-arrow-top.svg'; +import iconArrowUp from '/img/icon-arrow-up.svg'; +import iconArrowDown from '/img/icon-arrow-down.svg'; +import iconArrowBottom from '/img/icon-arrow-bottom.svg'; +import iconRemove from '/img/icon-remove.svg'; +import updateCustomPlaylist from '../api/actions/updateCustomPlaylist'; + +type MoveVideoMenuProps = { + playlistId?: string; + videoId: string; + setCloseMenu: (status: boolean) => void; + setRefresh: (status: boolean) => void; +}; + +const MoveVideoMenu = ({ playlistId, videoId, setCloseMenu, setRefresh }: MoveVideoMenuProps) => { + if (playlistId === undefined) { + return []; + } + + return ( + <> +
+ setCloseMenu(true)}
+ />
+ ![]()
{
+ await updateCustomPlaylist('top', playlistId, videoId);
+
+ setRefresh(true);
+ }}
+ src={iconArrowTop}
+ title="Move to top"
+ />
+ ![]()
{
+ await updateCustomPlaylist('up', playlistId, videoId);
+
+ setRefresh(true);
+ }}
+ src={iconArrowUp}
+ title="Move up"
+ />
+ ![]()
{
+ await updateCustomPlaylist('down', playlistId, videoId);
+
+ setRefresh(true);
+ }}
+ src={iconArrowDown}
+ title="Move down"
+ />
+
+ ![]()
{
+ await updateCustomPlaylist('bottom', playlistId, videoId);
+
+ setRefresh(true);
+ }}
+ src={iconArrowBottom}
+ title="Move to bottom"
+ />
+
+ ![]()
{
+ await updateCustomPlaylist('remove', playlistId, videoId);
+
+ setRefresh(true);
+ }}
+ src={iconRemove}
+ title="Remove from playlist"
+ />
+
+
+ );
+};
+
+export default MoveVideoMenu;
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
new file mode 100644
index 00000000..91a0a4b0
--- /dev/null
+++ b/frontend/src/components/Navigation.tsx
@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import iconSearch from '/img/icon-search.svg';
+import iconGear from '/img/icon-gear.svg';
+import iconExit from '/img/icon-exit.svg';
+import Routes from '../configuration/routes/RouteList';
+import NavigationItem from './NavigationItem';
+
+interface NavigationProps {
+ isAdmin: boolean;
+}
+
+const Navigation = ({ isAdmin }: NavigationProps) => {
+ return (
+ Move Video
+ +
+
+
+
+
+ );
+};
+
+export default Navigation;
diff --git a/frontend/src/components/NavigationItem.tsx b/frontend/src/components/NavigationItem.tsx
new file mode 100644
index 00000000..8f8e8ceb
--- /dev/null
+++ b/frontend/src/components/NavigationItem.tsx
@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+
+interface NavigationItemProps {
+ navigateTo: string;
+ label: string;
+}
+
+const NavigationItem = ({ label, navigateTo }: NavigationItemProps) => {
+ return (
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ {label}
+
+ );
+};
+
+export default NavigationItem;
diff --git a/frontend/src/components/Notifications.tsx b/frontend/src/components/Notifications.tsx
new file mode 100644
index 00000000..e05037f8
--- /dev/null
+++ b/frontend/src/components/Notifications.tsx
@@ -0,0 +1,101 @@
+import { Fragment, useEffect, useState } from 'react';
+import loadNotifications, { NotificationPages } from '../api/loader/loadNotifications';
+import iconStop from '/img/icon-stop.svg';
+import stopTaskByName from '../api/actions/stopTaskByName';
+
+type NotificationType = {
+ title: string;
+ group: string;
+ api_stop: boolean;
+ level: string;
+ id: string;
+ command: boolean | string;
+ messages: string[];
+ progress: number;
+};
+
+type NotificationResponseType = NotificationType[];
+
+type NotificationsProps = {
+ pageName: NotificationPages;
+ includeReindex?: boolean;
+ update?: boolean;
+ setShouldRefresh?: (isDone: boolean) => void;
+};
+
+const Notifications = ({
+ pageName,
+ includeReindex = false,
+ update,
+ setShouldRefresh,
+}: NotificationsProps) => {
+ const [notificationResponse, setNotificationResponse] = useState
+
+ ))}
+
+ );
+};
+
+export default Notifications;
diff --git a/frontend/src/components/OverviewStats.tsx b/frontend/src/components/OverviewStats.tsx
new file mode 100644
index 00000000..deced848
--- /dev/null
+++ b/frontend/src/components/OverviewStats.tsx
@@ -0,0 +1,53 @@
+import { Fragment } from 'react';
+import humanFileSize from '../functions/humanFileSize';
+import StatsInfoBoxItem from './StatsInfoBoxItem';
+import formatNumbers from '../functions/formatNumbers';
+import { VideoStatsType } from '../pages/SettingsDashboard';
+
+type OverviewStatsProps = {
+ videoStats?: VideoStatsType;
+ useSI: boolean;
+};
+
+const OverviewStats = ({ videoStats, useSI }: OverviewStatsProps) => {
+ if (!videoStats) {
+ return {notification.title}
+
+ {notification.messages.map(message => {
+ return (
+
+
+ {notification['api_stop'] && notification.command !== 'STOP' && (
+ 
{
+ await stopTaskByName(notification.id);
+ }}
+ />
+ )}
+
+
+ Loading...
; + } + + const cards = [ + { + title: 'All: ', + data: { + Videos: formatNumbers(videoStats?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.media_size || 0, useSI), + Duration: videoStats?.duration_str, + }, + }, + { + title: 'Active: ', + data: { + Videos: formatNumbers(videoStats?.active_true?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.active_true?.media_size || 0, useSI), + Duration: videoStats?.active_true?.duration_str || 'NA', + }, + }, + { + title: 'Inactive: ', + data: { + Videos: formatNumbers(videoStats?.active_false?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.active_false?.media_size || 0, useSI), + Duration: videoStats?.active_false?.duration_str || 'NA', + }, + }, + ]; + + return cards.map(card => { + return ( +
+
+ {totalHits > 1 && ( + <> + {currentPage > 1 && ( + <> + { + event.preventDefault(); + setPage(0); + }} + > + First + {' '} + + )} + + {prev_pages !== false && + prev_pages && + prev_pages.map((page: number) => { + if (hasParams) { + return ( +
+ {
+ event.preventDefault();
+ setPage(page);
+ }}
+ >
+ {page}
+ {' '}
+
+ );
+ } else {
+ return (
+
+ {
+ event.preventDefault();
+ setPage(page);
+ }}
+ >
+ {page}
+ {' '}
+
+ );
+ }
+ })}
+
+ {currentPage > 0 && {`< Page ${currentPage} `}}
+
+ {next_pages && next_pages.length > 0 && (
+ <>
+ {'>'}{' '}
+ {next_pages.map(page => {
+ if (hasParams) {
+ return (
+
+ {
+ event.preventDefault();
+ setPage(page);
+ }}
+ >
+ {page}
+ {' '}
+
+ );
+ } else {
+ return (
+
+ {
+ event.preventDefault();
+ setPage(page);
+ }}
+ >
+ {page}
+ {' '}
+
+ );
+ }
+ })}
+
+ )}
+
+ {lastPage > 0 && (
+ <>
+ {hasParams && (
+ {
+ event.preventDefault();
+ setPage(lastPage || 0);
+ }}
+ >
+ {hasMaxHits && `Max (${lastPage})`}
+ {!hasMaxHits && `Last (${lastPage})`}
+
+ )}
+
+ {!hasParams && (
+ {
+ event.preventDefault();
+ setPage(lastPage || 0);
+ }}
+ >
+ {hasMaxHits && `Max (${lastPage})`}
+ {!hasMaxHits && `Last (${lastPage})`}
+
+ )}
+
+ )}
+
+ )}
+
+ );
+};
+
+export default Pagination;
diff --git a/frontend/src/components/PaginationDummy.tsx b/frontend/src/components/PaginationDummy.tsx
new file mode 100644
index 00000000..e6336e19
--- /dev/null
+++ b/frontend/src/components/PaginationDummy.tsx
@@ -0,0 +1,9 @@
+const PaginationDummy = () => {
+ return (
+ + {totalHits > 1 && ( + <> + {currentPage > 1 && ( + <> + { + event.preventDefault(); + setPage(0); + }} + > + First + {' '} + + )} + + {prev_pages !== false && + prev_pages && + prev_pages.map((page: number) => { + if (hasParams) { + return ( +
+
+ );
+};
+
+export default PaginationDummy;
diff --git a/frontend/src/components/PlaylistList.tsx b/frontend/src/components/PlaylistList.tsx
new file mode 100644
index 00000000..04fe4db1
--- /dev/null
+++ b/frontend/src/components/PlaylistList.tsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import { ViewLayoutType } from '../pages/Home';
+import { PlaylistType } from '../pages/Playlist';
+import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
+import formatDate from '../functions/formatDates';
+import Button from './Button';
+import getApiUrl from '../configuration/getApiUrl';
+
+type PlaylistListProps = {
+ playlistList: PlaylistType[] | undefined;
+ viewLayout: ViewLayoutType;
+ setRefresh: (status: boolean) => void;
+};
+
+const PlaylistList = ({ playlistList, viewLayout, setRefresh }: PlaylistListProps) => {
+ if (!playlistList || playlistList.length === 0) {
+ return {/** dummy pagination for padding */}
+ No playlists found.
; + } + + return ( + <> + {playlistList.map((playlist: PlaylistType) => { + return ( +
+
+ );
+ })}
+
+ );
+};
+
+export default PlaylistList;
diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000..91c71768
--- /dev/null
+++ b/frontend/src/components/ScrollToTop.tsx
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+const ScrollToTopOnNavigate = () => {
+ const { pathname } = useLocation();
+ const [searchParams] = useSearchParams();
+
+ const page = searchParams.get('page');
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname, page]);
+
+ return null;
+};
+
+export default ScrollToTopOnNavigate;
diff --git a/frontend/src/components/SearchExampleQueries.tsx b/frontend/src/components/SearchExampleQueries.tsx
new file mode 100644
index 00000000..2e17792e
--- /dev/null
+++ b/frontend/src/components/SearchExampleQueries.tsx
@@ -0,0 +1,116 @@
+const SearchExampleQueries = () => {
+ return (
+
+
+ }/cache/playlists/${playlist.playlist_id}.jpg`})
+
+
+
+
+
+ {playlist.playlist_type != 'custom' && (
+
+
+ {playlist.playlist_channel}
+ + )} + + +{playlist.playlist_name}
+ + +Last refreshed: {formatDate(playlist.playlist_last_refresh)}
+ + {playlist.playlist_type != 'custom' && ( + <> + {playlist.playlist_subscribed && ( +
+
+ );
+};
+
+export default SearchExampleQueries;
diff --git a/frontend/src/components/SettingsNavigation.tsx b/frontend/src/components/SettingsNavigation.tsx
new file mode 100644
index 00000000..6541b4ce
--- /dev/null
+++ b/frontend/src/components/SettingsNavigation.tsx
@@ -0,0 +1,36 @@
+import { Link, useOutletContext } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import { OutletContextType } from '../pages/Base';
+
+const SettingsNavigation = () => {
+ const { isAdmin } = useOutletContext() as OutletContextType;
+
+ return (
+ <>
+
+
+ Example queries
+-
+
- + music video — basic search + +
- + video: active: + no — all videos deleted from YouTube + +
- + video: + learn javascript + channel: + corey schafer + active: + yes + +
- + channel: + linux + subscribed: + yes + +
- + playlist: + backend engineering + active: + yes + subscribed: + yes + +
+
+ Keywords cheatsheet
++ For detailed usage check{' '} + + wiki + + . +
+
+
+ -
+
- + simple: (implied) — search in video titles, channel names and playlist + titles + +
-
+ video: — search in video titles, tags and category field
+
-
+
- + channel: — channel name + +
- + active: + yes/no — whether the video is still active on + YouTube + +
+ -
+ channel: — search in channel name and channel description
+
-
+
- + subscribed: + yes/no — whether you are subscribed to the channel + +
- + active: + yes/no — whether the video is still active on + YouTube + +
+ -
+ playlist: — search in channel name and channel description
+
-
+
- + subscribed: + yes/no — whether you are subscribed to the channel + +
- + active: + yes/no — whether the video is still active on + YouTube + +
+ -
+ full: — search in video subtitles
+
-
+
- + lang: — subtitles language (use two-letter ISO country code, same as + the one from settings page) + +
- + source: + auto/user — auto to search though + auto-generated subtitles only, or user to search through user-uploaded + subtitles only + +
+
+
+
+
+ );
+};
+
+export default SettingsNavigation;
diff --git a/frontend/src/components/StatsInfoBoxItem.tsx b/frontend/src/components/StatsInfoBoxItem.tsx
new file mode 100644
index 00000000..d25e15b4
--- /dev/null
+++ b/frontend/src/components/StatsInfoBoxItem.tsx
@@ -0,0 +1,26 @@
+type StatsInfoBoxItemType = {
+ title: string;
+ card: RecordDashboard
+ + +User
+ + + {isAdmin && ( + <> + +Application
+ + +Scheduling
+ + +Actions
+ + + )} +
+
+
+ {Object.entries(card).map(([key, value]) => {
+ return (
+
+
+ );
+};
+
+export default StatsInfoBoxItem;
diff --git a/frontend/src/components/SubtitleList.tsx b/frontend/src/components/SubtitleList.tsx
new file mode 100644
index 00000000..bee073ff
--- /dev/null
+++ b/frontend/src/components/SubtitleList.tsx
@@ -0,0 +1,92 @@
+import { Link, useSearchParams } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import iconPlay from '/img/icon-play.svg';
+import Linkify from './Linkify';
+import getApiUrl from '../configuration/getApiUrl';
+
+type SubtitleListType = {
+ subtitle_index: number;
+ subtitle_line: string;
+ subtitle_start: string;
+ subtitle_fragment_id: string;
+ subtitle_end: string;
+ youtube_id: string;
+ title: string;
+ subtitle_channel: string;
+ subtitle_channel_id: string;
+ subtitle_last_refresh: number;
+ subtitle_lang: string;
+ subtitle_source: string;
+ vid_thumb_url: string;
+ _index: string;
+ _score: number;
+};
+
+type SubtitleListProps = {
+ subtitleList: SubtitleListType[] | undefined;
+};
+
+const stripNanoSecs = (time: string) => {
+ return time.split('.').shift();
+};
+
+const SubtitleList = ({ subtitleList }: SubtitleListProps) => {
+ const [, setSearchParams] = useSearchParams();
+
+ if (!subtitleList || subtitleList.length === 0) {
+ return {title}
+| {key}: | +{value} | +
No fulltext results found.
; + } + + return ( + <> + {subtitleList.map(subtitle => { + return ( +
+ {
+ setSearchParams({
+ videoId: subtitle.youtube_id,
+ t: stripNanoSecs(subtitle.subtitle_start) || '00:00:00',
+ });
+ }}
+ >
+
+ );
+ })}
+
+ );
+};
+
+export default SubtitleList;
diff --git a/frontend/src/components/VideoList.tsx b/frontend/src/components/VideoList.tsx
new file mode 100644
index 00000000..440ed6bc
--- /dev/null
+++ b/frontend/src/components/VideoList.tsx
@@ -0,0 +1,41 @@
+import { VideoType, ViewLayoutType } from '../pages/Home';
+import VideoListItem from './VideoListItem';
+
+type VideoListProps = {
+ videoList: VideoType[] | undefined;
+ viewLayout: ViewLayoutType;
+ playlistId?: string;
+ showReorderButton?: boolean;
+ refreshVideoList: (refresh: boolean) => void;
+};
+
+const VideoList = ({
+ videoList,
+ viewLayout,
+ playlistId,
+ showReorderButton = false,
+ refreshVideoList,
+}: VideoListProps) => {
+ if (!videoList || videoList.length === 0) {
+ return
+
+
+
+ }${subtitle.vid_thumb_url}`})
+
+
+ 
+
+
+
+
+
+
+ {subtitle.subtitle_channel}
+ + +{subtitle.title}
+ ++ {stripNanoSecs(subtitle.subtitle_start)} - {stripNanoSecs(subtitle.subtitle_end)} +
+
+
No videos found.
; + } + + return ( + <> + {videoList.map(video => { + return ( +No video found.
; + } + + return ( +
+ {
+ setSearchParams({ videoId: video.youtube_id });
+ }}
+ >
+
+ );
+};
+
+export default VideoListItem;
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
new file mode 100644
index 00000000..3f92120a
--- /dev/null
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -0,0 +1,254 @@
+import updateVideoProgressById from '../api/actions/updateVideoProgressById';
+import updateWatchedState from '../api/actions/updateWatchedState';
+import { SponsorBlockSegmentType, SponsorBlockType, VideoResponseType } from '../pages/Video';
+import watchedThreshold from '../functions/watchedThreshold';
+import Notifications from './Notifications';
+import { Dispatch, SetStateAction, SyntheticEvent, useState } from 'react';
+import formatTime from '../functions/formatTime';
+import { useSearchParams } from 'react-router-dom';
+import getApiUrl from '../configuration/getApiUrl';
+
+type VideoTag = SyntheticEvent
+
+
+
+
+ }${video.vid_thumb_url}`})
+
+
+ {video.player.progress && (
+
+ )}
+ {!video.player.progress && (
+
+ )}
+
+
+
+
+
+ setShowReorderMenu(!status)}
+ setRefresh={refreshVideoList}
+ />
+ )}
+
+
+ {
+ await updateWatchedState({
+ id: video.youtube_id,
+ is_watched: status,
+ });
+
+ refreshVideoList(true);
+ }}
+ />
+
+ {formatDate(video.published)} | {video.player.duration_str}
+
+
+
+ 
{
+ setShowReorderMenu(true);
+ }}
+ />
+ )}
+
+
+ {showReorderButton && showReorderMenu && (
+
+
+
+
+ {showReorderButton && !showReorderMenu && (
+ {video.channel.channel_name}
+ + +{video.title}
+ +
+
+
+
+
+
+
+ {sponsorBlock?.is_enabled && (
+ <>
+ {sponsorBlock.segments.length == 0 && (
+
+
+ );
+};
+
+export default VideoPlayer;
diff --git a/frontend/src/components/VideoTypeStats.tsx b/frontend/src/components/VideoTypeStats.tsx
new file mode 100644
index 00000000..1aacfecf
--- /dev/null
+++ b/frontend/src/components/VideoTypeStats.tsx
@@ -0,0 +1,53 @@
+import { Fragment } from 'react';
+import humanFileSize from '../functions/humanFileSize';
+import StatsInfoBoxItem from './StatsInfoBoxItem';
+import formatNumbers from '../functions/formatNumbers';
+import { VideoStatsType } from '../pages/SettingsDashboard';
+
+type VideoTypeStatsProps = {
+ videoStats?: VideoStatsType;
+ useSI: boolean;
+};
+
+const VideoTypeStats = ({ videoStats, useSI }: VideoTypeStatsProps) => {
+ if (!videoStats) {
+ return + This video doesn't have any sponsor segments added. To add a segment go to{' '} + + this video on YouTube + {' '} + and add a segment using the{' '} + + SponsorBlock + {' '} + extension. +
+ )} + {sponsorBlock.has_unlocked && ( ++ This video has unlocked sponsor segments. Go to{' '} + + this video on YouTube + {' '} + and vote on the segments using the{' '} + + SponsorBlock + {' '} + extension. +
+ )} + + {Object.values(skippedSegments).map(({ from, to }) => { + return ( + <> + {from !== 0 && to !== 0 && ( ++ Skipped sponsor segment from {formatTime(from)} to {formatTime(to)}. +
+ )} + + ); + })} + + )} +Loading...
; + } + + const cards = [ + { + title: 'Regular Videos: ', + data: { + Videos: formatNumbers(videoStats?.type_videos?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.type_videos?.media_size || 0, useSI), + Duration: videoStats?.type_videos?.duration_str || 'NA', + }, + }, + { + title: 'Shorts: ', + data: { + Videos: formatNumbers(videoStats?.type_shorts?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.type_shorts?.media_size || 0, useSI), + Duration: videoStats?.type_shorts?.duration_str || 'NA', + }, + }, + { + title: 'Streams: ', + data: { + Videos: formatNumbers(videoStats?.type_streams?.doc_count || 0), + ['Media Size']: humanFileSize(videoStats?.type_streams?.media_size || 0, useSI), + Duration: videoStats?.type_streams?.duration_str || 'NA', + }, + }, + ]; + + return cards.map(card => { + return ( +Loading...
; + } + + const titleWatched = formatTitle( + 'Watched', + watchProgressStats?.watched?.progress, + formatProgress(watchProgressStats?.watched?.progress), + ); + + const titleUnwatched = formatTitle( + 'Unwatched', + watchProgressStats?.unwatched?.progress, + formatProgress(watchProgressStats?.unwatched?.progress), + ); + + const cards = [ + { + title: titleWatched, + data: { + Videos: formatNumbers(watchProgressStats?.watched?.items ?? 0), + Seconds: formatNumbers(watchProgressStats?.watched?.duration ?? 0), + Duration: watchProgressStats?.watched?.duration_str ?? '0s', + }, + }, + { + title: titleUnwatched, + data: { + Videos: formatNumbers(watchProgressStats?.unwatched?.items ?? 0), + Seconds: formatNumbers(watchProgressStats?.unwatched?.duration ?? 0), + Duration: watchProgressStats?.unwatched?.duration_str ?? '0s', + }, + }, + ]; + + return cards.map(card => { + return ( +
+
+
+ );
+};
+
+export default About;
diff --git a/frontend/src/pages/Base.tsx b/frontend/src/pages/Base.tsx
new file mode 100644
index 00000000..a9ad52ad
--- /dev/null
+++ b/frontend/src/pages/Base.tsx
@@ -0,0 +1,89 @@
+import { Outlet, useLoaderData, useLocation, useSearchParams } from 'react-router-dom';
+import Footer, { TaUpdateType } from '../components/Footer';
+import importColours from '../configuration/colours/getColours';
+import { UserMeType } from '../api/actions/updateUserConfig';
+import { useEffect, useState } from 'react';
+import Navigation from '../components/Navigation';
+import loadIsAdmin from '../functions/getIsAdmin';
+
+export type AuthenticationType = {
+ response: string;
+ user: number;
+ version: string;
+ ta_update: TaUpdateType;
+};
+
+type BaseLoaderData = {
+ userConfig: UserMeType;
+ auth: AuthenticationType;
+};
+
+export type OutletContextType = {
+ isAdmin: boolean;
+ currentPage: number;
+ setCurrentPage: (page: number) => void;
+};
+
+const Base = () => {
+ const { userConfig, auth } = useLoaderData() as BaseLoaderData;
+ const location = useLocation();
+
+ const userMeConfig = userConfig.config;
+
+ const searchParams = new URLSearchParams(location.search);
+
+ const currentPageFromUrl = Number(searchParams.get('page'));
+
+ const [currentPage, setCurrentPage] = useState(currentPageFromUrl);
+ const [, setSearchParams] = useSearchParams();
+
+ const isAdmin = loadIsAdmin(userConfig);
+ const version = auth.version;
+ const taUpdate = auth.ta_update;
+
+ useEffect(() => {
+ if (currentPageFromUrl !== currentPage) {
+ setCurrentPage(0);
+ }
+
+ // This should only be executed when location.pathname changes.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location.pathname]);
+
+ useEffect(() => {
+ if (currentPageFromUrl !== currentPage) {
+ setCurrentPage(currentPageFromUrl);
+ }
+
+ // This should only be executed when currentPageFromUrl changes.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentPageFromUrl]);
+
+ useEffect(() => {
+ if (currentPageFromUrl !== currentPage) {
+ setSearchParams(params => {
+ params.set('page', currentPage.toString());
+
+ return params;
+ });
+ }
+
+ // This should only be executed when currentPage changes.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentPage]);
+
+ importColours(userMeConfig.stylesheet);
+
+ return (
+ <>
+
+
+ About The Tube Archivist
+
+
+ Useful Links
++ This project is in active and constant development, take a look at the{' '} + + roadmap + {' '} + for a overview. +
++ All functionality is documented in our up-to-date{' '} + + user guide + + . +
++ All contributions are welcome: Open an{' '} + + issue + {' '} + for any bugs and errors, join us on{' '} + + Discord + {' '} + to discuss details. The{' '} + + contributing + {' '} + page is a good place to get started. +
+
+
+ Donate
++ Here are{' '} + + some links + + , if you want to buy the developer a coffee. Thank you for your support! +
+
+
+
+
+ );
+};
+
+export default Base;
diff --git a/frontend/src/pages/ChannelAbout.tsx b/frontend/src/pages/ChannelAbout.tsx
new file mode 100644
index 00000000..1b7e752b
--- /dev/null
+++ b/frontend/src/pages/ChannelAbout.tsx
@@ -0,0 +1,350 @@
+import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
+import ChannelOverview from '../components/ChannelOverview';
+import { useEffect, useState } from 'react';
+import loadChannelById from '../api/loader/loadChannelById';
+import { ChannelResponseType } from './ChannelBase';
+import Linkify from '../components/Linkify';
+import deleteChannel from '../api/actions/deleteChannel';
+import Routes from '../configuration/routes/RouteList';
+import queueReindex, { ReindexType, ReindexTypeEnum } from '../api/actions/queueReindex';
+import formatDate from '../functions/formatDates';
+import PaginationDummy from '../components/PaginationDummy';
+import FormattedNumber from '../components/FormattedNumber';
+import { Helmet } from 'react-helmet';
+import Button from '../components/Button';
+
+const handleSponsorBlockIntegrationOverwrite = (integration: boolean | undefined) => {
+ if (integration === undefined) {
+ return 'False';
+ }
+
+ if (integration) {
+ return integration;
+ } else {
+ return 'Disabled';
+ }
+};
+
+export type ChannelBaseOutletContextType = {
+ isAdmin: boolean;
+ currentPage: number;
+ setCurrentPage: (page: number) => void;
+ startNotification: boolean;
+ setStartNotification: (status: boolean) => void;
+};
+
+export type OutletContextType = {
+ isAdmin: boolean;
+ currentPage: number;
+ setCurrentPage: (page: number) => void;
+};
+
+type ChannelAboutParams = {
+ channelId: string;
+};
+
+const ChannelAbout = () => {
+ const { channelId } = useParams() as ChannelAboutParams;
+ const { isAdmin, setStartNotification } = useOutletContext() as ChannelBaseOutletContextType;
+ const navigate = useNavigate();
+
+ const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+ const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+ const [reindex, setReindex] = useState(false);
+ const [refresh, setRefresh] = useState(false);
+
+ const [channelResponse, setChannelResponse] = useState
+
+
+
+
+
+ {channel.channel_description && (
+
+
+
+
+
+ Last refreshed: {formatDate(channel.channel_last_refresh)}
+ {channel.channel_active && ( ++ Youtube:{' '} + + Active + +
+ )} + {!channel.channel_active &&Youtube: Deactivated
} +
+
+
+ {channel.channel_views > 0 && (
+
+
+ {!showDeleteConfirm && (
+
+ {reindex && Reindex scheduled
} + {!reindex && ( + + )} + + )} +
+
+ )}
+
+ {channel.channel_tags && (
+
+
+
+ )}
+
+ {isAdmin && (
+
+ {channel.channel_tags.map(tag => {
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
+ )}
+
+
+ Customize {channel.channel_name}
+ +
+ setStartNotification(false)}
+ />
+
+
+
+
+
+
+
+
+
+ Videos
+ + {has_streams && ( + +Streams
+ + )} + {has_shorts && ( + +Shorts
+ + )} + {has_playlists && ( + +Playlists
+ + )} + +About
+ + {has_pending && isAdmin && ( + +Downloads
+ + )} +
+
+
+
+
+
+ Show subscribed only:
+
+
+ {
+ setShowSubedOnly(!showSubedOnly);
+ }}
+ type="checkbox"
+ />
+ {!showSubedOnly && (
+
+ )}
+ {showSubedOnly && (
+
+ )}
+
+
+ {
+ setView('grid');
+ }}
+ alt="grid view"
+ />
+ {
+ setView('list');
+ }}
+ alt="list view"
+ />
+
+
+
+
+
+
+
+ {pagination &&
+
+ );
+};
+
+export default ChannelPlaylist;
diff --git a/frontend/src/pages/ChannelShorts.tsx b/frontend/src/pages/ChannelShorts.tsx
new file mode 100644
index 00000000..3fa5635d
--- /dev/null
+++ b/frontend/src/pages/ChannelShorts.tsx
@@ -0,0 +1,16 @@
+import { Helmet } from 'react-helmet';
+import { useParams } from 'react-router-dom';
+
+const ChannelShorts = () => {
+ const { channelId } = useParams();
+
+ return (
+ <>
+
+
+
+ );
+ }
+
+ return (
+ <>
+ +
Channel {channelId} not found!
+
+
+
+
+
+ {aggs && (
+ <>
+
+ + {aggs.total_items.value} videos |{' '} + {aggs.total_duration.value_str} playback |{' '} + Total size {aggs.total_size.value} +
+
+
+
+ )}
+
+
+ {showEmbeddedVideo &&
+
+ {pagination && (
+
+ {!hasVideos && (
+ <>
+
+ No videos found...
++ Try going to the downloads page to start the scan + and download tasks. +
+ + )} + +
+
+ )}
+
+ );
+};
+
+export default ChannelVideo;
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
new file mode 100644
index 00000000..6d5c7380
--- /dev/null
+++ b/frontend/src/pages/Channels.tsx
@@ -0,0 +1,206 @@
+import { useLoaderData, useOutletContext } from 'react-router-dom';
+import loadChannelList from '../api/loader/loadChannelList';
+import iconGridView from '/img/icon-gridview.svg';
+import iconListView from '/img/icon-listview.svg';
+import iconAdd from '/img/icon-add.svg';
+import { useEffect, useState } from 'react';
+import Pagination, { PaginationType } from '../components/Pagination';
+import { ConfigType, ViewLayoutType } from './Home';
+import updateUserConfig, { UserConfigType, UserMeType } from '../api/actions/updateUserConfig';
+import { OutletContextType } from './Base';
+import ChannelList from '../components/ChannelList';
+import ScrollToTopOnNavigate from '../components/ScrollToTop';
+import Notifications from '../components/Notifications';
+import { Helmet } from 'react-helmet';
+import Button from '../components/Button';
+
+type ChannelOverwritesType = {
+ download_format?: string;
+ autodelete_days?: number;
+ index_playlists?: boolean;
+ integrate_sponsorblock?: boolean;
+ subscriptions_channel_size?: number;
+ subscriptions_live_channel_size?: number;
+ subscriptions_shorts_channel_size?: number;
+};
+
+export type ChannelType = {
+ channel_active: boolean;
+ channel_banner_url: string;
+ channel_description: string;
+ channel_id: string;
+ channel_last_refresh: string;
+ channel_name: string;
+ channel_overwrites?: ChannelOverwritesType;
+ channel_subs: number;
+ channel_subscribed: boolean;
+ channel_tags: string[];
+ channel_thumb_url: string;
+ channel_tvart_url: string;
+ channel_views: number;
+};
+
+type ChannelsListResponse = {
+ data: ChannelType[];
+ paginate: PaginationType;
+ config?: ConfigType;
+};
+
+type ChannelsLoaderDataType = {
+ userConfig: UserMeType;
+};
+
+const Channels = () => {
+ const { userConfig } = useLoaderData() as ChannelsLoaderDataType;
+ const { isAdmin, currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
+
+ const userMeConfig = userConfig.config;
+
+ const [channelListResponse, setChannelListResponse] = useState
+
+
+ );
+};
+
+export default Channels;
diff --git a/frontend/src/pages/Download.tsx b/frontend/src/pages/Download.tsx
new file mode 100644
index 00000000..a51ba376
--- /dev/null
+++ b/frontend/src/pages/Download.tsx
@@ -0,0 +1,362 @@
+import iconRescan from '/img/icon-rescan.svg';
+import iconDownload from '/img/icon-download.svg';
+import iconAdd from '/img/icon-add.svg';
+import iconSubstract from '/img/icon-substract.svg';
+import iconGridView from '/img/icon-gridview.svg';
+import iconListView from '/img/icon-listview.svg';
+import { Fragment, useEffect, useState } from 'react';
+import { useLoaderData, useOutletContext, useSearchParams } from 'react-router-dom';
+import updateUserConfig, { UserConfigType, UserMeType } from '../api/actions/updateUserConfig';
+import { ConfigType, ViewLayoutType } from './Home';
+import loadDownloadQueue from '../api/loader/loadDownloadQueue';
+import { OutletContextType } from './Base';
+import Pagination, { PaginationType } from '../components/Pagination';
+import { ViewStyleNames, ViewStyles } from '../configuration/constants/ViewStyle';
+import updateDownloadQueue from '../api/actions/updateDownloadQueue';
+import updateTaskByName from '../api/actions/updateTaskByName';
+import Notifications from '../components/Notifications';
+import ScrollToTopOnNavigate from '../components/ScrollToTop';
+import { Helmet } from 'react-helmet';
+import Button from '../components/Button';
+import DownloadListItem from '../components/DownloadListItem';
+import loadDownloadAggs, { DownloadAggsType } from '../api/loader/loadDownloadAggs';
+
+type Download = {
+ auto_start: boolean;
+ channel_id: string;
+ channel_indexed: boolean;
+ channel_name: string;
+ duration: string;
+ message?: string;
+ published: string;
+ status: string;
+ timestamp: number;
+ title: string;
+ vid_thumb_url: string;
+ vid_type: string;
+ youtube_id: string;
+ _index: string;
+ _score: number;
+};
+
+export type DownloadResponseType = {
+ data?: Download[];
+ config?: ConfigType;
+ paginate?: PaginationType;
+};
+
+type DownloadLoaderDataType = {
+ userConfig: UserMeType;
+};
+
+const Download = () => {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const { userConfig } = useLoaderData() as DownloadLoaderDataType;
+ const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
+
+ const channelFilterFromUrl = searchParams.get('channel');
+ const userMeConfig = userConfig.config;
+
+ const [view, setView] = useState
+
+
+
+
+ {isAdmin && (
+ Channels
+
+ ![]()
{
+ setShowAddForm(!showAddForm);
+ }}
+ src={iconAdd}
+ alt="add-icon"
+ title="Subscribe to Channels"
+ />
+ {showAddForm && (
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {hasChannels &&
+ Show subscribed only:
+
+
+ {
+ setShowSubscribedOnly(!showSubscribedOnly);
+ }}
+ type="checkbox"
+ checked={showSubscribedOnly}
+ />
+ {!showSubscribedOnly && (
+
+ )}
+ {showSubscribedOnly && (
+
+ )}
+
+
+ {
+ setView('grid');
+ }}
+ data-origin="channel"
+ data-value="grid"
+ alt="grid view"
+ />
+ {
+ setView('list');
+ }}
+ data-origin="channel"
+ data-value="list"
+ alt="list view"
+ />
+
+ Total channels: {channelCount}
} + +
+ {!hasChannels &&
+
+ {pagination && (
+ No channels found...
} + + {hasChannels && ( +
+
+ )}
+
+ {
+ if (!isDone) {
+ setRescanPending(false);
+ setDownloadPending(false);
+ setRefresh(true);
+ }
+ }}
+ />
+
+
+
+ Downloads {channelFilterFromUrl && ` for ${channel_filter_name}`}
+
+
+ ![]()
{
+ setRescanPending(!rescanPending);
+ await updateTaskByName('update_subscribed');
+ }}
+ src={iconRescan}
+ alt="rescan-icon"
+ />
+
+ Rescan subscriptions
+
+ ![]()
{
+ setDownloadPending(!downloadPending);
+ await updateTaskByName('download_pending');
+ }}
+ src={iconDownload}
+ alt="download-icon"
+ />
+
+ Start download
+
+ ![]()
{
+ setShowHiddenForm(!showHiddenForm);
+ }}
+ src={iconAdd}
+ alt="add-icon"
+ />
+
Add to download queue
+ + {showHiddenForm && ( +
+
+