mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
feat: add configure button for addons
This commit is contained in:
Tim
parent
5705233705
commit
cc976f27e7
4 changed files with 87 additions and 11 deletions
|
|
@ -59,6 +59,27 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
|
|||
}
|
||||
}
|
||||
};
|
||||
const configureButton = addonDetails.remoteAddon !== null &&
|
||||
addonDetails.remoteAddon.content.type === 'Ready' &&
|
||||
addonDetails.remoteAddon.content.content.manifest.behaviorHints.configurable ?
|
||||
{
|
||||
className: styles['configure-button'],
|
||||
label: 'Configure',
|
||||
props: {
|
||||
onClick: (event) => {
|
||||
window.open(transportUrl.replace('manifest.json', 'configure'));
|
||||
if (typeof onCloseRequest === 'function') {
|
||||
onCloseRequest({
|
||||
type: 'configure',
|
||||
reactEvent: event,
|
||||
nativeEvent: event.nativeEvent
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:
|
||||
null;
|
||||
const toggleButton = addonDetails.localAddon !== null ?
|
||||
{
|
||||
className: styles['uninstall-button'],
|
||||
|
|
@ -109,7 +130,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
|
|||
}
|
||||
:
|
||||
null;
|
||||
return toggleButton !== null ? [cancelButton, toggleButton] : [cancelButton];
|
||||
return toggleButton !== null ? configureButton ? [cancelButton, configureButton, toggleButton] : [cancelButton, toggleButton] : [cancelButton];
|
||||
}, [addonDetails, onCloseRequest]);
|
||||
return (
|
||||
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const Icon = require('@stremio/stremio-icons/dom');
|
|||
const { Button, Image } = require('stremio/common');
|
||||
const styles = require('./styles');
|
||||
|
||||
const Addon = ({ className, id, name, version, logo, description, types, installed, onToggle, onShare, dataset }) => {
|
||||
const Addon = ({ className, id, name, version, logo, description, types, behaviorHints, installed, onToggle, onConfigure, onShare, dataset }) => {
|
||||
const { t } = useTranslation();
|
||||
const toggleButtonOnClick = React.useCallback((event) => {
|
||||
if (typeof onToggle === 'function') {
|
||||
|
|
@ -20,6 +20,16 @@ const Addon = ({ className, id, name, version, logo, description, types, install
|
|||
});
|
||||
}
|
||||
}, [onToggle, dataset]);
|
||||
const configureButtonOnClick = React.useCallback((event) => {
|
||||
if (typeof onConfigure === 'function') {
|
||||
onConfigure({
|
||||
type: 'configure',
|
||||
nativeEvent: event.nativeEvent,
|
||||
reactEvent: event,
|
||||
dataset: dataset
|
||||
});
|
||||
}
|
||||
}, [onConfigure, dataset]);
|
||||
const shareButtonOnClick = React.useCallback((event) => {
|
||||
if (typeof onShare === 'function') {
|
||||
onShare({
|
||||
|
|
@ -84,9 +94,19 @@ const Addon = ({ className, id, name, version, logo, description, types, install
|
|||
}
|
||||
</div>
|
||||
<div className={styles['buttons-container']}>
|
||||
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? t('ADDON_UNINSTALL') : t('ADDON_INSTALL')} tabIndex={-1} onClick={toggleButtonOnClick}>
|
||||
<div className={styles['label']}>{installed ? t('ADDON_UNINSTALL') : t('ADDON_INSTALL')}</div>
|
||||
</Button>
|
||||
<div className={styles['action-buttons-container']}>
|
||||
{
|
||||
!behaviorHints.configurationRequired && behaviorHints.configurable ?
|
||||
<Button className={styles['configure-button-container']} title={t('ADDON_CONFIGURE')} tabIndex={-1} onClick={configureButtonOnClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
</Button>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? t('ADDON_UNINSTALL') : behaviorHints.configurationRequired ? t('ADDON_CONFIGURE') : t('ADDON_INSTALL')} tabIndex={-1} onClick={toggleButtonOnClick}>
|
||||
<div className={styles['label']}>{installed ? t('ADDON_UNINSTALL') : behaviorHints.configurationRequired ? t('ADDON_CONFIGURE') : t('ADDON_INSTALL')}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<Button className={styles['share-button-container']} title={t('SHARE_ADDON')} tabIndex={-1} onClick={shareButtonOnClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<div className={styles['label']}>{ t('SHARE_ADDON') }</div>
|
||||
|
|
@ -104,8 +124,15 @@ Addon.propTypes = {
|
|||
logo: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
types: PropTypes.arrayOf(PropTypes.string),
|
||||
behaviorHints: PropTypes.shape({
|
||||
adult: PropTypes.bool,
|
||||
configurable: PropTypes.bool,
|
||||
configurationRequired: PropTypes.bool,
|
||||
p2p: PropTypes.bool,
|
||||
}),
|
||||
installed: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
onConfigure: PropTypes.func,
|
||||
onShare: PropTypes.func,
|
||||
dataset: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -89,25 +89,33 @@
|
|||
|
||||
.buttons-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 17rem;
|
||||
|
||||
.install-button-container, .uninstall-button-container, .share-button-container {
|
||||
.action-buttons-container {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.install-button-container, .configure-button-container, .uninstall-button-container, .share-button-container {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
height: 4rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -133,6 +141,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.configure-button-container {
|
||||
flex: none;
|
||||
background-color: @color-accent3;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-accent3-light2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
|
||||
.uninstall-button-container {
|
||||
outline-color: @color-background-light3;
|
||||
outline-style: solid;
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ const Addons = ({ urlParams, queryParams }) => {
|
|||
const onAddonToggle = React.useCallback((event) => {
|
||||
setAddonDetailsTransportUrl(event.dataset.addon.transportUrl);
|
||||
}, [setAddonDetailsTransportUrl]);
|
||||
const onAddonConfigure = React.useCallback((event) => {
|
||||
window.open(event.dataset.addon.transportUrl.replace('manifest.json', 'configure'));
|
||||
}, []);
|
||||
const closeAddonDetails = React.useCallback(() => {
|
||||
setAddonDetailsTransportUrl(null);
|
||||
}, [setAddonDetailsTransportUrl]);
|
||||
|
|
@ -128,8 +131,10 @@ const Addons = ({ urlParams, queryParams }) => {
|
|||
logo={addon.manifest.logo}
|
||||
description={addon.manifest.description}
|
||||
types={addon.manifest.types}
|
||||
behaviorHints={addon.manifest.behaviorHints}
|
||||
installed={addon.installed}
|
||||
onToggle={onAddonToggle}
|
||||
onConfigure={onAddonConfigure}
|
||||
onShare={onAddonShare}
|
||||
dataset={{ addon }}
|
||||
/>
|
||||
|
|
@ -162,8 +167,10 @@ const Addons = ({ urlParams, queryParams }) => {
|
|||
logo={addon.manifest.logo}
|
||||
description={addon.manifest.description}
|
||||
types={addon.manifest.types}
|
||||
behaviorHints={addon.manifest.behaviorHints}
|
||||
installed={addon.installed}
|
||||
onToggle={onAddonToggle}
|
||||
onConfigure={onAddonConfigure}
|
||||
onShare={onAddonShare}
|
||||
dataset={{ addon }}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue