diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js index 307834211..c748feae7 100644 --- 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} /> ))} -
- -
- + { + streamsContainerRef?.current?.scrollHeight > streamsContainerRef?.current?.clientHeight ? + +
+ +
Back to Top
+
+ +
+ : + null + } } @@ -164,6 +172,15 @@ const StreamsList = ({ className, video, ...props }) => { : null } + { + streamsContainerRef?.current?.scrollHeight <= streamsContainerRef?.current?.clientHeight && countLoadingAddons === 0 ? + + : + null + } ); }; diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index c66c4082c..ed0c36348 100644 --- 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; } } }