public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 21:29:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refac move sponsorblock into video endpoint (#787)

Browse Source
This commit is contained in:
Merlin
2024-08-23 18:42:13 +02:00
committed by GitHub
parent 6d27b69799
commit 37389e91f5
7 changed files with 33 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/api/loader/loadSponsorblockByVideoId.ts
View File

@@ -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;

3
frontend/src/api/loader/loadVideoById.ts
View File

@@ -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}/`, {

13
frontend/src/api/loader/loadVideoListByPage.ts
View File

@@ -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();

11
frontend/src/components/EmbeddableVideoPlayer.tsx
View File

@@ -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}
/>

8
frontend/src/pages/ChannelVideo.tsx
View File

@@ -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;

26
frontend/src/pages/Home.tsx
View File

@@ -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<VideoResponseType>();
const [continueVideoResponse, setContinueVideoResponse] = useState<ContinueVidsType>();
const [videoResponse, setVideoReponse] = useState<VideoListByFilterResponseType>();
const [continueVideoResponse, setContinueVideoResponse] =
useState<VideoListByFilterResponseType>();
const videoList = videoResponse?.data;
const pagination = videoResponse?.paginate;

7
frontend/src/pages/Video.tsx
View File

@@ -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;