Refresh and scroll fixes, #build

Changes:
- Fixed timing problem when scrolling the inline player into view
- Fixed refresh issue on player change

frontend/src/components/EmbeddableVideoPlayer.tsx

@@ -21,7 +21,7 @@ type Playlist = {
 type PlaylistList = Playlist[];
 
 type EmbeddableVideoPlayerProps = {
-  videoId: string;
+  videoId: string | null;
 };
 
 const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
@@ -37,6 +37,12 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
 
   useEffect(() => {
     (async () => {
+      if (!videoId) {
+        return;
+      }
+
+      inlinePlayerRef.current?.scrollIntoView();
+
       if (refresh || videoId !== videoResponse?.youtube_id) {
         const videoResponse = await loadVideoById(videoId);
 
@@ -65,20 +71,13 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
         }
 
         setVideoResponse(videoResponse);
-
-        inlinePlayerRef.current?.scrollIntoView();
-
         setRefresh(false);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoId, refresh]);
 
-  useEffect(() => {
-    inlinePlayerRef.current?.scrollIntoView();
-  }, []);
-
-  if (videoResponse === undefined) {
+  if (videoResponse === undefined || videoId === null) {
     return <div ref={inlinePlayerRef} className="player-wrapper" />;
   }
 

frontend/src/components/VideoPlayer.tsx

@@ -123,6 +123,7 @@ const VideoPlayer = ({
   const [searchParams] = useSearchParams();
   const searchParamVideoProgress = searchParams.get('t');
 
+  const volumeFromStorage = Number(localStorage.getItem('playerVolume') ?? 1);
   const playBackSpeedFromStorage = Number(localStorage.getItem('playerSpeed') || 1);
   const playBackSpeedIndex =
     VIDEO_PLAYBACK_SPEEDS.indexOf(playBackSpeedFromStorage) !== -1
@@ -334,7 +335,7 @@ const VideoPlayer = ({
               localStorage.setItem('playerSpeed', videoTag.currentTarget.playbackRate.toString());
             }}
             onLoadStart={(videoTag: VideoTag) => {
-              videoTag.currentTarget.volume = Number(localStorage.getItem('playerVolume') ?? 1);
+              videoTag.currentTarget.volume = volumeFromStorage;
               videoTag.currentTarget.playbackRate = Number(playBackSpeedFromStorage ?? 1);
             }}
             onTimeUpdate={handleTimeUpdate(

frontend/src/pages/ChannelVideo.tsx

@@ -47,7 +47,6 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
   const pagination = videoResponse?.paginate;
 
   const hasVideos = videoResponse?.data?.length !== 0;
-  const showEmbeddedVideo = videoId !== null;
 
   const view = userConfig.view_style_home;
   const isGridView = view === ViewStyles.grid;
@@ -81,7 +80,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
     channelId,
     pagination?.current_page,
     videoType,
-    showEmbeddedVideo,
+    videoId,
   ]);
 
   if (!channel) {
@@ -152,10 +151,13 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
           </div>
         </div>
       </div>
+
       <div className={`boxed-content ${gridView}`}>
         <Filterbar hideToggleText={'Hide watched videos:'} viewStyleName={ViewStyleNames.home} />
       </div>
-      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
+
+      <EmbeddableVideoPlayer videoId={videoId} />
+
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${view} ${gridViewGrid}`}>
           {!hasVideos && (

frontend/src/pages/Home.tsx

@@ -119,7 +119,6 @@ const Home = () => {
   const continueVideos = continueVideoResponse?.data;
 
   const hasVideos = videoResponse?.data?.length !== 0;
-  const showEmbeddedVideo = videoId !== null;
 
   const isGridView = userConfig.view_style_home === ViewStyles.grid;
   const gridView = isGridView ? `boxed-${userConfig.grid_items}` : '';
@@ -153,7 +152,7 @@ const Home = () => {
     userConfig.hide_watched,
     currentPage,
     pagination?.current_page,
-    showEmbeddedVideo,
+    videoId,
   ]);
 
   return (
@@ -161,7 +160,7 @@ const Home = () => {
       <title>TubeArchivist</title>
       <ScrollToTopOnNavigate />
 
-      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
+      <EmbeddableVideoPlayer videoId={videoId} />
 
       <div className={`boxed-content ${gridView}`}>
         {continueVideos && continueVideos.length > 0 && (

frontend/src/pages/Login.tsx

@@ -28,7 +28,7 @@ const Login = () => {
       navigate(Routes.Home);
     } else {
       const data = await loginResponse.json();
-      setErrorMessage(data?.message || 'Unknown Error');
+      setErrorMessage(data?.error || 'Unknown Error');
       navigate(Routes.Login);
     }
   };

frontend/src/pages/Playlist.tsx

@@ -56,7 +56,6 @@ const Playlist = () => {
   const palylistEntries = playlistResponse?.playlist_entries;
   const videoArchivedCount = Number(palylistEntries?.filter(video => video.downloaded).length);
   const videoInPlaylistCount = pagination?.total_hits;
-  const showEmbeddedVideo = videoId !== null;
 
   const view = userConfig.view_style_home;
   const gridItems = userConfig.grid_items;
@@ -93,7 +92,7 @@ const Playlist = () => {
     refresh,
     currentPage,
     pagination?.current_page,
-    showEmbeddedVideo,
+    videoId,
   ]);
 
   if (!playlistId || !playlist) {
@@ -301,7 +300,7 @@ const Playlist = () => {
         />
       </div>
 
-      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
+      <EmbeddableVideoPlayer videoId={videoId} />
 
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${view} ${gridViewGrid}`}>

frontend/src/pages/Search.tsx

@@ -56,7 +56,6 @@ const Search = () => {
   const playlistList = searchResults?.results.playlist_results;
   const fulltextList = searchResults?.results.fulltext_results;
   const queryType = searchResults?.queryType;
-  const showEmbeddedVideo = videoId !== null;
 
   const hasSearchQuery = searchTerm.length > 0;
   const hasVideos = Number(videoList?.length) > 0;
@@ -90,7 +89,7 @@ const Search = () => {
     } else {
       setSearchResults(EmptySearchResponse);
     }
-  }, [debouncedSearchTerm, refresh, showEmbeddedVideo]);
+  }, [debouncedSearchTerm, refresh, videoId]);
 
   const fetchResults = async (searchQuery: string) => {
     const searchResults = await loadSearch(searchQuery);
@@ -102,7 +101,9 @@ const Search = () => {
   return (
     <>
       <title>TubeArchivist</title>
-      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
+
+      <EmbeddableVideoPlayer videoId={videoId} />
+
       <div className={`boxed-content ${gridView}`}>
         <div className="title-bar">
           <h1>Search your Archive</h1>