addon prompt, share prompt and addons adapted to the new modal dialog

src/common/ModalDialog/styles.less

@@ -45,15 +45,20 @@
         }
 
         h1 {
+            margin-bottom: 1rem;
             font-size: 1.2rem;
         }
 
         .modal-dialog-content {
+            padding: 1rem;
+
+            >:not(:first-child) {
                 margin-top: 1rem;
             }
+        }
 
         .modal-dialog-buttons {
-            margin-top: 1rem;
+            margin: 1rem;
             display: flex;
             flex-direction: row;
         }
@@ -94,6 +99,6 @@
     }
 
     &:not(:last-child) {
-        margin-right: 1rem;
+        margin-right: 2rem;
     }
 }

src/common/SharePrompt/SharePrompt.js

@@ -2,38 +2,18 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-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, onClick }) => {
+const SharePrompt = ({ className, url }) => {
     const inputRef = React.useRef(null);
-    const focusRoute = useRouteFocused();
     const copyToClipboard = React.useCallback(() => {
         inputRef.current.select();
         document.execCommand('copy');
     }, []);
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof close === 'function') {
-                close();
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [close, focusRoute]);
     return (
-        <div className={classnames(className, styles['share-prompt-container'])} onClick={onClick}>
+        <div className={classnames(className, styles['share-prompt-container'])}>
-            <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>
             <div className={styles['buttons-container']}>
                 <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
                     <Icon className={styles['icon']} icon={'ic_facebook'} />
@@ -52,16 +32,12 @@ const SharePrompt = ({ className, label, url, close, onClick }) => {
                 </Button>
             </div>
         </div>
-        </div>
     );
 };
 
 SharePrompt.propTypes = {
     className: PropTypes.string,
-    label: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
-    url: PropTypes.string.isRequired,
-    close: PropTypes.func,
-    onClick: PropTypes.func
 };
 
 module.exports = SharePrompt;

src/common/SharePrompt/styles.less

@@ -1,46 +1,9 @@
 .share-prompt-container {
-    position: relative;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 2.4rem 0;
-    background-color: var(--color-surfacelighter);
-
-    .close-button-container {
-        position: absolute;
-        top: 0.4rem;
-        right: 0.4rem;
-        z-index: 1;
-        width: 2rem;
-        height: 2rem;
-        padding: 0.4rem;
-
-        &:hover {
-            background-color: var(--color-surfacelight);
-        }
-
-        .icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-backgrounddarker);
-        }
-    }
-
-    .share-prompt-content {
-        padding: 0 2.4rem;
-
-        .share-prompt-label {
-            font-size: 1.3rem;
-            color: var(--color-backgrounddarker);
-        }
-
     .buttons-container {
         flex: none;
         align-self: stretch;
         display: flex;
         flex-direction: row;
-            margin: 1.4rem 0;
 
         .button-container {
             flex-grow: 0;
@@ -70,10 +33,15 @@
                 text-align: center;
             }
 
-                &:hover, &:focus {
+            &:hover {
                 filter: brightness(1.2);
             }
 
+            &:focus {
+                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+                outline-offset: calc(-2 * var(--focus-outline-size));
+            }
+
             &:not(:last-child) {
                 margin-right: 2rem;
             }
@@ -91,6 +59,7 @@
     .url-container {
         display: flex;
         flex-direction: row;
+        margin-top: 2rem;
         border: thin solid var(--color-surface);
 
         .url-content {
@@ -100,6 +69,7 @@
             font-size: 0.9rem;
             color: var(--color-surfacedark);
             text-align: center;
+            border-right: thin solid var(--color-surface);
         }
 
         .copy-button {
@@ -125,9 +95,13 @@
                 color: var(--color-surfacedarker);
             }
 
-                &:hover, &:focus {
+            &:hover {
                 filter: brightness(1.2);
             }
+
+            &:focus {
+                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+                outline-offset: calc(-1.5 * var(--focus-outline-size));
             }
         }
     }

src/routes/Addons/AddonPrompt/AddonPrompt.js

@@ -1,32 +1,11 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
-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, toggle }) => {
+const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
-    const focusRoute = useRouteFocused();
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape') {
-                cancel();
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [cancel, focusRoute]);
     return (
-        <div className={classnames(className, styles['addon-prompt-container'])} onClick={onClick}>
+        <div className={classnames(className, styles['addon-prompt-container'])}>
-            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
-                <Icon className={styles['icon']} icon={'ic_x'} />
-            </Button>
-            <div className={styles['addon-prompt-content']}>
             <div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
                 {
                     typeof logo === 'string' && logo.length > 0 ?
@@ -103,15 +82,6 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
                     null
             }
         </div>
-            <div className={styles['buttons-container']}>
-                <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'} onClick={() => { toggle(); cancel() }}>
-                    <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
-                </Button>
-            </div>
-        </div>
     );
 };
 
@@ -127,11 +97,7 @@ AddonPrompt.propTypes = {
     })),
     version: PropTypes.string,
     transportUrl: PropTypes.string,
-    installed: PropTypes.bool,
+    official: PropTypes.bool
-    official: PropTypes.bool,
-    cancel: PropTypes.func,
-    onClick: PropTypes.func,
-    toggle: PropTypes.func
 };
 
 module.exports = AddonPrompt;

src/routes/Addons/AddonPrompt/styles.less

@@ -1,40 +1,4 @@
 .addon-prompt-container {
-    position: relative;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 3rem 0;
-    background-color: var(--color-surfacelighter);
-
-    .close-button-container {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        z-index: 1;
-        width: 2.5rem;
-        height: 2.5rem;
-        padding: 0.5rem;
-
-        &:hover {
-            background-color: var(--color-surfacelight);
-        }
-
-        .icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-backgrounddarker);
-        }
-    }
-
-    .addon-prompt-content {
-        flex-grow: 0;
-        flex-shrink: 1;
-        flex-basis: auto;
-        align-self: stretch;
-        padding: 0 3rem;
-        overflow-y: auto;
-
     .title-container {
         font-size: 3rem;
         font-weight: 300;
@@ -89,66 +53,3 @@
         }
     }
 }
-
-    .buttons-container {
-        flex: none;
-        align-self: stretch;
-        display: flex;
-        flex-direction: row;
-        margin-top: 2rem;
-        padding: 0 3rem;
-
-        .button-container {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            height: 4rem;
-            padding: 0 1rem;
-
-            &:first-child {
-                margin-right: 2rem;
-            }
-
-            .label {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: auto;
-                max-height: 2.4em;
-                font-size: 1.3rem;
-                font-weight: 500;
-                text-align: center;
-            }
-        }
-
-        .cancel-button, .uninstall-button {
-            outline-color: var(--color-surfacedark);
-            outline-style: solid;
-
-            &:hover, &:focus {
-                background-color: var(--color-surfacelight);
-            }
-
-            .label {
-                color: var(--color-backgrounddarker);
-            }
-        }
-
-        .install-button {
-            background-color: var(--color-signal5);
-
-            &:hover, &:focus {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline-color: var(--color-surfacedarker);
-            }
-
-            .label {
-                color: var(--color-surfacelighter);
-            }
-        }
-    }
-}

src/routes/Addons/Addons.js

@@ -1,8 +1,6 @@
 const React = require('react');
-const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Modal, useRouteFocused } = require('stremio-router');
+const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
-const { Button, Multiselect, NavBar, TextInput, SharePrompt } = require('stremio/common');
 const Addon = require('./Addon');
 const AddonPrompt = require('./AddonPrompt');
 const useAddons = require('./useAddons');
@@ -11,7 +9,6 @@ const styles = require('./styles');
 
 const Addons = ({ urlParams, queryParams }) => {
     const inputRef = React.useRef(null);
-    const focusRoute = useRouteFocused();
     const [query, setQuery] = React.useState('');
     const queryOnChange = React.useCallback((event) => {
         setQuery(event.currentTarget.value);
@@ -29,32 +26,13 @@ const Addons = ({ urlParams, queryParams }) => {
             setAddAddonModalOpened(false);
         }
     }, [setSelectedAddon]);
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof close === 'function') {
-                setAddAddonModalOpened(false);
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [close, focusRoute]);
-    const promptModalBackgroundOnClick = React.useCallback((event) => {
-        if (!event.nativeEvent.clearSelectedAddonPrevented) {
-            clearSelectedAddon();
-            setAddAddonModalOpened(false);
-            setSharedAddon(null);
-        }
-    }, [clearSelectedAddon]);
-    const promptOnClick = React.useCallback((event) => {
-        event.nativeEvent.clearSelectedAddonPrevented = true;
-    }, []);
     const setInstalledAddon = React.useCallback((currentAddon) => {
         return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
     }, [installedAddons]);
