Merge branch 'master' of github.com:Stremio/stremio-web into detail-page

src/common/ColorInput/ColorInput.js

@@ -1,41 +1,19 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const AColorPicker = require('a-color-picker');
-const Icon = require('stremio-icons/dom');
-const { Modal } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const useBinaryState = require('stremio/common/useBinaryState');
+const ModalDialog = require('stremio/common/ModalDialog');
 const useDataset = require('stremio/common/useDataset');
 const ColorPicker = require('./ColorPicker');
-const styles = require('./styles');
 
 const COLOR_FORMAT = 'hexcss4';
 
 const ColorInput = ({ className, value, onChange, ...props }) => {
     value = AColorPicker.parseColor(value, COLOR_FORMAT);
     const dataset = useDataset(props);
-    const [modalOpen, openModal, closeModal] = useBinaryState(false);
+    const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false);
     const [tempValue, setTempValue] = React.useState(value);
-    const pickerLabelOnClick = React.useCallback((event) => {
-        if (typeof props.onClick === 'function') {
-            props.onClick(event);
-        }
-
-        if (!event.nativeEvent.openModalPrevented) {
-            openModal();
-        }
-    }, [props.onClick]);
-    const modalContainerOnClick = React.useCallback((event) => {
-        event.nativeEvent.openModalPrevented = true;
-    }, []);
-    const modalContainerOnMouseDown = React.useCallback((event) => {
-        if (!event.nativeEvent.closeModalPrevented) {
-            closeModal();
-        }
-    }, []);
-    const modalContentOnMouseDown = React.useCallback((event) => {
-        event.nativeEvent.closeModalPrevented = true;
-    }, []);
     const colorPickerOnInput = React.useCallback((event) => {
         setTempValue(event.value);
     }, []);
@@ -49,34 +27,23 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
                 nativeEvent: event.nativeEvent
             });
         }
-
+        setModalClosed();
-        closeModal();
     }, [onChange, tempValue, dataset]);
     React.useEffect(() => {
         setTempValue(value);
     }, [value, modalOpen]);
     return (
-        <Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={pickerLabelOnClick}>
+        <React.Fragment>
+            <Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={setModalOpen} />
             {
                 modalOpen ?
-                    <Modal className={styles['color-input-modal-container']} onMouseDown={modalContainerOnMouseDown} onClick={modalContainerOnClick}>
+                    <ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick, 'data-autofocus': true } }]} onCloseRequest={setModalClosed}>
-                        <div className={styles['color-input-container']} onMouseDown={modalContentOnMouseDown}>
+                        <ColorPicker value={tempValue} onInput={colorPickerOnInput} />
-                            <div className={styles['header-container']}>
+                    </ModalDialog>
-                                <div className={styles['title']}>Choose a color:</div>
-                                <Button className={styles['close-button-container']} title={'Close'} onClick={closeModal}>
-                                    <Icon className={styles['icon']} icon={'ic_x'} />
-                                </Button>
-                            </div>
-                            <ColorPicker className={styles['color-picker']} value={tempValue} onInput={colorPickerOnInput} />
-                            <Button className={styles['submit-button-container']} title={'Submit'} onClick={submitButtonOnClick}>
-                                <div className={styles['label']}>Select</div>
-                            </Button>
-                        </div>
-                    </Modal>
                     :
                     null
             }
-        </Button>
+        </React.Fragment>
     );
 };
 

src/common/ColorInput/styles.less

