Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fixes #1078

Browse source
This commit is contained in:
Sagar Prasad Chaulagain 2025-12-01 13:23:09 +05:45
parent 6aef6e1d04
commit 8148a2f8fe
1 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/routes/Settings/Settings.tsx
View file

@ -20,6 +20,7 @@ const Settings = () => {
const profile = useProfile(); const profile = useProfile();
const platform = usePlatform(); const platform = usePlatform();
const streamingServer = useStreamingServer(); const streamingServer = useStreamingServer();
const isScrollingRef = useRef(false);
const sectionsContainerRef = useRef<HTMLDivElement>(null); const sectionsContainerRef = useRef<HTMLDivElement>(null);
const generalSectionRef = useRef<HTMLDivElement>(null); const generalSectionRef = useRef<HTMLDivElement>(null);
@ -37,31 +38,51 @@ const Settings = () => {
const [selectedSectionId, setSelectedSectionId] = useState(SECTIONS.GENERAL); const [selectedSectionId, setSelectedSectionId] = useState(SECTIONS.GENERAL);
const updateSelectedSectionId = useCallback(() => { const updateSelectedSectionId = useCallback(() => {
if (isScrollingRef.current) return;
const container = sectionsContainerRef.current; const container = sectionsContainerRef.current;
if (container!.scrollTop + container!.clientHeight >= container!.scrollHeight - 50) { if (!container) return;
const containerRect = container.getBoundingClientRect();
const tolerance = 20;
if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
setSelectedSectionId(sections[sections.length - 1].id); setSelectedSectionId(sections[sections.length - 1].id);
} else { } else {
const tolerance = 10;
for (let i = sections.length - 1; i >= 0; i--) { for (let i = sections.length - 1; i >= 0; i--) {
if (sections[i].ref.current && sections[i].ref.current!.offsetTop - container!.offsetTop - tolerance <= container!.scrollTop) { const section = sections[i].ref.current;
setSelectedSectionId(sections[i].id); if (section) {
break; const sectionRect = section.getBoundingClientRect();
if (sectionRect.top <= containerRect.top + tolerance) {
setSelectedSectionId(sections[i].id);
break;
}
} }
} }
} }
}, []); }, [sections]);
const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => { const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
const section = sections.find((section) => { const sectionId = event.currentTarget.dataset.section;
return section.id === event.currentTarget.dataset.section; const section = sections.find((s) => s.id === sectionId);
});
const container = sectionsContainerRef.current; const container = sectionsContainerRef.current;
section && container!.scrollTo({
top: section.ref.current!.offsetTop - container!.offsetTop, if (section && section.ref.current && container) {
behavior: 'smooth' isScrollingRef.current = true;
}); setSelectedSectionId(section.id);
}, []);
const top = section.ref.current.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
container.scrollTo({
top,
behavior: 'smooth'
});
setTimeout(() => {
isScrollingRef.current = false;
}, 1000);
}
}, [sections]);
const onContainerScroll = useCallback(throttle(() => { const onContainerScroll = useCallback(throttle(() => {
updateSelectedSectionId(); updateSelectedSectionId();