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

MetaDetails wrapped with core suspender

Browse source
This commit is contained in:
nklhrstv 2022-07-11 13:55:38 +03:00
parent 9f6ee43c71
commit f6bc7e61d5
2 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/routes/MetaDetails/MetaDetails.js
View file

@ -2,8 +2,9 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useServices } = require('stremio/services'); const { useServices } = require('stremio/services');
const { VerticalNavBar, HorizontalNavBar, MetaPreview, ModalDialog, Image } = require('stremio/common'); const { VerticalNavBar, HorizontalNavBar, MetaPreview, ModalDialog, Image, DelayedRenderer, withCoreSuspender } = require('stremio/common');
const StreamsList = require('./StreamsList'); const StreamsList = require('./StreamsList');
const VideosList = require('./VideosList'); const VideosList = require('./VideosList');
const useMetaDetails = require('./useMetaDetails'); const useMetaDetails = require('./useMetaDetails');
@ -86,10 +87,12 @@ const MetaDetails = ({ urlParams, queryParams }) => {
} }
{ {
metaPath === null ? metaPath === null ?
<div className={styles['meta-message-container']}> <DelayedRenderer delay={500}>
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} /> <div className={styles['meta-message-container']}>
<div className={styles['message-label']}>No meta was selected!</div> <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
</div> <div className={styles['message-label']}>No meta was selected!</div>
</div>
</DelayedRenderer>
: :
metaDetails.metaItem === null ? metaDetails.metaItem === null ?
<div className={styles['meta-message-container']}> <div className={styles['meta-message-container']}>
@ -122,7 +125,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
null null
} }
<MetaPreview <MetaPreview
className={styles['meta-preview']} className={classnames(styles['meta-preview'], 'animation-fade-in')}
name={metaDetails.metaItem.content.content.name} name={metaDetails.metaItem.content.content.name}
logo={metaDetails.metaItem.content.content.logo} logo={metaDetails.metaItem.content.content.logo}
runtime={metaDetails.metaItem.content.content.runtime} runtime={metaDetails.metaItem.content.content.runtime}
@ -188,4 +191,16 @@ MetaDetails.propTypes = {
queryParams: PropTypes.instanceOf(URLSearchParams) queryParams: PropTypes.instanceOf(URLSearchParams)
}; };
module.exports = MetaDetails; const MetaDetailsFallback = () => (
<div className={styles['metadetails-container']}>
<HorizontalNavBar
className={styles['nav-bar']}
backButton={true}
addonsButton={true}
fullscreenButton={true}
navMenu={true}
/>
</div>
);
module.exports = withCoreSuspender(MetaDetails, MetaDetailsFallback);

2
src/routes/MetaDetails/useMetaDetails.js
View file

@ -66,7 +66,7 @@ const useMetaDetails = (urlParams) => {
}; };
} }
}, [urlParams]); }, [urlParams]);
return useModelState({ model: 'meta_details', action, map }); return useModelState({ model: 'meta_details', action, map, deps: ['ctx'] });
}; };
module.exports = useMetaDetails; module.exports = useMetaDetails;