@@ -1,81 +0,0 @@
-.color-input-modal-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    pointer-events: auto;
-    background-color: var(--color-backgrounddarker40);
-
-    .color-input-container {
-        flex: none;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        max-width: 25rem;
-        padding: 1rem;
-        background-color: var(--color-surfacelighter);
-
-        .header-container {
-            flex: none;
-            align-self: stretch;
-            display: flex;
-            flex-direction: row;
-            align-items: flex-start;
-
-            .title {
-                flex: 1;
-                margin-right: 1rem;
-                font-size: 1.2rem;
-                max-height: 2.4em;
-            }
-
-            .close-button-container {
-                flex: none;
-                width: 1.5rem;
-                height: 1.5rem;
-                padding: 0.25rem;
-
-                &:hover, &:focus {
-                    background-color: var(--color-surfacedark20);
-                }
-
-                &:focus {
-                    outline-color: var(--color-surfacedarker);
-                }
-
-                .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-surfacedarker);
-                }
-            }
-        }
-
-        .color-picker {
-            flex: none;
-            margin: 1rem;
-        }
-
-        .submit-button-container {
-            flex: none;
-            align-self: stretch;
-            padding: 1rem;
-            background-color: var(--color-signal5);
-
-            &:hover, &:focus {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline-color: var(--color-surfacedarker);
-            }
-
-            .label {
-                max-height: 2.4em;
-                text-align: center;
-                color: var(--color-surfacelighter);
-            }
-        }
-    }
-}

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/Multiselect/Multiselect.js

