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 ?
+
+
+
+
+ :
+ 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;
}
}
}