diff --git a/frontend/src/api/loader/loadSponsorblockByVideoId.ts b/frontend/src/api/loader/loadSponsorblockByVideoId.ts deleted file mode 100644 index 66f58d51..00000000 --- a/frontend/src/api/loader/loadSponsorblockByVideoId.ts +++ /dev/null @@ -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; diff --git a/frontend/src/api/loader/loadVideoById.ts b/frontend/src/api/loader/loadVideoById.ts index dcc904a9..4081acef 100644 --- a/frontend/src/api/loader/loadVideoById.ts +++ b/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 => { const apiUrl = getApiUrl(); const response = await fetch(`${apiUrl}/api/video/${youtubeId}/`, { diff --git a/frontend/src/api/loader/loadVideoListByPage.ts b/frontend/src/api/loader/loadVideoListByPage.ts index 40509dbd..edf6cd4b 100644 --- a/frontend/src/api/loader/loadVideoListByPage.ts +++ b/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 => { const apiUrl = getApiUrl(); const searchParams = new URLSearchParams(); diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx index e2c02140..24fecd36 100644 --- a/frontend/src/components/EmbeddableVideoPlayer.tsx +++ b/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(); const [videoProgress, setVideoProgress] = useState(); const [playlists, setPlaylists] = useState(); - const [sponsorblockResponse, setSponsorblockResponse] = useState(); 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) => { diff --git a/frontend/src/pages/ChannelVideo.tsx b/frontend/src/pages/ChannelVideo.tsx index c90e4ba2..815cb9be 100644 --- a/frontend/src/pages/ChannelVideo.tsx +++ b/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(); - const [videoResponse, setVideoReponse] = useState(); + const [videoResponse, setVideoReponse] = useState(); const channel = channelResponse?.data; const videoList = videoResponse?.data; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 8eedef26..5e4fa497 100644 --- a/frontend/src/pages/Home.tsx +++ b/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 loadVideoListByFilter from '../api/loader/loadVideoListByPage'; +import Pagination from '../components/Pagination'; +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(); - const [continueVideoResponse, setContinueVideoResponse] = useState(); + const [videoResponse, setVideoReponse] = useState(); + const [continueVideoResponse, setContinueVideoResponse] = + useState(); const videoList = videoResponse?.data; const pagination = videoResponse?.paginate; diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx index 5bbdb372..5ba480a3 100644 --- a/frontend/src/pages/Video.tsx +++ b/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(); const [videoProgress, setVideoProgress] = useState(); const [videoPlaylistNav, setVideoPlaylistNav] = useState(); - const [sponsorblockResponse, setSponsorblockResponse] = useState(); const [customPlaylistsResponse, setCustomPlaylistsResponse] = useState(); const [commentsResponse, setCommentsResponse] = useState(); @@ -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;