Refac improve inline embeddable player functionality

frontend/src/components/EmbeddableVideoPlayer.tsx

@@ -27,12 +27,14 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
   const [, setSearchParams] = useSearchParams();
 
   const [refresh, setRefresh] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const [videoResponse, setVideoResponse] = useState<VideoResponseType>();
   const [playlists, setPlaylists] = useState<PlaylistList>();
 
   useEffect(() => {
     (async () => {
+      setLoading(true);
       const videoResponse = await loadVideoById(videoId);
 
       const playlistIds = videoResponse.data.playlist;
@@ -62,6 +64,7 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
       setVideoResponse(videoResponse);
 
       setRefresh(false);
+      setLoading(false);
     })();
   }, [videoId, refresh]);
 
@@ -87,7 +90,14 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
     <>
       <div className="player-wrapper">
         <div className="video-player">
-          <VideoPlayer video={videoResponse} sponsorBlock={sponsorblock} embed={true} />
+          {!loading && (
+            <VideoPlayer
+              video={videoResponse}
+              sponsorBlock={sponsorblock}
+              embed={true}
+              autoplay={true}
+            />
+          )}
 
           <div className="player-title boxed-content">
             <img

frontend/src/components/VideoListItem.tsx

@@ -39,6 +39,8 @@ const VideoListItem = ({
       <a
         onClick={() => {
           setSearchParams({ videoId: video.youtube_id });
+
+          window.scroll({ top: 0, left: 0, behavior: 'smooth' });
         }}
       >
         <div className={`video-thumb-wrap ${viewLayout}`}>

frontend/src/pages/Home.tsx

@@ -171,6 +171,9 @@ const Home = () => {
     <>
       <title>TubeArchivist</title>
       <ScrollToTopOnNavigate />
+
+      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
+
       <div className={`boxed-content ${gridView}`}>
         {continueVideos && continueVideos.length > 0 && (
           <>
@@ -212,8 +215,6 @@ const Home = () => {
         />
       </div>
 
-      {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
-
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${view} ${gridViewGrid}`}>
           {!hasVideos && (

frontend/src/style.css

@@ -515,6 +515,7 @@ video:-webkit-full-screen {
 
 .video-thumb-wrap {
   position: relative;
+  cursor: pointer;
 }
 
 .video-thumb-wrap:hover > .video-play {