diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx index 58c8592b..04a5793c 100644 --- a/frontend/src/components/EmbeddableVideoPlayer.tsx +++ b/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(); const [playlists, setPlaylists] = useState(); 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) => { <>
- + {!loading && ( + + )}
{ setSearchParams({ videoId: video.youtube_id }); + + window.scroll({ top: 0, left: 0, behavior: 'smooth' }); }} >
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 51a0c4c8..cf8c082d 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -171,6 +171,9 @@ const Home = () => { <> TubeArchivist + + {showEmbeddedVideo && } +
{continueVideos && continueVideos.length > 0 && ( <> @@ -212,8 +215,6 @@ const Home = () => { />
- {showEmbeddedVideo && } -
{!hasVideos && ( diff --git a/frontend/src/style.css b/frontend/src/style.css index 1621d5ec..781a518a 100644 --- a/frontend/src/style.css +++ b/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 {