diff --git a/src/routes/Settings/Menu/Menu.tsx b/src/routes/Settings/Menu/Menu.tsx
index 33cf41dc0..5bc5208f1 100644
--- a/src/routes/Settings/Menu/Menu.tsx
+++ b/src/routes/Settings/Menu/Menu.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { useServices } from 'stremio/services';
import { Button } from 'stremio/components';
import { SECTIONS } from '../constants';
+import { usePlatform } from 'stremio/common';
import styles from './Menu.less';
type Props = {
@@ -15,6 +16,7 @@ type Props = {
const Menu = ({ selected, streamingServer, onSelect }: Props) => {
const { t } = useTranslation();
const { shell } = useServices();
+ const platform = usePlatform();
const settings = useMemo(() => (
streamingServer?.settings?.type === 'Ready' ?
@@ -35,9 +37,9 @@ const Menu = ({ selected, streamingServer, onSelect }: Props) => {
- }
diff --git a/src/routes/Settings/Settings.tsx b/src/routes/Settings/Settings.tsx
index 727da9e82..2dd3a793a 100644
--- a/src/routes/Settings/Settings.tsx
+++ b/src/routes/Settings/Settings.tsx
@@ -41,13 +41,27 @@ const Settings = () => {
const updateSelectedSectionId = useCallback(() => {
const container = sectionsContainerRef.current;
- for (const section of sections) {
- const sectionContainer = section.ref.current;
- if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) {
- setSelectedSectionId(section.id);
- }
+ if (!container) return;
+
+ const availableSections = sections.filter((section) => section.ref.current);
+ if (!availableSections.length) return;
+
+ const { scrollTop, clientHeight, scrollHeight, offsetTop } = container;
+ const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+
+ if (isAtBottom) {
+ setSelectedSectionId(availableSections[availableSections.length - 1].id);
+ return;
}
- }, []);
+
+ const marker = scrollTop + 50;
+ const activeSection = availableSections.reduce((current, section) => {
+ const sectionTop = section.ref.current!.offsetTop + offsetTop;
+ return sectionTop <= marker ? section : current;
+ }, availableSections[0]);
+
+ setSelectedSectionId(activeSection.id);
+ }, [sections]);
const onMenuSelect = useCallback((event: React.MouseEvent) => {
const section = sections.find((section) => {
@@ -55,11 +69,11 @@ const Settings = () => {
});
const container = sectionsContainerRef.current;
- section && container!.scrollTo({
+ section && container?.scrollTo({
top: section.ref.current!.offsetTop - container!.offsetTop,
behavior: 'smooth'
});
- }, []);
+ }, [sections]);
const onContainerScroll = useCallback(throttle(() => {
updateSelectedSectionId();