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 {