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({