@@ -99,12 +99,16 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
                 <div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
                     {
                         options.length > 0 ?
-                            options.map(({ label, value }) => (
+                            options.map(({ label, value }) => {
-                                <Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
+                                const isSelected = selected.includes(value);
-                                    <div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
+                                const title = typeof label === 'string' ? label : value;
-                                    <Icon className={styles['icon']} icon={'ic_check'} />
+                                return (
-                                </Button>
+                                    <Button key={value} className={classnames(styles['option-container'], { 'selected': isSelected })} title={title} data-value={value} data-autofocus={isSelected ? true : null} onClick={optionOnClick}>
-                            ))
+                                        <div className={styles['label']}>{title}</div>
+                                        <Icon className={styles['icon']} icon={'ic_check'} />
+                                    </Button>
+                                )
+                            })
                             :
                             <div className={styles['no-options-container']}>
                                 <div className={styles['label']}>No options available</div>

src/common/NavBar/NavMenu/NavMenu.js

@@ -2,14 +2,16 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
+const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const useFullscreen = require('stremio/common/useFullscreen');
-const useUser = require('./useUser');
+const useUser = require('stremio/common/useUser');
 const styles = require('./styles');
 
 const NavMenu = ({ className }) => {
+    const { core } = useServices();
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const user = useUser();
@@ -21,6 +23,14 @@ const NavMenu = ({ className }) => {
     const popupMenuOnClick = React.useCallback((event) => {
         event.nativeEvent.togglePopupPrevented = true;
     }, []);
+    const logoutButtonOnClick = React.useCallback(() => {
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'Logout'
+            }
+        });
+    }, []);
     return (
         <Popup
             open={menuOpen}
@@ -38,17 +48,17 @@ const NavMenu = ({ className }) => {
                         <div
                             className={styles['avatar-container']}
                             style={{
-                                backgroundImage: user.anonymous ?
+                                backgroundImage: !user ?
                                     `url('/images/anonymous.png')`
                                     :
                                     `url('${user.avatar}'), url('/images/default_avatar.png')`
                             }}
                         />
                         <div className={styles['email-container']}>
-                            <div className={styles['email-label']}>{user.anonymous ? 'Anonymous user' : user.email}</div>
+                            <div className={styles['email-label']}>{!user ? 'Anonymous user' : user.email}</div>
                         </div>
-                        <Button className={styles['logout-button-container']} title={user.anonymous ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={user.logout}>
+                        <Button className={styles['logout-button-container']} title={!user ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
-                            <div className={styles['logout-label']}>{user.anonymous ? 'Log in / Sign up' : 'Log out'}</div>
+                            <div className={styles['logout-label']}>{!user ? 'Log in / Sign up' : 'Log out'}</div>
                         </Button>
                     </div>
                     <div className={styles['nav-menu-section']}>

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/common/useUser.js

@@ -3,14 +3,18 @@ const { useServices } = require('stremio/services');
 
 const useUser = () => {
     const { core } = useServices();
-    const [user, setUser] = React.useState(state.ctx.auth ? state.ctx.auth.user : null);
+    const [user, setUser] = React.useState(() => {
+        const state = core.getState();
+        return state.ctx.content.auth ? state.ctx.content.auth.user : null;
+    });
     React.useEffect(() => {
-        const onNewModel = () => {
+        const onNewState = () => {
-            setUser(state.ctx.auth ? state.ctx.auth.user : null);
+            const state = core.getState();
+            setUser(state.ctx.content.auth ? state.ctx.content.auth.user : null);
         };
-        core.on('NewModel', onNewModel);
+        core.on('NewModel', onNewState);
         return () => {
-            core.off('NewModel', onNewModel);
+            core.off('NewModel', onNewState);
         };
     }, []);
     return user;

src/index.html

@@ -12,6 +12,17 @@
 
 <body>
     <div id="app"></div>
+    <script>
+      window.fbAsyncInit = function() {
+        FB.init({
+          appId            : '1537119779906825',
+          autoLogAppEvents : false,
+          xfbml            : false,
+          version          : 'v2.5'
+        });
+      };
+    </script>
+    <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
     <script type="text/javascript">
         <%= compilation.assets['main.js'].source() %>
     </script>

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;

src/routes/Intro/Intro.js

@@ -3,14 +3,15 @@ const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const { Button } = require('stremio/common');
+const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const ConsentCheckbox = require('./ConsentCheckbox');
 const styles = require('./styles');
 
-const LOGIN_FORM = 'LOGIN_FORM';
+const SIGNUP_FORM = 'signup';
-const SIGNUP_FORM = 'SIGNUP_FORM';
 
-const Intro = () => {
+const Intro = ({ queryParams }) => {
+    const { core } = useServices();
     const routeFocused = useRouteFocused();
     const emailRef = React.useRef();
     const passwordRef = React.useRef();
@@ -22,17 +23,20 @@ const Intro = () => {
     const [state, dispatch] = React.useReducer(
         (state, action) => {
             switch (action.type) {
-                case 'switch-form':
+                case 'set-form':
-                    return {
+                    if (state.form !== action.form) {
-                        form: state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM,
+                        return {
-                        email: '',
+                            form: action.form,
-                        password: '',
+                            email: '',
-                        confirmPassword: '',
+                            password: '',
-                        termsAccepted: false,
+                            confirmPassword: '',
-                        privacyPolicyAccepted: false,
+                            termsAccepted: false,
-                        marketingAccepted: false,
+                            privacyPolicyAccepted: false,
-                        error: ''
+                            marketingAccepted: false,
-                    };
+                            error: ''
+                        };
+                    }
+                    return state;
                 case 'change-credentials':
                     return {
                         ...state,
@@ -55,7 +59,7 @@ const Intro = () => {
             }
         },
         {
-            form: SIGNUP_FORM,
+            form: queryParams.get('form'),
             email: '',
             password: '',
             confirmPassword: '',
@@ -65,27 +69,115 @@ const Intro = () => {
             error: ''
         }
     );
-    const loginWithFacebook = React.useCallback(() => {
+    React.useEffect(() => {
-        alert('TODO: Facebook login');
+        const onEvent = ({ event, args }) => {
+            if (event === 'CtxActionErr') {
+                dispatch({ type: 'error', error: args[1].args.message });
+            }
+            if (event === 'CtxChanged') {
+                const state = core.getState();
+                if (state.ctx.content.auth !== null) {
+                    window.location.replace('/');
+                }
+            }
+        };
+        core.on('Event', onEvent);
+        return () => {
+            core.off('Event', onEvent);
+        };
     }, []);
+    const loginWithFacebook = React.useCallback(() => {
+        FB.login((response) => {
+            if (response.status === 'connected') {
+                fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 1000 })
+                    .then((resp) => {
+                        if (resp.status < 200 || resp.status >= 300) {
+                            throw new Error('Login failed at getting token from Stremio with status ' + resp.status);
+                        } else {
+                            return resp.json();
+                        }
+                    })
+                    .then(() => {
+                        core.dispatch({
+                            action: 'UserOp',
+                            args: {
+                                userOp: 'Login',
+                                args: {
+                                    email: state.email,
+                                    password: response.authResponse.accessToken
+                                }
+                            }
+                        });
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                    });
+            }
+        });
+    }, [state.email, state.password]);
     const loginWithEmail = React.useCallback(() => {
         if (typeof state.email !== 'string' || state.email.length === 0) {
             dispatch({ type: 'error', error: 'Invalid email' });
             return;
         }
-
+        if (state.password.length === 0) {
-        alert('TODO: Login');
+            dispatch({ type: 'error', error: 'Invalid password' });
+            return;
+        }
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'Login',
+                args: {
+                    email: state.email,
+                    password: state.password
+                }
+            }
+        });
     }, [state.email, state.password]);
     const loginAsGuest = React.useCallback(() => {
         if (!state.termsAccepted) {
             dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
             return;
         }
-
+        core.dispatch({
-        alert('TODO: Guest login');
+            action: 'UserOp',
-    }, [state.termsAccepted, state.privacyPolicyAccepted, state.marketingAccepted]);
+            args: {
+                userOp: 'Logout'
+            }
+        });
+        location = '#/';
+    }, [state.termsAccepted]);
     const signup = React.useCallback(() => {
-        alert('TODO: Signup');
+        if (!state.termsAccepted) {
+            dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
+            return;
+        }
+        if (!state.privacyPolicyAccepted) {
+            dispatch({ type: 'error', error: 'You must accept the Privacy Policy' });
+            return;
+        }
+        if (state.password !== state.confirmPassword) {
+            dispatch({ type: 'error', error: 'Passwords do not match' });
+            return;
+        }
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'Register',
+                args: {
+                    email: state.email,
+                    password: state.password,
+                    gdpr_consent: {
+                        tos: state.termsAccepted,
+                        privacy: state.privacyPolicyAccepted,
+                        marketing: state.marketingAccepted,
+                        time: new Date(),
+                        from: 'web'
+                    }
+                }
+            }
+        });
     }, [state.email, state.password, state.confirmPassword, state.termsAccepted, state.privacyPolicyAccepted, state.marketingAccepted]);
     const emailOnChange = React.useCallback((event) => {
         dispatch({
@@ -130,9 +222,9 @@ const Intro = () => {
     const toggleMarketingAccepted = React.useCallback(() => {
         dispatch({ type: 'toggle-checkbox', name: 'marketingAccepted' });
     }, []);
-    const switchForm = React.useCallback(() => {
+    React.useEffect(() => {
-        dispatch({ type: 'switch-form' });
+        dispatch({ type: 'set-form', form: queryParams.get('form') });
-    }, []);
+    }, [queryParams]);
     React.useEffect(() => {
         if (typeof state.error === 'string' && state.error.length > 0) {
             errorRef.current.scrollIntoView();
@@ -229,7 +321,7 @@ const Intro = () => {
                         :
                         null
                 }
-                <Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchForm}>
+                <Button className={classnames(styles['form-button'], styles['switch-form-button'])} href={state.form === SIGNUP_FORM ? '#/intro?form=login' : '#/intro?form=signup'}>
                     <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
                 </Button>
             </div>

src/routes/Settings/SectionsList/SectionsList.js

@@ -1,28 +1,36 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const { Button, Dropdown, Checkbox, ColorInput } = require('stremio/common');
+const { Button, Multiselect, Checkbox, ColorInput } = require('stremio/common');
 const Icon = require('stremio-icons/dom');
 const classnames = require('classnames');
 const styles = require('./styles');
 
 const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
     const toggleCheckbox = (id) => {
-        onPreferenceChanged(id, !preferences[id]);
+        onPreferenceChanged(id, preferences[id] === 'true' ? 'false' : 'true');
     };
 
     const colorChanged = React.useCallback((event) => {
-        const id = event.currentTarget.dataset.id;
+        const id = event.dataset.id;
-        const color = event.nativeEvent.value;
+        const color = event.value;
         onPreferenceChanged(id, color);
     }, [onPreferenceChanged]);
 
     const updateDropdown = React.useCallback((event) => {
-        var data = event.currentTarget.dataset;
+        const name = event.dataset.name;
-        onPreferenceChanged(data.name, data.value);
+        const value = event.reactEvent.currentTarget.dataset.value;
+        onPreferenceChanged(name, value);
     }, [onPreferenceChanged]);
 
+    const updateStreamingDropdown = React.useCallback((event) => {
+        const name = event.dataset.name;
+        const value = event.reactEvent.currentTarget.dataset.value;
+        const newPrefs = { ...preferences.streaming, [name]: value };
+        onPreferenceChanged('streaming', newPrefs);
+    }, [onPreferenceChanged, preferences.streaming]);
+
     const checkUser = React.useCallback((event) => {
-        if(! preferences.user) {
+        if (!preferences.user) {
             // Here in Stremio 4 we show a toast with a message, asking the anonymous user to log in/register
             console.log('No user found');
             event.preventDefault();
@@ -37,6 +45,45 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
     const changePasswordUrl = preferences.user && 'https://www.strem.io/reset-password/' + preferences.user.email;
     const webCalUrl = preferences.user && 'webcal://www.strem.io/calendar/' + preferences.user._id + '.ics';
 
+    const formatBytes = inBytes => {
+        if (inBytes === '0') return 'no caching';
+        if (inBytes === 'Infinity') return '∞';
+
+        const bytes = parseInt(inBytes, 10);
+
+        const kilo = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+        const power = Math.floor(Math.log(bytes) / Math.log(kilo));
+
+        // More than 1024 yotta bytes
+        if (power >= sizes.length) {
+            power = sizes.length - 1;
+        }
+        return parseFloat((bytes / Math.pow(kilo, power)).toFixed(2)) + ' ' + sizes[power];
+    }
+    const cacheSizes = ['0', '2147483648', '5368709120', '10737418240', 'Infinity'];
+    const mkCacheSizeOptions = sizes => sizes.map(size => ({
+        label: formatBytes(size), // TODO: translation
+        value: size.toString(),
+    }))
+    const supportedProfiles = ['default', 'soft', 'fast'];
+    const mkProfiles = profiles => profiles.map(profile => ({
+        label: profile[0].toUpperCase() + profile.slice(1).toLowerCase(), // TODO: translation
+        value: profile,
+    }))
+    const [cachingOptions, setCachingOptions] = React.useState(mkProfiles(supportedProfiles));
+    const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles));
+    React.useEffect(() => {
+        if (!preferences.streaming || typeof preferences.streaming.cacheSize === 'undefined') return;
+        setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))]));
+    }, [preferences.streaming && preferences.streaming.cacheSize]);
+    React.useEffect(() => {
+        if (preferences.streaming && preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) {
+            setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile)));
+        }
+    }, [preferences.streaming && preferences.streaming.profile]);
+
     const sectionsElements = sections.map((section) =>
         <div key={section.id} ref={section.ref} className={styles['section']} data-section={section.id}>
             <div className={styles['section-header']}>{section.id}</div>
@@ -104,11 +151,49 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
                                 </div>
                             </React.Fragment>
                         );
+                    } else if (input.type === 'streaming') {
+                        return (
+                            preferences.streaming_loaded
+                                ?
+                                <React.Fragment key={'streaming'}>
+                                    {
+                                        // The streaming server settings are shown only if server is available
+                                        preferences.streaming_error
+                                            ?
+                                            null
+                                            :
+                                            <React.Fragment>
+                                                <div className={classnames(styles['input-container'], styles['select-container'])}>
+                                                    <div className={styles['input-header']}>Caching</div>
+                                                    <Multiselect options={cachingOptions} selected={[preferences.streaming.cacheSize]} data-name={'cacheSize'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
+                                                </div>
+                                                <div className={classnames(styles['input-container'], styles['select-container'])}>
+                                                    <div className={styles['input-header']}>Torrent Profile</div>
+                                                    <Multiselect options={streamingProfiles} selected={[preferences.streaming.profile]} data-name={'profile'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
+                                                </div>
+                                            </React.Fragment>
+                                    }
+                                    {/* From here there is only presentation */}
+                                    <div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
+                                        <div className={styles['input-header']}><strong>Streaming server URL:</strong> {preferences.server_url}</div>
+                                    </div>
+                                    <div key={'server_available'} className={classnames(styles['input-container'], styles['text-container'])}>
+                                        <div className={styles['text']}>
+                                            <Icon className={classnames(styles['icon'], { [styles['x-icon']]: preferences.streaming_error })} icon={preferences.streaming_error ? 'ic_x' : 'ic_check'} />
+                                            <div className={styles['label']}>{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available.'}{preferences.streaming_error && ' Reason: ' + preferences.streaming_error}</div>
+                                        </div>
+                                    </div>
+                                </React.Fragment>
+                                :
+                                <div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
+                                    <div className={styles['input-header']}>Loading streaming settgins...</div>
+                                </div>
+                        );
                     } else if (input.type === 'select') {
                         return (
                             <div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <Dropdown options={input.options} selected={[preferences[input.id]]} name={input.id} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
+                                <Multiselect options={input.options} selected={[preferences[input.id]]} data-name={input.id} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
                             </div>
                         );
                     } else if (input.type === 'link') {
@@ -134,7 +219,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
                         return (
                             <div key={input.id} className={classnames(styles['input-container'], styles['checkbox-container'])}>
                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id]} onClick={toggleCheckbox.bind(null, input.id)}>
+                                <Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id] === 'true'} onClick={toggleCheckbox.bind(null, input.id)}>
                                     <div className={styles['label']}>{input.label}</div>
                                 </Checkbox>
                             </div>
@@ -153,7 +238,13 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
                         return (
                             <div key={input.id} className={classnames(styles['input-container'], styles['color-container'])}>
                                 {input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
-                                <ColorInput className={styles['color-picker']} id={input.id} value={preferences[input.id]} onChange={colorChanged} />
+                                <ColorInput className={styles['color-picker']} data-id={input.id} value={preferences[input.id]} onChange={colorChanged} />
+                            </div>
+                        );
+                    } else if (input.type === 'info') {
+                        return (
+                            <div key={input.id} className={classnames(styles['input-container'])}>
+                                <div className={styles['input-header']}><strong>{input.header}</strong> {preferences[input.id]}</div>
                             </div>
                         );
                     }

src/routes/Settings/SectionsList/styles.less

@@ -1,20 +1,32 @@
 :import('~stremio/common/Checkbox/styles.less') {
     checkbox-icon: icon;
 }
+:import('~stremio/common/Multiselect/styles.less') {
+    menu-container: menu-container;
+}
+
+.menu-container {
+    max-height: 30rem;
+    overflow-y: auto;
+}
 
 .section {
-    padding: 4rem 2rem;
+    padding: 4rem 0;
+    margin: 0 2rem;
+    width: var(--input-width);
+    overflow: visible;
 
     .section-header {
-        margin: 0 1.5rem 1.5rem 1.5rem;
+        margin: 1.5rem 0;
         font-size: 2rem;
         color: var(--color-surfacelighter);
     }
 
     .input-container {
-        margin: 1.5rem;
+        margin: 2rem 0;
         display: flex;
         flex-direction: column;
+        overflow: visible;
 
         .input-header {
             margin-bottom: 0.5rem;
@@ -51,14 +63,13 @@
         &.select-container {
             .dropdown {
                 height: 3rem;
-                width: var(--input-width);
             }
         }
 
         &.link-container {
-            margin: 1rem 1.5rem;
+            margin: 0;
-
             .link {
+                padding: .75rem 0;
                 display: block;
                 color: var(--color-secondarylight);
 
@@ -75,7 +86,6 @@
         &.button-container {
             .button {
                 padding: 0.7rem;
-                width: var(--input-width);
                 min-height: calc(var(--input-width) * 0.09);
                 display: flex;
                 align-items: center;
@@ -132,10 +142,12 @@
         }
 
         &.text-container {
+            margin: 0;
             .text {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                padding: .75rem 0;
 
                 .icon {
                     margin-right: 0.5rem;
@@ -160,7 +172,7 @@
 
         &.color-container {
             .color-picker {
-                width: var(--input-width);
+                box-shadow: inset 0px 0px .2rem 0px var(--color-surfacelighter20);
                 height: calc(var(--input-width) * 0.08);
                 cursor: pointer;
 

src/routes/Settings/Settings.js

@@ -6,21 +6,20 @@ const SectionsList = require('./SectionsList');
 const { settingsSections } = require('./constants');
 const useSettings = require('./useSettings');
 
-const devTestWithUser = true;
-
 const Settings = () => {
-    const [preferences, setPreferences] = useSettings(devTestWithUser);
+    const [preferences, setPreferences] = useSettings();
-    const sections = React.useMemo(()=>Object.keys(settingsSections)
+    const [dynamicSections, setDynamicSections] = React.useState(settingsSections);
+    // TODO: The Streaming section should be handled separately
+    const sections = React.useMemo(()=>Object.keys(dynamicSections)
         .map((section) => ({
             id: section,
-            inputs: settingsSections[section],
+            inputs: dynamicSections[section],
             ref: React.createRef()
-        })), []);
+        })), [dynamicSections]);
+
     const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
     const scrollContainerRef = React.useRef(null);
 
-    /////////////////
-
     const updatePreference = (option, value) => {
         setPreferences({ ...preferences, [option]: value });
     }

src/routes/Settings/useSettings.js

@@ -1,22 +1,68 @@
 const React = require('react');
+const { useServices } = require('stremio/services');
 
-module.exports = (devTestWithUser) => React.useState({
+const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']);
-    "user": devTestWithUser ? {
+
-        "_id": "neo",
+module.exports = () => {
-        "email": "neo@example.com",
+    const { core } = useServices();
-        "avatar": "https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg?f=16x9&w=1200&$p$f$w=5867e40",
+
-    } : null,
+    const [settings, setSettings] = React.useState({
-    "ui_language": "eng",
+        user: null,
-    "default_subtitles_language": "bul",
+        streaming: {},
-    "default_subtitles_size": "100%",
+        streaming_loaded: false,
-    "subtitles_background": "",
+        streaming_error: ""
-    "subtitles_color": "#ffffff",
+    });
-    "subtitles_outline_color": "#000",
+
-    "auto-play_next_episode": true,
+    React.useEffect(() => {
-    "pause_playback_when_minimized": false,
+        const onNewState = () => {
-    "hardware-accelerated_decoding": true,
+            const { ctx, streaming_server_settings } = core.getState()
-    "launch_player_in_a_separate_window_(advanced)": true,
+            try {
-    "caching": "2048",
+                const newSettings = {
-    "torrent_profile": "profile-default",
+                    ...settings,
-    "streaming_server_is_available.": true,
+                    ...ctx.content.settings,
-});
+                    user: ctx.content.auth ? ctx.content.auth.user : null,
+                    streaming: streaming_server_settings && streaming_server_settings.ready || {},
+                    streaming_loaded: streaming_server_settings && !!(streaming_server_settings.error || streaming_server_settings.ready),
+                    streaming_error: streaming_server_settings && streaming_server_settings.error || "",
+                };
+                setSettings(newSettings);
+            } catch (e) {
+                console.log('Cannot update settings state', e);
+            }
+        };
+        const onStoreError = ({ event, args }) => {
+            if (event !== "SettingsStoreError") return;
+            // TODO: Notify with maybe a toast?
+            console.log(args)
+        }
+
+        core.on('NewModel', onNewState);
+        core.on('Event', onStoreError);
+
+        onNewState();
+
+        return () => {
+            // Destructor function
+            core.off('NewModel', onNewState);
+            core.off('Event', onStoreError);
+        };
+    }, []);
+
+    const setTheSettings = React.useCallback(newSettings => {
+        const event = { action: 'Settings', args: { args: {} } };
+        // This can be done with React.useEffect and newSettings.streaming as dependency
+        const streamingServerSettingChanged = settings.streaming && Object.keys(newSettings.streaming)
+            .some(prop => settings.streaming[prop] !== newSettings.streaming[prop]);
+        if (streamingServerSettingChanged) {
+            event.args = { settings: 'StoreStreamingServer', args: newSettings.streaming };
+        } else {
+            event.args.settings = 'Store';
+            Object.keys(newSettings)
+                .filter(prop => !IGNORED_SETTINGS.includes(prop))
+                .forEach(key => event.args.args[key] = newSettings[key].toString());
+        }
+        core.dispatch(event);
+    }, [settings])
+
+    return [settings, setTheSettings];
+};

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;
+}