mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
Library ui adapted to the latest changes in core
This commit is contained in:
NikolaBorislavovHristov
parent
dd657daa73
commit
7d470c9e2d
2 changed files with 96 additions and 107 deletions
|
|
@ -1,87 +1,61 @@
|
|||
const React = require('react');
|
||||
const UrlUtils = require('url');
|
||||
const classnames = require('classnames');
|
||||
const { Button, Multiselect, MainNavBar, MetaItem, useUser } = require('stremio/common');
|
||||
const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
|
||||
const useLibrary = require('./useLibrary');
|
||||
const useSort = require('./useSort');
|
||||
const useSelectableInputs = require('./useSelectableInputs');
|
||||
const styles = require('./styles');
|
||||
|
||||
const Library = ({ urlParams, queryParams }) => {
|
||||
const [user] = useUser();
|
||||
const library = useLibrary(urlParams);
|
||||
const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
|
||||
const loginButtonOnClick = React.useCallback(() => {
|
||||
window.location.replace('#/intro');
|
||||
}, []);
|
||||
const selectTypeInput = React.useMemo(() => {
|
||||
return {
|
||||
selected: [library.selected.type_name],
|
||||
options: library.type_names
|
||||
.map((type) => ({
|
||||
label: type === '' ? '"Empty"' : type,
|
||||
value: type
|
||||
})),
|
||||
onSelect: (event) => {
|
||||
const { search } = UrlUtils.parse(window.location.hash.slice(1));
|
||||
window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
|
||||
}
|
||||
}
|
||||
}, [library.selected.type_name, library.type_names]);
|
||||
const library = useLibrary(urlParams, queryParams);
|
||||
const [typeSelect, sortPropSelect] = useSelectableInputs(library);
|
||||
return (
|
||||
<div className={styles['library-container']}>
|
||||
<MainNavBar className={styles['nav-bar']} />
|
||||
<div className={styles['library-content']}>
|
||||
{
|
||||
user ?
|
||||
<div className={styles['controls-container']}>
|
||||
<Multiselect {...selectTypeInput} className={styles['select-input-container']} />
|
||||
<Multiselect {...selectSortInput} className={styles['select-input-container']} />
|
||||
library.library_state.type === 'Ready' && library.library_state.content.uid !== 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']} />
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<div className={styles['type-content-container']}>
|
||||
{
|
||||
!user ?
|
||||
<div className={classnames(styles['message-container'], styles['anonymous-user-message-container'])}>
|
||||
Please log into this app
|
||||
<Button className={styles['login-button']} onClick={loginButtonOnClick}>
|
||||
<div className={styles['label']}>LOG IN</div>
|
||||
</Button>
|
||||
{
|
||||
library.library_state.type === 'Ready' && library.library_state.content.uid === 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'}>
|
||||
<div className={styles['label']}>LOG IN</div>
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
library.library_state.type !== 'Ready' ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-label']}>Loading</div>
|
||||
</div>
|
||||
:
|
||||
library.library_state.type != 'Ready' ?
|
||||
library.type_names.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
Loading
|
||||
<div className={styles['message-label']}>Empty library</div>
|
||||
</div>
|
||||
:
|
||||
library.type_names.length > 0 ?
|
||||
library.selected.type_name !== null ?
|
||||
library.lib_items.length > 0 ?
|
||||
<div className={styles['meta-items-container']}>
|
||||
{library.lib_items
|
||||
.sort(sortFunction)
|
||||
.map(({ removed, temp, ...libItem }, index) => (
|
||||
<MetaItem
|
||||
{...libItem}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
:
|
||||
<div className={styles['message-container']}>
|
||||
Empty library
|
||||
</div>
|
||||
:
|
||||
<div className={styles['message-container']}>
|
||||
Select a type, please
|
||||
</div>
|
||||
:
|
||||
library.selected === null ?
|
||||
<div className={styles['message-container']}>
|
||||
Empty library
|
||||
<div className={styles['message-label']}>Please select a type</div>
|
||||
</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((libItem, index) => (
|
||||
<MetaItem {...libItem} key={index} />
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
:import('~stremio/common/Multiselect/styles.less') {
|
||||
multiselect-menu-container: menu-container;
|
||||
}
|
||||
|
||||
.library-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -15,18 +19,15 @@
|
|||
.library-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"controls-area switch-view-area"
|
||||
"type-content-area type-content-area";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.controls-container {
|
||||
grid-area: controls-area;
|
||||
.selectable-inputs-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2rem;
|
||||
margin: 1.5rem;
|
||||
overflow: visible;
|
||||
|
||||
.select-input-container {
|
||||
|
|
@ -36,68 +37,82 @@
|
|||
height: 3rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.multiselect-menu-container {
|
||||
max-height: calc(3.2rem * 7);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-content-container {
|
||||
grid-area: type-content-area;
|
||||
.message-container, .meta-items-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
padding: 0 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.meta-items-container {
|
||||
display: grid;
|
||||
max-height: 100%;
|
||||
grid-auto-rows: max-content;
|
||||
grid-gap: 1.5rem;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
overflow-y: auto;
|
||||
.message-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
.message-label {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container {
|
||||
padding: 0 2rem;
|
||||
font-size: 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.anonymous-user-message-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.no-user-message-container {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.login-button {
|
||||
.login-button-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20rem;
|
||||
min-height: 4rem;
|
||||
margin-top: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-surfacelighter);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
max-height: 4.8em;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-surfacelighter);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-label {
|
||||
flex: none;
|
||||
max-height: 4.8em;
|
||||
font-size: 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-items-container {
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
align-items: center;
|
||||
grid-gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue