public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 22:29:39 +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 VideoPlayer from './VideoPlayer';
import loadVideoById from '../api/loader/loadVideoById';
@@ -26,6 +26,7 @@ type EmbeddableVideoPlayerProps = {
const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
const inlinePlayerRef = useRef<HTMLDivElement>(null);
const prevVideoId = useRef<string | null>(null);
const { appSettingsConfig } = useAppSettingsStore();
const [, setSearchParams] = useSearchParams();
@@ -65,18 +66,20 @@ const EmbeddableVideoPlayer = ({ videoId }: EmbeddableVideoPlayerProps) => {
}
setVideoResponse(videoResponse);
inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' });
setRefresh(false);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [videoId, refresh]);
useEffect(() => {
inlinePlayerRef.current?.scrollIntoView({ block: 'start', inline: 'start' });
}, []);
useLayoutEffect(() => {
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) {
return <div ref={inlinePlayerRef} className="player-wrapper" />;