open/close SharePrompt works

src/common/SharePrompt/SharePrompt.js

@@ -2,14 +2,14 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { useFocusable } = require('stremio-router');
+const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const styles = require('./styles');
 
-const SharePrompt = ({ className, label, url, close }) => {
+const SharePrompt = ({ className, label, url, close, onClick }) => {
     const inputRef = React.useRef(null);
-    const focusable = useFocusable();
+    const focusable = useRouteFocused();
     const copyToClipboard = React.useCallback(() => {
         inputRef.current.select();
         document.execCommand('copy');
@@ -28,9 +28,9 @@ const SharePrompt = ({ className, label, url, close }) => {
         };
     }, [close, focusable]);
     return (
-        <div className={classnames(className, styles['share-prompt-container'])}>
-            <Button className={styles['close-button-container']}>
-                <Icon className={styles['icon']} icon={'ic_x'} onClick={close} />
+        <div className={classnames(className, styles['share-prompt-container'])} onClick={onClick}>
+            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={close}>
+                <Icon className={styles['icon']} icon={'ic_x'} />
             </Button>
             <div className={styles['share-prompt-content']}>
                 <div className={styles['share-prompt-label']}>{label}</div>
@@ -60,7 +60,8 @@ SharePrompt.propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
-    close: PropTypes.func
+    close: PropTypes.func,
+    onClick: PropTypes.func
 };
 
 module.exports = SharePrompt;

src/routes/Addons/Addon/Addon.js

@@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
 const styles = require('./styles');
 
-const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, isProtected, toggle }) => {
+const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, isProtected, toggle, onShareButtonClicked }) => {
     const onKeyUp = React.useCallback((event) => {
         if (event.key === 'Enter' && typeof toggle === 'function') {
             toggle(event);
@@ -55,7 +55,7 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
                 <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} disabled={isProtected} onClick={toggle}>
                     <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
                 </Button>
-                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1}>
+                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
                     <div className={styles['label']}>Share addon</div>
                 </Button>
@@ -75,7 +75,8 @@ Addon.propTypes = {
     transportUrl: PropTypes.string,
     installed: PropTypes.bool,
     isProtected: PropTypes.bool,
-    toggle: PropTypes.func
+    toggle: PropTypes.func,
+    onShareButtonClicked: PropTypes.func
 };
 
 module.exports = Addon;

src/routes/Addons/Addons.js

@@ -1,7 +1,8 @@
 const React = require('react');
+const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Modal } = require('stremio-router');
-const { Button, Multiselect, NavBar, TextInput } = require('stremio/common');
+const { Button, Multiselect, NavBar, TextInput, SharePrompt } = require('stremio/common');
 const Addon = require('./Addon');
 const AddonPrompt = require('./AddonPrompt');
 const useAddons = require('./useAddons');
@@ -15,12 +16,14 @@ const Addons = ({ urlParams, queryParams }) => {
     }, []);
     const [addons, dropdowns, setSelectedAddon, installSelectedAddon, uninstallSelectedAddon, installedAddons] = useAddons(urlParams, queryParams);
     const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
-    const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
+    const [sharedAddon, setSharedAddon] = React.useState(null);
+    const promptModalBackgroundOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.clearSelectedAddonPrevented) {
             clearSelectedAddon();
+            setSharedAddon(null);
         }
     }, []);
-    const addonPromptOnClick = React.useCallback((event) => {
+    const promptOnClick = React.useCallback((event) => {
         event.nativeEvent.clearSelectedAddonPrevented = true;
     }, []);
     const setInstalledAddon = React.useCallback((currentAddon) => {
@@ -57,15 +60,48 @@ const Addons = ({ urlParams, queryParams }) => {
                                 (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
                             ))
                             .map((addon, index) => (
-                                <Addon {...addon.manifest} key={index} installed={setInstalledAddon(addon)} isProtected={addon.flags && addon.flags.protected} className={styles['addon']} toggle={() => setSelectedAddon(addon.transportUrl)} />
+                                <Addon
+                                    {...addon.manifest}
+                                    key={index}
+                                    installed={setInstalledAddon(addon)}
+                                    isProtected={addon.flags && addon.flags.protected}
+                                    className={styles['addon']}
+                                    toggle={() => setSelectedAddon(addon.transportUrl)}
+                                    onShareButtonClicked={() => setSharedAddon(addon)}
+                                />
                             ))
                     }
                 </div>
                 {
                     selectedAddon !== null ?
-                        <Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
-                            <div className={styles['addon-prompt-container']}>
-                                <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)} />
+                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
+                            <div className={classnames(styles['prompt-container'], styles['addon-prompt-container'])}>
+                                <AddonPrompt
+                                    {...selectedAddon.manifest}
+                                    transportUrl={selectedAddon.transportUrl}
+                                    installed={setInstalledAddon(selectedAddon)}
+                                    official={selectedAddon.flags.official}
+                                    className={styles['prompt']}
+                                    cancel={clearSelectedAddon}
+                                    onClick={promptOnClick}
+                                    toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)}
+                                />
+                            </div>
+                        </Modal>
+                        :
+                        null
+                }
+                {
+                    sharedAddon !== null ?
+                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
+                            <div className={classnames(styles['prompt-container'], styles['share-prompt-container'])}>
+                                <SharePrompt
+                                    label={'Share add-on'}
+                                    url={sharedAddon.transportUrl}
+                                    className={styles['prompt']}
+                                    close={() => setSharedAddon(null)}
+                                    onClick={promptOnClick}
+                                />
                             </div>
                         </Modal>
                         :

src/routes/Addons/styles.less

@@ -117,25 +117,32 @@
     }
 }
 
-.addon-prompt-modal-container {
+.prompt-modal-container {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--color-background60);
 
-    .addon-prompt-container {
+    .prompt-container {
         flex: none;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 50rem;
         height: 80%;
 
-        .addon-prompt {
+        .prompt {
             flex-grow: 0;
             flex-shrink: 1;
             flex-basis: auto;
             align-self: stretch;
         }
     }
+
+    .addon-prompt-container {
+        width: 50rem;
+    }
+
+    .share-prompt-container {
+        width: 30rem;
+    }
 }

src/routes/Addons/useSelectedAddon.js

@@ -21,7 +21,7 @@ const useSelectedAddon = (transportUrl) => {
             const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
             const queryParams = new URLSearchParams(search);
             queryParams.delete('addon');
-            if (search && queryParams) {
+            if (!queryParams.values().next().done) {
                 window.location.replace(`#${pathname}?${queryParams.toString()}`);
             }
             else {