Merge remote-tracking branch 'origin/master' into core-settings

src/common/ModalDialog/ModalDialog.js

@@ -7,38 +7,48 @@ const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
 const ModalDialog = ({ className, children, title, buttons, onCloseRequest }) => {
-    const dispatchCloseRequestEvent = React.useCallback(event => {
-        if (typeof onCloseRequest === 'function') {
-            onCloseRequest({
-                type: 'closeRequest',
-                reactEvent: event,
-                nativeEvent: event.nativeEvent
-            });
-        }
-    }, [onCloseRequest]);
     React.useEffect(() => {
         const onKeyDown = (event) => {
             if (event.key === 'Escape') {
-                dispatchCloseRequestEvent(event);
+                onCloseRequest({
+                    type: 'close',
+                    nativeEvent: event
+                });
             }
         };
         window.addEventListener('keydown', onKeyDown);
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [dispatchCloseRequestEvent]);
+    }, [onCloseRequest]);
-    const onModalContainerMouseDown = React.useCallback(event => {
+    const closeButtonOnClick = React.useCallback((event) => {
+        onCloseRequest({
+            type: 'close',
+            reactEvent: event,
+            nativeEvent: event.nativeEvent
+        });
+    }, [onCloseRequest]);
+    const onModalContainerMouseDown = React.useCallback((event) => {
         if (event.target === event.currentTarget) {
-            dispatchCloseRequestEvent(event);
+            onCloseRequest({
+                type: 'close',
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
         }
-    }, [dispatchCloseRequestEvent]);
+    }, [onCloseRequest]);
     return (
         <Modal className={styles['modal-container']} onMouseDown={onModalContainerMouseDown}>
             <div className={classnames(className, styles['modal-dialog-container'])}>
-                <Button className={styles['close-button-container']} title={'Close'} onClick={dispatchCloseRequestEvent}>
+                <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
                     <Icon className={styles['icon']} icon={'ic_x'} />
                 </Button>
-                <h1>{title}</h1>
+                {
+                    typeof title === 'string' && title.length > 0 ?
+                        <h1>{title}</h1>
+                        :
+                        null
+                }
                 <div className={styles['modal-dialog-content']}>
                     {children}
                 </div>

src/common/ModalDialog/styles.less

@@ -45,15 +45,20 @@
         }
 
         h1 {
+            margin-bottom: 1rem;
             font-size: 1.2rem;
         }
 
         .modal-dialog-content {
-            margin-top: 1rem;
+            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,55 +2,34 @@ 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 Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const styles = require('./styles');
 
-const SharePrompt = ({ className, label, url, close }) => {
+const SharePrompt = ({ className, url }) => {
     const inputRef = React.useRef(null);
-    const focusable = useFocusable();
     const copyToClipboard = React.useCallback(() => {
         inputRef.current.select();
         document.execCommand('copy');
     }, []);
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof close === 'function') {
-                close();
-            }
-        };
-        if (focusable) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [close, focusable]);
     return (
         <div className={classnames(className, styles['share-prompt-container'])}>
-            <Button className={styles['close-button-container']}>
+            <div className={styles['buttons-container']}>
-                <Icon className={styles['icon']} icon={'ic_x'} onClick={close} />
+                <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
-            </Button>
+                    <Icon className={styles['icon']} icon={'ic_facebook'} />
-            <div className={styles['share-prompt-content']}>
+                    <div className={styles['label']}>FACEBOOK</div>
-                <div className={styles['share-prompt-label']}>{label}</div>
+                </Button>
-                <div className={styles['buttons-container']}>
+                <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
-                    <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_twitter'} />
-                        <Icon className={styles['icon']} icon={'ic_facebook'} />
+                    <div className={styles['label']}>TWITTER</div>
-                        <div className={styles['label']}>FACEBOOK</div>
+                </Button>
-                    </Button>
+            </div>
-                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
+            <div className={styles['url-container']}>
-                        <Icon className={styles['icon']} icon={'ic_twitter'} />
+                <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
-                        <div className={styles['label']}>TWITTER</div>
+                <Button className={styles['copy-button']} onClick={copyToClipboard}>
-                    </Button>
+                    <Icon className={styles['icon']} icon={'ic_link'} />
-                </div>
+                    <div className={styles['label']}>Copy</div>
-                <div className={styles['url-container']}>
+                </Button>
-                    <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
-                    <Button className={styles['copy-button']} onClick={copyToClipboard}>
-                        <Icon className={styles['icon']} icon={'ic_link'} />
-                        <div className={styles['label']}>Copy</div>
-                    </Button>
-                </div>
             </div>
         </div>
     );
@@ -58,9 +37,7 @@ const SharePrompt = ({ className, label, url, close }) => {
 
 SharePrompt.propTypes = {
     className: PropTypes.string,
-    label: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
-    url: PropTypes.string.isRequired,
-    close: PropTypes.func
 };
 
 module.exports = SharePrompt;

src/common/SharePrompt/styles.less

@@ -1,133 +1,107 @@
 .share-prompt-container {
-    position: relative;
+    .buttons-container {
-    z-index: 0;
+        flex: none;
-    display: flex;
+        align-self: stretch;
-    flex-direction: column;
+        display: flex;
-    padding: 2.4rem 0;
+        flex-direction: row;
-    background-color: var(--color-surfacelighter);
 
-    .close-button-container {
+        .button-container {
-        position: absolute;
+            flex-grow: 0;
-        top: 0.4rem;
+            flex-shrink: 1;
-        right: 0.4rem;
+            flex-basis: 14rem;
-        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;
+            align-items: center;
+            justify-content: center;
+            padding: 0.6rem 1rem;
 
-            .button-container {
+            .icon {
-                flex-grow: 0;
+                flex: none;
-                flex-shrink: 1;
+                width: 1.4rem;
-                flex-basis: 14rem;
+                height: 1.4rem;
-                display: flex;
+                margin-right: 0.6rem;
-                flex-direction: row;
+                fill: var(--color-surfacelighter);
-                align-items: center;
-                justify-content: center;
-                padding: 0.6rem 1rem;
-
-                .icon {
-                    flex: none;
-                    width: 1.4rem;
-                    height: 1.4rem;
-                    margin-right: 0.6rem;
-                    fill: var(--color-surfacelighter);
-                }
-
-                .label {
-                    flex-grow: 0;
-                    flex-shrink: 1;
-                    flex-basis: auto;
-                    font-size: 0.8rem;
-                    font-weight: 500;
-                    color: var(--color-surfacelighter);
-                    text-align: center;
-                }
-
-                &:hover, &:focus {
-                    filter: brightness(1.2);
-                }
-
-                &:not(:last-child) {
-                    margin-right: 2rem;
-                }
             }
 
-            .facebook-button {
+            .label {
-                background-color: var(--color-facebook);
-            }
-
-            .twitter-button {
-                background-color: var(--color-twitter);
-            }
-        }
-
-        .url-container {
-            display: flex;
-            flex-direction: row;
-            border: thin solid var(--color-surface);
-
-            .url-content {
-                flex: 1;
-                min-width: 12rem;
-                padding: 0.6rem 1rem;
-                font-size: 0.9rem;
-                color: var(--color-surfacedark);
-                text-align: center;
-            }
-
-            .copy-button {
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: auto;
-                display: flex;
+                font-size: 0.8rem;
-                flex-direction: row;
+                font-weight: 500;
-                align-items: center;
+                color: var(--color-surfacelighter);
-                justify-content: center;
+                text-align: center;
-                padding: 0.6rem 1rem;
+            }
-                background-color: var(--color-surface);
 
-                .icon {
+            &:hover {
-                    flex: none;
+                filter: brightness(1.2);
-                    width: 1.4rem;
+            }
-                    height: 1.4rem;
-                    margin-right: 0.6rem;
-                    fill: var(--color-surfacedarker);
-                }
 
-                .label {
+            &:focus {
-                    color: var(--color-surfacedarker);
+                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                }
+                outline-offset: calc(-2 * var(--focus-outline-size));
+            }
 
-                &:hover, &:focus {
+            &:not(:last-child) {
-                    filter: brightness(1.2);
+                margin-right: 2rem;
-                }
+            }
+        }
+
+        .facebook-button {
+            background-color: var(--color-facebook);
+        }
+
+        .twitter-button {
+            background-color: var(--color-twitter);
+        }
+    }
+
+    .url-container {
+        display: flex;
+        flex-direction: row;
+        margin-top: 2rem;
+        border: thin solid var(--color-surface);
+
+        .url-content {
+            flex: 1;
+            min-width: 12rem;
+            padding: 0.6rem 1rem;
+            font-size: 0.9rem;
+            color: var(--color-surfacedark);
+            text-align: center;
+            border-right: thin solid var(--color-surface);
+        }
+
+        .copy-button {
+            flex-grow: 0;
+            flex-shrink: 1;
+            flex-basis: auto;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            padding: 0.6rem 1rem;
+            background-color: var(--color-surface);
+
+            .icon {
+                flex: none;
+                width: 1.4rem;
+                height: 1.4rem;
+                margin-right: 0.6rem;
+                fill: var(--color-surfacedarker);
+            }
+
+            .label {
+                color: var(--color-surfacedarker);
+            }
+
+            &: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/common/routesRegexp.js

@@ -24,7 +24,7 @@ const routesRegexp = {
         urlParamsNames: ['type', 'id', 'videoId']
     },
     addons: {
-        regexp: /^\/addons(?:\/([^\/]*?))?(?:\/([^\/]*?))?\/?$/i,
+        regexp: /^\/addons(?:\/([^\/]*?))?(?:\/([^\/]*?))?\/?$/i, // TODO both are required or none
         urlParamsNames: ['category', 'type']
     },
     settings: {

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, toggle }) => {
+const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, 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} 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>
@@ -74,7 +74,8 @@ Addon.propTypes = {
     version: PropTypes.string,
     transportUrl: PropTypes.string,
     installed: PropTypes.bool,
-    toggle: PropTypes.func
+    toggle: PropTypes.func,
+    onShareButtonClicked: PropTypes.func
 };
 
 module.exports = Addon;

src/routes/Addons/AddonPrompt/AddonPrompt.js

@@ -1,116 +1,86 @@
 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 { Button } = require('stremio/common');
 const styles = require('./styles');
 
-const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel }) => {
+const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
-    const focusable = useFocusable();
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape') {
-                cancel();
-            }
-        };
-        if (focusable) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [cancel, focusable]);
     return (
         <div className={classnames(className, styles['addon-prompt-container'])}>
-            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
+            <div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
-                <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 ?
-                            <div className={styles['logo-container']}>
-                                <img className={styles['logo']} src={logo} alt={' '} />
-                            </div>
-                            :
-                            null
-                    }
-                    {typeof name === 'string' && name.length > 0 ? name : id}
-                    {' '}
-                    {
-                        typeof version === 'string' && version.length > 0 ?
-                            <span className={styles['version-container']}>v.{version}</span>
-                            :
-                            null
-                    }
-                </div>
                 {
-                    typeof description === 'string' && description.length > 0 ?
+                    typeof logo === 'string' && logo.length > 0 ?
-                        <div className={styles['section-container']}>
+                        <div className={styles['logo-container']}>
-                            <span className={styles['section-header']}>{description}</span>
+                            <img className={styles['logo']} src={logo} alt={' '} />
                         </div>
                         :
                         null
                 }
+                {typeof name === 'string' && name.length > 0 ? name : id}
+                {' '}
                 {
-                    typeof transportUrl === 'string' && transportUrl.length > 0 ?
+                    typeof version === 'string' && version.length > 0 ?
-                        <div className={styles['section-container']}>
+                        <span className={styles['version-container']}>v.{version}</span>
-                            <span className={styles['section-header']}>URL: </span>
-                            <span className={classnames(styles['section-label'], styles['transport-url-label'])}>{transportUrl}</span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    Array.isArray(types) && types.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>Supported types: </span>
-                            <span className={styles['section-label']}>
-                                {
-                                    types.length === 1 ?
-                                        types[0]
-                                        :
-                                        types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
-                                }
-                            </span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    Array.isArray(catalogs) && catalogs.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>Supported catalogs: </span>
-                            <span className={styles['section-label']}>
-                                {
-                                    catalogs.length === 1 ?
-                                        catalogs[0].name
-                                        :
-                                        catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
-                                }
-                            </span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    !official ?
-                        <div className={styles['section-container']}>
-                            <div className={classnames(styles['section-label'], styles['disclaimer-label'])}>Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.</div>
-                        </div>
                         :
                         null
                 }
             </div>
-            <div className={styles['buttons-container']}>
+            {
-                <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'cancel'} onClick={cancel}>
+                typeof description === 'string' && description.length > 0 ?
-                    <div className={styles['label']}>Cancel</div>
+                    <div className={styles['section-container']}>
-                </Button>
+                        <span className={styles['section-header']}>{description}</span>
-                <Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}>
+                    </div>
-                    <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
+                    :
-                </Button>
+                    null
-            </div>
+            }
+            {
+                typeof transportUrl === 'string' && transportUrl.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>URL: </span>
+                        <span className={classnames(styles['section-label'], styles['transport-url-label'])}>{transportUrl}</span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                Array.isArray(types) && types.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>Supported types: </span>
+                        <span className={styles['section-label']}>
+                            {
+                                types.length === 1 ?
+                                    types[0]
+                                    :
+                                    types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
+                            }
+                        </span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                Array.isArray(catalogs) && catalogs.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>Supported catalogs: </span>
+                        <span className={styles['section-label']}>
+                            {
+                                catalogs.length === 1 ?
+                                    catalogs[0].name
+                                    :
+                                    catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
+                            }
+                        </span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                !official ?
+                    <div className={styles['section-container']}>
+                        <div className={classnames(styles['section-label'], styles['disclaimer-label'])}>Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.</div>
+                    </div>
+                    :
+                    null
+            }
         </div>
     );
 };
