Fix EmbeddableVideoPlayer scrollIntoView v4

frontend/src/components/EmbeddableVideoPlayer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { VideoResponseType } from '../pages/Video';
 import VideoPlayer from './VideoPlayer';
 import loadVideoById from '../api/loader/loadVideoById';
@@ -21,12 +21,11 @@ type Playlist = {
 type PlaylistList = Playlist[];
 
 type EmbeddableVideoPlayerProps = {
-  videoId: string;
+  videoId: string | null;
 };
 
 const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const inlinePlayerRef = useRef<HTMLDivElement>(null);
-  const prevVideoId = useRef<string | null>(null);
   const { appSettingsConfig } = useAppSettingsStore();
 
   const [, setSearchParams] = useSearchParams();
@@ -38,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);
 
@@ -72,16 +77,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoId, refresh]);
 
-  useLayoutEffect(() => {
-    if (videoId !== prevVideoId.current) {
-      setTimeout(() => {
-        inlinePlayerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }, 0);
-    }
-    prevVideoId.current = videoId; // Update the previous video ID
-  }, [videoId]);
-
-  if (videoResponse === undefined) {
+  if (videoResponse === undefined || videoId === null) {
     return <div ref={inlinePlayerRef} className="player-wrapper" />;
   }
 

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,6 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
     channelId,
     pagination?.current_page,
     videoType,
-    showEmbeddedVideo,
   ]);
 
   if (!channel) {
@@ -152,10 +150,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,6 @@ const Home = () => {
     userConfig.hide_watched,
     currentPage,
     pagination?.current_page,
-    showEmbeddedVideo,
   ]);
 
   return (
@@ -161,7 +159,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/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;
@@ -87,14 +86,7 @@ const Playlist = () => {
       setRefresh(false);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    playlistId,
-    userConfig.hide_watched,
-    refresh,
-    currentPage,
-    pagination?.current_page,
-    showEmbeddedVideo,
-  ]);
+  }, [playlistId, userConfig.hide_watched, refresh, currentPage, pagination?.current_page]);
 
   if (!playlistId || !playlist) {
     return `Playlist ${playlistId} not found!`;
@@ -301,7 +293,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]);
 
   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>