Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-09 08:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

handle error cases in discover

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-21 15:45:25 +03:00
parent a309257501
commit ec261fc02b
3 changed files with 80 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/routes/Discover/Discover.js
View file

@ -20,7 +20,7 @@ const Discover = ({ urlParams, queryParams }) => {
}
}, [metaItems]);
React.useEffect(() => {
const metaItem = metaItems.length > 0 ? metaItems[0] : null;
const metaItem = Array.isArray(metaItems) && metaItems.length > 0 ? metaItems[0] : null;
setSelectedMetaItem(metaItem);
}, [metaItems]);
return (
@ -36,15 +36,34 @@ const Discover = ({ urlParams, queryParams }) => {
/>
))}
</div>
<div className={styles['meta-items-container']} onMouseDownCapture={metaItemsOnMouseDownCapture} onFocusCapture={metaItemsOnFocusCapture}>
{metaItems.map((metaItem, index) => (
<MetaItem
{...metaItem}
key={index}
data-id={metaItem.id}
className={classnames(styles['meta-item'], { 'selected': selectedMetaItem !== null && metaItem.id === selectedMetaItem.id })}
/>
))}
<div className={styles['catalog-content-container']}>
{
error ?
<div className={styles['message-container']}>
{error}
</div>
:
Array.isArray(metaItems) ?
metaItems.length > 0 ?
<div className={styles['meta-items-container']} onMouseDownCapture={metaItemsOnMouseDownCapture} onFocusCapture={metaItemsOnFocusCapture}>
{metaItems.map((metaItem, index) => (
<MetaItem
{...metaItem}
key={index}
data-id={metaItem.id}
className={classnames(styles['meta-item'], { 'selected': selectedMetaItem !== null && metaItem.id === selectedMetaItem.id })}
/>
))}
</div>
:
<div className={styles['message-container']}>
Empty catalog
</div>
:
<div className={styles['message-container']}>
Loading
</div>
}
</div>
{
selectedMetaItem !== null ?

76
src/routes/Discover/styles.less
View file

@ -20,7 +20,7 @@
grid-template-rows: 7rem 1fr;
grid-template-areas:
"multiselects-area meta-preview-area"
"meta-items-area meta-preview-area";
"catalog-content-area meta-preview-area";
.multiselects-container {
grid-area: multiselects-area;
@ -36,23 +36,33 @@
}
}
.meta-items-container {
grid-area: meta-items-area;
display: grid;
grid-auto-rows: max-content;
grid-gap: 1.5rem;
align-items: center;
padding: 0 2rem;
overflow-y: auto;
.catalog-content-container {
grid-area: catalog-content-area;
.meta-item {
&:global(.selected) {
&::after {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-offset: calc(-1.5 * var(--focus-outline-size));
.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;
.meta-item {
&:global(.selected) {
&::after {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-offset: calc(-1.5 * var(--focus-outline-size));
}
}
}
}
.message-container {
padding: 0 2rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
}
.meta-preview-container {
@ -65,8 +75,10 @@
@media only screen and (min-width: @xxlarge) {
.discover-container {
.discover-content {
.meta-items-container {
grid-template-columns: repeat(8, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(8, auto);
}
}
}
}
@ -75,8 +87,10 @@
@media only screen and (max-width: @xxlarge) {
.discover-container {
.discover-content {
.meta-items-container {
grid-template-columns: repeat(7, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(7, auto);
}
}
}
}
@ -85,8 +99,10 @@
@media only screen and (max-width: @normal) {
.discover-container {
.discover-content {
.meta-items-container {
grid-template-columns: repeat(6, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(6, auto);
}
}
}
}
@ -95,8 +111,10 @@
@media only screen and (max-width: @medium) {
.discover-container {
.discover-content {
.meta-items-container {
grid-template-columns: repeat(5, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(5, auto);
}
}
}
}
@ -105,8 +123,10 @@
@media only screen and (max-width: @small) {
.discover-container {
.discover-content {
.meta-items-container {
grid-template-columns: repeat(4, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(4, auto);
}
}
}
}
@ -119,14 +139,16 @@
grid-template-rows: fit-content(19rem) 1fr;
grid-template-areas:
"multiselects-area"
"meta-items-area";
"catalog-content-area";
.multiselects-container {
grid-template-columns: repeat(4, 1fr);
}
.meta-items-container {
grid-template-columns: repeat(5, auto);
.catalog-content-container {
.meta-items-container {
grid-template-columns: repeat(5, auto);
}
}
.meta-preview-container {

4
src/routes/Discover/useDiscover.js
View file

@ -7,7 +7,7 @@ const DEFAULT_TYPE = 'movie';
const useCatalog = (urlParams, queryParams) => {
const { core } = useServices();
const [discover, setDiscover] = React.useState([[], [], null]);
const [discover, setDiscover] = React.useState([[], null, null]);
React.useEffect(() => {
const addonTransportUrl = typeof urlParams.addonTransportUrl === 'string' ? urlParams.addonTransportUrl : DEFAULT_ADDON_TRANSPORT_URL;
const catalogId = typeof urlParams.catalogId === 'string' ? urlParams.catalogId : DEFAULT_CATALOG_ID;
@ -49,7 +49,7 @@ const useCatalog = (urlParams, queryParams) => {
}
}
];
const items = state.discover.content.type === 'Ready' ? state.discover.content.content : [];
const items = state.discover.content.type === 'Ready' ? state.discover.content.content : null;
const error = state.discover.content.type === 'Err' ? JSON.stringify(state.discover.content.content) : null;
setDiscover([selectInputs, items, error]);
};