mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 02:22:09 +00:00
Detail component adapted to the detail hooks changes
This commit is contained in:
parent
fe262e447a
commit
5024fbdfbe
1 changed files with 13 additions and 81 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue