feature: scrollTop

Stremio · Nov 15, 2023 · 2557d60 · 2557d60
1 parent f9a2f74
commit 2557d60
Show file tree

Hide file tree

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

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