No channels found.
; - } - - return ( - <> - {channelList.map(channel => { - return ( -
-
- );
- })}
-
- );
-};
-
-export default ChannelList;
+import { Link } from 'react-router-dom';
+import { ChannelType } from '../pages/Channels';
+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';
+import { useUserConfigStore } from '../stores/UserConfigStore';
+
+type ChannelListProps = {
+ channelList: ChannelType[] | undefined;
+ refreshChannelList: (refresh: boolean) => void;
+};
+
+const ChannelList = ({ channelList, refreshChannelList }: ChannelListProps) => {
+ const { userConfig } = useUserConfigStore();
+ const viewLayout = userConfig.config.view_style_channel;
+
+ if (!channelList || channelList.length === 0) {
+ return
-
-
-
-
-
-
-
-
-
-
-
- - {channel.channel_name} -
-
-
-
-
- Last refreshed: {formatDate(channel.channel_last_refresh)}
- {channel.channel_subscribed && ( -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
index 9c5283fd..f575a6f8 100644
--- a/frontend/src/components/ChannelOverview.tsx
+++ b/frontend/src/components/ChannelOverview.tsx
@@ -1,78 +1,78 @@
-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;
- channelThumbUrl: string;
- showSubscribeButton?: boolean;
- isUserAdmin?: boolean;
- setRefresh: (status: boolean) => void;
-};
-
-const ChannelOverview = ({
- channelId,
- channelSubs,
- channelSubscribed,
- channelname,
- channelThumbUrl,
- showSubscribeButton = false,
- isUserAdmin,
- setRefresh,
-}: ChannelOverviewProps) => {
- return (
- <>
-
+
+
+
+
+
+
+
+
+
+
+
+ + {channel.channel_name} +
+
+
+
+
+ Last refreshed: {formatDate(channel.channel_last_refresh)}
+ {channel.channel_subscribed && ( +
-
-
- );
-};
-
-export default ChannelOverview;
+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;
+ channelThumbUrl: string;
+ showSubscribeButton?: boolean;
+ isUserAdmin?: boolean;
+ setRefresh: (status: boolean) => void;
+};
+
+const ChannelOverview = ({
+ channelId,
+ channelSubs,
+ channelSubscribed,
+ channelname,
+ channelThumbUrl,
+ showSubscribeButton = false,
+ isUserAdmin,
+ setRefresh,
+}: ChannelOverviewProps) => {
+ return (
+ <>
+
-
-
-
-
- - {channelname} -
- -
+
+
+ );
+};
+
+export default ChannelOverview;
diff --git a/frontend/src/components/DownloadListItem.tsx b/frontend/src/components/DownloadListItem.tsx
index a51c7d24..85bddc8e 100644
--- a/frontend/src/components/DownloadListItem.tsx
+++ b/frontend/src/components/DownloadListItem.tsx
@@ -15,7 +15,6 @@ type DownloadListItemProps = {
};
const DownloadListItem = ({ download, setRefresh }: DownloadListItemProps) => {
-
const { userConfig } = useUserConfigStore();
const view = userConfig.config.view_style_downloads;
const showIgnored = userConfig.config.show_ignored_only;
diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx
index f8908355..568f9d58 100644
--- a/frontend/src/components/Filterbar.tsx
+++ b/frontend/src/components/Filterbar.tsx
@@ -14,15 +14,10 @@ type FilterbarProps = {
setRefresh?: (status: boolean) => void;
};
-const Filterbar = ({
- hideToggleText,
- viewStyleName,
- setRefresh,
-}: FilterbarProps) => {
-
+const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps) => {
const { userConfig, setPartialConfig } = useUserConfigStore();
const [showHidden, setShowHidden] = useState(false);
- const isGridView = userConfig.config.view_style_home === ViewStyles.grid
+ const isGridView = userConfig.config.view_style_home === ViewStyles.grid;
return (
+
+
+
+
+ + {channelname} +
+ +
@@ -35,7 +30,7 @@ const Filterbar = ({
checked={userConfig.config.hide_watched}
onChange={() => {
setRefresh?.(true);
- setPartialConfig({hide_watched: !userConfig.config.hide_watched})
+ setPartialConfig({ hide_watched: !userConfig.config.hide_watched });
}}
/>
@@ -48,7 +43,6 @@ const Filterbar = ({
Off
)}
-
@@ -62,7 +56,7 @@ const Filterbar = ({
value={userConfig.config.sort_by}
onChange={event => {
setRefresh?.(true);
- setPartialConfig({sort_by: event.target.value as SortByType});
+ setPartialConfig({ sort_by: event.target.value as SortByType });
}}
>
@@ -78,7 +72,7 @@ const Filterbar = ({
value={userConfig.config.sort_order}
onChange={event => {
setRefresh?.(true);
- setPartialConfig({sort_order: event.target.value as SortOrderType})
+ setPartialConfig({ sort_order: event.target.value as SortOrderType });
}}
>
@@ -106,7 +100,7 @@ const Filterbar = ({
diff --git a/frontend/src/components/GoogleCast.tsx b/frontend/src/components/GoogleCast.tsx
index 8d7618dc..f75175e4 100644
--- a/frontend/src/components/GoogleCast.tsx
+++ b/frontend/src/components/GoogleCast.tsx
@@ -1,226 +1,226 @@
-import { useCallback, useEffect, useState } from 'react';
-import { VideoType } from '../pages/Home';
-import updateWatchedState from '../api/actions/updateWatchedState';
-import updateVideoProgressById from '../api/actions/updateVideoProgressById';
-import watchedThreshold from '../functions/watchedThreshold';
-
-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;
- setRefresh?: () => void;
-};
-
-const GoogleCast = ({ video, 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(video?.player?.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) {
- return ([]);
-
- useEffect(() => {
- const intervalId = setInterval(async () => {
- const notifications = await loadNotifications(pageName, includeReindex);
-
- if (notifications.length === 0) {
- setNotificationResponse(notifications);
- clearInterval(intervalId);
- setShouldRefresh?.(true);
- return;
- } else {
- setShouldRefresh?.(false);
- }
-
- setNotificationResponse(notifications);
- }, 500);
-
- return () => {
- clearInterval(intervalId);
- };
- }, [pageName, update, setShouldRefresh, includeReindex]);
-
- if (notificationResponse.length === 0) {
- return [];
- }
-
- return (
- <>
- {notificationResponse.map(notification => (
- ([]);
+
+ useEffect(() => {
+ const intervalId = setInterval(async () => {
+ const notifications = await loadNotifications(pageName, includeReindex);
+
+ if (notifications.length === 0) {
+ setNotificationResponse(notifications);
+ clearInterval(intervalId);
+ setShouldRefresh?.(true);
+ return;
+ } else {
+ setShouldRefresh?.(false);
+ }
+
+ setNotificationResponse(notifications);
+ }, 500);
+
+ return () => {
+ clearInterval(intervalId);
+ };
+ }, [pageName, update, setShouldRefresh, includeReindex]);
+
+ if (notificationResponse.length === 0) {
+ return [];
+ }
+
+ return (
+ <>
+ {notificationResponse.map(notification => (
+ ;
-
-export type SkippedSegmentType = {
- from: number;
- to: number;
-};
-
-export type SponsorSegmentsSkippedType = Record;
-
-type Subtitle = {
- name: string;
- source: string;
- lang: string;
- media_url: string;
-};
-
-type SubtitlesProp = {
- subtitles: Subtitle[];
-};
-
-const Subtitles = ({ subtitles }: SubtitlesProp) => {
- return subtitles.map((subtitle: Subtitle) => {
- let label = subtitle.name;
-
- if (subtitle.source === 'auto') {
- label += ' - auto';
- }
-
- return (
-
- );
- });
-};
-
-const handleTimeUpdate =
- (
- youtubeId: string,
- duration: number,
- watched: boolean,
- sponsorBlock?: SponsorBlockType,
- setSponsorSegmentSkipped?: Dispatch>,
- ) =>
- async (videoTag: VideoTag) => {
- const currentTime = Number(videoTag.currentTarget.currentTime);
-
- if (sponsorBlock && sponsorBlock.segments) {
- sponsorBlock.segments.forEach((segment: SponsorBlockSegmentType) => {
- const [from, to] = segment.segment;
-
- if (currentTime >= from && currentTime <= from + 0.3) {
- videoTag.currentTarget.currentTime = to;
-
- setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
- return { ...segments, [segment.UUID]: { from, to } };
- });
- }
-
- if (currentTime > to + 10) {
- setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
- return { ...segments, [segment.UUID]: { from: 0, to: 0 } };
- });
- }
- });
- }
-
- if (currentTime < 10) return;
- if (Number((currentTime % 10).toFixed(1)) <= 0.2) {
- // Check progress every 10 seconds or else progress is checked a few times a second
- await updateVideoProgressById({
- youtubeId,
- currentProgress: currentTime,
- });
-
- if (!watched) {
- // Check if video is already marked as watched
- if (watchedThreshold(currentTime, duration)) {
- await updateWatchedState({
- id: youtubeId,
- is_watched: true,
- });
- }
- }
- }
- };
-
-type VideoPlayerProps = {
- video: VideoResponseType;
- sponsorBlock?: SponsorBlockType;
- embed?: boolean;
- autoplay?: boolean;
- onVideoEnd?: () => void;
-};
-
-const VideoPlayer = ({
- video,
- sponsorBlock,
- embed,
- autoplay = false,
- onVideoEnd,
-}: VideoPlayerProps) => {
- const [searchParams] = useSearchParams();
- const searchParamVideoProgress = searchParams.get('t');
-
- const [skippedSegments, setSkippedSegments] = useState({});
-
- const videoId = video.data.youtube_id;
- const videoUrl = video.data.media_url;
- const videoThumbUrl = video.data.vid_thumb_url;
- const watched = video.data.player.watched;
- const duration = video.data.player.duration;
- const videoSubtitles = video.data.subtitles;
-
- let videoSrcProgress =
- Number(video.data.player?.position) > 0 ? Number(video.data.player?.position) : '';
-
- if (searchParamVideoProgress !== null) {
- videoSrcProgress = searchParamVideoProgress;
- }
-
- const handleVideoEnd =
- (
- youtubeId: string,
- watched: boolean,
- setSponsorSegmentSkipped?: Dispatch>,
- ) =>
- async () => {
- if (!watched) {
- // Check if video is already marked as watched
- await updateWatchedState({ id: youtubeId, is_watched: true });
- }
-
- setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
- const keys = Object.keys(segments);
-
- keys.forEach(uuid => {
- segments[uuid] = { from: 0, to: 0 };
- });
-
- return segments;
- });
-
- onVideoEnd?.();
- };
-
- return (
- <>
- ;
+
+export type SkippedSegmentType = {
+ from: number;
+ to: number;
+};
+
+export type SponsorSegmentsSkippedType = Record;
+
+type Subtitle = {
+ name: string;
+ source: string;
+ lang: string;
+ media_url: string;
+};
+
+type SubtitlesProp = {
+ subtitles: Subtitle[];
+};
+
+const Subtitles = ({ subtitles }: SubtitlesProp) => {
+ return subtitles.map((subtitle: Subtitle) => {
+ let label = subtitle.name;
+
+ if (subtitle.source === 'auto') {
+ label += ' - auto';
+ }
+
+ return (
+
+ );
+ });
+};
+
+const handleTimeUpdate =
+ (
+ youtubeId: string,
+ duration: number,
+ watched: boolean,
+ sponsorBlock?: SponsorBlockType,
+ setSponsorSegmentSkipped?: Dispatch>,
+ ) =>
+ async (videoTag: VideoTag) => {
+ const currentTime = Number(videoTag.currentTarget.currentTime);
+
+ if (sponsorBlock && sponsorBlock.segments) {
+ sponsorBlock.segments.forEach((segment: SponsorBlockSegmentType) => {
+ const [from, to] = segment.segment;
+
+ if (currentTime >= from && currentTime <= from + 0.3) {
+ videoTag.currentTarget.currentTime = to;
+
+ setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
+ return { ...segments, [segment.UUID]: { from, to } };
+ });
+ }
+
+ if (currentTime > to + 10) {
+ setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
+ return { ...segments, [segment.UUID]: { from: 0, to: 0 } };
+ });
+ }
+ });
+ }
+
+ if (currentTime < 10) return;
+ if (Number((currentTime % 10).toFixed(1)) <= 0.2) {
+ // Check progress every 10 seconds or else progress is checked a few times a second
+ await updateVideoProgressById({
+ youtubeId,
+ currentProgress: currentTime,
+ });
+
+ if (!watched) {
+ // Check if video is already marked as watched
+ if (watchedThreshold(currentTime, duration)) {
+ await updateWatchedState({
+ id: youtubeId,
+ is_watched: true,
+ });
+ }
+ }
+ }
+ };
+
+type VideoPlayerProps = {
+ video: VideoResponseType;
+ sponsorBlock?: SponsorBlockType;
+ embed?: boolean;
+ autoplay?: boolean;
+ onVideoEnd?: () => void;
+};
+
+const VideoPlayer = ({
+ video,
+ sponsorBlock,
+ embed,
+ autoplay = false,
+ onVideoEnd,
+}: VideoPlayerProps) => {
+ const [searchParams] = useSearchParams();
+ const searchParamVideoProgress = searchParams.get('t');
+
+ const [skippedSegments, setSkippedSegments] = useState({});
+
+ const videoId = video.data.youtube_id;
+ const videoUrl = video.data.media_url;
+ const videoThumbUrl = video.data.vid_thumb_url;
+ const watched = video.data.player.watched;
+ const duration = video.data.player.duration;
+ const videoSubtitles = video.data.subtitles;
+
+ let videoSrcProgress =
+ Number(video.data.player?.position) > 0 ? Number(video.data.player?.position) : '';
+
+ if (searchParamVideoProgress !== null) {
+ videoSrcProgress = searchParamVideoProgress;
+ }
+
+ const handleVideoEnd =
+ (
+ youtubeId: string,
+ watched: boolean,
+ setSponsorSegmentSkipped?: Dispatch>,
+ ) =>
+ async () => {
+ if (!watched) {
+ // Check if video is already marked as watched
+ await updateWatchedState({ id: youtubeId, is_watched: true });
+ }
+
+ setSponsorSegmentSkipped?.((segments: SponsorSegmentsSkippedType) => {
+ const keys = Object.keys(segments);
+
+ keys.forEach(uuid => {
+ segments[uuid] = { from: 0, to: 0 };
+ });
+
+ return segments;
+ });
+
+ onVideoEnd?.();
+ };
+
+ return (
+ <>
+
- ,
-);
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom';
+import Routes from './configuration/routes/RouteList';
+import './style.css';
+import Base from './pages/Base';
+import About from './pages/About';
+import Channels from './pages/Channels';
+import ErrorPage from './pages/ErrorPage';
+import Home from './pages/Home';
+import Playlist from './pages/Playlist';
+import Playlists from './pages/Playlists';
+import Search from './pages/Search';
+import SettingsDashboard from './pages/SettingsDashboard';
+import Video from './pages/Video';
+import Login from './pages/Login';
+import SettingsActions from './pages/SettingsActions';
+import SettingsApplication from './pages/SettingsApplication';
+import SettingsScheduling from './pages/SettingsScheduling';
+import SettingsUser from './pages/SettingsUser';
+import loadUserMeConfig from './api/loader/loadUserConfig';
+import loadAuth from './api/loader/loadAuth';
+import ChannelBase from './pages/ChannelBase';
+import ChannelVideo from './pages/ChannelVideo';
+import ChannelPlaylist from './pages/ChannelPlaylist';
+import ChannelAbout from './pages/ChannelAbout';
+import Download from './pages/Download';
+
+const router = createBrowserRouter(
+ [
+ {
+ path: Routes.Home,
+ loader: async () => {
+ console.log('------------ after reload');
+
+ const auth = await loadAuth();
+ if (auth.status === 403) {
+ return redirect(Routes.Login);
+ }
+
+ const authData = await auth.json();
+
+ const userConfig = await loadUserMeConfig();
+
+ return { userConfig, auth: authData };
+ },
+ element:
+ ,
+);
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index aac50539..928f8915 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,60 +1,60 @@
-const About = () => {
- return (
- <>
- TA | About
-
- TA | About
+
+ ();
- const [channelNav, setChannelNav] = useState();
- const [startNotification, setStartNotification] = useState(false);
-
- const channel = channelResponse?.data;
- const { has_streams, has_shorts, has_playlists, has_pending } = channelNav || {};
-
- useEffect(() => {
- (async () => {
- const channelNavResponse = await loadChannelNav(channelId);
- const channelResponse = await loadChannelById(channelId);
-
- setChannelResponse(channelResponse);
- setChannelNav(channelNavResponse);
- })();
- }, [channelId]);
-
- if (!channelId) {
- return [];
- }
-
- return (
- <>
- ();
+ const [channelNav, setChannelNav] = useState();
+ const [startNotification, setStartNotification] = useState(false);
+
+ const channel = channelResponse?.data;
+ const { has_streams, has_shorts, has_playlists, has_pending } = channelNav || {};
+
+ useEffect(() => {
+ (async () => {
+ const channelNavResponse = await loadChannelNav(channelId);
+ const channelResponse = await loadChannelById(channelId);
+
+ setChannelResponse(channelResponse);
+ setChannelNav(channelNavResponse);
+ })();
+ }, [channelId]);
+
+ if (!channelId) {
+ return [];
+ }
+
+ return (
+ <>
+ ();
-
- const playlistList = playlistsResponse?.data;
- const pagination = playlistsResponse?.paginate;
-
- const view = userConfig.config.view_style_playlist;
- const showSubedOnly = userConfig.config.show_subed_only;
-
- useEffect(() => {
- (async () => {
- const playlists = await loadPlaylistList({
- channel: channelId,
- subscribed: showSubedOnly,
- });
-
- setPlaylistsResponse(playlists);
- setRefreshPlaylists(false);
- })();
- }, [channelId, refreshPlaylists, showSubedOnly, currentPage]);
-
- return (
- <>
- TA | Channel: Playlists
- ();
+
+ const playlistList = playlistsResponse?.data;
+ const pagination = playlistsResponse?.paginate;
+
+ const view = userConfig.config.view_style_playlist;
+ const showSubedOnly = userConfig.config.show_subed_only;
+
+ useEffect(() => {
+ (async () => {
+ const playlists = await loadPlaylistList({
+ channel: channelId,
+ subscribed: showSubedOnly,
+ });
+
+ setPlaylistsResponse(playlists);
+ setRefreshPlaylists(false);
+ })();
+ }, [channelId, refreshPlaylists, showSubedOnly, currentPage]);
+
+ return (
+ <>
+ TA | Channel: Playlists
+ ();
- const [videoResponse, setVideoReponse] = useState();
- const [videoAggsResponse, setVideoAggsResponse] = useState();
-
- const channel = channelResponse?.data;
- const videoList = videoResponse?.data;
- const pagination = videoResponse?.paginate;
-
- const hasVideos = videoResponse?.data?.length !== 0;
- const showEmbeddedVideo = videoId !== null;
-
- const view = userConfig.config.view_style_home
- const isGridView = view === ViewStyles.grid;
- const gridView = isGridView ? `boxed-${userConfig.config.grid_items}` : '';
- const gridViewGrid = isGridView ? `grid-${userConfig.config.grid_items}` : '';
-
- useEffect(() => {
- (async () => {
- const channelResponse = await loadChannelById(channelId);
- const videos = await loadVideoListByFilter({
- channel: channelId,
- page: currentPage,
- watch: userConfig.config.hide_watched ? 'unwatched' : undefined,
- sort: userConfig.config.sort_by,
- order: userConfig.config.sort_order,
- type: videoType,
- });
- const channelAggs = await loadChannelAggs(channelId);
-
- setChannelResponse(channelResponse);
- setVideoReponse(videos);
- setVideoAggsResponse(channelAggs);
- setRefresh(false);
- })();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [
- refresh,
- userConfig.config.sort_by,
- userConfig.config.sort_order,
- userConfig.config.hide_watched,
- currentPage,
- channelId,
- pagination?.current_page,
- videoType,
- ]);
-
- if (!channel) {
- return (
- {`TA | Channel: ${channel.channel_name}`}
- ();
+ const [videoResponse, setVideoReponse] = useState();
+ const [videoAggsResponse, setVideoAggsResponse] = useState();
+
+ const channel = channelResponse?.data;
+ const videoList = videoResponse?.data;
+ const pagination = videoResponse?.paginate;
+
+ const hasVideos = videoResponse?.data?.length !== 0;
+ const showEmbeddedVideo = videoId !== null;
+
+ const view = userConfig.config.view_style_home;
+ const isGridView = view === ViewStyles.grid;
+ const gridView = isGridView ? `boxed-${userConfig.config.grid_items}` : '';
+ const gridViewGrid = isGridView ? `grid-${userConfig.config.grid_items}` : '';
+
+ useEffect(() => {
+ (async () => {
+ const channelResponse = await loadChannelById(channelId);
+ const videos = await loadVideoListByFilter({
+ channel: channelId,
+ page: currentPage,
+ watch: userConfig.config.hide_watched ? 'unwatched' : undefined,
+ sort: userConfig.config.sort_by,
+ order: userConfig.config.sort_order,
+ type: videoType,
+ });
+ const channelAggs = await loadChannelAggs(channelId);
+
+ setChannelResponse(channelResponse);
+ setVideoReponse(videos);
+ setVideoAggsResponse(channelAggs);
+ setRefresh(false);
+ })();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ refresh,
+ userConfig.config.sort_by,
+ userConfig.config.sort_order,
+ userConfig.config.hide_watched,
+ currentPage,
+ channelId,
+ pagination?.current_page,
+ videoType,
+ ]);
+
+ if (!channel) {
+ return (
+ {`TA | Channel: ${channel.channel_name}`}
+ ();
- const [showAddForm, setShowAddForm] = useState(false);
- const [refresh, setRefresh] = useState(false);
- const [channelsToSubscribeTo, setChannelsToSubscribeTo] = useState('');
-
- const channels = channelListResponse?.data;
- const pagination = channelListResponse?.paginate;
- const channelCount = pagination?.total_hits;
- const hasChannels = channels?.length !== 0;
-
- useEffect(() => {
- (async () => {
- const channelListResponse = await loadChannelList(currentPage, userConfig.config.show_subed_only);
- setChannelListResponse(channelListResponse);
- })();
- }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
-
- return (
- <>
- TA | Channels
-
Video for cast not found...
; - } - - return ( - <> - <> - - - {/* @ts-expect-error React does not know what to do with the google-cast-launcher, but it works. */} -Video for cast not found...
; + } + + return ( + <> + <> + + + {/* @ts-expect-error React does not know what to do with the google-cast-launcher, but it works. */} +
-
- ))}
-
- );
-};
-
-export default Notifications;
+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{notification.title}
-
- {notification.messages.map?.(message => {
- return (
-
-
- {notification['api_stop'] && notification.command !== 'STOP' && (
- 
{
- await stopTaskByName(notification.id);
- }}
- />
- )}
-
-
-
+
+ ))}
+
+ );
+};
+
+export default Notifications;
diff --git a/frontend/src/components/PaginationDummy.tsx b/frontend/src/components/PaginationDummy.tsx
index e6f80b13..bea1c0c9 100644
--- a/frontend/src/components/PaginationDummy.tsx
+++ b/frontend/src/components/PaginationDummy.tsx
@@ -1,9 +1,9 @@
-const PaginationDummy = () => {
- return (
- {notification.title}
+
+ {notification.messages.map?.(message => {
+ return (
+
+
+ {notification['api_stop'] && notification.command !== 'STOP' && (
+ {
+ await stopTaskByName(notification.id);
+ }}
+ />
+ )}
+
+
+
-
- );
-};
-
-export default PaginationDummy;
+const PaginationDummy = () => {
+ return (
+ {/** dummy pagination for consistent padding */}
-
+
+ );
+};
+
+export default PaginationDummy;
diff --git a/frontend/src/components/PlaylistList.tsx b/frontend/src/components/PlaylistList.tsx
index 88164144..a0cbd0bf 100644
--- a/frontend/src/components/PlaylistList.tsx
+++ b/frontend/src/components/PlaylistList.tsx
@@ -1,90 +1,89 @@
-import { Link } from 'react-router-dom';
-import Routes from '../configuration/routes/RouteList';
-import { PlaylistType } from '../pages/Playlist';
-import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
-import formatDate from '../functions/formatDates';
-import Button from './Button';
-import PlaylistThumbnail from './PlaylistThumbnail';
-import { useUserConfigStore } from '../stores/UserConfigStore';
-
-type PlaylistListProps = {
- playlistList: PlaylistType[] | undefined;
- setRefresh: (status: boolean) => void;
-};
-
-const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
-
- const { userConfig } = useUserConfigStore();
- const viewLayout = userConfig.config.view_style_playlist;
-
- if (!playlistList || playlistList.length === 0) {
- return {/** dummy pagination for consistent padding */}
+ No playlists found.
; - } - - return ( - <> - {playlistList.map((playlist: PlaylistType) => { - return ( -
-
- );
- })}
-
- );
-};
-
-export default PlaylistList;
+import { Link } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import { PlaylistType } from '../pages/Playlist';
+import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
+import formatDate from '../functions/formatDates';
+import Button from './Button';
+import PlaylistThumbnail from './PlaylistThumbnail';
+import { useUserConfigStore } from '../stores/UserConfigStore';
+
+type PlaylistListProps = {
+ playlistList: PlaylistType[] | undefined;
+ setRefresh: (status: boolean) => void;
+};
+
+const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
+ const { userConfig } = useUserConfigStore();
+ const viewLayout = userConfig.config.view_style_playlist;
+
+ if (!playlistList || playlistList.length === 0) {
+ return
-
-
-
- {playlist.playlist_type != 'custom' && (
-
-
- {playlist.playlist_channel}
- - )} - - -{playlist.playlist_name}
- - -Last refreshed: {formatDate(playlist.playlist_last_refresh)}
- - {playlist.playlist_type != 'custom' && ( - <> - {playlist.playlist_subscribed && ( -No playlists found.
; + } + + return ( + <> + {playlistList.map((playlist: PlaylistType) => { + return ( +
+
+ );
+ })}
+
+ );
+};
+
+export default PlaylistList;
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
index 580d3b36..0e1c79e2 100644
--- a/frontend/src/components/VideoPlayer.tsx
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -1,262 +1,262 @@
-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, Fragment, SetStateAction, SyntheticEvent, useState } from 'react';
-import formatTime from '../functions/formatTime';
-import { useSearchParams } from 'react-router-dom';
-import getApiUrl from '../configuration/getApiUrl';
-
-type VideoTag = SyntheticEvent
+
+
+
+ {playlist.playlist_type != 'custom' && (
+
+
+ {playlist.playlist_channel}
+ + )} + + +{playlist.playlist_name}
+ + +Last refreshed: {formatDate(playlist.playlist_last_refresh)}
+ + {playlist.playlist_type != 'custom' && ( + <> + {playlist.playlist_subscribed && ( +
-
-
-
-
-
-
- {sponsorBlock?.is_enabled && (
- <>
- {sponsorBlock.segments.length == 0 && (
-
- {from !== 0 && to !== 0 && (
-
- );
- })}
-
- )}
-
-
- );
-};
-
-export default VideoPlayer;
+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, Fragment, SetStateAction, SyntheticEvent, useState } from 'react';
+import formatTime from '../functions/formatTime';
+import { useSearchParams } from 'react-router-dom';
+import getApiUrl from '../configuration/getApiUrl';
+
+type VideoTag = SyntheticEvent- 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 }, index) => { - return ( -- Skipped sponsor segment from {formatTime(from)} to {formatTime(to)}. -
- )} -
+
+
+
+
+
+
+ {sponsorBlock?.is_enabled && (
+ <>
+ {sponsorBlock.segments.length == 0 && (
+
+ {from !== 0 && to !== 0 && (
+
+ );
+ })}
+
+ )}
+
+
+ );
+};
+
+export default VideoPlayer;
diff --git a/frontend/src/configuration/colours/getColours.ts b/frontend/src/configuration/colours/getColours.ts
index 82cbec2d..af43781f 100644
--- a/frontend/src/configuration/colours/getColours.ts
+++ b/frontend/src/configuration/colours/getColours.ts
@@ -8,9 +8,8 @@ export const ColourConstant = {
};
const importColours = () => {
-
const { userConfig } = useUserConfigStore();
- const stylesheet = userConfig?.config.stylesheet
+ const stylesheet = userConfig?.config.stylesheet;
switch (stylesheet) {
case ColourConstant.Dark:
diff --git a/frontend/src/functions/getIsAdmin.ts b/frontend/src/functions/getIsAdmin.ts
index 6efe0441..ca4c2ce8 100644
--- a/frontend/src/functions/getIsAdmin.ts
+++ b/frontend/src/functions/getIsAdmin.ts
@@ -1,7 +1,7 @@
import { useUserConfigStore } from '../stores/UserConfigStore';
const loadIsAdmin = () => {
- const { userConfig } = useUserConfigStore()
+ const { userConfig } = useUserConfigStore();
const isAdmin = userConfig?.is_staff || userConfig?.is_superuser;
return isAdmin;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d3a1b6f1..f3f37e89 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,144 +1,144 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom';
-import Routes from './configuration/routes/RouteList';
-import './style.css';
-import Base from './pages/Base';
-import About from './pages/About';
-import Channels from './pages/Channels';
-import ErrorPage from './pages/ErrorPage';
-import Home from './pages/Home';
-import Playlist from './pages/Playlist';
-import Playlists from './pages/Playlists';
-import Search from './pages/Search';
-import SettingsDashboard from './pages/SettingsDashboard';
-import Video from './pages/Video';
-import Login from './pages/Login';
-import SettingsActions from './pages/SettingsActions';
-import SettingsApplication from './pages/SettingsApplication';
-import SettingsScheduling from './pages/SettingsScheduling';
-import SettingsUser from './pages/SettingsUser';
-import loadUserMeConfig from './api/loader/loadUserConfig';
-import loadAuth from './api/loader/loadAuth';
-import ChannelBase from './pages/ChannelBase';
-import ChannelVideo from './pages/ChannelVideo';
-import ChannelPlaylist from './pages/ChannelPlaylist';
-import ChannelAbout from './pages/ChannelAbout';
-import Download from './pages/Download';
-
-const router = createBrowserRouter(
- [
- {
- path: Routes.Home,
- loader: async () => {
- console.log('------------ after reload');
-
- const auth = await loadAuth();
- if (auth.status === 403) {
- return redirect(Routes.Login);
- }
-
- const authData = await auth.json();
-
- const userConfig = await loadUserMeConfig();
-
- return { userConfig, auth: authData };
- },
- element: + 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 }, index) => { + return ( ++ Skipped sponsor segment from {formatTime(from)} to {formatTime(to)}. +
+ )} +
-
-
- );
-};
-
-export default About;
+const About = () => {
+ 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 About;
diff --git a/frontend/src/pages/Base.tsx b/frontend/src/pages/Base.tsx
index 5e4991d8..00724b36 100644
--- a/frontend/src/pages/Base.tsx
+++ b/frontend/src/pages/Base.tsx
@@ -31,7 +31,7 @@ export type OutletContextType = {
const Base = () => {
const { setAuth } = useAuthStore();
- const { setUserConfig } = useUserConfigStore()
+ const { setUserConfig } = useUserConfigStore();
const { userConfig, auth } = useLoaderData() as BaseLoaderData;
const location = useLocation();
@@ -46,7 +46,7 @@ const Base = () => {
useEffect(() => {
setAuth(auth);
setUserConfig(userConfig);
- }, [])
+ }, []);
useEffect(() => {
if (currentPageFromUrl !== currentPage) {
diff --git a/frontend/src/pages/ChannelBase.tsx b/frontend/src/pages/ChannelBase.tsx
index a29b0723..e696a159 100644
--- a/frontend/src/pages/ChannelBase.tsx
+++ b/frontend/src/pages/ChannelBase.tsx
@@ -1,105 +1,105 @@
-import { Link, Outlet, useOutletContext, useParams } from 'react-router-dom';
-import Routes from '../configuration/routes/RouteList';
-import { ChannelType } from './Channels';
-import { ConfigType } from './Home';
-import { OutletContextType } from './Base';
-import Notifications from '../components/Notifications';
-import { useEffect, useState } from 'react';
-import ChannelBanner from '../components/ChannelBanner';
-import loadChannelNav, { ChannelNavResponseType } from '../api/loader/loadChannelNav';
-import loadChannelById from '../api/loader/loadChannelById';
-import loadIsAdmin from '../functions/getIsAdmin';
-
-type ChannelParams = {
- channelId: string;
-};
-
-export type ChannelResponseType = {
- data: ChannelType;
- config: ConfigType;
-};
-
-const ChannelBase = () => {
- const { channelId } = useParams() as ChannelParams;
- const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
- const isAdmin = loadIsAdmin();
-
- const [channelResponse, setChannelResponse] = useState
+
+ 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! +
+
- setStartNotification(false)}
- />
-
-
-
-
-
-
-
-
-
- Videos
- - {has_streams && ( - -Streams
- - )} - {has_shorts && ( - -Shorts
- - )} - {has_playlists && ( - -Playlists
- - )} - -About
- - {has_pending && isAdmin && ( - -Downloads
- - )} -
+ setStartNotification(false)}
+ />
+
+
+
+
+
+
+
+
+
+ Videos
+ + {has_streams && ( + +Streams
+ + )} + {has_shorts && ( + +Shorts
+ + )} + {has_playlists && ( + +Playlists
+ + )} + +About
+ + {has_pending && isAdmin && ( + +Downloads
+ + )} +
-
-
-
-
-
- Show subscribed only:
-
-
- {
- setPartialConfig({show_subed_only: !showSubedOnly});
- setRefreshPlaylists(true);
- }}
- type="checkbox"
- />
- {!showSubedOnly && (
-
- )}
- {showSubedOnly && (
-
- )}
-
-
- 
{
- setPartialConfig({view_style_playlist: 'grid'});
- }}
- alt="grid view"
- />
- 
{
- setPartialConfig({view_style_playlist: 'list'});
- }}
- alt="list view"
- />
-
-
-
-
-
-
-
- {pagination &&
-
- );
-};
-
-export default ChannelPlaylist;
+import { useOutletContext, useParams } from 'react-router-dom';
+import Notifications from '../components/Notifications';
+import PlaylistList from '../components/PlaylistList';
+import { useEffect, useState } from 'react';
+import { OutletContextType } from './Base';
+import Pagination from '../components/Pagination';
+import ScrollToTopOnNavigate from '../components/ScrollToTop';
+import loadPlaylistList from '../api/loader/loadPlaylistList';
+import { PlaylistsResponseType } from './Playlists';
+import iconGridView from '/img/icon-gridview.svg';
+import iconListView from '/img/icon-listview.svg';
+import { useUserConfigStore } from '../stores/UserConfigStore';
+
+const ChannelPlaylist = () => {
+ const { channelId } = useParams();
+ const { userConfig, setPartialConfig } = useUserConfigStore();
+ const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
+
+ const [refreshPlaylists, setRefreshPlaylists] = useState(false);
+
+ const [playlistsResponse, setPlaylistsResponse] = useState
+
+
+
+
+
+ Show subscribed only:
+
+
+ {
+ setPartialConfig({ show_subed_only: !showSubedOnly });
+ setRefreshPlaylists(true);
+ }}
+ type="checkbox"
+ />
+ {!showSubedOnly && (
+
+ )}
+ {showSubedOnly && (
+
+ )}
+
+
+ {
+ setPartialConfig({ view_style_playlist: 'grid' });
+ }}
+ alt="grid view"
+ />
+ {
+ setPartialConfig({ view_style_playlist: 'list' });
+ }}
+ alt="list view"
+ />
+
+
+
+
+
+
+
+ {pagination &&
+
+ );
+};
+
+export default ChannelPlaylist;
diff --git a/frontend/src/pages/ChannelVideo.tsx b/frontend/src/pages/ChannelVideo.tsx
index 7903a3e1..a4709b4a 100644
--- a/frontend/src/pages/ChannelVideo.tsx
+++ b/frontend/src/pages/ChannelVideo.tsx
@@ -1,193 +1,188 @@
-import { useEffect, useState } from 'react';
-import {
- Link,
- useOutletContext,
- useParams,
- useSearchParams,
-} from 'react-router-dom';
-import { OutletContextType } from './Base';
-import VideoList from '../components/VideoList';
-import Routes from '../configuration/routes/RouteList';
-import Pagination from '../components/Pagination';
-import Filterbar from '../components/Filterbar';
-import { ViewStyleNames, ViewStyles } from '../configuration/constants/ViewStyle';
-import ChannelOverview from '../components/ChannelOverview';
-import loadChannelById from '../api/loader/loadChannelById';
-import { ChannelResponseType } from './ChannelBase';
-import ScrollToTopOnNavigate from '../components/ScrollToTop';
-import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
-import updateWatchedState from '../api/actions/updateWatchedState';
-import Button from '../components/Button';
-import loadVideoListByFilter, {
- VideoListByFilterResponseType,
- VideoTypes,
-} from '../api/loader/loadVideoListByPage';
-import loadChannelAggs, { ChannelAggsType } from '../api/loader/loadChannelAggs';
-import humanFileSize from '../functions/humanFileSize';
-import { useUserConfigStore } from '../stores/UserConfigStore';
-
-type ChannelParams = {
- channelId: string;
-};
-
-type ChannelVideoProps = {
- videoType: VideoTypes;
-};
-
-const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
- const { channelId } = useParams() as ChannelParams;
- const { userConfig } = useUserConfigStore();
- const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
- const [searchParams] = useSearchParams();
- const videoId = searchParams.get('videoId');
-
- const [refresh, setRefresh] = useState(false);
-
- const [channelResponse, setChannelResponse] = useState
-
-
- );
- }
-
- return (
- <>
- -
Channel {channelId} not found!
-
-
-
-
-
- {videoAggsResponse && (
- <>
-
- - {videoAggsResponse.total_items.value} videos{' '} - |{' '} - {videoAggsResponse.total_duration.value_str} playback{' '} - | Total size{' '} - {humanFileSize(videoAggsResponse.total_size.value, true)} -
-
-
-
- )}
-
-
- {showEmbeddedVideo &&
-
- {pagination && (
-
- {!hasVideos && (
- <>
-
- No videos found...
-- Try going to the downloads page to start the scan - and download tasks. -
- - )} - -
-
- )}
-
- );
-};
-
-export default ChannelVideo;
+import { useEffect, useState } from 'react';
+import { Link, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
+import { OutletContextType } from './Base';
+import VideoList from '../components/VideoList';
+import Routes from '../configuration/routes/RouteList';
+import Pagination from '../components/Pagination';
+import Filterbar from '../components/Filterbar';
+import { ViewStyleNames, ViewStyles } from '../configuration/constants/ViewStyle';
+import ChannelOverview from '../components/ChannelOverview';
+import loadChannelById from '../api/loader/loadChannelById';
+import { ChannelResponseType } from './ChannelBase';
+import ScrollToTopOnNavigate from '../components/ScrollToTop';
+import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
+import updateWatchedState from '../api/actions/updateWatchedState';
+import Button from '../components/Button';
+import loadVideoListByFilter, {
+ VideoListByFilterResponseType,
+ VideoTypes,
+} from '../api/loader/loadVideoListByPage';
+import loadChannelAggs, { ChannelAggsType } from '../api/loader/loadChannelAggs';
+import humanFileSize from '../functions/humanFileSize';
+import { useUserConfigStore } from '../stores/UserConfigStore';
+
+type ChannelParams = {
+ channelId: string;
+};
+
+type ChannelVideoProps = {
+ videoType: VideoTypes;
+};
+
+const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
+ const { channelId } = useParams() as ChannelParams;
+ const { userConfig } = useUserConfigStore();
+ const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
+ const [searchParams] = useSearchParams();
+ const videoId = searchParams.get('videoId');
+
+ const [refresh, setRefresh] = useState(false);
+
+ const [channelResponse, setChannelResponse] = useState
+
+
+ );
+ }
+
+ return (
+ <>
+ +
Channel {channelId} not found!
+
+
+
+
+
+ {videoAggsResponse && (
+ <>
+
+ + {videoAggsResponse.total_items.value} videos{' '} + |{' '} + {videoAggsResponse.total_duration.value_str} playback{' '} + | Total size{' '} + {humanFileSize(videoAggsResponse.total_size.value, true)} +
+
+
+
+ )}
+
+
+ {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
index f5c26fba..86a9fd91 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -1,189 +1,190 @@
-import { 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 } from './Home';
-import { OutletContextType } from './Base';
-import ChannelList from '../components/ChannelList';
-import ScrollToTopOnNavigate from '../components/ScrollToTop';
-import Notifications from '../components/Notifications';
-import Button from '../components/Button';
-import updateChannelSubscription from '../api/actions/updateChannelSubscription';
-import loadIsAdmin from '../functions/getIsAdmin';
-import { useUserConfigStore } from '../stores/UserConfigStore';
-
-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;
-};
-
-const Channels = () => {
- const { userConfig, setPartialConfig } = useUserConfigStore();
- const { currentPage, setCurrentPage } = useOutletContext() as OutletContextType;
- const isAdmin = loadIsAdmin();
-
- const [channelListResponse, setChannelListResponse] = useState
-
-
-
- {isAdmin && (
- Channels
-
- ![]()
{
- setShowAddForm(!showAddForm);
- }}
- src={iconAdd}
- alt="add-icon"
- title="Subscribe to Channels"
- />
- {showAddForm && (
-
-
-
-