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;
+ }
}
}