Detail component adapted to the detail hooks changes

This commit is contained in:
NikolaBorislavovHristov 2019-11-13 13:36:03 +02:00
parent fe262e447a
commit 5024fbdfbe

View file

@ -3,114 +3,46 @@ const { NavBar, MetaPreview } = require('stremio/common');
const VideosList = require('./VideosList');
const StreamsList = require('./StreamsList');
const useMetaDetails = require('./useMetaDetails');
const useSelectableGroups = require('./useSelectableGroups');
const styles = require('./styles');
const metaStateReducer = (state, action) => {
switch (action.type) {
case 'groups-changed': {
if (state.selectedGroup !== null) {
const selectedGroupIncluded = action.groups.some((group) => {
return group.req.base === state.selectedGroup.req.base &&
group.content.type === 'Ready';
});
if (selectedGroupIncluded) {
return {
...state,
resourceRef: action.resourceRef,
groups: action.groups
};
}
}
const readyGroup = action.groups.find((group) => group.content.type === 'Ready');
const selectedGroup = readyGroup ? readyGroup : null;
return {
...state,
resourceRef: action.resourceRef,
groups: action.groups,
selectedGroup
};
}
case 'group-selected': {
const selectedGroup = state.groups.find((group) => {
return group.req.base === action.base &&
group.content.type === 'Ready';
});
if (selectedGroup) {
return {
...state,
selectedGroup
};
}
return state;
}
default: {
return state;
}
}
};
const Detail = ({ urlParams }) => {
const [metaGroups, streamsGroups, [metaResourceRef, streamsResourceRef]] = useMetaDetails(urlParams);
const [metaState, metaStateDispatch] = React.useReducer(
metaStateReducer,
[metaResourceRef, metaGroups],
([metaResourceRef, metaGroups]) => {
const initialState = {
resourceRef: null,
groups: [],
selectedGroup: null
};
const initAction = {
type: 'groups-changed',
resourceRef: metaResourceRef,
groups: metaGroups
};
return metaStateReducer(initialState, initAction);
}
);
React.useEffect(() => {
metaStateDispatch({
type: 'groups-changed',
resourceRef: metaResourceRef,
groups: metaGroups
});
}, [metaGroups]);
const [meta, streams] = useMetaDetails(urlParams);
const [metaResourceRef, metaGroups, selectedMetaGroup] = useSelectableGroups(meta.resourceRef, meta.groups);
const { resourceRef: streamsResourceRef, groups: streamsGroups } = streams;
return (
<div className={styles['detail-container']}>
<NavBar
className={styles['nav-bar']}
backButton={true}
title={metaState.selectedGroup !== null ? metaState.selectedGroup.content.content.name : null}
title={selectedMetaGroup !== null ? selectedMetaGroup.content.content.name : null}
/>
<div className={styles['detail-content']}>
{
metaState.resourceRef !== null ?
metaState.selectedGroup !== null ?
metaResourceRef !== null ?
selectedMetaGroup !== null ?
<React.Fragment>
<div className={styles['background-image-layer']}>
<img
className={styles['background-image']}
src={metaState.selectedGroup.content.content.background}
src={selectedMetaGroup.content.content.background}
alt={' '}
/>
</div>
<MetaPreview
{...metaState.selectedGroup.content.content}
{...selectedMetaGroup.content.content}
className={styles['meta-preview']}
background={null}
/>
</React.Fragment>
:
metaState.groups.length === 0 ?
metaGroups.length === 0 ?
<MetaPreview
className={styles['meta-preview']}
name={'No addons ware requested for this meta'}
/>
:
metaState.groups.every((group) => group.content.type === 'Err') ?
metaGroups.every((group) => group.content.type === 'Err') ?
<MetaPreview
className={styles['meta-preview']}
name={'No metadata was found'}
@ -129,10 +61,10 @@ const Detail = ({ urlParams }) => {
streamsGroups={streamsGroups}
/>
:
metaState.resourceRef !== null ?
metaResourceRef !== null ?
<VideosList
className={styles['videos-list']}
metaGroup={metaState.selectedGroup}
metaGroup={selectedMetaGroup}
/>
:
null