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

refactor: scroll top button

Browse source
This commit is contained in:
kKaskak 2023-11-16 17:43:49 +02:00
parent 2557d60e71
commit 7a0525dd97
2 changed files with 81 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,9 @@ const StreamsList = ({ className, video, ...props }) => {
const { t } = useTranslation();
const { core } = useServices();
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
const streamsContainerRef = React.useRef(null);
const [isScrollable, setIsScrollable] = React.useState(false);
const [showBackToTop, setShowBackToTop] = React.useState(false);
const onAddonSelected = React.useCallback((event) => {
setSelectedAddon(event.value);
}, []);
@ -76,10 +79,33 @@ const StreamsList = ({ className, video, ...props }) => {
onSelect: onAddonSelected
};
}, [streamsByAddon, selectedAddon]);
const streamsContainerRef = React.useRef(null);
const handleScroll = () => {
if (streamsContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = streamsContainerRef.current;
const isScrollable = scrollHeight - clientHeight > 0;
setShowBackToTop(scrollTop > 50);
setIsScrollable(isScrollable);
}
};
React.useEffect(() => {
const container = streamsContainerRef.current;
handleScroll();
if (container) {
container.addEventListener('scroll', handleScroll);
}
return () => {
if (container) {
container.removeEventListener('scroll', handleScroll);
}
};
}, [streamsByAddon, selectedAddon]);
const scrollToTop = () => {
if (streamsContainerRef?.current) {
streamsContainerRef.current.scrollTo(0, 0);
if (streamsContainerRef.current) {
streamsContainerRef.current.scroll({
top: 0,
behavior: 'smooth'
});
}
};
return (
@ -128,6 +154,10 @@ const StreamsList = ({ className, video, ...props }) => {
null
}
</div>
<div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
<Icon className={styles['icon']} name={'chevron-up'} />
<div className={styles['label']}>Back to Top</div>
</div>
<div className={styles['streams-container']} ref={streamsContainerRef}>
{filteredStreams.map((stream, index) => (
<Stream
@ -144,12 +174,9 @@ const StreamsList = ({ className, video, ...props }) => {
/>
))}
{
streamsContainerRef?.current?.scrollHeight > streamsContainerRef?.current?.clientHeight ?
isScrollable && countLoadingAddons === 0 ?
<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>
<hr className={styles['line']} />
<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>
@ -173,7 +200,7 @@ const StreamsList = ({ className, video, ...props }) => {
null
}
{
streamsContainerRef?.current?.scrollHeight <= streamsContainerRef?.current?.clientHeight && countLoadingAddons === 0 ?
!isScrollable && 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>

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

@ -131,38 +131,57 @@
}
}
.line {
flex: none;
margin: 0.5rem auto;
width: 90%;
height: 0.1rem;
background-color: var(--primary-foreground-color);
opacity: 0.2;
}
.to-top-wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0 0.5rem;
cursor: pointer;
max-height: 0rem;
min-height: 0rem;
opacity: 0;
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out;
overflow: hidden;
.icon {
color: var(--primary-foreground-color);
width: 2rem;
height: 2rem;
}
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
&.active {
min-height: 3rem;
max-height: 3rem;
opacity: 0.7;
}
&:hover {
opacity: 1;
}
}
.streams-container {
flex: 1 1 auto;
align-self: stretch;
margin-top: 1rem;
padding: 0 1rem;
overflow-y: auto;
.icon-wrapper {
display: flex;
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;
}
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
&:hover {
opacity: 1;
}
}
}
.install-button-container {