Refac move sponsorblock into video endpoint (#787)

frontend/src/api/loader/loadSponsorblockByVideoId.ts

@@ -1,23 +0,0 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
-
-const loadSponsorblockByVideoId = async (youtubeId: string) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/sponsor/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videos = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadSponsorblockByVideoId', videos);
-  }
-
-  return videos;
-};
-
-export default loadSponsorblockByVideoId;

frontend/src/api/loader/loadVideoById.ts

@@ -2,8 +2,9 @@ import defaultHeaders from '../../configuration/defaultHeaders';
 import getApiUrl from '../../configuration/getApiUrl';
 import getFetchCredentials from '../../configuration/getFetchCredentials';
 import isDevEnvironment from '../../functions/isDevEnvironment';
+import { VideoResponseType } from '../../pages/Video';
 
-const loadVideoById = async (youtubeId: string) => {
+const loadVideoById = async (youtubeId: string): Promise<VideoResponseType> => {
   const apiUrl = getApiUrl();
 
   const response = await fetch(`${apiUrl}/api/video/${youtubeId}/`, {

frontend/src/api/loader/loadVideoListByPage.ts

@@ -2,7 +2,14 @@ import defaultHeaders from '../../configuration/defaultHeaders';
 import getApiUrl from '../../configuration/getApiUrl';
 import getFetchCredentials from '../../configuration/getFetchCredentials';
 import isDevEnvironment from '../../functions/isDevEnvironment';
-import { SortByType, SortOrderType } from '../../pages/Home';
+import { ConfigType, SortByType, SortOrderType, VideoType } from '../../pages/Home';
+import { PaginationType } from '../../components/Pagination';
+
+export type VideoListByFilterResponseType = {
+  data?: VideoType[];
+  config?: ConfigType;
+  paginate?: PaginationType;
+};
 
 type WatchTypes = 'watched' | 'unwatched' | 'continue';
 type VideoTypes = 'videos' | 'streams' | 'shorts';
@@ -17,7 +24,9 @@ type FilterType = {
   type?: VideoTypes;
 };
 
-const loadVideoListByFilter = async (filter: FilterType) => {
+const loadVideoListByFilter = async (
+  filter: FilterType,
+): Promise<VideoListByFilterResponseType> => {
   const apiUrl = getApiUrl();
 
   const searchParams = new URLSearchParams();

frontend/src/components/EmbeddableVideoPlayer.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
-import { SponsorBlockType, VideoResponseType } from '../pages/Video';
+import { 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';
@@ -33,18 +32,16 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const [videoResponse, setVideoResponse] = useState<VideoResponseType>();
   const [videoProgress, setVideoProgress] = useState<VideoProgressType>();
   const [playlists, setPlaylists] = useState<PlaylistList>();
-  const [sponsorblockResponse, setSponsorblockResponse] = useState<SponsorBlockType>();
 
   useEffect(() => {
     (async () => {
       const videoResponse = await loadVideoById(videoId);
       const videoProgress = await loadVideoProgressById(videoId);
-      const sponsorblockReponse = await loadSponsorblockByVideoId(videoId);
 
       const playlistIds = videoResponse.data.playlist;
       if (playlistIds !== undefined) {
         const playlists = await Promise.all(
-          playlistIds.map(async (playlistid: string) => {
+          playlistIds.map(async playlistid => {
             const playlistResponse = await loadPlaylistById(playlistid);
 
             return playlistResponse.data;
@@ -67,7 +64,6 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
 
       setVideoResponse(videoResponse);
       setVideoProgress(videoProgress);
-      setSponsorblockResponse(sponsorblockReponse);
 
       setRefresh(false);
     })();
@@ -82,6 +78,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const channelId = video.channel.channel_id;
   const channelName = video.channel.channel_name;
   const watched = video.player.watched;
+  const sponsorblock = video.sponsorblock;
   const views = formatNumbers(video.stats.view_count);
   const hasLikes = video.stats.like_count;
   const likes = formatNumbers(video.stats.like_count);
@@ -97,7 +94,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
           <VideoPlayer
             video={videoResponse}
             videoProgress={videoProgress}
-            sponsorBlock={sponsorblockResponse}
+            sponsorBlock={sponsorblock}
             embed={true}
           />
 

frontend/src/pages/ChannelVideo.tsx

@@ -6,7 +6,7 @@ import {
   useParams,
   useSearchParams,
 } from 'react-router-dom';
-import { SortByType, SortOrderType, VideoResponseType, ViewLayoutType } from './Home';
+import { SortByType, SortOrderType, ViewLayoutType } from './Home';
 import { OutletContextType } from './Base';
 import { UserMeType } from '../api/actions/updateUserConfig';
 import VideoList from '../components/VideoList';
@@ -22,7 +22,9 @@ import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
 import updateWatchedState from '../api/actions/updateWatchedState';
 import { Helmet } from 'react-helmet';
 import Button from '../components/Button';
-import loadVideoListByFilter from '../api/loader/loadVideoListByPage';
+import loadVideoListByFilter, {
+  VideoListByFilterResponseType,
+} from '../api/loader/loadVideoListByPage';
 
 type ChannelParams = {
   channelId: string;
@@ -49,7 +51,7 @@ const ChannelVideo = () => {
   const [refresh, setRefresh] = useState(false);
 
   const [channelResponse, setChannelResponse] = useState<ChannelResponseType>();
-  const [videoResponse, setVideoReponse] = useState<VideoResponseType>();
+  const [videoResponse, setVideoReponse] = useState<VideoListByFilterResponseType>();
 
   const channel = channelResponse?.data;
   const videoList = videoResponse?.data;

frontend/src/pages/Home.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Link, useLoaderData, useOutletContext, useSearchParams } from 'react-router-dom';
 import Routes from '../configuration/routes/RouteList';
-import Pagination, { PaginationType } from '../components/Pagination';
+import Pagination from '../components/Pagination';
-import loadVideoListByFilter from '../api/loader/loadVideoListByPage';
+import loadVideoListByFilter, {
+  VideoListByFilterResponseType,
+} from '../api/loader/loadVideoListByPage';
 import { UserMeType } from '../api/actions/updateUserConfig';
 import VideoList from '../components/VideoList';
 import { ChannelType } from './Channels';
@@ -12,6 +14,7 @@ import { ViewStyleNames, ViewStyles } from '../configuration/constants/ViewStyle
 import ScrollToTopOnNavigate from '../components/ScrollToTop';
 import EmbeddableVideoPlayer from '../components/EmbeddableVideoPlayer';
 import { Helmet } from 'react-helmet';
+import { SponsorBlockType } from './Video';
 
 export type PlayerType = {
   watched: boolean;
@@ -56,6 +59,8 @@ export type VideoType = {
   media_url: string;
   player: PlayerType;
   published: string;
+  sponsorblock?: SponsorBlockType;
+  playlist?: string[];
   stats: StatsType;
   streams: StreamType[];
   subtitles: Subtitles[];
@@ -93,18 +98,6 @@ export type ConfigType = {
   downloads: DownloadsType;
 };
 
-export type VideoResponseType = {
-  data?: VideoType[];
-  config?: ConfigType;
-  paginate?: PaginationType;
-};
-
-type ContinueVidsType = {
-  data?: VideoType[];
-  config?: ConfigType;
-  paginate?: PaginationType;
-};
-
 type HomeLoaderDataType = {
   userConfig: UserMeType;
 };
@@ -129,8 +122,9 @@ const Home = () => {
   const [showHidden, setShowHidden] = useState(false);
   const [refreshVideoList, setRefreshVideoList] = useState(false);
 
-  const [videoResponse, setVideoReponse] = useState<VideoResponseType>();
+  const [videoResponse, setVideoReponse] = useState<VideoListByFilterResponseType>();
-  const [continueVideoResponse, setContinueVideoResponse] = useState<ContinueVidsType>();
+  const [continueVideoResponse, setContinueVideoResponse] =
+    useState<VideoListByFilterResponseType>();
 
   const videoList = videoResponse?.data;
   const pagination = videoResponse?.paginate;

frontend/src/pages/Video.tsx

@@ -25,7 +25,6 @@ import capitalizeFirstLetter from '../functions/capitalizeFirstLetter';
 import formatDate from '../functions/formatDates';
 import formatNumbers from '../functions/formatNumbers';
 import queueReindex from '../api/actions/queueReindex';
-import loadSponsorblockByVideoId from '../api/loader/loadSponsorblockByVideoId';
 import GoogleCast from '../components/GoogleCast';
 import WatchedCheckBox from '../components/WatchedCheckBox';
 import convertStarRating from '../functions/convertStarRating';
@@ -105,7 +104,6 @@ export type SimilarVideosResponseType = {
 export type VideoResponseType = {
   data: VideoType;
   config: ConfigType;
-  playlist_nav: PlaylistNavType;
 };
 
 type CommentsResponseType = {
@@ -134,7 +132,6 @@ const Video = () => {
   const [simmilarVideos, setSimmilarVideos] = useState<SimilarVideosResponseType>();
   const [videoProgress, setVideoProgress] = useState<VideoProgressType>();
   const [videoPlaylistNav, setVideoPlaylistNav] = useState<VideoNavResponseType[]>();
-  const [sponsorblockResponse, setSponsorblockResponse] = useState<SponsorBlockType>();
   const [customPlaylistsResponse, setCustomPlaylistsResponse] = useState<PlaylistsResponseType>();
   const [commentsResponse, setCommentsResponse] = useState<CommentsResponseType>();
 
@@ -143,7 +140,6 @@ const Video = () => {
       const videoResponse = await loadVideoById(videoId);
       const simmilarVideosResponse = await loadSimmilarVideosById(videoId);
       const videoProgressResponse = await loadVideoProgressById(videoId);
-      // const sponsorblockReponse = await loadSponsorblockByVideoId(videoId);
       const customPlaylistsResponse = await loadPlaylistList({ type: 'custom' });
       const commentsResponse = await loadCommentsbyVideoId(videoId);
       const videoNavResponse = await loadVideoNav(videoId);
@@ -151,7 +147,6 @@ const Video = () => {
       setVideoResponse(videoResponse);
       setSimmilarVideos(simmilarVideosResponse);
       setVideoProgress(videoProgressResponse);
-      // setSponsorblockResponse(sponsorblockReponse);
       setVideoPlaylistNav(videoNavResponse);
       setCustomPlaylistsResponse(customPlaylistsResponse);
       setCommentsResponse(commentsResponse);
@@ -167,7 +162,7 @@ const Video = () => {
   const watched = videoResponse.data.player.watched;
   const config = videoResponse.config;
   const playlistNav = videoPlaylistNav;
-  const sponsorBlock = sponsorblockResponse;
+  const sponsorBlock = videoResponse.data.sponsorblock;
   const customPlaylists = customPlaylistsResponse?.data;
   const starRating = convertStarRating(video?.stats?.average_rating);
   const comments = commentsResponse?.data;