Refac remove loadVideoProgressById

frontend/src/api/loader/loadVideoProgressById.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 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;

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<VideoResponseType>();
-  const [videoProgress, setVideoProgress] = useState<VideoProgressType>();
   const [playlists, setPlaylists] = useState<PlaylistList>();
 
   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) => {
     <>
       <div className="player-wrapper">
         <div className="video-player">
-          <VideoPlayer
-            video={videoResponse}
-            videoProgress={videoProgress}
-            sponsorBlock={sponsorblock}
-            embed={true}
-          />
+          <VideoPlayer video={videoResponse} sponsorBlock={sponsorblock} embed={true} />
 
           <div className="player-title boxed-content">
             <img
@@ -123,7 +114,6 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
             {cast && (
               <GoogleCast
                 video={video}
-                videoProgress={videoProgress}
                 setRefresh={() => {
                   setRefresh(true);
                 }}

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(

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,

frontend/src/pages/Home.tsx

@@ -20,6 +20,7 @@ export type PlayerType = {
   duration: number;
   duration_str: string;
   progress: number;
+  position: number;
 };
 
 export type StatsType = {

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<VideoResponseType>();
   const [simmilarVideos, setSimmilarVideos] = useState<SimilarVideosResponseType>();
-  const [videoProgress, setVideoProgress] = useState<VideoProgressType>();
   const [videoPlaylistNav, setVideoPlaylistNav] = useState<VideoNavResponseType[]>();
   const [customPlaylistsResponse, setCustomPlaylistsResponse] = useState<PlaylistsResponseType>();
   const [commentsResponse, setCommentsResponse] = useState<CommentsResponseType>();
@@ -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 && (
         <VideoPlayer
           video={videoResponse}
-          videoProgress={videoProgress}
           sponsorBlock={sponsorBlock}
           autoplay={playlistAutoplay}
           onVideoEnd={() => {
@@ -233,7 +228,6 @@ const Video = () => {
           {cast && (
             <GoogleCast
               video={video}
-              videoProgress={videoProgress}
               setRefresh={() => {
                 setRefreshVideoList(true);
               }}