Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 02:06:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(StreamList): install addons btn

Browse source
This commit is contained in:
Timothy Z. 2025-01-13 14:07:54 +02:00
parent 5700c3ab6e
commit 8873435fd9
3 changed files with 24 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ const { Button, Image, Multiselect } = require('stremio/components');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
const styles = require('./styles');
const { usePlatform } = require('stremio/common');
const { usePlatform, useProfile } = require('stremio/common');
const ALL_ADDONS_KEY = 'ALL';
@ -17,17 +17,21 @@ const StreamsList = ({ className, video, ...props }) => {
const { t } = useTranslation();
const { core } = useServices();
const platform = usePlatform();
const profile = useProfile();
const streamsContainerRef = React.useRef(null);
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
const onAddonSelected = React.useCallback((event) => {
streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
setSelectedAddon(event.value);
}, [platform]);
const showInstallAddonsButton = React.useMemo(() => {
return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true;
}, [profile]);
const backButtonOnClick = React.useCallback(() => {
if (video.deepLinks && typeof video.deepLinks.metaDetailsVideos === 'string') {
window.location.replace(video.deepLinks.metaDetailsVideos + (
typeof video.season === 'number' ?
`?${new URLSearchParams({'season': video.season})}`
`?${new URLSearchParams({ 'season': video.season })}`
:
null
));
@ -126,6 +130,15 @@ const StreamsList = ({ className, video, ...props }) => {
<div className={styles['message-container']}>
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
<div className={styles['label']}>{t('NO_STREAM')}</div>
{
showInstallAddonsButton ?
<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>
:
filteredStreams.length === 0 ?
@ -162,8 +175,8 @@ const StreamsList = ({ className, video, ...props }) => {
/>
))}
{
Object.keys(streamsByAddon).length > 1 ?
<Button className={classnames(styles['install-button-container'], styles['streams'])} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
showInstallAddonsButton ?
<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>
@ -173,15 +186,6 @@ const StreamsList = ({ className, video, ...props }) => {
</div>
</React.Fragment>
}
{
Object.keys(streamsByAddon).length < 2 && 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>
);
};

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

@ -19,7 +19,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1rem 0;
padding: 1rem;
overflow-y: auto;
.image {
@ -144,22 +144,11 @@
flex-direction: row;
align-items: center;
justify-content: center;
margin: 1rem;
padding: 1.5rem 1rem;
border-radius: var(--border-radius);
background-color: var(--secondary-accent-color);
border-radius: 3rem;
&.streams {
padding: 1rem;
margin: 1rem auto;
max-width: 50%;
border-radius: 2rem;
.label {
font-size: 1rem;
}
}
padding: 1rem;
margin: 1rem auto;
max-width: 50%;
border-radius: 2rem;
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
@ -176,7 +165,7 @@
.label {
flex: 0 1 auto;
font-size: 1.5rem;
font-size: 1rem;
font-weight: 700;
max-height: 3.6em;
text-align: center;

1
src/types/models/Ctx.d.ts vendored
View file

@ -9,6 +9,7 @@ type Auth = {
created_at: number,
expires_in: number,
},
isNewUser: boolean,
},
};