Multiselect from master. Simpler settings object

src/routes/Settings/SectionsList/SectionsList.js

@@ -1,6 +1,6 @@
 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');
@@ -11,21 +11,23 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
     };
 
     const colorChanged = React.useCallback((event) => {
-        const id = event.currentTarget.dataset.id;
-        const color = event.nativeEvent.value;
+        const id = event.dataset.id;
+        const color = event.value;
         onPreferenceChanged(id, color);
     }, [onPreferenceChanged]);
 
     const updateDropdown = React.useCallback((event) => {
-        const data = event.currentTarget.dataset;
-        onPreferenceChanged(data.name, data.value);
+        const name = event.dataset.name;
+        const value = event.reactEvent.currentTarget.dataset.value;
+        onPreferenceChanged(name, value);
     }, [onPreferenceChanged]);
 
     const updateStreamingDropdown = React.useCallback((event) => {
-        const data = event.currentTarget.dataset;
-        const newPrefs = { ...preferences.streaming.ready, [data.name]: data.value };
+        const name = event.dataset.name;
+        const value = event.reactEvent.currentTarget.dataset.value;
+        const newPrefs = { ...preferences.streaming, [name]: value };
         onPreferenceChanged('streaming', newPrefs);
-    }, [onPreferenceChanged]);
+    }, [onPreferenceChanged, preferences.streaming]);
 
     const checkUser = React.useCallback((event) => {
         if (!preferences.user) {
@@ -73,14 +75,14 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
     const [cachingOptions, setCachingOptions] = React.useState(mkProfiles(supportedProfiles));
     const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles));
     React.useEffect(() => {
-        if(!preferences.streaming.ready || typeof preferences.streaming.ready.cacheSize === 'undefined') return;
-        setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.ready.cacheSize))]));
-    }, [preferences.streaming.ready && preferences.streaming.ready.cacheSize]);
+        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.ready && preferences.streaming.ready.profile && !supportedProfiles.includes(preferences.streaming.ready.profile)) {
+        if (preferences.streaming && preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) {
             setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile)));
         }
-    }, [preferences.streaming.ready && preferences.streaming.ready.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}>
@@ -155,20 +157,20 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
 
                                 {
                                     // The streaming server settings are shown only if server is available
-                                    preferences.streaming.ready
+                                    preferences.streaming_error
                                         ?
+                                        null
+                                        :
                                         <React.Fragment>
                                             <div className={classnames(styles['input-container'], styles['select-container'])}>
                                                 <div className={styles['input-header']}>Caching</div>
-                                                <Dropdown options={cachingOptions} selected={[preferences.streaming.ready.cacheSize]} name={'cacheSize'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
+                                                <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>
-                                                <Dropdown options={streamingProfiles} selected={[preferences.streaming.ready.profile]} name={'profile'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
+                                                <Multiselect options={streamingProfiles} selected={[preferences.streaming.profile]} data-name={'profile'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
                                             </div>
                                         </React.Fragment>
-                                        :
-                                        null
                                 }
                                 {/* From here there is only presentation */}
                                 <div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
@@ -176,8 +178,8 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
                                 </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.ready })} icon={preferences.streaming.ready ? 'ic_check' : 'ic_x'} />
-                                        <div className={styles['label']}>{'Streaming server is ' + (preferences.streaming.ready ? '' : 'not ') + 'available.'}</div>
+                                        <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. Reason: '+preferences.streaming_error}</div>
                                     </div>
                                 </div>
                             </React.Fragment>
@@ -186,7 +188,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
                         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') {
@@ -231,7 +233,7 @@ 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') {

src/routes/Settings/SectionsList/styles.less

@@ -1,11 +1,20 @@
 :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 0;
     margin: 0 2rem;
     width: var(--input-width);
+    overflow: visible;
 
     .section-header {
         margin: 1.5rem 0;
@@ -17,6 +26,7 @@
         margin: 2rem 0;
         display: flex;
         flex-direction: column;
+        overflow: visible;
 
         .input-header {
             margin-bottom: 0.5rem;
@@ -53,7 +63,6 @@
         &.select-container {
             .dropdown {
                 height: 3rem;
-                // width: var(--input-width);
             }
         }
 

src/routes/Settings/useSettings.js

@@ -15,7 +15,8 @@ module.exports = () => {
                     ...settings,
                     ...state.ctx.content.settings,
                     user: state.ctx.content.auth ? state.ctx.content.auth.user : null,
-                    streaming: state.streaming_server_settings || {},
+                    streaming: state.streaming_server_settings && state.streaming_server_settings.ready || {},
+                    streaming_error: state.streaming_server_settings && state.streaming_server_settings.error || "",
                 });
             } catch (e) {
                 console.log('Cannot update settings state', e);
@@ -42,8 +43,8 @@ module.exports = () => {
     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 = Object.keys(newSettings.streaming)
-            .some(prop => settings.streaming.ready[prop] !== newSettings.streaming[prop]);
+        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 {
@@ -57,4 +58,3 @@ module.exports = () => {
 
     return [settings, setTheSettings];
 };
-