Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

install/uninstall addon works

Browse source
This commit is contained in:
svetlagasheva 2019-10-28 12:01:40 +02:00
parent 29260cafaa
commit 01303a742a
3 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/Addons/AddonPrompt/AddonPrompt.js
View file

@ -6,7 +6,7 @@ const { useRouteFocused } = require('stremio-router');
const { Button } = require('stremio/common');
const styles = require('./styles');
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick }) => {
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick, toggle }) => {
const focusable = useRouteFocused();
React.useEffect(() => {
const onKeyUp = (event) => {
@ -107,7 +107,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={cancel}>
<div className={styles['label']}>Cancel</div>
</Button>
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}>
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'} onClick={() => { toggle(); cancel() }}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button>
</div>
@ -129,7 +129,9 @@ AddonPrompt.propTypes = {
transportUrl: PropTypes.string,
installed: PropTypes.bool,
official: PropTypes.bool,
cancel: PropTypes.func
cancel: PropTypes.func,
onClick: PropTypes.func,
toggle: PropTypes.func
};
module.exports = AddonPrompt;

10
src/routes/Addons/Addons.js
View file

@ -13,7 +13,7 @@ const Addons = ({ urlParams, queryParams }) => {
const queryOnChange = React.useCallback((event) => {
setQuery(event.currentTarget.value);
}, []);
const [addons, dropdowns] = useAddons(urlParams, queryParams);
const [addons, dropdowns, installSelectedAddon, uninstallSelectedAddon, installedAddons] = useAddons(urlParams, queryParams);
const [selectedAddon, clearSelectedAddon, setSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
if (!event.nativeEvent.clearSelectedAddonPrevented) {
@ -23,6 +23,10 @@ const Addons = ({ urlParams, queryParams }) => {
const addonPromptOnClick = React.useCallback((event) => {
event.nativeEvent.clearSelectedAddonPrevented = true;
}, []);
const setInstalledAddon = React.useCallback((currentAddon) => {
return installedAddons.some((installedAddon) => installedAddon.manifest.id === currentAddon.manifest.id &&
installedAddon.transportUrl === currentAddon.transportUrl);
}, [installedAddons]);
return (
<div className={styles['addons-container']}>
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
@ -53,7 +57,7 @@ const Addons = ({ urlParams, queryParams }) => {
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon {...addon.manifest} key={index} className={styles['addon']} toggle={() => setSelectedAddon(addon)} />
<Addon {...addon.manifest} key={index} installed={setInstalledAddon(addon)} className={styles['addon']} toggle={() => setSelectedAddon(addon)} />
))
}
</div>
@ -61,7 +65,7 @@ const Addons = ({ urlParams, queryParams }) => {
selectedAddon !== null ?
<Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
<div className={styles['addon-prompt-container']}>
<AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} />
<AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} installed={setInstalledAddon(selectedAddon)} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)} />
</div>
</Modal>
:

21
src/routes/Addons/useAddons.js
View file

@ -7,6 +7,24 @@ const DEFAULT_CATEGORY = 'thirdparty';
const useAddons = (urlParams, queryParams) => {
const { core } = useServices();
const [addons, setAddons] = React.useState([[], []]);
const installAddon = React.useCallback(descriptor =>
core.dispatch({
action: 'AddonOp',
args: {
addonOp: 'Install',
args: descriptor
}
}), []);
const uninstallAddon = React.useCallback(descriptor =>
core.dispatch({
action: 'AddonOp',
args: {
addonOp: 'Remove',
args: {
transport_url: descriptor.transportUrl
}
}
}), []);
React.useEffect(() => {
const type = typeof urlParams.type === 'string' && urlParams.type.length > 0 ? urlParams.type : DEFAULT_TYPE;
const category = typeof urlParams.category === 'string' && urlParams.category.length > 0 ? urlParams.category : DEFAULT_CATEGORY;
@ -48,7 +66,8 @@ const useAddons = (urlParams, queryParams) => {
}
];
const addonsItems = state.addons.content.type === 'Ready' ? state.addons.content.content : [];
setAddons([addonsItems, selectInputs]);
const installedAddons = state.ctx.is_loaded ? state.ctx.content.addons : [];
setAddons([addonsItems, selectInputs, installAddon, uninstallAddon, installedAddons]);
};
core.on('NewModel', onNewState);
core.dispatch({