diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 8ece37d85..4e81032d3 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -5,7 +5,7 @@ const useSort = require('./useSort');
const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => {
- const [metaItems, selectTypeInput] = useLibrary(urlParams);
+ const [metaItems, selectTypeInput, error] = useLibrary(urlParams);
const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
return (
@@ -15,15 +15,29 @@ const Library = ({ urlParams, queryParams }) => {
-
- {metaItems
- .sort(sortFunction)
- .map((metaItem, index) => (
-
- ))
+
+ {
+ error !== null ?
+
+ No items for type {urlParams.type !== (null && '') ? urlParams.type : '"Empty"'}
+
+ :
+ Array.isArray(metaItems) ?
+
+ {
+ metaItems
+ .sort(sortFunction)
+ .map(({ removed, temp, ...metaItem }, index) => (
+
+ ))}
+
+ :
+
+ Loading
+
}
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 8f4417f89..42f281429 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -19,11 +19,11 @@
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
grid-template-areas:
- "dropdowns-area switch-view-area"
- "meta-items-area meta-items-area";
+ "controls-area switch-view-area"
+ "type-content-area type-content-area";
.controls-container {
- grid-area: dropdowns-area;
+ grid-area: controls-area;
display: flex;
flex-direction: row;
margin: 2rem;
@@ -41,14 +41,24 @@
}
}
- .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;
+ .type-content-container {
+ grid-area: type-content-area;
+
+ .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 {
+ padding: 0 2rem;
+ font-size: 2rem;
+ color: var(--color-surfacelighter);
+ }
}
}
}
diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js
index 8e8989709..85c17be64 100644
--- a/src/routes/Library/useLibrary.js
+++ b/src/routes/Library/useLibrary.js
@@ -4,7 +4,7 @@ const { useServices } = require('stremio/services');
const useLibrary = (urlParams) => {
const { core } = useServices();
- const [library, setLibrary] = React.useState([[], null]);
+ const [library, setLibrary] = React.useState([[], null, null]);
React.useEffect(() => {
const state = core.getState();
const type = typeof urlParams.type === 'string' && urlParams.type.length > 0 ?
@@ -28,7 +28,8 @@ const useLibrary = (urlParams) => {
window.location.replace(`#/library/${event.value}${search !== null ? search : ''}`);
}
};
- setLibrary([state.library.items, selectInput]);
+ const error = state.library.items === 0 ? state.library.items : null;
+ setLibrary([state.library.items, selectInput, error]);
};
core.on('NewModel', onNewState);
core.dispatch({