Merge pull request #1150 from Stremio/fix/shortcuts-section-button-visibility

Settings: Correct shortcuts menu button visibility

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) => {
             <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.STREAMING })} title={t('SETTINGS_NAV_STREAMING')} data-section={SECTIONS.STREAMING} onClick={onSelect}>
                 { t('SETTINGS_NAV_STREAMING') }
             </Button>
-            <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.SHORTCUTS })} title={t('SETTINGS_NAV_SHORTCUTS')} data-section={SECTIONS.SHORTCUTS} onClick={onSelect}>
+            { !platform.isMobile && <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.SHORTCUTS })} title={t('SETTINGS_NAV_SHORTCUTS')} data-section={SECTIONS.SHORTCUTS} onClick={onSelect}>
                 { t('SETTINGS_NAV_SHORTCUTS') }
-            </Button>
+            </Button> }
 
             <div className={styles['spacing']} />
             <div className={styles['version-info-label']} title={process.env.VERSION}>

src/routes/Settings/Settings.tsx

@@ -41,13 +41,27 @@ const Settings = () => {
 
     const updateSelectedSectionId = useCallback(() => {
         const container = sectionsContainerRef.current;
-        for (const section of sections) {
+        if (!container) return;
-            const sectionContainer = section.ref.current;
+
-            if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) {
+        const availableSections = sections.filter((section) => section.ref.current);
-                setSelectedSectionId(section.id);
+        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<HTMLDivElement>) => {
         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();