+    const toggleAddon = React.useCallback(() => {
+        setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
+        clearSelectedAddon();
+    });
     return (
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Add-ons'} />
@@ -108,34 +86,56 @@ const Addons = ({ urlParams, queryParams }) => {
                 </div>
                 {
                     addAddonModalOpened ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
+                        <ModalDialog
-                            <div className={classnames(styles['prompt-container'], styles['add-addon-prompt-container'])}>
+                            className={styles['add-addon-prompt-container']}
-                                <div className={classnames(styles['prompt'], styles['add-addon-prompt'])} onClick={promptOnClick}>
+                            title={'Add add-on'}
-                                    <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={() => setAddAddonModalOpened(false)}>
+                            buttons={[
-                                        <Icon className={styles['icon']} icon={'ic_x'} />
+                                {
-                                    </Button>
+                                    label: 'Cancel',
-                                    <div className={styles['add-addon-prompt-content']}>
+                                    className: styles['cancel-button'],
-                                        <div className={styles['add-addon-prompt-label']}>Add add-on</div>
+                                    props: {
+                                        title: 'Cancel',
+                                        onClick: () => setAddAddonModalOpened(false)
+                                    }
+                                },
+                                {
+                                    label: 'Add',
+                                    props: {
+                                        title: 'Add',
+                                        onClick: onAddButtonClicked
+                                    }
+                                }
+                            ]}
+                            onCloseRequest={() => setAddAddonModalOpened(false)}
+                        >
                             <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
-                                        <div className={styles['buttons-container']}>
+                        </ModalDialog>
-                                            <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={() => setAddAddonModalOpened(false)}>
-                                                <div className={styles['label']}>Cancel</div>
-                                            </Button>
-                                            <Button className={classnames(styles['button-container'], styles['add-button'])} title={'Add'} onClick={onAddButtonClicked}>
-                                                <div className={styles['label']}>Add</div>
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Modal>
                         :
                         null
                 }
                 {
                     selectedAddon !== null ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
+                        <ModalDialog
-                            <div className={classnames(styles['prompt-container'], styles['addon-prompt-container'])}>
+                            className={styles['addon-prompt-container']}
+                            buttons={[
+                                {
+                                    label: 'Cancel',
+                                    className: styles['cancel-button'],
+                                    props: {
+                                        title: 'Cancel',
+                                        onClick: clearSelectedAddon
+                                    }
+                                },
+                                {
+                                    label: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                    props: {
+                                        title: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                        onClick: toggleAddon
+                                    }
+                                }
+                            ]}
+                            onCloseRequest={clearSelectedAddon}
+                        >
                             <AddonPrompt
                                 {...selectedAddon.manifest}
                                 transportUrl={selectedAddon.transportUrl}
@@ -143,27 +143,20 @@ const Addons = ({ urlParams, queryParams }) => {
                                 official={selectedAddon.flags.official}
                                 className={styles['prompt']}
                                 cancel={clearSelectedAddon}
-                                    onClick={promptOnClick}
-                                    toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)}
                             />
-                            </div>
+                        </ModalDialog>
-                        </Modal>
                         :
                         null
                 }
                 {
                     sharedAddon !== null ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
+                        <ModalDialog className={styles['share-prompt-container']} title={'Share add-on'} onCloseRequest={() => setSharedAddon(null)}>
-                            <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>
+                        </ModalDialog>
-                        </Modal>
                         :
                         null
                 }

src/routes/Addons/styles.less

@@ -123,68 +123,9 @@
     }
 }
 
-.prompt-modal-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-background60);
-
-    .prompt-container {
-        flex: none;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 80%;
-
-        .prompt {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: auto;
-            align-self: stretch;
-        }
-    }
-
 .add-addon-prompt-container {
     width: 30rem;
 
-        .add-addon-prompt {
-            position: relative;
-            z-index: 0;
-            display: flex;
-            flex-direction: column;
-            padding: 2.4rem 0;
-            background-color: var(--color-surfacelighter);
-        
-            .close-button-container {
-                position: absolute;
-                top: 0.4rem;
-                right: 0.4rem;
-                z-index: 1;
-                width: 2rem;
-                height: 2rem;
-                padding: 0.4rem;
-        
-                &:hover {
-                    background-color: var(--color-surfacelight);
-                }
-        
-                .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-backgrounddarker);
-                }
-            }
-        
-            .add-addon-prompt-content {
-                padding: 0 2.4rem;
-        
-                .add-addon-prompt-label {
-                    margin-bottom: 1.4rem;
-                    font-size: 1.3rem;
-                    color: var(--color-backgrounddarker);
-                }
-    
     .url-content {
         flex: 1;
         width: 100%;
@@ -194,74 +135,19 @@
         border: thin solid var(--color-surface);
     }
 
-                .buttons-container {
-                    flex: none;
-                    align-self: stretch;
-                    display: flex;
-                    flex-direction: row;
-                    margin-top: 2rem;
-            
-                    .button-container {
-                        flex: 1;
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        justify-content: center;
-                        height: 3rem;
-                        padding: 0 1rem;
-            
-                        &:first-child {
-                            margin-right: 2rem;
-                        }
-            
-                        .label {
-                            flex-grow: 0;
-                            flex-shrink: 1;
-                            flex-basis: auto;
-                            max-height: 2.4em;
-                            font-size: 1.2rem;
-                            text-align: center;
-                        }
-                    }
-            
     .cancel-button {
-                        outline-color: var(--color-surfacedark);
+        background-color: var(--color-surfacedark);
-                        outline-style: solid;
-            
-                        &:hover, &:focus {
-                            background-color: var(--color-surfacelight);
-                        }
-            
-                        .label {
-                            color: var(--color-backgrounddarker);
-                        }
-                    }
-            
-                    .add-button {
-                        background-color: var(--color-signal5);
-            
-                        &:hover, &:focus {
-                            filter: brightness(1.2);
-                        }
-            
-                        &:focus {
-                            outline-color: var(--color-surfacedarker);
-                        }
-            
-                        .label {
-                            color: var(--color-surfacelighter);
-                        }
-                    }
-                }
-            }
     }
 }
 
 .addon-prompt-container {
     width: 50rem;
+
+    .cancel-button {
+        background-color: var(--color-surfacedark);
+    }
 }
 
 .share-prompt-container {
     width: 30rem;
 }
-}