diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index e2c1f7426..d314c2d68 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -2,7 +2,8 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
-const { Button, MainNavBar, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, MainNavBar, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
+const { useServices } = require('stremio/services');
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@@ -19,9 +20,12 @@ const getMetaItemAtIndex = (catalog_resource, index) => {
};
const Discover = ({ urlParams, queryParams }) => {
+ const { core } = useServices();
+ const state = core.getState();
const discover = useDiscover(urlParams, queryParams);
const [selectInputs, paginationInput] = useSelectableInputs(discover);
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
+ const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
const [selectedMetaItem, setSelectedMetaItem] = React.useState(() => {
return getMetaItemAtIndex(discover.catalog_resource, 0);
});
@@ -69,6 +73,17 @@ const Discover = ({ urlParams, queryParams }) => {
null
}
+ {
+ discover.catalog_resource != null && !state.ctx.content.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
+
+
This addon is not installed. Install now?
+
+
+ :
+ null
+ }
{
discover.selectable.types.length === 0 && discover.catalog_resource === null ?
@@ -132,6 +147,15 @@ const Discover = ({ urlParams, queryParams }) => {
:
null
}
+ {
+ addonModalOpen ?
+
+ :
+ null
+ }
);
};
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index b2ddb748d..8e20dd3c9 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -27,9 +27,10 @@
align-self: stretch;
display: grid;
grid-template-columns: 1fr 28rem;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto auto 1fr;
grid-template-areas:
"selectable-inputs-area meta-preview-area"
+ "missing-addon-warning-container meta-preview-area"
"catalog-content-area meta-preview-area";
.selectable-inputs-container {
@@ -102,6 +103,38 @@
}
}
+ .missing-addon-warning-container {
+ grid-area: missing-addon-warning-container;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 1.5rem 1.5rem 1.5rem;
+
+ .warning-info {
+ margin-bottom: 1rem;
+ font-size: 1.2rem;
+ color: var(--color-surfacelighter);
+ }
+
+ .install-button {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 10rem;
+ padding: 1rem;
+ background-color: var(--color-signal5);
+
+ &:hover {
+ filter: brightness(1.2);
+ }
+
+ .label {
+ color: var(--color-surfacelighter);
+ }
+ }
+ }
+
.catalog-content-container {
grid-area: catalog-content-area;
@@ -203,9 +236,10 @@
.discover-container {
.discover-content {
grid-template-columns: 1fr;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto auto 1fr;
grid-template-areas:
"selectable-inputs-area"
+ "missing-addon-warning-container"
"catalog-content-area";
.catalog-content-container {