diff --git a/frontend/src/components/EmbeddableVideoPlayer.tsx b/frontend/src/components/EmbeddableVideoPlayer.tsx index 4bab055d..d3be212d 100644 --- a/frontend/src/components/EmbeddableVideoPlayer.tsx +++ b/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
; } diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx index 8c0b609d..a249c1c5 100644 --- a/frontend/src/components/VideoPlayer.tsx +++ b/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( diff --git a/frontend/src/pages/ChannelVideo.tsx b/frontend/src/pages/ChannelVideo.tsx index 39141e99..2533bebe 100644 --- a/frontend/src/pages/ChannelVideo.tsx +++ b/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) => {
+
- {showEmbeddedVideo && } + + +
{!hasVideos && ( diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 14e94bca..446e9ab8 100644 --- a/frontend/src/pages/Home.tsx +++ b/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 = () => { TubeArchivist - {showEmbeddedVideo && } +
{continueVideos && continueVideos.length > 0 && ( diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index e74b6f83..0b556913 100644 --- a/frontend/src/pages/Login.tsx +++ b/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); } }; diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx index b82dfecb..38f4079e 100644 --- a/frontend/src/pages/Playlist.tsx +++ b/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 = () => { />
- {showEmbeddedVideo && } +
diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx index b391ee18..111ca82e 100644 --- a/frontend/src/pages/Search.tsx +++ b/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 ( <> TubeArchivist - {showEmbeddedVideo && } + + +

Search your Archive