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

Merge pull request #360 from Stremio/feat/addons-configure

Browse source 
feat: add configure button for addons
This commit is contained in:
Alexandru Branza 2023-05-23 22:46:46 +02:00 committed by GitHub
commit ea24b6472b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
package-lock.json generated
View file

@ -12,7 +12,7 @@
"@babel/runtime": "7.16.0",
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.44.13",
"@stremio/stremio-core-web": "0.44.14",
"@stremio/stremio-icons": "4.0.0",
"@stremio/stremio-video": "0.0.24",
"a-color-picker": "1.2.1",
@ -67,9 +67,6 @@
"workbox-webpack-plugin": "^6.5.3"
}
},
"../stremio-core": {
"extraneous": true
},
"node_modules/@babel/code-frame": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@ -2705,9 +2702,9 @@
"integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA=="
},
"node_modules/@stremio/stremio-core-web": {
"version": "0.44.13",
"resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.13.tgz",
"integrity": "sha512-TrjsS9RHfbhuZZemAAOm4PRiKjxHN6LzTXSO/FfhKFaRc2GyJChLjjaSM35TwfbpYzWr6Y8yyQXkUcKlqezRrg==",
"version": "0.44.14",
"resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.14.tgz",
"integrity": "sha512-v2m6EoR49Qohbrv7PxwX1yS1XjNxCkTiEe4KOEAHsCydvjtryJOpBZCXFWDstSx2o57uYwfJq1DNJRvEUVpeCA==",
"dependencies": {
"@babel/runtime": "7.16.0"
}
@ -16798,9 +16795,9 @@
"integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA=="
},
"@stremio/stremio-core-web": {
"version": "0.44.13",
"resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.13.tgz",
"integrity": "sha512-TrjsS9RHfbhuZZemAAOm4PRiKjxHN6LzTXSO/FfhKFaRc2GyJChLjjaSM35TwfbpYzWr6Y8yyQXkUcKlqezRrg==",
"version": "0.44.14",
"resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.14.tgz",
"integrity": "sha512-v2m6EoR49Qohbrv7PxwX1yS1XjNxCkTiEe4KOEAHsCydvjtryJOpBZCXFWDstSx2o57uYwfJq1DNJRvEUVpeCA==",
"requires": {
"@babel/runtime": "7.16.0"
}

2
package.json
View file

@ -15,7 +15,7 @@
"@babel/runtime": "7.16.0",
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.44.13",
"@stremio/stremio-core-web": "0.44.14",
"@stremio/stremio-icons": "4.0.0",
"@stremio/stremio-video": "0.0.24",
"a-color-picker": "1.2.1",

23
src/common/AddonDetailsModal/AddonDetailsModal.js
View file

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

40
src/routes/Addons/Addon/Addon.js
View file

@ -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,24 @@ 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={!installed && behaviorHints.configurationRequired ? configureButtonOnClick : 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 +129,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
};

41
src/routes/Addons/Addon/styles.less
View file

@ -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;
@ -187,13 +208,9 @@
align-items: center;
justify-content: space-between;
.install-button-container, .uninstall-button-container, .share-button-container {
&:not(:first-child) {
margin-top: 0;
}
}
.share-button-container {
flex: none;
.icon {
margin-right: 0;
}

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

@ -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 }}
/>