Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feature: loading addons message added

Browse source
This commit is contained in:
kKaskak 2023-11-09 14:38:22 +02:00
parent db3d962798
commit b2a8a19f28
2 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,6 @@ const { Button, Image, Multiselect } = require('stremio/common');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
const styles = require('./styles');
const ALL_ADDONS_KEY = 'ALL';
const StreamsList = ({ className, video, ...props }) => {
@ -22,6 +21,10 @@ const StreamsList = ({ className, video, ...props }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
const countLoadingStreams = () => {
return props.streams.filter((stream) => stream.content.type === 'Loading').length;
};
const loadingAddonsCount = countLoadingStreams();
const streamsByAddon = React.useMemo(() => {
return props.streams
.filter((streams) => streams.content.type === 'Ready')
@ -95,6 +98,17 @@ const StreamsList = ({ className, video, ...props }) => {
</div>
:
<React.Fragment>
{
loadingAddonsCount > 0 ?
<div className={styles['addons-loading-container']}>
<div className={styles['addons-loading']}>
{loadingAddonsCount} {t('MOBILE_ADDONS_LOADING')}
</div>
<span className={styles['addons-loading-bar']}></span>
</div>
:
null
}
<div className={styles['select-choices-wrapper']}>
{
video ?
@ -148,7 +162,7 @@ const StreamsList = ({ className, video, ...props }) => {
StreamsList.propTypes = {
className: PropTypes.string,
streams: PropTypes.arrayOf(PropTypes.object).isRequired,
video: PropTypes.object
video: PropTypes.object,
};
module.exports = StreamsList;

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

@ -41,6 +41,28 @@
}
}
.addons-loading-container {
display: flex;
z-index: 1;
overflow: visible;
margin: 2em 1em 0 1em;
gap: 1em;
flex-direction: column;
justify-content: center;
align-items: center;
.addons-loading {
color: var(--primary-foreground-color);
font-size: 1rem;
}
.addons-loading-bar {
width: 90%;
height: 0.3em;
border-radius: var(--border-radius);
background-color: var(--primary-accent-color);
}
}
.select-choices-wrapper {
display: flex;
align-items: center;