mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
library adapt to changes in core
This commit is contained in:
nklhrstv
parent
b119d1b2d6
commit
2f57ab81bf
3 changed files with 41 additions and 39 deletions
|
|
@ -1,7 +1,7 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
|
||||
const { Button, Multiselect, MainNavBar, MetaItem, useProfile } = require('stremio/common');
|
||||
const useLibrary = require('./useLibrary');
|
||||
const useSelectableInputs = require('./useSelectableInputs');
|
||||
const useItemOptions = require('./useItemOptions');
|
||||
|
|
@ -9,6 +9,7 @@ const styles = require('./styles');
|
|||
|
||||
const Library = ({ urlParams }) => {
|
||||
const library = useLibrary(urlParams);
|
||||
const profile = useProfile();
|
||||
const [typeSelect, sortPropSelect] = useSelectableInputs(library);
|
||||
const [options, optionOnSelect] = useItemOptions();
|
||||
return (
|
||||
|
|
@ -16,7 +17,7 @@ const Library = ({ urlParams }) => {
|
|||
<MainNavBar className={styles['nav-bar']} route={'library'} />
|
||||
<div className={styles['library-content']}>
|
||||
{
|
||||
library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?
|
||||
profile.auth !== null && library.type_names.length > 0 ?
|
||||
<div className={styles['selectable-inputs-container']}>
|
||||
<Multiselect {...typeSelect} className={styles['select-input-container']} />
|
||||
<Multiselect {...sortPropSelect} className={styles['select-input-container']} />
|
||||
|
|
@ -25,7 +26,7 @@ const Library = ({ urlParams }) => {
|
|||
null
|
||||
}
|
||||
{
|
||||
library.library_state.type === 'Ready' && library.library_state.content.uid === null ?
|
||||
profile.auth === null ?
|
||||
<div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
|
||||
<div className={styles['message-label']}>Library is only availavle for logged in users</div>
|
||||
<Button className={styles['login-button-container']} href={'#/intro'}>
|
||||
|
|
@ -33,37 +34,32 @@ const Library = ({ urlParams }) => {
|
|||
</Button>
|
||||
</div>
|
||||
:
|
||||
library.library_state.type !== 'Ready' ?
|
||||
library.type_names.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-label']}>Loading</div>
|
||||
<div className={styles['message-label']}>Empty library</div>
|
||||
</div>
|
||||
:
|
||||
library.type_names.length === 0 ?
|
||||
library.selected === null ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-label']}>Empty library</div>
|
||||
<div className={styles['message-label']}>Please select a type</div>
|
||||
</div>
|
||||
:
|
||||
library.selected === null ?
|
||||
library.lib_items.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-label']}>Please select a type</div>
|
||||
<div className={styles['message-label']}>There are no items for the selected type</div>
|
||||
</div>
|
||||
:
|
||||
library.lib_items.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-label']}>There are no items for the selected type</div>
|
||||
</div>
|
||||
:
|
||||
<div className={styles['meta-items-container']}>
|
||||
{library.lib_items.map(({ id, videoId, ...libItem }, index) => (
|
||||
<MetaItem
|
||||
{...libItem}
|
||||
key={index}
|
||||
dataset={{ id, videoId, type: libItem.type }}
|
||||
options={options}
|
||||
optionOnSelect={optionOnSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles['meta-items-container']}>
|
||||
{library.lib_items.map(({ id, videoId, ...libItem }, index) => (
|
||||
<MetaItem
|
||||
{...libItem}
|
||||
key={index}
|
||||
dataset={{ id, videoId, type: libItem.type }}
|
||||
options={options}
|
||||
optionOnSelect={optionOnSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,12 @@ const { useServices } = require('stremio/services');
|
|||
const { useModelState } = require('stremio/common');
|
||||
|
||||
const initLibraryState = () => ({
|
||||
library_state: {
|
||||
type: 'NotLoaded'
|
||||
},
|
||||
selected: null,
|
||||
type_names: [],
|
||||
lib_items: []
|
||||
});
|
||||
|
||||
const mapLibraryState = (library) => {
|
||||
const library_state = library.library_state;
|
||||
const selected = library.selected;
|
||||
const type_names = library.type_names;
|
||||
const lib_items = library.lib_items.map((lib_item) => ({
|
||||
|
|
@ -28,7 +24,7 @@ const mapLibraryState = (library) => {
|
|||
videoId: lib_item.state.video_id,
|
||||
href: `#/metadetails/${encodeURIComponent(lib_item.type)}/${encodeURIComponent(lib_item._id)}${lib_item.state.video_id !== null ? `/${encodeURIComponent(lib_item.state.video_id)}` : ''}`
|
||||
}));
|
||||
return { library_state, selected, type_names, lib_items };
|
||||
return { selected, type_names, lib_items };
|
||||
};
|
||||
|
||||
const onNewLibraryState = (library) => {
|
||||
|
|
@ -36,10 +32,9 @@ const onNewLibraryState = (library) => {
|
|||
return {
|
||||
action: 'Load',
|
||||
args: {
|
||||
load: 'LibraryFiltered',
|
||||
model: 'LibraryWithFilters',
|
||||
args: {
|
||||
type_name: library.type_names[0],
|
||||
sort_prop: null
|
||||
type_name: library.type_names[0]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -53,23 +48,32 @@ const useLibrary = (urlParams) => {
|
|||
return {
|
||||
action: 'Load',
|
||||
args: {
|
||||
load: 'LibraryFiltered',
|
||||
model: 'LibraryWithFilters',
|
||||
args: {
|
||||
type_name: urlParams.type,
|
||||
sort_prop: urlParams.sort
|
||||
}
|
||||
}
|
||||
};
|
||||
} else if (typeof urlParams.type === 'string') {
|
||||
return {
|
||||
action: 'Load',
|
||||
args: {
|
||||
model: 'LibraryWithFilters',
|
||||
args: {
|
||||
type_name: urlParams.type
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
const library = core.getState('library');
|
||||
if (library.type_names.length > 0) {
|
||||
return {
|
||||
action: 'Load',
|
||||
args: {
|
||||
load: 'LibraryFiltered',
|
||||
model: 'LibraryWithFilters',
|
||||
args: {
|
||||
type_name: library.type_names[0],
|
||||
sort_prop: null
|
||||
type_name: library.type_names[0]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const React = require('react');
|
||||
|
||||
const SORT_PROP_OPTIONS = [
|
||||
{ label: 'Recent', value: '_ctime' },
|
||||
{ label: 'Recent', value: 'ctime' },
|
||||
{ label: 'A-Z', value: 'name' },
|
||||
{ label: 'Year', value: 'year' },
|
||||
];
|
||||
|
|
@ -16,7 +16,7 @@ const mapSelectableInputs = (library) => {
|
|||
options: library.type_names
|
||||
.map((type) => ({ label: type, value: type })),
|
||||
onSelect: (event) => {
|
||||
window.location.replace(`#/library/${encodeURIComponent(event.value)}/${encodeURIComponent(library.selected.sort_prop)}`);
|
||||
window.location.replace(`#/library/${encodeURIComponent(event.value)}`);
|
||||
}
|
||||
};
|
||||
const sortPropSelect = {
|
||||
|
|
@ -29,6 +29,8 @@ const mapSelectableInputs = (library) => {
|
|||
onSelect: (event) => {
|
||||
if (library.selected !== null) {
|
||||
window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}/${encodeURIComponent(event.value)}`);
|
||||
} else if (library.type_names.length > 0) {
|
||||
window.location.replace(`#/library/${encodeURIComponent(library.type_names[0])}/${encodeURIComponent(event.value)}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue