diff --git a/frontend/src/api/loader/loadVideoProgressById.ts b/frontend/src/api/loader/loadVideoProgressById.ts deleted file mode 100644 index a6774cc9..00000000 --- a/frontend/src/api/loader/loadVideoProgressById.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 loadVideoProgressById = async (youtubeId: string) => { - const apiUrl = getApiUrl(); - - const response = await fetch(`${apiUrl}/api/video/${youtubeId}/progress/`, { - headers: defaultHeaders, - credentials: getFetchCredentials(), - }); - - const videoProgress = await response.json(); - - if (isDevEnvironment()) { - console.log('loadVideoProgressById', videoProgress); - } - - return videoProgress; -}; - -export default loadVideoProgressById; diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx index cd6a8341..58c8592b 100644 --- a/frontend/src/components/EmbeddableVideoPlayer.tsx +++ b/frontend/src/components/EmbeddableVideoPlayer.tsx @@ -1,8 +1,7 @@ import { useEffect, useState } from 'react'; import { VideoResponseType } from '../pages/Video'; -import VideoPlayer, { VideoProgressType } from './VideoPlayer'; +import VideoPlayer from './VideoPlayer'; import loadVideoById from '../api/loader/loadVideoById'; -import loadVideoProgressById from '../api/loader/loadVideoProgressById'; import iconClose from '/img/icon-close.svg'; import iconEye from '/img/icon-eye.svg'; import iconThumb from '/img/icon-thumb.svg'; @@ -30,13 +29,11 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { const [refresh, setRefresh] = useState(false); const [videoResponse, setVideoResponse] = useState(); - const [videoProgress, setVideoProgress] = useState(); const [playlists, setPlaylists] = useState(); useEffect(() => { (async () => { const videoResponse = await loadVideoById(videoId); - const videoProgress = await loadVideoProgressById(videoId); const playlistIds = videoResponse.data.playlist; if (playlistIds !== undefined) { @@ -63,7 +60,6 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { } setVideoResponse(videoResponse); - setVideoProgress(videoProgress); setRefresh(false); })(); @@ -91,12 +87,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { <>
- +
{ {cast && ( { setRefresh(true); }} diff --git a/frontend/src/components/GoogleCast.tsx b/frontend/src/components/GoogleCast.tsx index a22c1104..8d7618dc 100644 --- a/frontend/src/components/GoogleCast.tsx +++ b/frontend/src/components/GoogleCast.tsx @@ -3,7 +3,6 @@ import { VideoType } from '../pages/Home'; import updateWatchedState from '../api/actions/updateWatchedState'; import updateVideoProgressById from '../api/actions/updateVideoProgressById'; import watchedThreshold from '../functions/watchedThreshold'; -import { VideoProgressType } from './VideoPlayer'; const getURL = () => { return window.location.origin; @@ -93,11 +92,10 @@ async function castVideoPaused( type GoogleCastProps = { video?: VideoType; - videoProgress?: VideoProgressType; setRefresh?: () => void; }; -const GoogleCast = ({ video, videoProgress, setRefresh }: GoogleCastProps) => { +const GoogleCast = ({ video, setRefresh }: GoogleCastProps) => { const [isConnected, setIsConnected] = useState(false); const setup = useCallback(() => { @@ -174,7 +172,7 @@ const GoogleCast = ({ video, videoProgress, setRefresh }: GoogleCastProps) => { 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(videoProgress?.position); // Set video start position based on the browser video position + 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( diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx index d81552e6..580d3b36 100644 --- a/frontend/src/components/VideoPlayer.tsx +++ b/frontend/src/components/VideoPlayer.tsx @@ -99,15 +99,8 @@ const handleTimeUpdate = } }; -export type VideoProgressType = { - youtube_id: string; - user_id: number; - position: number; -}; - type VideoPlayerProps = { video: VideoResponseType; - videoProgress?: VideoProgressType; sponsorBlock?: SponsorBlockType; embed?: boolean; autoplay?: boolean; @@ -116,7 +109,6 @@ type VideoPlayerProps = { const VideoPlayer = ({ video, - videoProgress, sponsorBlock, embed, autoplay = false, @@ -134,7 +126,8 @@ const VideoPlayer = ({ const duration = video.data.player.duration; const videoSubtitles = video.data.subtitles; - let videoSrcProgress = Number(videoProgress?.position) > 0 ? Number(videoProgress?.position) : ''; + let videoSrcProgress = + Number(video.data.player?.position) > 0 ? Number(video.data.player?.position) : ''; if (searchParamVideoProgress !== null) { videoSrcProgress = searchParamVideoProgress; @@ -178,9 +171,10 @@ const VideoPlayer = ({ localStorage.setItem('playerSpeed', videoTag.currentTarget.playbackRate.toString()); }} onLoadStart={(videoTag: VideoTag) => { - videoTag.currentTarget.volume = Number(localStorage.getItem('playerVolume') ?? 1) - videoTag.currentTarget.playbackRate = - Number(localStorage.getItem('playerSpeed') ?? 1); + videoTag.currentTarget.volume = Number(localStorage.getItem('playerVolume') ?? 1); + videoTag.currentTarget.playbackRate = Number( + localStorage.getItem('playerSpeed') ?? 1, + ); }} onTimeUpdate={handleTimeUpdate( videoId, diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 79d7d718..51a0c4c8 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -20,6 +20,7 @@ export type PlayerType = { duration: number; duration_str: string; progress: number; + position: number; }; export type StatsType = { diff --git a/frontend/src/pages/Video.tsx b/frontend/src/pages/Video.tsx index 5f671572..c8c2850b 100644 --- a/frontend/src/pages/Video.tsx +++ b/frontend/src/pages/Video.tsx @@ -2,7 +2,7 @@ import { Link, useNavigate, useOutletContext, useParams } from 'react-router-dom import loadVideoById from '../api/loader/loadVideoById'; import { Fragment, useEffect, useState } from 'react'; import { ConfigType, VideoType } from './Home'; -import VideoPlayer, { VideoProgressType } from '../components/VideoPlayer'; +import VideoPlayer from '../components/VideoPlayer'; import iconEye from '/img/icon-eye.svg'; import iconThumb from '/img/icon-thumb.svg'; import iconStarFull from '/img/icon-star-full.svg'; @@ -18,7 +18,6 @@ import VideoList from '../components/VideoList'; import updateWatchedState from '../api/actions/updateWatchedState'; import humanFileSize from '../functions/humanFileSize'; import ScrollToTopOnNavigate from '../components/ScrollToTop'; -import loadVideoProgressById from '../api/loader/loadVideoProgressById'; import ChannelOverview from '../components/ChannelOverview'; import deleteVideo from '../api/actions/deleteVideo'; import capitalizeFirstLetter from '../functions/capitalizeFirstLetter'; @@ -137,7 +136,6 @@ const Video = () => { const [videoResponse, setVideoResponse] = useState(); const [simmilarVideos, setSimmilarVideos] = useState(); - const [videoProgress, setVideoProgress] = useState(); const [videoPlaylistNav, setVideoPlaylistNav] = useState(); const [customPlaylistsResponse, setCustomPlaylistsResponse] = useState(); const [commentsResponse, setCommentsResponse] = useState(); @@ -148,14 +146,12 @@ const Video = () => { const videoResponse = await loadVideoById(videoId); const simmilarVideosResponse = await loadSimmilarVideosById(videoId); - const videoProgressResponse = await loadVideoProgressById(videoId); const customPlaylistsResponse = await loadPlaylistList({ type: 'custom' }); const commentsResponse = await loadCommentsbyVideoId(videoId); const videoNavResponse = await loadVideoNav(videoId); setVideoResponse(videoResponse); setSimmilarVideos(simmilarVideosResponse); - setVideoProgress(videoProgressResponse); setVideoPlaylistNav(videoNavResponse); setCustomPlaylistsResponse(customPlaylistsResponse); setCommentsResponse(commentsResponse); @@ -219,7 +215,6 @@ const Video = () => { {!loading && ( { @@ -233,7 +228,6 @@ const Video = () => { {cast && ( { setRefreshVideoList(true); }}