Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Library ui adapted to the latest changes in core

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-08 16:20:44 +02:00
parent dd657daa73
commit 7d470c9e2d
2 changed files with 96 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/routes/Library/Library.js
View file

@ -1,87 +1,61 @@
const React = require('react'); const React = require('react');
const UrlUtils = require('url');
const classnames = require('classnames'); 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 useLibrary = require('./useLibrary');
const useSort = require('./useSort'); const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles'); const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => { const Library = ({ urlParams, queryParams }) => {
const [user] = useUser(); const library = useLibrary(urlParams, queryParams);
const library = useLibrary(urlParams); const [typeSelect, sortPropSelect] = useSelectableInputs(library);
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]);
return ( return (
<div className={styles['library-container']}> <div className={styles['library-container']}>
<MainNavBar className={styles['nav-bar']} /> <MainNavBar className={styles['nav-bar']} />
<div className={styles['library-content']}> <div className={styles['library-content']}>
{ {
user ? library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?
<div className={styles['controls-container']}> <div className={styles['selectable-inputs-container']}>
<Multiselect {...selectTypeInput} className={styles['select-input-container']} /> <Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...selectSortInput} className={styles['select-input-container']} /> <Multiselect {...sortPropSelect} className={styles['select-input-container']} />
</div> </div>
: :
null null
} }
<div className={styles['type-content-container']}> {
{ library.library_state.type === 'Ready' && library.library_state.content.uid === null ?
!user ? <div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
<div className={classnames(styles['message-container'], styles['anonymous-user-message-container'])}> <div className={styles['message-label']}>Library is only availavle for logged in users</div>
Please log into this app <Button className={styles['login-button-container']} href={'#/intro'}>
<Button className={styles['login-button']} onClick={loginButtonOnClick}> <div className={styles['label']}>LOG IN</div>
<div className={styles['label']}>LOG IN</div> </Button>
</Button> </div>
:
library.library_state.type !== 'Ready' ?
<div className={styles['message-container']}>
<div className={styles['message-label']}>Loading</div>
</div> </div>
: :
library.library_state.type != 'Ready' ? library.type_names.length === 0 ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
Loading <div className={styles['message-label']}>Empty library</div>
</div> </div>
: :
library.type_names.length > 0 ? library.selected === null ?
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>
:
<div className={styles['message-container']}> <div className={styles['message-container']}>
Empty library <div className={styles['message-label']}>Please select a type</div>
</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>
</div> </div>
); );

105
src/routes/Library/styles.less
View file

@ -1,5 +1,9 @@
@import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
}
.library-container { .library-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -15,18 +19,15 @@
.library-content { .library-content {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
display: grid; display: flex;
grid-template-columns: 1fr auto; flex-direction: column;
grid-template-rows: auto 1fr;
grid-template-areas:
"controls-area switch-view-area"
"type-content-area type-content-area";
.controls-container { .selectable-inputs-container {
grid-area: controls-area; flex: none;
align-self: stretch;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 2rem; margin: 1.5rem;
overflow: visible; overflow: visible;
.select-input-container { .select-input-container {
@ -36,68 +37,82 @@
height: 3rem; height: 3rem;
&:not(:last-child) { &:not(:last-child) {
margin-right: 1rem; margin-right: 1.5rem;
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
} }
} }
} }
.type-content-container { .message-container, .meta-items-container {
grid-area: type-content-area; flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
padding: 0 1.5rem;
overflow-y: auto;
}
.meta-items-container { .message-container {
display: grid; display: flex;
max-height: 100%; flex-direction: column;
grid-auto-rows: max-content; justify-content: flex-start;
grid-gap: 1.5rem; align-items: center;
align-items: center;
padding: 0 2rem; &:first-child {
overflow-y: auto; .message-label {
margin: 1.5rem 0;
}
} }
.message-container { &.no-user-message-container {
padding: 0 2rem; flex: 1;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.anonymous-user-message-container {
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.login-button { .login-button-container {
flex: none;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 20rem; width: 20rem;
min-height: 4rem; min-height: 4rem;
margin-top: 2rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: var(--color-primarydark); 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 { &:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
.label { .label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 4.8em;
font-size: 1.2rem; 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;
} }
} }
} }