@@ -127,9 +97,7 @@ AddonPrompt.propTypes = {
     })),
     version: PropTypes.string,
     transportUrl: PropTypes.string,
-    installed: PropTypes.bool,
+    official: PropTypes.bool
-    official: PropTypes.bool,
-    cancel: PropTypes.func
 };
 
 module.exports = AddonPrompt;

src/routes/Addons/AddonPrompt/styles.less

@@ -1,153 +1,54 @@
 .addon-prompt-container {
-    position: relative;
+    .title-container {
-    z-index: 0;
+        font-size: 3rem;
-    display: flex;
+        font-weight: 300;
-    flex-direction: column;
+        word-break: break-all;
-    padding: 3rem 0;
-    background-color: var(--color-surfacelighter);
 
-    .close-button-container {
+        &.title-with-logo-container {
-        position: absolute;
+            &::first-line {
-        top: 0.5rem;
+                line-height: 5rem;
-        right: 0.5rem;
+            }
-        z-index: 1;
-        width: 2.5rem;
-        height: 2.5rem;
-        padding: 0.5rem;
-
-        &:hover {
-            background-color: var(--color-surfacelight);
         }
 
-        .icon {
+        .logo-container {
-            display: block;
+            width: 5rem;
-            width: 100%;
+            height: 5rem;
-            height: 100%;
+            margin-right: 0.5rem;
-            fill: var(--color-backgrounddarker);
+            background-color: var(--color-surfacelight20);
+            float: left;
+
+            .logo {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                object-position: center;
+            }
+        }
+
+        .version-container {
+            font-size: 1.5rem;
+            font-weight: 400;
         }
     }
 
-    .addon-prompt-content {
+    .section-container {
-        flex-grow: 0;
+        margin-top: 1rem;
-        flex-shrink: 1;
-        flex-basis: auto;
-        align-self: stretch;
-        padding: 0 3rem;
-        overflow-y: auto;
 
-        .title-container {
+        .section-header {
-            font-size: 3rem;
+            font-size: 1.2rem;
+        }
+
+        .section-label {
+            font-size: 1.2rem;
             font-weight: 300;
-            word-break: break-all;
 
-            &.title-with-logo-container {
+            &.transport-url-label {
-                &::first-line {
+                user-select: text;
-                    line-height: 5rem;
-                }
             }
 
-            .logo-container {
+            &.disclaimer-label {
-                width: 5rem;
+                font-style: italic;
-                height: 5rem;
-                margin-right: 0.5rem;
-                background-color: var(--color-surfacelight20);
-                float: left;
-
-                .logo {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    object-fit: contain;
-                    object-position: center;
-                }
-            }
-
-            .version-container {
-                font-size: 1.5rem;
-                font-weight: 400;
-            }
-        }
-
-        .section-container {
-            margin-top: 1rem;
-
-            .section-header {
-                font-size: 1.2rem;
-            }
-
-            .section-label {
-                font-size: 1.2rem;
-                font-weight: 300;
-
-                &.transport-url-label {
-                    user-select: text;
-                }
-
-                &.disclaimer-label {
-                    font-style: italic;
-                }
-            }
-        }
-    }
-
-    .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,7 +1,6 @@
 const React = require('react');
 const Icon = require('stremio-icons/dom');
-const { Modal } = require('stremio-router');
+const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
-const { Button, Dropdown, NavBar, TextInput } = require('stremio/common');
 const Addon = require('./Addon');
 const AddonPrompt = require('./AddonPrompt');
 const useAddons = require('./useAddons');
@@ -9,31 +8,42 @@ const useSelectedAddon = require('./useSelectedAddon');
 const styles = require('./styles');
 
 const Addons = ({ urlParams, queryParams }) => {
+    const inputRef = React.useRef(null);
     const [query, setQuery] = React.useState('');
     const queryOnChange = React.useCallback((event) => {
         setQuery(event.currentTarget.value);
     }, []);
-    const [addons, dropdowns] = useAddons(urlParams.category, urlParams.type);
+    const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
+    const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false);
     const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
-    const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
+    const [sharedAddon, setSharedAddon] = React.useState(null);
-        if (!event.nativeEvent.clearSelectedAddonPrevented) {
+    const onAddAddonButtonClicked = React.useCallback(() => {
-            clearSelectedAddon();
+        setAddAddonModalOpened(true);
+    }, []);
+    const onAddButtonClicked = React.useCallback(() => {
+        if (inputRef.current.value.length > 0) {
+            setSelectedAddon(inputRef.current.value);
+            setAddAddonModalOpened(false);
         }
-    }, []);
+    }, [setSelectedAddon]);
-    const addonPromptOnClick = React.useCallback((event) => {
+    const installedAddon = React.useCallback((currentAddon) => {
-        event.nativeEvent.clearSelectedAddonPrevented = true;
+        return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
-    }, []);
+    }, [installedAddons]);
+    const toggleAddon = React.useCallback(() => {
+        installedAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
+        clearSelectedAddon();
+    }, [selectedAddon]);
     return (
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
                 <div className={styles['top-bar-container']}>
-                    <Button className={styles['add-button-container']} title={'Add addon'}>
+                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}>
                         <Icon className={styles['icon']} icon={'ic_plus'} />
                         <div className={styles['add-button-label']}>Add addon</div>
                     </Button>
-                    {dropdowns.map((dropdown) => (
+                    {dropdowns.map((dropdown, index) => (
-                        <Dropdown {...dropdown} key={dropdown.name} className={styles['dropdown']} />
+                        <Multiselect {...dropdown} key={index} className={styles['dropdown']} />
                     ))}
                     <label className={styles['search-bar-container']}>
                         <Icon className={styles['icon']} icon={'ic_search'} />
@@ -46,21 +56,107 @@ const Addons = ({ urlParams, queryParams }) => {
                         />
                     </label>
                 </div>
-                <div className={styles['addons-list-container']} >
+                <div className={styles['addons-list-container']}>
                     {
-                        addons.filter(({ name }) => query.length === 0 || (typeof name === 'string' && name.includes(query)))
+                        error !== null ?
-                            .map((addon) => (
+                            <div className={styles['message-container']}>
-                                <Addon {...addon} key={addon.id} className={styles['addon']} />
+                                {error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
-                            ))
+                            </div>
+                            :
+                            Array.isArray(addons) ?
+                                addons.filter((addon) => query.length === 0 ||
+                                    ((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
+                                        (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
+                                    ))
+                                    .map((addon, index) => (
+                                        <Addon
+                                            {...addon.manifest}
+                                            key={index}
+                                            installed={installedAddon(addon)}
+                                            className={styles['addon']}
+                                            toggle={() => setSelectedAddon(addon.transportUrl)}
+                                            onShareButtonClicked={() => setSharedAddon(addon)}
+                                        />
+                                    ))
+                                :
+                                <div className={styles['message-container']}>
+                                    Loading
+                                </div>
                     }
                 </div>
+                {
+                    addAddonModalOpened ?
+                        <ModalDialog
+                            className={styles['add-addon-prompt-container']}
+                            title={'Add addon'}
+                            buttons={[
+                                {
+                                    label: 'Cancel',
+                                    className: styles['cancel-button'],
+                                    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...'} />
+                        </ModalDialog>
+                        :
+                        null
+                }
                 {
                     selectedAddon !== null ?
-                        <Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
+                        <ModalDialog
-                            <div className={styles['addon-prompt-container']} onClick={addonPromptOnClick}>
+                            className={styles['addon-prompt-container']}
-                                <AddonPrompt {...selectedAddon} className={styles['addon-prompt']} cancel={clearSelectedAddon} />
+                            buttons={[
-                            </div>
+                                {
-                        </Modal>
+                                    label: 'Cancel',
+                                    className: styles['cancel-button'],
+                                    props: {
+                                        title: 'Cancel',
+                                        onClick: clearSelectedAddon
+                                    }
+                                },
+                                {
+                                    label: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                    props: {
+                                        title: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                        onClick: toggleAddon
+                                    }
+                                }
+                            ]}
+                            onCloseRequest={clearSelectedAddon}
+                        >
+                            <AddonPrompt
+                                {...selectedAddon.manifest}
+                                transportUrl={selectedAddon.transportUrl}
+                                installed={installedAddon(selectedAddon)}
+                                official={selectedAddon.flags.official}
+                                className={styles['prompt']}
+                                cancel={clearSelectedAddon}
+                            />
+                        </ModalDialog>
+                        :
+                        null
+                }
+                {
+                    sharedAddon !== null ?
+                        <ModalDialog className={styles['share-prompt-container']} title={'Share addon'} onCloseRequest={() => setSharedAddon(null)}>
+                            <SharePrompt
+                                url={sharedAddon.transportUrl}
+                                className={styles['prompt']}
+                                close={() => setSharedAddon(null)}
+                            />
+                        </ModalDialog>
                         :
                         null
                 }

src/routes/Addons/styles.less

@@ -21,6 +21,7 @@
             display: flex;
             flex-direction: row;
             margin: 2rem;
+            overflow: visible;
 
             .add-button-container {
                 flex: none;
@@ -112,29 +113,41 @@
                 width: 100%;
                 margin-bottom: 2rem;
             }
+
+            .message-container {
+                padding: 0 2rem;
+                font-size: 2rem;
+                color: var(--color-surfacelighter);
+            }
         }
     }
 }
 
-.addon-prompt-modal-container {
+.add-addon-prompt-container {
-    display: flex;
+    width: 30rem;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-background60);
 
-    .addon-prompt-container {
+    .url-content {
-        flex: none;
+        flex: 1;
-        display: flex;
+        width: 100%;
-        flex-direction: column;
+        padding: 0.5rem;
-        justify-content: center;
+        font-size: 0.9rem;
-        width: 50rem;
+        color: var(--color-surfacedark);
-        height: 80%;
+        border: thin solid var(--color-surface);
-
-        .addon-prompt {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: auto;
-            align-self: stretch;
-        }
     }
+
+    .cancel-button {
+        background-color: var(--color-surfacedark);
+    }
+}
+
+.addon-prompt-container {
+    width: 50rem;
+
+    .cancel-button {
+        background-color: var(--color-surfacedark);
+    }
+}
+
+.share-prompt-container {
+    width: 30rem;
 }

src/routes/Addons/useAddons.js

@@ -1,72 +1,129 @@
 const React = require('react');
+const { useServices } = require('stremio/services');
 
-const CATEGORIES = ['official', 'community', 'my'];
+const DEFAULT_TYPE = 'movie';
-const DEFAULT_CATEGORY = 'community';
+const DEFAULT_CATEGORY = 'thirdparty';
-const DEFAULT_TYPE = 'all';
 
-const useAddons = (category, type) => {
+const useAddons = (urlParams, queryParams) => {
-    category = CATEGORIES.includes(category) ? category : DEFAULT_CATEGORY;
+    const { core } = useServices();
-    type = typeof type === 'string' && type.length > 0 ? type : DEFAULT_TYPE;
+    const [addons, setAddons] = React.useState([[], [], [], [], null]);
-    const addons = React.useMemo(() => {
+    const installAddon = React.useCallback(descriptor => {
-        return [
+        core.dispatch({
-            {
+            action: 'AddonOp',
-                id: 'com.linvo.cinemeta',
+            args: {
-                name: 'Cinemeta',
+                addonOp: 'Install',
-                description: 'The official add-on for movie and series catalogs',
+                args: descriptor
-                types: ['movie', 'series'],
-                version: '2.12.1',
-                transportUrl: 'https://v3-cinemeta.strem.io/manifest.json',
-                installed: true,
-                official: true
-            },
-            {
-                id: 'com.linvo.cinemeta2',
-                name: 'Cinemeta2',
-                logo: '/images/intro_background.jpg',
-                description: 'The official add-on for movie and series catalogs',
-                types: ['movie', 'series'],
-                version: '2.12.2',
-                transportUrl: 'https://v2-cinemeta.strem.io/manifest.json',
-                installed: false,
-                official: false
             }
-        ];
+        });
     }, []);
-    const onSelect = React.useCallback((event) => {
+    const uninstallAddon = React.useCallback(descriptor => {
-        const { name, value } = event.currentTarget.dataset;
+        core.dispatch({
-        if (name === 'category') {
+            action: 'AddonOp',
-            const nextCategory = CATEGORIES.includes(value) ? value : '';
+            args: {
-            window.location.replace(`#/addons/${nextCategory}/${type}`);
+                addonOp: 'Remove',
-        } else if (name === 'type') {
+                args: {
-            const nextType = typeof value === 'string' ? value : '';
+                    transport_url: descriptor.transportUrl
-            window.location.replace(`#/addons/${category}/${nextType}`);
+                }
-        }
+            }
-    }, [category, type]);
+        });
-    const categoryDropdown = React.useMemo(() => {
+    }, []);
-        const selected = CATEGORIES.includes(category) ? [category] : [];
+    React.useEffect(() => {
-        const options = CATEGORIES
+        const type = typeof urlParams.type === 'string' && urlParams.type.length > 0 ? urlParams.type : DEFAULT_TYPE;
-            .map((category) => ({ label: category, value: category }));
+        const category = typeof urlParams.category === 'string' && urlParams.category.length > 0 ? urlParams.category : DEFAULT_CATEGORY;
-        return {
+        const onNewState = () => {
-            name: 'category',
+            const state = core.getState();
-            selected,
+            [...new Set(
-            options,
+                ['all'].concat(...state.ctx.content.addons.map(addon => addon.manifest.types))
-            onSelect
+            )]
+                .map((type) => (
+                    {
+                        is_selected: urlParams.category === 'my' && urlParams.type === type,
+                        name: 'my',
+                        load: {
+                            base: 'https://v3-cinemeta.strem.io/manifest.json',
+                            path: {
+                                resource: 'addon_catalog',
+                                type_name: type,
+                                id: 'my',
+                                extra: []
+                            }
+                        }
+                    })
+                )
+                .forEach(addon => state.addons.catalogs.push(addon));
+            const selectAddon = (transportUrl) => {
+                window.location = `#/addons/${category}/${type}?addon=${transportUrl}`;
+            };
+            const selectInputs = [
+                {
+                    selected: state.addons.catalogs
+                        .filter(({ is_selected }) => is_selected)
+                        .map(({ load }) => load.path.id),
+                    options: state.addons.catalogs
+                        .filter((catalog, index, catalogs) => {
+                            return catalogs.map(ctg => ctg.name).indexOf(catalog.name) === index;
+                        })
+                        .map(({ name, load }) => ({
+                            value: load.path.id,
+                            label: name
+                        })),
+                    onSelect: (event) => {
+                        const load = state.addons.catalogs.find(({ load: { path: { id } } }) => {
+                            return id === event.value;
+                        }).load;
+                        window.location = `#/addons/${encodeURIComponent(load.path.id)}/${encodeURIComponent(load.path.type_name)}`;
+                    }
+                },
+                {
+                    selected: state.addons.catalogs
+                        .filter(({ is_selected }) => is_selected)
+                        .map(({ load }) => JSON.stringify(load)),
+                    options: state.addons.catalogs
+                        .filter(({ load: { path: { id } } }) => {
+                            return id === category;
+                        })
+                        .map(({ load }) => ({
+                            value: JSON.stringify(load),
+                            label: load.path.type_name
+                        })),
+                    onSelect: (event) => {
+                        const load = JSON.parse(event.value);
+                        window.location = `#/addons/${encodeURIComponent(load.path.id)}/${encodeURIComponent(load.path.type_name)}`;
+                    }
+                }
+            ];
+            const installedAddons = state.ctx.is_loaded ? state.ctx.content.addons : [];
+            const addonsItems = urlParams.category === 'my' ?
+                installedAddons.filter(addon => urlParams.type === 'all' || addon.manifest.types.includes(urlParams.type))
+                :
+                state.addons.content.type === 'Ready' ?
+                    state.addons.content.content
+                    :
+                    [];
+            const error = state.addons.content.type === 'Err' && !state.ctx.is_loaded ? state.addons.content.content : null;
+            setAddons([addonsItems, selectInputs, selectAddon, installedAddons, error]);
         };
-    }, [category, onSelect]);
+        core.on('NewModel', onNewState);
-    const typeDropdown = React.useMemo(() => {
+        core.dispatch({
-        const selected = typeof type === 'string' && type.length > 0 ? [type] : [];
+            action: 'Load',
-        const options = ['all', 'movie', 'series', 'channel']
+            args: {
-            .concat(selected)
+                load: 'CatalogFiltered',
-            .filter((type, index, types) => types.indexOf(type) === index)
+                args: {
-            .map((type) => ({ label: type, value: type }));
+                    base: 'https://v3-cinemeta.strem.io/manifest.json',
-        return {
+                    path: {
-            name: 'type',
+                        resource: 'addon_catalog',
-            selected,
+                        type_name: type,
-            options,
+                        id: category,
-            onSelect
+                        extra: []
+                    }
+                }
+            }
+        });
+        return () => {
+            core.off('NewModel', onNewState);
         };
-    }, [type, onSelect]);
+    }, [urlParams, queryParams]);
-    return [addons, [categoryDropdown, typeDropdown]];
+    return [addons, installAddon, uninstallAddon];
 };
 
 module.exports = useAddons;

src/routes/Addons/useSelectedAddon.js

@@ -12,19 +12,24 @@ const useSelectedAddon = (transportUrl) => {
             return;
         }
 
-        fetch(transportUrl)
+        fetch(transportUrl) // TODO
             .then((resp) => resp.json())
-            .then((manifest) => setAddon({ ...manifest, transportUrl }));
+            .then((manifest) => setAddon({ manifest, transportUrl, flags: {} }));
     }, [transportUrl]);
     const clear = React.useCallback(() => {
         if (active) {
             const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
-            const queryParams = new URLSearchParams(search);
+            const queryParams = new URLSearchParams(search || '');
             queryParams.delete('addon');
-            window.location.replace(`#${pathname}?${queryParams.toString()}`);
+            if ([...queryParams].length !== 0) {
+                window.location.replace(`#${pathname}?${queryParams.toString()}`);
+            } else {
+                window.location.replace(`#${pathname}`);
+            }
+            setAddon(null);
         }
-    }, [active]);
+    }, [active, locationHash]);
-    return [addon, clear];
+    return [addon, clear, setAddon];
 };
 
 module.exports = useSelectedAddon;

storybook/stories/Addon/InstalledAddon.js

@@ -1,6 +1,20 @@
 const React = require('react');
 const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const Addon = require('stremio/routes/Addons/Addon');
+const styles = require('./styles');
 
 storiesOf('Addon', module).add('Installed', () => (
-    <div>Installed addon</div>
+    <Addon 
+        className={styles['installed-addon-container']}
+        id={'addon-id'}
+        name={'Demo name'}
+        logo={'/images/intro_background.jpg'}
+        description={'Demo description'}
+        types={['Demo type']}
+        version={'1.0.0'}
+        transportUrl={'Demo url'}
+        installed={true}
+        toggle={action('Demo item uninstall button clicked')}
+    />
 ));

storybook/stories/Addon/NotInstalledAddon.js

@@ -1,6 +1,20 @@
 const React = require('react');
 const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const Addon = require('stremio/routes/Addons/Addon');
+const styles = require('./styles');
 
 storiesOf('Addon', module).add('NotInstalled', () => (
-    <div>Not installed addon</div>
+    <Addon
+        className={styles['not-installed-addon-container']}
+        id={'addon-id'}
+        name={'Demo name'}
+        logo={'/images/intro_background.jpg'}
+        description={'Demo description'}
+        types={['Demo type']}
+        version={'1.0.0'}
+        transportUrl={'Demo url'}
+        installed={false}
+        toggle={action('Demo item install button clicked')}
+    />
 ));

storybook/stories/Addon/styles.less

@@ -0,0 +1,3 @@
+.installed-addon-container, .not-installed-addon-container {
+    margin: 10px;
+}