Fix several response types and responses and add AppSettingsStore

frontend/src/components/EmbeddableVideoPlayer.tsx

@@ -12,6 +12,7 @@ import formatNumbers from '../functions/formatNumbers';
 import { Link, useSearchParams } from 'react-router-dom';
 import Routes from '../configuration/routes/RouteList';
 import loadPlaylistById from '../api/loader/loadPlaylistById';
+import { useAppSettingsStore } from '../stores/AppSettingsStore';
 
 type Playlist = {
   id: string;
@@ -25,6 +26,7 @@ type EmbeddableVideoPlayerProps = {
 
 const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const inlinePlayerRef = useRef<HTMLDivElement>(null);
+  const { appSettingsConfig } = useAppSettingsStore();
 
   const [, setSearchParams] = useSearchParams();
 
@@ -35,10 +37,10 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
 
   useEffect(() => {
     (async () => {
-      if (refresh || videoId !== videoResponse?.data.youtube_id) {
+      if (refresh || videoId !== videoResponse?.youtube_id) {
         const videoResponse = await loadVideoById(videoId);
 
-        const playlistIds = videoResponse.data.playlist;
+        const playlistIds = videoResponse.playlist;
         if (playlistIds !== undefined) {
           const playlists = await Promise.all(
             playlistIds.map(async playlistid => {
@@ -80,7 +82,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
     return <div ref={inlinePlayerRef} className="player-wrapper" />;
   }
 
-  const video = videoResponse.data;
+  const video = videoResponse;
   const name = video.title;
   const channelId = video.channel.channel_id;
   const channelName = video.channel.channel_name;
@@ -89,10 +91,10 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const views = formatNumbers(video.stats.view_count);
   const hasLikes = video.stats.like_count;
   const likes = formatNumbers(video.stats.like_count);
-  const hasDislikes = video.stats.dislike_count > 0 && videoResponse.config.downloads.integrate_ryd;
+  const hasDislikes = video.stats.dislike_count > 0 && appSettingsConfig.downloads.integrate_ryd;
   const dislikes = formatNumbers(video.stats.dislike_count);
-  const config = videoResponse.config;
+  // const config = videoResponse.config;
-  const cast = config.enable_cast;
+  const cast = false; // config.enable_cast;
 
   return (
     <>

frontend/src/components/VideoPlayer.tsx

@@ -141,15 +141,14 @@ const VideoPlayer = ({
   const arrowRightPressed = useKeyPress('ArrowRight');
   const arrowLeftPressed = useKeyPress('ArrowLeft');
 
-  const videoId = video.data.youtube_id;
+  const videoId = video.youtube_id;
-  const videoUrl = video.data.media_url;
+  const videoUrl = video.media_url;
-  const videoThumbUrl = video.data.vid_thumb_url;
+  const videoThumbUrl = video.vid_thumb_url;
-  const watched = video.data.player.watched;
+  const watched = video.player.watched;
-  const duration = video.data.player.duration;
+  const duration = video.player.duration;
-  const videoSubtitles = video.data.subtitles;
+  const videoSubtitles = video.subtitles;
 
-  let videoSrcProgress =
+  let videoSrcProgress = Number(video.player?.position) > 0 ? Number(video.player?.position) : '';
-    Number(video.data.player?.position) > 0 ? Number(video.data.player?.position) : '';
 
   if (searchParamVideoProgress !== null) {
     videoSrcProgress = searchParamVideoProgress;

frontend/src/main.tsx

@@ -26,6 +26,7 @@ import ChannelPlaylist from './pages/ChannelPlaylist';
 import ChannelAbout from './pages/ChannelAbout';
 import Download from './pages/Download';
 import loadUserAccount from './api/loader/loadUserAccount';
+import loadAppsettingsConfig from './api/loader/loadAppsettingsConfig';
 
 const router = createBrowserRouter(
   [
@@ -43,8 +44,9 @@ const router = createBrowserRouter(
 
         const userConfig = await loadUserMeConfig();
         const userAccount = await loadUserAccount();
+        const appSettings = await loadAppsettingsConfig();
 
-        return { userConfig, userAccount, auth: authData };
+        return { userConfig, userAccount, appSettings, auth: authData };
       },
       element: <Base />,
       errorElement: <ErrorPage />,

frontend/src/pages/Base.tsx

@@ -8,6 +8,8 @@ import { useAuthStore } from '../stores/AuthDataStore';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { useUserAccountStore } from '../stores/UserAccountStore';
 import { UserAccountType } from '../api/loader/loadUserAccount';
+import { useAppSettingsStore } from '../stores/AppSettingsStore';
+import { AppSettingsConfigType } from '../api/loader/loadAppsettingsConfig';
 
 type TaUpdateType = {
   version?: string;
@@ -24,6 +26,7 @@ export type AuthenticationType = {
 type BaseLoaderData = {
   userConfig: UserConfigType;
   userAccount: UserAccountType;
+  appSettings: AppSettingsConfigType;
   auth: AuthenticationType;
 };
 
@@ -36,7 +39,9 @@ const Base = () => {
   const { setAuth } = useAuthStore();
   const { setUserConfig } = useUserConfigStore();
   const { setUserAccount } = useUserAccountStore();
-  const { userConfig, userAccount, auth } = useLoaderData() as BaseLoaderData;
+  const { setAppSettingsConfig } = useAppSettingsStore();
+
+  const { userConfig, userAccount, appSettings, auth } = useLoaderData() as BaseLoaderData;
 
   const location = useLocation();
 
@@ -51,6 +56,8 @@ const Base = () => {
     setAuth(auth);
     setUserConfig(userConfig);
     setUserAccount(userAccount);
+    setAppSettingsConfig(appSettings);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

frontend/src/pages/ChannelAbout.tsx

@@ -55,7 +55,7 @@ const ChannelAbout = () => {
   const [pageSizeShorts, setPageSizeShorts] = useState<number | null>(null);
   const [pageSizeStreams, setPageSizeStreams] = useState<number | null>(null);
 
-  const channel = channelResponse?.data;
+  const channel = channelResponse;
 
   useEffect(() => {
     (async () => {

frontend/src/pages/ChannelBase.tsx

@@ -1,7 +1,6 @@
 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';
@@ -14,10 +13,7 @@ type ChannelParams = {
   channelId: string;
 };
 
-export type ChannelResponseType = {
+export type ChannelResponseType = ChannelType;
-  data: ChannelType;
-  config: ConfigType;
-};
 
 const ChannelBase = () => {
   const { channelId } = useParams() as ChannelParams;
@@ -28,7 +24,7 @@ const ChannelBase = () => {
   const [channelNav, setChannelNav] = useState<ChannelNavResponseType>();
   const [startNotification, setStartNotification] = useState(false);
 
-  const channel = channelResponse?.data;
+  const channel = channelResponse;
   const { has_streams, has_shorts, has_playlists, has_pending } = channelNav || {};
 
   useEffect(() => {

frontend/src/pages/ChannelVideo.tsx

@@ -42,7 +42,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
   const [videoResponse, setVideoReponse] = useState<VideoListByFilterResponseType>();
   const [videoAggsResponse, setVideoAggsResponse] = useState<ChannelAggsType>();
 
-  const channel = channelResponse?.data;
+  const channel = channelResponse;
   const videoList = videoResponse?.data;
   const pagination = videoResponse?.paginate;
 

frontend/src/pages/Playlist.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Link, useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
 import loadPlaylistById from '../api/loader/loadPlaylistById';
 import { OutletContextType } from './Base';
-import { ConfigType, VideoType } from './Home';
+import { VideoType } from './Home';
 import Filterbar from '../components/Filterbar';
 import { PlaylistEntryType } from './Playlists';
 import loadChannelById from '../api/loader/loadChannelById';
@@ -41,14 +41,10 @@ export type PlaylistType = {
   _score: number;
 };
 
-export type PlaylistResponseType = {
+export type PlaylistResponseType = PlaylistType;
-  data?: PlaylistType;
-  config?: ConfigType;
-};
 
 export type VideoResponseType = {
   data?: VideoType[];
-  config?: ConfigType;
   paginate?: PaginationType;
 };
 
@@ -71,12 +67,12 @@ const Playlist = () => {
   const [channelResponse, setChannelResponse] = useState<ChannelResponseType>();
   const [videoResponse, setVideoResponse] = useState<VideoResponseType>();
 
-  const playlist = playlistResponse?.data;
+  const playlist = playlistResponse;
-  const channel = channelResponse?.data;
+  const channel = channelResponse;
   const videos = videoResponse?.data;
   const pagination = videoResponse?.paginate;
 
-  const palylistEntries = playlistResponse?.data?.playlist_entries;
+  const palylistEntries = playlistResponse?.playlist_entries;
   const videoArchivedCount = Number(palylistEntries?.filter(video => video.downloaded).length);
   const videoInPlaylistCount = pagination?.total_hits;
   const showEmbeddedVideo = videoId !== null;

frontend/src/pages/Playlists.tsx

@@ -7,7 +7,6 @@ import iconListView from '/img/icon-listview.svg';
 
 import { OutletContextType } from './Base';
 import loadPlaylistList from '../api/loader/loadPlaylistList';
-import { ConfigType } from './Home';
 import Pagination, { PaginationType } from '../components/Pagination';
 import PlaylistList from '../components/PlaylistList';
 import { PlaylistType } from './Playlist';
@@ -30,7 +29,6 @@ export type PlaylistEntryType = {
 
 export type PlaylistsResponseType = {
   data?: PlaylistType[];
-  config?: ConfigType;
   paginate?: PaginationType;
 };
 

frontend/src/pages/Video.tsx

@@ -39,6 +39,7 @@ import getApiUrl from '../configuration/getApiUrl';
 import loadVideoNav, { VideoNavResponseType } from '../api/loader/loadVideoNav';
 import useIsAdmin from '../functions/useIsAdmin';
 import ToggleConfig from '../components/ToggleConfig';
+// import { useAppSettingsStore } from '../stores/AppSettingsStore';
 
 const isInPlaylist = (videoId: string, playlist: PlaylistType) => {
   return playlist.playlist_entries.some(entry => {
@@ -100,15 +101,9 @@ export type SimilarVideosResponseType = {
   config: ConfigType;
 };
 
-export type VideoResponseType = {
+export type VideoResponseType = VideoType;
-  data: VideoType;
-  config: ConfigType;
-};
 
-type CommentsResponseType = {
+type CommentsResponseType = CommentsType[];
-  data: CommentsType[];
-  config: ConfigType;
-};
 
 export type VideoCommentsResponseType = {
   data: VideoType;
@@ -120,6 +115,7 @@ const Video = () => {
   const { videoId } = useParams() as VideoParams;
   const navigate = useNavigate();
   const isAdmin = useIsAdmin();
+  // const { appSettingsConfig } = useAppSettingsStore();
 
   const [videoEnded, setVideoEnded] = useState(false);
   const [playlistAutoplay, setPlaylistAutoplay] = useState(
@@ -142,18 +138,24 @@ const Video = () => {
 
   useEffect(() => {
     (async () => {
-      if (refreshVideoList || videoId !== videoResponse?.data?.youtube_id) {
+      if (refreshVideoList || videoId !== videoResponse?.youtube_id) {
         const videoByIdResponse = await loadVideoById(videoId);
         const simmilarVideosResponse = await loadSimmilarVideosById(videoId);
         const customPlaylistsResponse = await loadPlaylistList({ type: 'custom' });
-        const commentsResponse = await loadCommentsbyVideoId(videoId);
         const videoNavResponse = await loadVideoNav(videoId);
 
+        try {
+          const commentsResponse = await loadCommentsbyVideoId(videoId);
+          setCommentsResponse(commentsResponse);
+        } catch (e) {
+          console.log('Comments not found', e);
+        }
+
         setVideoResponse(videoByIdResponse);
         setSimmilarVideos(simmilarVideosResponse);
         setVideoPlaylistNav(videoNavResponse);
         setCustomPlaylistsResponse(customPlaylistsResponse);
-        setCommentsResponse(commentsResponse);
+
         setRefreshVideoList(false);
       }
     })();
@@ -194,18 +196,18 @@ const Video = () => {
     return [];
   }
 
-  const video = videoResponse.data;
+  const video = videoResponse;
-  const watched = videoResponse.data.player.watched;
+  const watched = videoResponse.player.watched;
-  const config = videoResponse.config;
+  // const config = appSettingsConfig;
   const playlistNav = videoPlaylistNav;
-  const sponsorBlock = videoResponse.data.sponsorblock;
+  const sponsorBlock = videoResponse.sponsorblock;
   const customPlaylists = customPlaylistsResponse?.data;
   const starRating = convertStarRating(video?.stats?.average_rating);
-  const comments = commentsResponse?.data;
+  const comments = commentsResponse;
 
   console.log('playlistNav', playlistNav);
 
-  const cast = config.enable_cast;
+  const cast = false; // config.enable_cast;
 
   return (
     <>

frontend/src/stores/AppSettingsStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { AppSettingsConfigType } from '../api/loader/loadAppsettingsConfig';
+
+interface AppSettingsState {
+  appSettingsConfig: AppSettingsConfigType;
+  setAppSettingsConfig: (appSettingsConfig: AppSettingsConfigType) => void;
+}
+
+export const useAppSettingsStore = create<AppSettingsState>(set => ({
+  appSettingsConfig: {
+    subscriptions: {
+      channel_size: null,
+      live_channel_size: null,
+      shorts_channel_size: null,
+      auto_start: false,
+    },
+    downloads: {
+      limit_speed: null,
+      sleep_interval: null,
+      autodelete_days: null,
+      format: null,
+      format_sort: null,
+      add_metadata: false,
+      add_thumbnail: false,
+      subtitle: null,
+      subtitle_source: null,
+      subtitle_index: false,
+      comment_max: null,
+      comment_sort: 'asc',
+      cookie_import: false,
+      potoken: false,
+      throttledratelimit: null,
+      extractor_lang: null,
+      integrate_ryd: false,
+      integrate_sponsorblock: false,
+    },
+    application: {
+      enable_snapshot: false,
+    },
+  },
+  setAppSettingsConfig: appSettingsConfig => set({ appSettingsConfig }),
+}));