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) => { +