Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #115 from Stremio/discover-warning

Browse source 
Addon not installed warning
This commit is contained in:
Nikola Hristov 2020-01-30 15:25:02 +02:00 committed by GitHub
commit e7e35b349b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/Discover/Discover.js
View file

@ -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
}
</div>
{
discover.catalog_resource != null && !state.ctx.content.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
<div className={styles['missing-addon-warning-container']}>
<div className={styles['warning-info']}>This addon is not installed. Install now?</div>
<Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}>
<div className={styles['label']}>Install</div>
</Button>
</div>
:
null
}
<div className={styles['catalog-content-container']}>
{
discover.selectable.types.length === 0 && discover.catalog_resource === null ?
@ -132,6 +147,15 @@ const Discover = ({ urlParams, queryParams }) => {
:
null
}
{
addonModalOpen ?
<AddonDetailsModal
transportUrl={discover.catalog_resource.request.base}
onCloseRequest={closeAddonModal}
/>
:
null
}
</div>
);
};

38
src/routes/Discover/styles.less
View file

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