diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 4cea4d124..a9f044c1c 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -2,7 +2,7 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); -const { AddonDetailsModal, Button, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common'); +const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common'); const { useServices } = require('stremio/services'); const useDiscover = require('./useDiscover'); const useSelectableInputs = require('./useSelectableInputs'); @@ -91,17 +91,34 @@ const Discover = ({ urlParams, queryParams }) => { { discover.selectable.types.length === 0 && discover.catalog_resource === null ?
- No catalogs + {' +
No catalogs avaliable.
: discover.catalog_resource === null ?
- No select + {' +
No catalog selected
: discover.catalog_resource.content.type === 'Err' ?
- Catalog Error + {' +
+ {`Error(${discover.catalog_resource.content.content.type})${typeof discover.catalog_resource.content.content.content === 'string' ? ` - ${discover.catalog_resource.content.content.content}` : ''}`} +
: discover.catalog_resource.content.type === 'Loading' ? diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index f764e6c57..bc1778396 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -157,9 +157,27 @@ } .message-container { - padding: 0 1.5rem; - font-size: 2rem; - color: @color-surface-light5; + display: flex; + flex-direction: column; + align-items: center; + padding: 4rem; + + .image { + flex: none; + width: 12rem; + height: 12rem; + margin-bottom: 1rem; + object-fit: contain; + object-position: center; + opacity: 0.9; + } + + .message-label { + flex: 0 1 auto; + font-size: 2.5rem; + text-align: center; + color: @color-secondaryvariant2-light1-90; + } } }