Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature: scrollTop

Browse source
This commit is contained in:
kKaskak 2023-11-15 16:16:26 +02:00
parent f9a2f743c7
commit 2557d60e71
2 changed files with 38 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -78,7 +78,7 @@ const StreamsList = ({ className, video, ...props }) => {
}, [streamsByAddon, selectedAddon]);
const streamsContainerRef = React.useRef(null);
const scrollToTop = () => {
if (streamsContainerRef.current) {
if (streamsContainerRef?.current) {
streamsContainerRef.current.scrollTo(0, 0);
}
};
@ -143,13 +143,21 @@ const StreamsList = ({ className, video, ...props }) => {
onClick={stream.onClick}
/>
))}
<div className={styles['icon-wrapper']} onClick={scrollToTop}>
<Icon className={styles['icon']} name={'chevron-up'} />
</div>
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
</Button>
{
streamsContainerRef?.current?.scrollHeight > streamsContainerRef?.current?.clientHeight ?
<React.Fragment>
<div className={styles['icon-wrapper']} onClick={scrollToTop}>
<Icon className={styles['icon']} name={'chevron-up'} />
<div className={styles['label']}>Back to Top</div>
</div>
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
</Button>
</React.Fragment>
:
null
}
</div>
</React.Fragment>
}
@ -164,6 +172,15 @@ const StreamsList = ({ className, video, ...props }) => {
:
null
}
{
streamsContainerRef?.current?.scrollHeight <= streamsContainerRef?.current?.clientHeight && countLoadingAddons === 0 ?
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
</Button>
:
null
}
</div>
);
};

14
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -143,12 +143,24 @@
width: 100%;
justify-content: center;
align-items: center;
gap: 0 0.5rem;
opacity: 0.7;
transition: opacity 0.1s ease-in-out;
cursor: pointer;
.icon {
color: var(--primary-foreground-color);
width: 2rem;
height: 2rem;
cursor: pointer;
}
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
&:hover {
opacity: 1;
}
}
}