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

MetaDetails adapted to the new core api

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-09 12:27:16 +02:00
parent 5f1c776a23
commit 8272f252cb
3 changed files with 78 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,82 +3,92 @@ const { NavBar, MetaPreview, useInLibrary } = require('stremio/common');
const VideosList = require('./VideosList');
const StreamsList = require('./StreamsList');
const useMetaDetails = require('./useMetaDetails');
const useSelectableGroups = require('./useSelectableGroups');
const useSelectableResource = require('./useSelectableResource');
const styles = require('./styles');
const MetaDetails = ({ urlParams }) => {
const metaDetails = useMetaDetails(urlParams);
const [metaResourceRef, metaGroups, selectedMetaGroup] = useSelectableGroups(metaDetails.selected.meta_resource_ref, metaDetails.meta_groups);
const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(metaDetails.selected.meta_resource_ref, metaDetails.meta_resources);
const streamsResourceRef = metaDetails.selected.streams_resource_ref;
const streamsGroups = metaDetails.streams_groups;
const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef ? metaResourceRef.id : null);
const streamsResources = metaDetails.streams_resources;
const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef !== null ? metaResourceRef.id : null);
return (
<div className={styles['metadetails-container']}>
<NavBar
className={styles['nav-bar']}
backButton={true}
title={selectedMetaGroup !== null ? selectedMetaGroup.content.content.name : null}
title={selectedMetaResource !== null ? selectedMetaResource.content.content.name : null}
/>
<div className={styles['metadetails-content']}>
{
metaResourceRef !== null ?
selectedMetaGroup !== null ?
<React.Fragment>
{
typeof selectedMetaGroup.content.content.background === 'string' &&
selectedMetaGroup.content.content.background.length > 0 ?
<div className={styles['background-image-layer']}>
<img
className={styles['background-image']}
src={selectedMetaGroup.content.content.background}
alt={' '}
/>
</div>
:
null
}
<MetaPreview
{...selectedMetaGroup.content.content}
className={styles['meta-preview']}
background={null}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
</React.Fragment>
metaResourceRef === null ?
<MetaPreview
className={styles['meta-preview']}
name={'No meta was selected'}
/>
:
metaResources.length === 0 ?
<MetaPreview
className={styles['meta-preview']}
name={'No addons ware requested for this meta'}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
:
metaGroups.length === 0 ?
metaResources.every((metaResource) => metaResource.content.type === 'Err') ?
<MetaPreview
className={styles['meta-preview']}
name={'No addons ware requested for this meta'}
name={'No metadata was found'}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
:
metaGroups.every((group) => group.content.type === 'Err') ?
<MetaPreview
className={styles['meta-preview']}
name={'No metadata was found'}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
selectedMetaResource !== null ?
<React.Fragment>
{
typeof selectedMetaResource.content.content.background === 'string' &&
selectedMetaResource.content.content.background.length > 0 ?
<div className={styles['background-image-layer']}>
<img
className={styles['background-image']}
src={selectedMetaResource.content.content.background}
alt={' '}
/>
</div>
:
null
}
<MetaPreview
className={styles['meta-preview']}
name={selectedMetaResource.content.content.name}
logo={selectedMetaResource.content.content.logo}
background={null}
runtime={selectedMetaResource.content.content.runtime}
releaseInfo={selectedMetaResource.content.content.releaseInfo}
released={selectedMetaResource.content.content.released}
description={selectedMetaResource.content.content.description}
links={selectedMetaResource.content.content.links}
trailer={selectedMetaResource.content.content.trailer}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
</React.Fragment>
:
<MetaPreview.Placeholder
className={styles['meta-preview']}
/>
:
null
}
{
streamsResourceRef !== null ?
<StreamsList
className={styles['streams-list']}
streamsGroups={streamsGroups}
streamsResources={streamsResources}
/>
:
metaResourceRef !== null ?
<VideosList
className={styles['videos-list']}
metaGroup={selectedMetaGroup}
metaResource={selectedMetaResource}
/>
:
null

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

@ -6,27 +6,31 @@ const { Button } = require('stremio/common');
const Stream = require('./Stream');
const styles = require('./styles');
const StreamsList = ({ className, streamsGroups }) => {
const readyStreams = React.useMemo(() => {
return streamsGroups
.filter((stream) => stream.content.type === 'Ready')
.map((stream) => stream.content.content)
const StreamsList = ({ className, streamsResources }) => {
const streams = React.useMemo(() => {
return streamsResources
.filter((streamsResource) => streamsResource.content.type === 'Ready')
.map((streamsResource) => streamsResource.content.content)
.flat(1);
}, [streamsGroups]);
}, [streamsResources]);
return (
<div className={classnames(className, styles['streams-list-container'])}>
<div className={styles['streams-scroll-container']}>
{
readyStreams.length > 0 ?
readyStreams.map((stream, index) => (
<Stream {...stream} key={index} className={styles['stream']} />
))
streamsResources.length === 0 ?
<div className={styles['message-label']}>No addons ware requested for streams</div>
:
streamsGroups.length === 0 ?
<div className={styles['message-label']}>No addons ware requested for streams</div>
streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
<div className={styles['message-label']}>No streams were found</div>
:
streamsGroups.every((group) => group.content.type === 'Err') ?
<div className={styles['message-label']}>No streams were found</div>
streams.length > 0 ?
streams.map((stream, index) => (
<Stream
{...stream}
key={index}
className={styles['stream']}
/>
))
:
<React.Fragment>
<Stream.Placeholder className={styles['stream']} />
@ -44,7 +48,7 @@ const StreamsList = ({ className, streamsGroups }) => {
StreamsList.propTypes = {
className: PropTypes.string,
streamsGroups: PropTypes.arrayOf(PropTypes.object)
streamsResources: PropTypes.arrayOf(PropTypes.object)
};
module.exports = StreamsList;

14
src/routes/MetaDetails/VideosList/VideosList.js
View file

@ -6,13 +6,13 @@ const Video = require('./Video');
const useSelectableSeasons = require('./useSelectableSeasons');
const styles = require('./styles');
const VideosList = ({ className, metaGroup }) => {
const VideosList = ({ className, metaResource }) => {
const videos = React.useMemo(() => {
return metaGroup && metaGroup.content.type === 'Ready' ?
metaGroup.content.content.videos
return metaResource && metaResource.content.type === 'Ready' ?
metaResource.content.content.videos
:
[];
}, [metaGroup]);
}, [metaResource]);
const [seasons, selectedSeason, videosForSeason, selectSeason] = useSelectableSeasons(videos);
const seasonOnSelect = React.useCallback((event) => {
selectSeason(event.value);
@ -20,7 +20,7 @@ const VideosList = ({ className, metaGroup }) => {
return (
<div className={classnames(className, styles['videos-list-container'])}>
{
!metaGroup || metaGroup.content.type === 'Loading' ?
!metaResource || metaResource.content.type === 'Loading' ?
<React.Fragment>
<SeasonsBar.Placeholder className={styles['seasons-bar']} />
<div className={styles['videos-scroll-container']}>
@ -32,7 +32,7 @@ const VideosList = ({ className, metaGroup }) => {
</div>
</React.Fragment>
:
metaGroup.content.type === 'Err' || videosForSeason.length === 0 ?
metaResource.content.type === 'Err' || videosForSeason.length === 0 ?
<div className={styles['message-label']}>
No videos found for this meta
</div>
@ -66,7 +66,7 @@ const VideosList = ({ className, metaGroup }) => {
VideosList.propTypes = {
className: PropTypes.string,
metaGroup: PropTypes.object
metaResource: PropTypes.object
};
module.exports = VideosList;