refactor: scroll top button

Stremio · Nov 16, 2023 · 7a0525d · 7a0525d
1 parent 2557d60
commit 7a0525d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 35 deletions.
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -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>

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
@@ -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 {