From cc976f27e77e5514d97aff5f03dbaafe0b8a857e Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 26 Apr 2023 09:07:01 +0200
Subject: [PATCH] feat: add configure button for addons

---
 .../AddonDetailsModal/AddonDetailsModal.js    | 23 +++++++++++-
 src/routes/Addons/Addon/Addon.js              | 35 ++++++++++++++++---
 src/routes/Addons/Addon/styles.less           | 33 +++++++++++++----
 src/routes/Addons/Addons.js                   |  7 ++++
 4 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index 2c417a142..d3143fb86 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -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}>
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index fed54fcfb..e984d97d8 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -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
 };
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 949c77020..0df6d6403 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -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;
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index cddeb980a..e3e46b857 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -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 }}
                                                     />