Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1150 from Stremio/fix/shortcuts-section-button-visibility
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
Settings: Correct shortcuts menu button visibility
This commit is contained in:
Timothy Z. 2026-03-11 18:01:09 +02:00 committed by GitHub
commit c3f67454ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/Settings/Menu/Menu.tsx
View file

@ -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}>

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

@ -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<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();