public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 22:49:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

useLayoutEffect for scrollIntoView

Browse Source
This commit is contained in:
Simon
2025-03-05 22:37:38 +07:00
parent 139f1ff937
commit 13098b5496
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/EmbeddableVideoPlayer.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { VideoResponseType } from '../pages/Video'; import { VideoResponseType } from '../pages/Video';
import VideoPlayer from './VideoPlayer'; import VideoPlayer from './VideoPlayer';
import loadVideoById from '../api/loader/loadVideoById'; import loadVideoById from '../api/loader/loadVideoById';
@@ -26,6 +26,7 @@ type EmbeddableVideoPlayerProps = {
const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => { const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
const inlinePlayerRef = useRef<HTMLDivElement>(null); const inlinePlayerRef = useRef<HTMLDivElement>(null);
const prevVideoId = useRef<string | null>(null);
const { appSettingsConfig } = useAppSettingsStore(); const { appSettingsConfig } = useAppSettingsStore();
const [, setSearchParams] = useSearchParams(); const [, setSearchParams] = useSearchParams();
@@ -65,18 +66,20 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
} }
setVideoResponse(videoResponse); setVideoResponse(videoResponse);
inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' });
setRefresh(false); setRefresh(false);
} }
})(); })();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [videoId, refresh]); }, [videoId, refresh]);
useEffect(() => { useLayoutEffect(() => {
inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' }); 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) {
return <div ref={inlinePlayerRef} className="player-wrapper" />; return <div ref={inlinePlayerRef} className="player-wrapper" />;