From c3abf5844bef5b863919ca667af0c93350983d5c Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 4 Oct 2019 18:15:59 +0300 Subject: [PATCH 01/31] Constants start with ID first --- src/routes/Settings/constants.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index 563bbd8c2..e94d481cf 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -1,24 +1,25 @@ const settingsSections = { 'General': [ - { 'type': 'user' }, - { 'header': 'UI Language', 'label': 'UI Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }], 'id': 'ui_language' }, + { 'id': 'user', 'type': 'user' }, + { 'id': 'language', 'header': 'UI Language', 'label': 'UI Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }] }, ], 'Player': [ - { 'label': 'ADD-ONS', 'type': 'button', 'icon': 'ic_addons', 'id': 'add-ons', 'href': '#/addons' }, - { 'header': 'Default Subtitles Language', 'label': 'Default Subtitles Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }], 'id': 'default_subtitles_language' }, - { 'header': 'Default Subtitles Size', 'label': 'Default Subtitles Size', 'type': 'select', 'options': [{ 'label': '72%', 'value': '72%' }, { 'label': '80%', 'value': '80%' }, { 'label': '100%', 'value': '100%' }, { 'label': '120%', 'value': '120%' }, { 'label': '140%', 'value': '140%' }, { 'label': '160%', 'value': '160%' }, { 'label': '180%', 'value': '180%' }], 'id': 'default_subtitles_size' }, - { 'header': 'Subtitles Background', 'label': 'Subtitles background', 'type': 'select', 'options': [{ 'label': 'None', 'value': '' }, { 'label': 'Solid', 'value': 'solid' }, { 'label': 'Transparent', 'value': 'transparent' }], 'id': 'subtitles_background' }, - { 'header': 'Subtitles color', 'label': 'Subtitles color', 'type': 'color', 'id': 'subtitles_color' }, - { 'header': 'Subtitles outline color', 'label': 'Subtitles outline color', 'type': 'color', 'id': 'subtitles_outline_color' }, - { 'label': 'Auto-play next episode', 'type': 'checkbox', 'id': 'auto-play_next_episode' }, - { 'label': 'Pause playback when minimized', 'type': 'checkbox', 'id': 'pause_playback_when_minimized' }, - { 'label': 'Hardware-accelerated decoding', 'type': 'checkbox', 'id': 'hardware-accelerated_decoding' }, - { 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox', 'id': 'launch_player_in_a_separate_window_(advanced)' }, + { 'id': 'add-ons', 'label': 'ADD-ONS', 'type': 'button', 'icon': 'ic_addons', 'href': '#/addons' }, + { 'id': 'subtitles_language', 'header': 'Default Subtitles Language', 'label': 'Default Subtitles Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }] }, + { 'id': 'subtitles_size', 'header': 'Default Subtitles Size', 'label': 'Default Subtitles Size', 'type': 'select', 'options': [{ 'label': '72%', 'value': '72%' }, { 'label': '80%', 'value': '80%' }, { 'label': '100%', 'value': '100%' }, { 'label': '120%', 'value': '120%' }, { 'label': '140%', 'value': '140%' }, { 'label': '160%', 'value': '160%' }, { 'label': '180%', 'value': '180%' }] }, + { 'id': 'subtitles_background', 'header': 'Subtitles Background', 'label': 'Subtitles background', 'type': 'select', 'options': [{ 'label': 'None', 'value': '' }, { 'label': 'Solid', 'value': 'solid' }, { 'label': 'Transparent', 'value': 'transparent' }] }, + { 'id': 'subtitles_color', 'header': 'Subtitles color', 'label': 'Subtitles color', 'type': 'color' }, + { 'id': 'subtitles_outline_color', 'header': 'Subtitles outline color', 'label': 'Subtitles outline color', 'type': 'color' }, + { 'id': 'autoplay_next_vid', 'label': 'Auto-play next episode', 'type': 'checkbox' }, + { 'id': 'pause_on_lost_focus', 'label': 'Pause playback when not in focus', 'type': 'checkbox' }, + { 'id': 'hardware-accelerated_decoding', 'label': 'Hardware-accelerated decoding', 'type': 'checkbox' }, + { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' }, ], 'Streaming': [ - { 'header': 'Caching', 'label': 'Caching', 'type': 'select', 'options': [{ 'label': 'No Caching', 'value': '' }, { 'label': '2GB', 'value': '2048' }, { 'label': '5GB', 'value': '5120' }, { 'label': '10GB', 'value': '10240' }], 'id': 'caching' }, + { 'id': 'caching', 'header': 'Caching', 'label': 'Caching', 'type': 'select', 'options': [{ 'label': 'No Caching', 'value': '' }, { 'label': '2GB', 'value': '2048' }, { 'label': '5GB', 'value': '5120' }, { 'label': '10GB', 'value': '10240' }] }, { 'header': 'Torrent Profile', 'label': 'Torrent Profile', 'type': 'select', 'options': [{ 'label': 'Default', 'value': 'profile-default' }, { 'label': 'Soft', 'value': 'profile-soft' }, { 'label': 'Fast', 'value': 'profile-fast' }], 'id': 'torrent_profile' }, - { 'header': 'Streaming server URL: http://127.0.0.1:11470', 'label': 'Streaming server is available.', 'type': 'static-text', 'icon': 'ic_check', 'id': 'streaming_server_is_available.' } + { 'id': 'server_url', 'header': 'Streaming server URL:', 'type': 'info' }, + { 'id': 'streaming_server_is_available.', 'label': 'Streaming server is available.', 'type': 'static-text', 'icon': 'ic_check' } ] }; From 315e616edee27c12bb00a8dfdc242523e5e01fc1 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 4 Oct 2019 18:16:32 +0300 Subject: [PATCH 02/31] Checkboxes string values --- src/routes/Settings/SectionsList/SectionsList.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index c835738b2..4dc4aed53 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -7,7 +7,7 @@ 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) => { @@ -134,7 +134,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre return (
{input.header ?
{input.header}
: null} - +
{input.label}
@@ -156,6 +156,12 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre ); + } else if (input.type === 'info') { + return ( +
+
{input.header} {preferences[input.id]}
+
+ ); } })} From 0a41977641fc58d30e34c79dd47ef803d0d214a2 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 4 Oct 2019 18:16:49 +0300 Subject: [PATCH 03/31] Load/store data from state container --- src/routes/Settings/useSettings.js | 82 ++++++++++++++++++++++-------- 1 file changed, 62 insertions(+), 20 deletions(-) diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index bca76cb46..847f99a6c 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -1,22 +1,64 @@ const React = require('react'); +const { useServices } = require('stremio/services'); + +module.exports = (devTestWithUser) => { + const { core } = useServices(); + // TODO: move these values in the state container + const [settings, setSettings] = React.useState({}); + /* + { + 'user': devTestWithUser ? { + '_id': 'neo', + 'email': 'neo@example.com', + 'avatar': 'https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg', + } : null, + 'ui_language': "eng", + 'subtitles_language': 'bul', + 'subtitles_size': '100%', + 'subtitles_background': '', + 'subtitles_color': '#ffffff', + 'subtitles_outline_color': '#000', + 'auto-play_next_episode': 'true', + 'pause_playback_when_minimized': 'false', + 'hardware-accelerated_decoding': 'true', + 'launch_player_in_a_separate_window_(advanced)': 'true', + 'caching': '2048', + 'torrent_profile': 'profile-default', + 'streaming_server_is_available.': 'true', + }); + */ + + React.useEffect(() => { + const onNewState = () => { + const state = core.getState(); + try { + setSettings({ ...settings, ...state.ctx.content.settings }); + } catch (e) { } + }; + window.top.core = core; + core.on('NewModel', onNewState); + core.dispatch({ + action: 'Load', + args: { + load: 'CatalogGrouped', + args: { extra: [] } + } + }); + return () => { + // Destructor function + core.off('NewModel', onNewState); + }; + }, []); + + const setTheSettings = React.useCallback(newSettings => { + const { user, ...args } = { ...newSettings }; + console.log('Save', args); + if(args.language === "bul") throw new Error('why') + Object.keys(args).forEach(key=> args[key] = args[key].toString()) + setSettings(newSettings); + core.dispatch({ action: 'Settings', args: { settings: 'Store', args } }); + }, [settings]) + + return [settings, setTheSettings]; +}; -module.exports = (devTestWithUser) => React.useState({ - "user": devTestWithUser ? { - "_id": "neo", - "email": "neo@example.com", - "avatar": "https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg?f=16x9&w=1200&$p$f$w=5867e40", - } : null, - "ui_language": "eng", - "default_subtitles_language": "bul", - "default_subtitles_size": "100%", - "subtitles_background": "", - "subtitles_color": "#ffffff", - "subtitles_outline_color": "#000", - "auto-play_next_episode": true, - "pause_playback_when_minimized": false, - "hardware-accelerated_decoding": true, - "launch_player_in_a_separate_window_(advanced)": true, - "caching": "2048", - "torrent_profile": "profile-default", - "streaming_server_is_available.": true, -}); \ No newline at end of file From 19dcbc648004584c6327786183e6d697cb977115 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 7 Oct 2019 12:39:45 +0300 Subject: [PATCH 04/31] Handle properly the state container --- src/routes/Settings/useSettings.js | 73 ++++++++++++++---------------- 1 file changed, 33 insertions(+), 40 deletions(-) diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index 847f99a6c..c8346039a 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -2,48 +2,41 @@ const React = require('react'); const { useServices } = require('stremio/services'); module.exports = (devTestWithUser) => { + const IGNORED_SETTINGS = Object.freeze(['user']); + const { core } = useServices(); - // TODO: move these values in the state container const [settings, setSettings] = React.useState({}); - /* - { - 'user': devTestWithUser ? { - '_id': 'neo', - 'email': 'neo@example.com', - 'avatar': 'https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg', - } : null, - 'ui_language': "eng", - 'subtitles_language': 'bul', - 'subtitles_size': '100%', - 'subtitles_background': '', - 'subtitles_color': '#ffffff', - 'subtitles_outline_color': '#000', - 'auto-play_next_episode': 'true', - 'pause_playback_when_minimized': 'false', - 'hardware-accelerated_decoding': 'true', - 'launch_player_in_a_separate_window_(advanced)': 'true', - 'caching': '2048', - 'torrent_profile': 'profile-default', - 'streaming_server_is_available.': 'true', - }); - */ React.useEffect(() => { - const onNewState = () => { - const state = core.getState(); + const updateState = (state) => { try { - setSettings({ ...settings, ...state.ctx.content.settings }); - } catch (e) { } - }; - window.top.core = core; - core.on('NewModel', onNewState); - core.dispatch({ - action: 'Load', - args: { - load: 'CatalogGrouped', - args: { extra: [] } + setSettings({ + ...settings, ...state.ctx.content.settings, user: devTestWithUser ? { + '_id': 'neo', + 'email': 'neo@example.com', + 'avatar': 'https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg', + } : state.ctx.content.auth && state.ctx.content.auth.user + }); + } catch (e) { + console.log('Cannot update settings state', e); } - }); + } + + const state = core.getState(); + try { + if (state.ctx.is_loaded) { + updateState(state); + return; + } + } catch (e) { + console.log('Cannot find state context', e); + } + + const onNewState = () => { + updateState(core.getState()); + }; + core.on('NewModel', onNewState); + core.dispatch({ action: 'LoadCtx' }); return () => { // Destructor function core.off('NewModel', onNewState); @@ -51,10 +44,10 @@ module.exports = (devTestWithUser) => { }, []); const setTheSettings = React.useCallback(newSettings => { - const { user, ...args } = { ...newSettings }; - console.log('Save', args); - if(args.language === "bul") throw new Error('why') - Object.keys(args).forEach(key=> args[key] = args[key].toString()) + const args = {}; + Object.keys(newSettings) + .filter(prop => !IGNORED_SETTINGS.includes(prop)) + .forEach(key => args[key] = newSettings[key].toString()) setSettings(newSettings); core.dispatch({ action: 'Settings', args: { settings: 'Store', args } }); }, [settings]) From d16c9adcf6b571107b523513b1272e2717d25063 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 7 Oct 2019 12:40:10 +0300 Subject: [PATCH 05/31] Use the user from the state container if available --- src/routes/Settings/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 4884722dd..f805076b5 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -6,7 +6,7 @@ const SectionsList = require('./SectionsList'); const { settingsSections } = require('./constants'); const useSettings = require('./useSettings'); -const devTestWithUser = true; +const devTestWithUser = false; const Settings = () => { const [preferences, setPreferences] = useSettings(devTestWithUser); From 61598f0e8fcd5d1193f362a1d4d2c56a1c2f970f Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 7 Oct 2019 16:16:55 +0300 Subject: [PATCH 06/31] Fetch settings options from the streaming server --- src/routes/Settings/Settings.js | 51 ++++++++++++++++++++++++++++++-- src/routes/Settings/constants.js | 5 +--- 2 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index f805076b5..a9d2cbb5b 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -10,15 +10,60 @@ const devTestWithUser = false; const Settings = () => { const [preferences, setPreferences] = useSettings(devTestWithUser); - 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); + React.useEffect(() => { + const shouldFetch = preferences.server_url && preferences.server_url.length > 0 + ? + Promise.resolve(preferences.server_url + 'settings') + : + Promise.reject(); + + shouldFetch + .then(fetch) + .then(response => response.json()) + .then(serverPrefs => serverPrefs.options + .map(opt => ({ + id: opt.id, + label: opt.label, + header: opt.label, + type: opt.type, + options: opt.selections.map(sel => ({ label: sel.name, value: JSON.stringify(sel.val) })) + })) + .concat({ + id: 'torrent_profile', + label: 'Torrent Profile', + header: 'Torrent Profile', + type: 'select', + options: [{ 'label': 'Default', 'value': 'profile-default' }, { 'label': 'Soft', 'value': 'profile-soft' }, { 'label': 'Fast', 'value': 'profile-fast' }], + }) + ) + .catch(() => []).then(serverInputs => { + const additionalServerSettings = [ + { 'id': 'server_url', 'header': 'Streaming server URL:', 'type': 'info' }, + { 'id': 'streaming_server_is_available.', 'label': 'Streaming server is ' + (serverInputs.length !== 0 ? '' : 'not ') + 'available.', 'type': 'static-text', 'icon': serverInputs.length !== 0 ? 'ic_check' : 'ic_x' } + ]; + setDynamicSections({ + ...dynamicSections, + Streaming: [ + ...dynamicSections.Streaming, + ...serverInputs, + ...additionalServerSettings + ] + }); + }); + }, [preferences.server_url]); + ///////////////// const updatePreference = (option, value) => { diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index e94d481cf..e709b5dbf 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -2,6 +2,7 @@ const settingsSections = { 'General': [ { 'id': 'user', 'type': 'user' }, { 'id': 'language', 'header': 'UI Language', 'label': 'UI Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }] }, + { 'id': 'show_vid_overview', 'label': 'Show videos overview', 'type': 'checkbox' }, ], 'Player': [ { 'id': 'add-ons', 'label': 'ADD-ONS', 'type': 'button', 'icon': 'ic_addons', 'href': '#/addons' }, @@ -16,10 +17,6 @@ const settingsSections = { { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' }, ], 'Streaming': [ - { 'id': 'caching', 'header': 'Caching', 'label': 'Caching', 'type': 'select', 'options': [{ 'label': 'No Caching', 'value': '' }, { 'label': '2GB', 'value': '2048' }, { 'label': '5GB', 'value': '5120' }, { 'label': '10GB', 'value': '10240' }] }, - { 'header': 'Torrent Profile', 'label': 'Torrent Profile', 'type': 'select', 'options': [{ 'label': 'Default', 'value': 'profile-default' }, { 'label': 'Soft', 'value': 'profile-soft' }, { 'label': 'Fast', 'value': 'profile-fast' }], 'id': 'torrent_profile' }, - { 'id': 'server_url', 'header': 'Streaming server URL:', 'type': 'info' }, - { 'id': 'streaming_server_is_available.', 'label': 'Streaming server is available.', 'type': 'static-text', 'icon': 'ic_check' } ] }; From 05bbf3e721a9cb841e06f2d137e726f65b7a08ce Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 7 Oct 2019 16:44:56 +0300 Subject: [PATCH 07/31] Formatting --- src/routes/Settings/Settings.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index a9d2cbb5b..480bb8157 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -45,13 +45,17 @@ const Settings = () => { label: 'Torrent Profile', header: 'Torrent Profile', type: 'select', - options: [{ 'label': 'Default', 'value': 'profile-default' }, { 'label': 'Soft', 'value': 'profile-soft' }, { 'label': 'Fast', 'value': 'profile-fast' }], + options: [ + { label: 'Default', value: 'profile-default' }, + { label: 'Soft', value: 'profile-soft' }, + { label: 'Fast', value: 'profile-fast' } + ], }) ) .catch(() => []).then(serverInputs => { const additionalServerSettings = [ - { 'id': 'server_url', 'header': 'Streaming server URL:', 'type': 'info' }, - { 'id': 'streaming_server_is_available.', 'label': 'Streaming server is ' + (serverInputs.length !== 0 ? '' : 'not ') + 'available.', 'type': 'static-text', 'icon': serverInputs.length !== 0 ? 'ic_check' : 'ic_x' } + { id: 'server_url', header: 'Streaming server URL:', type: 'info' }, + { id: 'streaming_server_is_available.', label: 'Streaming server is ' + (serverInputs.length !== 0 ? '' : 'not ') + 'available.', type: 'static-text', icon: serverInputs.length !== 0 ? 'ic_check' : 'ic_x' } ]; setDynamicSections({ ...dynamicSections, From c1c7bb50dec55edbfecd58e6991d803ac205458d Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 9 Oct 2019 13:10:39 +0300 Subject: [PATCH 08/31] Drop dynamic streaming server settings --- src/routes/Settings/Settings.js | 27 ++------------------------- src/routes/Settings/constants.js | 2 ++ 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 480bb8157..bfb5cdfe8 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -6,10 +6,8 @@ const SectionsList = require('./SectionsList'); const { settingsSections } = require('./constants'); const useSettings = require('./useSettings'); -const devTestWithUser = false; - const Settings = () => { - const [preferences, setPreferences] = useSettings(devTestWithUser); + const [preferences, setPreferences] = useSettings(); const [dynamicSections, setDynamicSections] = React.useState(settingsSections); // TODO: The Streaming section should be handled separately const sections = React.useMemo(()=>Object.keys(dynamicSections) @@ -31,27 +29,7 @@ const Settings = () => { shouldFetch .then(fetch) - .then(response => response.json()) - .then(serverPrefs => serverPrefs.options - .map(opt => ({ - id: opt.id, - label: opt.label, - header: opt.label, - type: opt.type, - options: opt.selections.map(sel => ({ label: sel.name, value: JSON.stringify(sel.val) })) - })) - .concat({ - id: 'torrent_profile', - label: 'Torrent Profile', - header: 'Torrent Profile', - type: 'select', - options: [ - { label: 'Default', value: 'profile-default' }, - { label: 'Soft', value: 'profile-soft' }, - { label: 'Fast', value: 'profile-fast' } - ], - }) - ) + .then(() => ['OK']) .catch(() => []).then(serverInputs => { const additionalServerSettings = [ { id: 'server_url', header: 'Streaming server URL:', type: 'info' }, @@ -61,7 +39,6 @@ const Settings = () => { ...dynamicSections, Streaming: [ ...dynamicSections.Streaming, - ...serverInputs, ...additionalServerSettings ] }); diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index e709b5dbf..493f51e17 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -17,6 +17,8 @@ const settingsSections = { { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' }, ], 'Streaming': [ + { "id": "cacheSize", "label": "Caching", "header": "Caching", "type": "select", "options": [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "null" }] }, + { "id": "torrent_profile", "label": "Torrent Profile", "header": "Torrent Profile", "type": "select", "options": [{ "label": "Default", "value": "profile-default" }, { "label": "Soft", "value": "profile-soft" }, { "label": "Fast", "value": "profile-fast" }] } ] }; From d31a07c4990f94dbdc9e58d52f254e307f208d88 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 9 Oct 2019 13:11:42 +0300 Subject: [PATCH 09/31] Load core context on boot; Drop development test user data --- src/App/App.js | 3 +++ src/routes/Settings/useSettings.js | 39 +++++++++--------------------- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/src/App/App.js b/src/App/App.js index ffb33d4af..81778d1e7 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -22,6 +22,9 @@ const App = () => { }; const onCoreStateChanged = () => { setCoreInitialized(services.core.active || services.core.error instanceof Error); + if (services.core.active) { + services.core.dispatch({ action: 'LoadCtx' }); + } }; services.shell.on('stateChanged', onShellStateChanged); services.core.on('stateChanged', onCoreStateChanged); diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index c8346039a..25c5347f2 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -1,45 +1,31 @@ const React = require('react'); const { useServices } = require('stremio/services'); -module.exports = (devTestWithUser) => { +module.exports = () => { const IGNORED_SETTINGS = Object.freeze(['user']); const { core } = useServices(); const [settings, setSettings] = React.useState({}); React.useEffect(() => { - const updateState = (state) => { - try { + const updateState = () => { + const state = core.getState(); + if (state.ctx && state.ctx.is_loaded && state.ctx.content && state.ctx.content.settings) { setSettings({ - ...settings, ...state.ctx.content.settings, user: devTestWithUser ? { - '_id': 'neo', - 'email': 'neo@example.com', - 'avatar': 'https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg', - } : state.ctx.content.auth && state.ctx.content.auth.user + ...settings, + ...state.ctx.content.settings, + user: state.ctx.content.auth ? state.ctx.content.auth.user : null }); - } catch (e) { - console.log('Cannot update settings state', e); } } - const state = core.getState(); - try { - if (state.ctx.is_loaded) { - updateState(state); - return; - } - } catch (e) { - console.log('Cannot find state context', e); - } + core.on('NewModel', updateState); + + updateState(); - const onNewState = () => { - updateState(core.getState()); - }; - core.on('NewModel', onNewState); - core.dispatch({ action: 'LoadCtx' }); return () => { // Destructor function - core.off('NewModel', onNewState); + core.off('NewModel', updateState); }; }, []); @@ -48,9 +34,8 @@ module.exports = (devTestWithUser) => { Object.keys(newSettings) .filter(prop => !IGNORED_SETTINGS.includes(prop)) .forEach(key => args[key] = newSettings[key].toString()) - setSettings(newSettings); core.dispatch({ action: 'Settings', args: { settings: 'Store', args } }); - }, [settings]) + }, []) return [settings, setTheSettings]; }; From 388412f394297eabe2d46ff999389be4128b8f22 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 17 Oct 2019 17:32:36 +0300 Subject: [PATCH 10/31] Do not fetch the streaming server --- src/routes/Settings/Settings.js | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index bfb5cdfe8..970236064 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -20,33 +20,6 @@ const Settings = () => { const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id); const scrollContainerRef = React.useRef(null); - React.useEffect(() => { - const shouldFetch = preferences.server_url && preferences.server_url.length > 0 - ? - Promise.resolve(preferences.server_url + 'settings') - : - Promise.reject(); - - shouldFetch - .then(fetch) - .then(() => ['OK']) - .catch(() => []).then(serverInputs => { - const additionalServerSettings = [ - { id: 'server_url', header: 'Streaming server URL:', type: 'info' }, - { id: 'streaming_server_is_available.', label: 'Streaming server is ' + (serverInputs.length !== 0 ? '' : 'not ') + 'available.', type: 'static-text', icon: serverInputs.length !== 0 ? 'ic_check' : 'ic_x' } - ]; - setDynamicSections({ - ...dynamicSections, - Streaming: [ - ...dynamicSections.Streaming, - ...additionalServerSettings - ] - }); - }); - }, [preferences.server_url]); - - ///////////////// - const updatePreference = (option, value) => { setPreferences({ ...preferences, [option]: value }); } From 0e52f2dd370e304a8e1dc294600b1d5a248d5ff7 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 17 Oct 2019 17:36:57 +0300 Subject: [PATCH 11/31] Streaming server settings from stremio-core --- src/routes/Settings/useSettings.js | 34 ++++++++++++++++++------------ 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index c8346039a..ee7ed3642 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -1,21 +1,20 @@ const React = require('react'); const { useServices } = require('stremio/services'); -module.exports = (devTestWithUser) => { - const IGNORED_SETTINGS = Object.freeze(['user']); +module.exports = () => { + const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']); const { core } = useServices(); - const [settings, setSettings] = React.useState({}); + const [settings, setSettings] = React.useState({ streaming: {} }); React.useEffect(() => { const updateState = (state) => { + console.log(state) try { setSettings({ - ...settings, ...state.ctx.content.settings, user: devTestWithUser ? { - '_id': 'neo', - 'email': 'neo@example.com', - 'avatar': 'https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg', - } : state.ctx.content.auth && state.ctx.content.auth.user + ...settings, ...state.ctx.content.settings, + user: state.ctx.content.auth && state.ctx.content.auth.user, + streaming: state.streaming_server_settings || {}, }); } catch (e) { console.log('Cannot update settings state', e); @@ -44,12 +43,19 @@ module.exports = (devTestWithUser) => { }, []); const setTheSettings = React.useCallback(newSettings => { - const args = {}; - Object.keys(newSettings) - .filter(prop => !IGNORED_SETTINGS.includes(prop)) - .forEach(key => args[key] = newSettings[key].toString()) - setSettings(newSettings); - core.dispatch({ action: 'Settings', args: { settings: 'Store', args } }); + 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[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]; From 4a43bf51549d94d3e3579c2ba45b162f9a90947e Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 17 Oct 2019 17:38:36 +0300 Subject: [PATCH 12/31] Hardcoded streaming server settings --- .../Settings/SectionsList/SectionsList.js | 47 ++++++++++++++++++- src/routes/Settings/constants.js | 3 +- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 4dc4aed53..49e9f950f 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -17,12 +17,18 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre }, [onPreferenceChanged]); const updateDropdown = React.useCallback((event) => { - var data = event.currentTarget.dataset; + const data = event.currentTarget.dataset; onPreferenceChanged(data.name, data.value); }, [onPreferenceChanged]); + const updateStreamingDropdown = React.useCallback((event) => { + const data = event.currentTarget.dataset; + const newPrefs = { ...preferences.streaming, [data.name]: data.value }; + onPreferenceChanged('streaming', newPrefs); + }, [onPreferenceChanged]); + 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 +43,10 @@ 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'; + // TODO: move these out of here + const cachingOptions = [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "null" }]; + const streamingProfiles = [{ "label": "Default", "value": "default" }, { "label": "Soft", "value": "soft" }, { "label": "Fast", "value": "fast" }]; + const sectionsElements = sections.map((section) =>
{section.id}
@@ -104,6 +114,39 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
); + } else if (input.type === 'streaming') { + return ( + + + { + // The streaming server settings are shown only if server is available + preferences.streaming.isLoaded + ? + +
+
Caching
+ +
+
+
Torrent Profile
+ +
+ + : + null + } + {/* From here there is only presentation */} +
+
Streaming server URL: {preferences.server_url}
+
+
+
+ +
{'Streaming server is ' + (preferences.streaming.isLoaded ? '' : 'not ') + 'available.'}
+
+
+ + ); } else if (input.type === 'select') { return (
diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index 493f51e17..f1e154d9c 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -17,8 +17,7 @@ const settingsSections = { { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' }, ], 'Streaming': [ - { "id": "cacheSize", "label": "Caching", "header": "Caching", "type": "select", "options": [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "null" }] }, - { "id": "torrent_profile", "label": "Torrent Profile", "header": "Torrent Profile", "type": "select", "options": [{ "label": "Default", "value": "profile-default" }, { "label": "Soft", "value": "profile-soft" }, { "label": "Fast", "value": "profile-fast" }] } + { 'id': 'streaming', 'type': 'streaming' }, ] }; From 830ae9faf6b86c1b12b62ca5deb50dd140f41bfc Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 17 Oct 2019 18:05:02 +0300 Subject: [PATCH 13/31] Fixed icon style for offline streaming server --- src/routes/Settings/SectionsList/SectionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 49e9f950f..c1ce5aa4e 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -141,7 +141,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
- +
{'Streaming server is ' + (preferences.streaming.isLoaded ? '' : 'not ') + 'available.'}
From e8d5356fcdc4cd81df9e3f3cd4154a34a98e561b Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 18 Oct 2019 10:50:33 +0300 Subject: [PATCH 14/31] Improved styles --- .../Settings/SectionsList/SectionsList.js | 2 +- src/routes/Settings/SectionsList/styles.less | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index c1ce5aa4e..b51834314 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -136,7 +136,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre null } {/* From here there is only presentation */} -
+
Streaming server URL: {preferences.server_url}
diff --git a/src/routes/Settings/SectionsList/styles.less b/src/routes/Settings/SectionsList/styles.less index d7b647535..0bc15dab1 100644 --- a/src/routes/Settings/SectionsList/styles.less +++ b/src/routes/Settings/SectionsList/styles.less @@ -3,16 +3,18 @@ } .section { - padding: 4rem 2rem; + padding: 4rem 0; + margin: 0 2rem; + width: var(--input-width); .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; @@ -51,14 +53,14 @@ &.select-container { .dropdown { height: 3rem; - width: var(--input-width); + // width: var(--input-width); } } &.link-container { - margin: 1rem 1.5rem; - + margin: 0; .link { + padding: .75rem 0; display: block; color: var(--color-secondarylight); @@ -75,7 +77,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 +133,12 @@ } &.text-container { + margin: 0; .text { display: flex; flex-direction: row; align-items: center; + padding: .75rem 0; .icon { margin-right: 0.5rem; @@ -160,7 +163,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; From b1ef2a7e3f8bceef1fc09a2ce96449c82ecec6d9 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 18 Oct 2019 17:29:46 +0300 Subject: [PATCH 15/31] Use the Infinity word for the infinite cache size --- src/routes/Settings/SectionsList/SectionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index b51834314..8bdabba33 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -44,7 +44,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre const webCalUrl = preferences.user && 'webcal://www.strem.io/calendar/' + preferences.user._id + '.ics'; // TODO: move these out of here - const cachingOptions = [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "null" }]; + const cachingOptions = [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "Infinity" }]; const streamingProfiles = [{ "label": "Default", "value": "default" }, { "label": "Soft", "value": "soft" }, { "label": "Fast", "value": "fast" }]; const sectionsElements = sections.map((section) => From ef85c480cecabf743983a6126fda064b0fdffb74 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 21 Oct 2019 16:34:10 +0300 Subject: [PATCH 16/31] Handle non-standard streaming profile --- src/routes/Settings/SectionsList/SectionsList.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 8bdabba33..65fff5ba7 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -45,7 +45,17 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre // TODO: move these out of here const cachingOptions = [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "Infinity" }]; - const streamingProfiles = [{ "label": "Default", "value": "default" }, { "label": "Soft", "value": "soft" }, { "label": "Fast", "value": "fast" }]; + const supportedProfiles = ['default', 'soft', 'fast']; + const mkProfiles = profiles => profiles.map(profile => ({ + label: profile[0].toUpperCase() + profile.slice(1).toLowerCase(), + value: profile, + })) + const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles)); + React.useEffect(() => { + if (preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) { + setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile))); + } + }, [preferences.streaming.profile]); const sectionsElements = sections.map((section) =>
@@ -141,7 +151,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
- +
{'Streaming server is ' + (preferences.streaming.isLoaded ? '' : 'not ') + 'available.'}
From bbce6112522086ccaba3b213481353581427eaf0 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 22 Oct 2019 14:12:46 +0300 Subject: [PATCH 17/31] Dynamic dropdowns for the streaming server settings --- .../Settings/SectionsList/SectionsList.js | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 65fff5ba7..2b9f0f42f 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -43,14 +43,39 @@ 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'; - // TODO: move these out of here - const cachingOptions = [{ "label": "no caching", "value": "0" }, { "label": "2GB", "value": "2147483648" }, { "label": "5GB", "value": "5368709120" }, { "label": "10GB", "value": "10737418240" }, { "label": "∞", "value": "Infinity" }]; + 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(), + 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(typeof preferences.streaming.cacheSize === 'undefined') return; + setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))])); + }, [preferences.streaming.cacheSize]); React.useEffect(() => { if (preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) { setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile))); From 6b2c6819701a2c58cba7bcd267a55b3a27077e45 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 23 Oct 2019 15:51:34 +0300 Subject: [PATCH 18/31] Adapt for the new format in stremio-core --- .../Settings/SectionsList/SectionsList.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 2b9f0f42f..20699ba3f 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -23,7 +23,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre const updateStreamingDropdown = React.useCallback((event) => { const data = event.currentTarget.dataset; - const newPrefs = { ...preferences.streaming, [data.name]: data.value }; + const newPrefs = { ...preferences.streaming.ready, [data.name]: data.value }; onPreferenceChanged('streaming', newPrefs); }, [onPreferenceChanged]); @@ -73,14 +73,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(typeof preferences.streaming.cacheSize === 'undefined') return; - setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))])); - }, [preferences.streaming.cacheSize]); + 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]); React.useEffect(() => { - if (preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) { + if (preferences.streaming.ready && preferences.streaming.ready.profile && !supportedProfiles.includes(preferences.streaming.ready.profile)) { setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile))); } - }, [preferences.streaming.profile]); + }, [preferences.streaming.ready && preferences.streaming.ready.profile]); const sectionsElements = sections.map((section) =>
@@ -155,16 +155,16 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre { // The streaming server settings are shown only if server is available - preferences.streaming.isLoaded + preferences.streaming.ready ?
Caching
- +
Torrent Profile
- +
: @@ -176,8 +176,8 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
- -
{'Streaming server is ' + (preferences.streaming.isLoaded ? '' : 'not ') + 'available.'}
+ +
{'Streaming server is ' + (preferences.streaming.ready ? '' : 'not ') + 'available.'}
From b2de5707225f4edcd6ff98dce1bae0bab947c93b Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 23 Oct 2019 15:52:17 +0300 Subject: [PATCH 19/31] Adapt for the new format in stremio-core --- src/routes/Settings/useSettings.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index f9f9be6a1..e773d9064 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -21,14 +21,21 @@ module.exports = () => { 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); }; }, []); @@ -36,7 +43,7 @@ module.exports = () => { 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[prop] !== newSettings.streaming[prop]); + .some(prop => settings.streaming.ready[prop] !== newSettings.streaming[prop]); if (streamingServerSettingChanged) { event.args = { settings: 'StoreStreamingServer', args: newSettings.streaming }; } else { From effe1336a0bf51e2a8f75cca5e82e4a3f884d48c Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 24 Oct 2019 16:29:51 +0300 Subject: [PATCH 20/31] Multiselect from master. Simpler settings object --- .../Settings/SectionsList/SectionsList.js | 46 ++++++++++--------- src/routes/Settings/SectionsList/styles.less | 11 ++++- src/routes/Settings/useSettings.js | 8 ++-- 3 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 20699ba3f..66fc632cc 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/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) =>
@@ -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 + :
Caching
- +
Torrent Profile
- +
- : - null } {/* From here there is only presentation */}
@@ -176,8 +178,8 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
- -
{'Streaming server is ' + (preferences.streaming.ready ? '' : 'not ') + 'available.'}
+ +
{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available. Reason: '+preferences.streaming_error}
@@ -186,7 +188,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre return (
{input.header ?
{input.header}
: null} - +
); } else if (input.type === 'link') { @@ -231,7 +233,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre return (
{input.header ?
{input.header}
: null} - +
); } else if (input.type === 'info') { diff --git a/src/routes/Settings/SectionsList/styles.less b/src/routes/Settings/SectionsList/styles.less index 0bc15dab1..85e687d99 100644 --- a/src/routes/Settings/SectionsList/styles.less +++ b/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); } } diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index e773d9064..2780ee37f 100644 --- a/src/routes/Settings/useSettings.js +++ b/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]; }; - From a3798775c2e5147d74000663917b92715802dd31 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 24 Oct 2019 16:30:08 +0300 Subject: [PATCH 21/31] Testing data with more languages --- src/routes/Settings/constants.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index f1e154d9c..0d3439446 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -1,3 +1,5 @@ +const languageOptions = [ { "label": "аҧсуа бызшәа", "value": "abk" }, { "label": "Afaraf", "value": "aar" }, { "label": "Afrikaans", "value": "afr" }, { "label": "Akan", "value": "aka" }, { "label": "gjuha shqipe", "value": "sqi" }, { "label": "አማርኛ", "value": "amh" }, { "label": "العربية", "value": "ara" }, { "label": "aragonés", "value": "arg" }, { "label": "Հայերեն", "value": "hye" }, { "label": "অসমীয়া", "value": "asm" }, { "label": "авар мацӀ", "value": "ava" }, { "label": "avesta", "value": "ave" }, { "label": "aymar aru", "value": "aym" }, { "label": "azərbaycan dili", "value": "aze" }, { "label": "bamanankan", "value": "bam" }, { "label": "башҡорт теле", "value": "bak" }, { "label": "euskara", "value": "eus" }, { "label": "беларуская мова", "value": "bel" }, { "label": "বাংলা", "value": "ben" }, { "label": "भोजपुरी", "value": "bih" }, { "label": "Bislama", "value": "bis" }, { "label": "bosanski jezik", "value": "bos" }, { "label": "brezhoneg", "value": "bre" }, { "label": "български език", "value": "bul" }, { "label": "ဗမာစာ", "value": "mya" }, { "label": "català", "value": "cat" }, { "label": "Chamoru", "value": "cha" }, { "label": "нохчийн мотт", "value": "che" }, { "label": "chiCheŵa", "value": "nya" }, { "label": "中文 (Zhōngwén)", "value": "zho" }, { "label": "чӑваш чӗлхи", "value": "chv" }, { "label": "Kernewek", "value": "cor" }, { "label": "corsu", "value": "cos" }, { "label": "ᓀᐦᐃᔭᐍᐏᐣ", "value": "cre" }, { "label": "hrvatski jezik", "value": "hrv" }, { "label": "čeština", "value": "ces" }, { "label": "dansk", "value": "dan" }, { "label": "ދިވެހި", "value": "div" }, { "label": "Nederlands", "value": "nld" }, { "label": "རྫོང་ཁ", "value": "dzo" }, { "label": "English", "value": "eng" }, { "label": "Esperanto", "value": "epo" }, { "label": "eesti", "value": "est" }, { "label": "Eʋegbe", "value": "ewe" }, { "label": "føroyskt", "value": "fao" }, { "label": "vosa Vakaviti", "value": "fij" }, { "label": "suomi", "value": "fin" }, { "label": "français", "value": "fre" }, { "label": "Fulfulde", "value": "ful" }, { "label": "galego", "value": "glg" }, { "label": "ქართული", "value": "kat" }, { "label": "Deutsch", "value": "ger" }, { "label": "ελληνικά", "value": "ell" }, { "label": "Avañe'ẽ", "value": "grn" }, { "label": "ગુજરાતી", "value": "guj" }, { "label": "Kreyòl ayisyen", "value": "hat" }, { "label": "Hausa", "value": "hau" }, { "label": "עברית", "value": "heb" }, { "label": "Otjiherero", "value": "her" }, { "label": "हिन्दी", "value": "hin" }, { "label": "Hiri Motu", "value": "hmo" }, { "label": "magyar", "value": "hun" }, { "label": "Interlingua", "value": "ina" }, { "label": "Bahasa Indonesia", "value": "ind" }, { "label": "Interlingue", "value": "ile" }, { "label": "Gaeilge", "value": "gle" }, { "label": "Asụsụ Igbo", "value": "ibo" }, { "label": "Iñupiaq", "value": "ipk" }, { "label": "Ido", "value": "ido" }, { "label": "Íslenska", "value": "isl" }, { "label": "italiano", "value": "ita" }, { "label": "ᐃᓄᒃᑎᑐᑦ", "value": "iku" }, { "label": "日本語 (にほんご)", "value": "jpn" }, { "label": "basa Jawa", "value": "jav" }, { "label": "kalaallisut", "value": "kal" }, { "label": "ಕನ್ನಡ", "value": "kan" }, { "label": "Kanuri", "value": "kau" }, { "label": "कश्मीरी", "value": "kas" }, { "label": "қазақ тілі", "value": "kaz" }, { "label": "ខ្មែរ", "value": "khm" }, { "label": "Gĩkũyũ", "value": "kik" }, { "label": "Ikinyarwanda", "value": "kin" }, { "label": "Кыргызча", "value": "kir" }, { "label": "коми кыв", "value": "kom" }, { "label": "KiKongo", "value": "kon" }, { "label": "한국어 (韓國語)", "value": "kor" }, { "label": "Kurdî", "value": "kur" }, { "label": "Kuanyama", "value": "kua" }, { "label": "latine", "value": "lat" }, { "label": "Lëtzebuergesch", "value": "ltz" }, { "label": "Luganda", "value": "lug" }, { "label": "Limburgs", "value": "lim" }, { "label": "Lingála", "value": "lin" }, { "label": "ພາສາລາວ", "value": "lao" }, { "label": "lietuvių kalba", "value": "lit" }, { "label": "Tshiluba", "value": "lub" }, { "label": "latviešu valoda", "value": "lav" }, { "label": "Gaelg", "value": "glv" }, { "label": "македонски јазик", "value": "mkd" }, { "label": "fiteny malagasy", "value": "mlg" }, { "label": "bahasa Melayu", "value": "msa" }, { "label": "മലയാളം", "value": "mal" }, { "label": "Malti", "value": "mlt" }, { "label": "te reo Māori", "value": "mri" }, { "label": "मराठी", "value": "mar" }, { "label": "Kajin M̧ajeļ", "value": "mah" }, { "label": "монгол", "value": "mon" }, { "label": "Ekakairũ Naoero", "value": "nau" }, { "label": "Diné bizaad", "value": "nav" }, { "label": "Norsk bokmål", "value": "nob" }, { "label": "isiNdebele", "value": "nde" }, { "label": "नेपाली", "value": "nep" }, { "label": "Owambo", "value": "ndo" }, { "label": "Norsk nynorsk", "value": "nno" }, { "label": "Norsk", "value": "nor" }, { "label": "ꆈꌠ꒿ Nuosuhxop", "value": "iii" }, { "label": "isiNdebele", "value": "nbl" }, { "label": "occitan", "value": "oci" }, { "label": "ᐊᓂᔑᓈᐯᒧᐎᓐ", "value": "oji" }, { "label": "ѩзыкъ словѣньскъ", "value": "chu" }, { "label": "Afaan Oromoo", "value": "orm" }, { "label": "ଓଡ଼ିଆ", "value": "ori" }, { "label": "ирон æвзаг", "value": "oss" }, { "label": "ਪੰਜਾਬੀ", "value": "pan" }, { "label": "पाऴि", "value": "pli" }, { "label": "فارسی", "value": "fas" }, { "label": "język polski", "value": "pol" }, { "label": "پښتو", "value": "pus" }, { "label": "português", "value": "por" }, { "label": "português Brazil", "value": "pob" }, { "label": "Runa Simi", "value": "que" }, { "label": "rumantsch grischun", "value": "roh" }, { "label": "Ikirundi", "value": "run" }, { "label": "limba română", "value": "ron" }, { "label": "русский язык", "value": "rus" }, { "label": "संस्कृतम्", "value": "san" }, { "label": "sardu", "value": "srd" }, { "label": "सिन्धी", "value": "snd" }, { "label": "Davvisámegiella", "value": "sme" }, { "label": "gagana fa'a Samoa", "value": "smo" }, { "label": "yângâ tî sängö", "value": "sag" }, { "label": "српски језик", "value": "srp" }, { "label": "Gàidhlig", "value": "gla" }, { "label": "chiShona", "value": "sna" }, { "label": "සිංහල", "value": "sin" }, { "label": "slovenčina", "value": "slk" }, { "label": "slovenski jezik", "value": "slv" }, { "label": "Soomaaliga", "value": "som" }, { "label": "Sesotho", "value": "sot" }, { "label": "español", "value": "spa" }, { "label": "Basa Sunda", "value": "sun" }, { "label": "Kiswahili", "value": "swa" }, { "label": "SiSwati", "value": "ssw" }, { "label": "Svenska", "value": "swe" }, { "label": "தமிழ்", "value": "tam" }, { "label": "తెలుగు", "value": "tel" }, { "label": "тоҷикӣ", "value": "tgk" }, { "label": "ไทย", "value": "tha" }, { "label": "ትግርኛ", "value": "tir" }, { "label": "བོད་ཡིག", "value": "bod" }, { "label": "Türkmen", "value": "tuk" }, { "label": "Wikang Tagalog", "value": "tgl" }, { "label": "Setswana", "value": "tsn" }, { "label": "faka Tonga", "value": "ton" }, { "label": "Türkçe", "value": "tur" }, { "label": "Xitsonga", "value": "tso" }, { "label": "татар теле", "value": "tat" }, { "label": "Twi", "value": "twi" }, { "label": "Reo Tahiti", "value": "tah" }, { "label": "Uyƣurqə", "value": "uig" }, { "label": "українська мова", "value": "ukr" }, { "label": "اردو", "value": "urd" }, { "label": "O'zbek", "value": "uzb" }, { "label": "Tshivenḓa", "value": "ven" }, { "label": "Tiếng Việt", "value": "vie" }, { "label": "Volapük", "value": "vol" }, { "label": "walon", "value": "wln" }, { "label": "Cymraeg", "value": "cym" }, { "label": "Wollof", "value": "wol" }, { "label": "Frysk", "value": "fry" }, { "label": "isiXhosa", "value": "xho" }, { "label": "ייִדיש", "value": "yid" }, { "label": "Yorùbá", "value": "yor" }, { "label": "Saɯ cueŋƅ", "value": "zha" }, { "label": "isiZulu", "value": "zul" } ]; + const settingsSections = { 'General': [ { 'id': 'user', 'type': 'user' }, @@ -6,7 +8,7 @@ const settingsSections = { ], 'Player': [ { 'id': 'add-ons', 'label': 'ADD-ONS', 'type': 'button', 'icon': 'ic_addons', 'href': '#/addons' }, - { 'id': 'subtitles_language', 'header': 'Default Subtitles Language', 'label': 'Default Subtitles Language', 'type': 'select', 'options': [{ 'label': 'Български език', 'value': 'bul' }, { 'label': 'English', 'value': 'eng' }, { 'label': 'Deutsch', 'value': 'ger' }, { 'label': 'Español', 'value': 'esp' }, { 'label': 'Italiano', 'value': 'ita' }] }, + { 'id': 'subtitles_language', 'header': 'Default Subtitles Language', 'label': 'Default Subtitles Language', 'type': 'select', 'options': languageOptions }, { 'id': 'subtitles_size', 'header': 'Default Subtitles Size', 'label': 'Default Subtitles Size', 'type': 'select', 'options': [{ 'label': '72%', 'value': '72%' }, { 'label': '80%', 'value': '80%' }, { 'label': '100%', 'value': '100%' }, { 'label': '120%', 'value': '120%' }, { 'label': '140%', 'value': '140%' }, { 'label': '160%', 'value': '160%' }, { 'label': '180%', 'value': '180%' }] }, { 'id': 'subtitles_background', 'header': 'Subtitles Background', 'label': 'Subtitles background', 'type': 'select', 'options': [{ 'label': 'None', 'value': '' }, { 'label': 'Solid', 'value': 'solid' }, { 'label': 'Transparent', 'value': 'transparent' }] }, { 'id': 'subtitles_color', 'header': 'Subtitles color', 'label': 'Subtitles color', 'type': 'color' }, @@ -21,6 +23,7 @@ const settingsSections = { ] }; + module.exports = { settingsSections, }; From 12c5ab900da1845f362a850ed0e0fe35bcd162fe Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 28 Oct 2019 11:29:17 +0200 Subject: [PATCH 22/31] Handle notLoaded state in the streaming server settings --- .../Settings/SectionsList/SectionsList.js | 69 ++++++++++--------- src/routes/Settings/useSettings.js | 6 +- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 66fc632cc..509c0a498 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -50,14 +50,14 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre 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) { + if (power >= sizes.length) { power = sizes.length - 1; } return parseFloat((bytes / Math.pow(kilo, power)).toFixed(2)) + ' ' + sizes[power]; @@ -75,7 +75,7 @@ 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 || typeof preferences.streaming.cacheSize === 'undefined') return; + 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(() => { @@ -153,36 +153,41 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre ); } else if (input.type === 'streaming') { return ( - - - { - // The streaming server settings are shown only if server is available - preferences.streaming_error - ? - null - : - -
-
Caching
- -
-
-
Torrent Profile
- -
- - } - {/* From here there is only presentation */} -
-
Streaming server URL: {preferences.server_url}
-
-
-
- -
{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available. Reason: '+preferences.streaming_error}
+ preferences.streaming_loaded + ? + + { + // The streaming server settings are shown only if server is available + preferences.streaming_error + ? + null + : + +
+
Caching
+ +
+
+
Torrent Profile
+ +
+ + } + {/* From here there is only presentation */} +
+
Streaming server URL: {preferences.server_url}
+
+
+ +
{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available. Reason: ' + preferences.streaming_error}
+
+
+ + : +
+
Loading streaming settgins...
- ); } else if (input.type === 'select') { return ( diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index 2780ee37f..9af135cd4 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -11,13 +11,15 @@ module.exports = () => { const onNewState = () => { const state = core.getState() try { - setSettings({ + const newSettings = { ...settings, ...state.ctx.content.settings, user: state.ctx.content.auth ? state.ctx.content.auth.user : null, streaming: state.streaming_server_settings && state.streaming_server_settings.ready || {}, + streaming_loaded: state.streaming_server_settings && (state.streaming_server_settings.error || state.streaming_server_settings.ready), streaming_error: state.streaming_server_settings && state.streaming_server_settings.error || "", - }); + }; + setSettings(newSettings); } catch (e) { console.log('Cannot update settings state', e); } From 188e64dff6969587553abdd8510ff5ab75aea9fc Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 29 Oct 2019 14:49:46 +0200 Subject: [PATCH 23/31] Removed useless option --- src/routes/Settings/constants.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Settings/constants.js b/src/routes/Settings/constants.js index 0d3439446..9a3a95b9d 100644 --- a/src/routes/Settings/constants.js +++ b/src/routes/Settings/constants.js @@ -15,7 +15,6 @@ const settingsSections = { { 'id': 'subtitles_outline_color', 'header': 'Subtitles outline color', 'label': 'Subtitles outline color', 'type': 'color' }, { 'id': 'autoplay_next_vid', 'label': 'Auto-play next episode', 'type': 'checkbox' }, { 'id': 'pause_on_lost_focus', 'label': 'Pause playback when not in focus', 'type': 'checkbox' }, - { 'id': 'hardware-accelerated_decoding', 'label': 'Hardware-accelerated decoding', 'type': 'checkbox' }, { 'id': 'use_external_player', 'label': 'Launch player in a separate window (advanced)', 'type': 'checkbox' }, ], 'Streaming': [ From 0c62d79312b50b7854997da894e27c737d1d788a Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 29 Oct 2019 14:50:35 +0200 Subject: [PATCH 24/31] New type of core messages. Better events --- src/services/Core/Core.js | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/services/Core/Core.js b/src/services/Core/Core.js index 1489be668..0999b75f0 100644 --- a/src/services/Core/Core.js +++ b/src/services/Core/Core.js @@ -1,6 +1,34 @@ -const EventEmitter = require('events'); +// const EventEmitter = require('events'); const { default: init, ContainerService } = require('stremio-core-web'); +// Slightly better event handling +class EventEmitter { + constructor() { + this._handlers = {}; + } + _handlersFor(event) { + return this._handlers[event] || []; + } + on(event, handler) { + this._handlers[event] = this._handlersFor(event).concat(handler); + } + off(event, handler) { + console.log('Before off', this._handlersFor(event)) + this._handlers[event] = this._handlersFor(event).filter(event => event !== handler); + console.log('After off', this._handlersFor(event)) + } + emit(event, args) { + this._handlersFor(event).forEach(handler => { + try { + handler(args); + } + catch (e) { + console.log('Event error', event, args, e); + } + }); + } +} + function Core() { let active = false; let error = null; @@ -52,12 +80,12 @@ function Core() { function off(name, listener) { events.off(name, listener); } - function dispatch({ action, args } = {}) { + function dispatch(args, model = 'All') { if (!active) { return; } - containerService.dispatch({ action, args }); + containerService.dispatch({ model, args }); } function getState() { if (!active) { From b1f917e3a93d92c867c2daadf4e6b6faad1eb514 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 29 Oct 2019 14:51:03 +0200 Subject: [PATCH 25/31] New loaded state --- .../Settings/SectionsList/SectionsList.js | 2 +- src/routes/Settings/useSettings.js | 26 ++++++++++++------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/routes/Settings/SectionsList/SectionsList.js b/src/routes/Settings/SectionsList/SectionsList.js index 509c0a498..d56de298a 100644 --- a/src/routes/Settings/SectionsList/SectionsList.js +++ b/src/routes/Settings/SectionsList/SectionsList.js @@ -180,7 +180,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
-
{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available. Reason: ' + preferences.streaming_error}
+
{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available.'}{preferences.streaming_error && ' Reason: ' + preferences.streaming_error}
diff --git a/src/routes/Settings/useSettings.js b/src/routes/Settings/useSettings.js index 9af135cd4..4f71eba0e 100644 --- a/src/routes/Settings/useSettings.js +++ b/src/routes/Settings/useSettings.js @@ -1,29 +1,35 @@ const React = require('react'); const { useServices } = require('stremio/services'); -module.exports = () => { - const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']); +const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']); +module.exports = () => { const { core } = useServices(); - const [settings, setSettings] = React.useState({ streaming: {} }); + + const [settings, setSettings] = React.useState({ + user: null, + streaming: {}, + streaming_loaded: false, + streaming_error: "" + }); React.useEffect(() => { const onNewState = () => { - const state = core.getState() + const { ctx, streaming_server_settings } = core.getState() try { const newSettings = { ...settings, - ...state.ctx.content.settings, - user: state.ctx.content.auth ? state.ctx.content.auth.user : null, - streaming: state.streaming_server_settings && state.streaming_server_settings.ready || {}, - streaming_loaded: state.streaming_server_settings && (state.streaming_server_settings.error || state.streaming_server_settings.ready), - streaming_error: state.streaming_server_settings && state.streaming_server_settings.error || "", + ...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? From 485907c303ec3edb5889ef0b17db731ff18dc9eb Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 1 Nov 2019 11:00:43 +0200 Subject: [PATCH 26/31] Removed logging --- src/services/Core/Core.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/services/Core/Core.js b/src/services/Core/Core.js index 0999b75f0..6356e46af 100644 --- a/src/services/Core/Core.js +++ b/src/services/Core/Core.js @@ -13,9 +13,7 @@ class EventEmitter { this._handlers[event] = this._handlersFor(event).concat(handler); } off(event, handler) { - console.log('Before off', this._handlersFor(event)) this._handlers[event] = this._handlersFor(event).filter(event => event !== handler); - console.log('After off', this._handlersFor(event)) } emit(event, args) { this._handlersFor(event).forEach(handler => { From 2093f8118eec052d686322ce432d795c53ea5978 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 4 Nov 2019 14:44:35 +0200 Subject: [PATCH 27/31] Make use of the modal dialog --- src/common/ColorInput/ColorInput.js | 44 +++++----------- src/common/ColorInput/styles.less | 81 ----------------------------- 2 files changed, 12 insertions(+), 113 deletions(-) delete mode 100644 src/common/ColorInput/styles.less diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js index eefcc2c18..ab43c3050 100644 --- a/src/common/ColorInput/ColorInput.js +++ b/src/common/ColorInput/ColorInput.js @@ -1,41 +1,32 @@ 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, setModalClsoed] = useBinaryState(false); const [tempValue, setTempValue] = React.useState(value); + const closeModal = (event) => { + event.nativeEvent.openModalPrevented = true; + setModalClsoed(); + }; const pickerLabelOnClick = React.useCallback((event) => { if (typeof props.onClick === 'function') { props.onClick(event); } if (!event.nativeEvent.openModalPrevented) { - openModal(); + setModalOpen(); } }, [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); }, []); @@ -50,8 +41,8 @@ const ColorInput = ({ className, value, onChange, ...props }) => { }); } - closeModal(); - }, [onChange, tempValue, dataset]); + closeModal(event); + }, [onChange, tempValue, dataset, closeModal]); React.useEffect(() => { setTempValue(value); }, [value, modalOpen]); @@ -59,20 +50,9 @@ const ColorInput = ({ className, value, onChange, ...props }) => { -
- - -
- + + + : null } diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less deleted file mode 100644 index 8242c6e67..000000000 --- a/src/common/ColorInput/styles.less +++ /dev/null @@ -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); - } - } - } -} \ No newline at end of file From b4c9b527d0d75b870df8111319ad6a7b0ed26c1d Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Mon, 4 Nov 2019 15:32:06 +0200 Subject: [PATCH 28/31] Fixed a typo --- src/common/ColorInput/ColorInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js index ab43c3050..661dae50c 100644 --- a/src/common/ColorInput/ColorInput.js +++ b/src/common/ColorInput/ColorInput.js @@ -12,11 +12,11 @@ const COLOR_FORMAT = 'hexcss4'; const ColorInput = ({ className, value, onChange, ...props }) => { value = AColorPicker.parseColor(value, COLOR_FORMAT); const dataset = useDataset(props); - const [modalOpen, setModalOpen, setModalClsoed] = useBinaryState(false); + const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false); const [tempValue, setTempValue] = React.useState(value); const closeModal = (event) => { event.nativeEvent.openModalPrevented = true; - setModalClsoed(); + setModalClosed(); }; const pickerLabelOnClick = React.useCallback((event) => { if (typeof props.onClick === 'function') { From 07cfad8cd841272fc8a625d1cfe76967a486d0d4 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 5 Nov 2019 16:13:25 +0200 Subject: [PATCH 29/31] Multiselect autofocus first selected item --- src/common/Multiselect/Multiselect.js | 16 ++++++++++------ src/common/Popup/Popup.js | 2 +- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js index 7a251849b..f5b81f751 100644 --- a/src/common/Multiselect/Multiselect.js +++ b/src/common/Multiselect/Multiselect.js @@ -98,12 +98,16 @@ const Multiselect = ({ className, direction, title, renderLabelContent, renderLa
{ options.length > 0 ? - options.map(({ label, value }) => ( - - )) + options.map(({ label, value }) => { + const isSelected = selected.includes(value); + const title = typeof label === 'string' ? label : value; + return ( + + ) + }) :
No options available
diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index dc5c9bc16..5b957392d 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -68,7 +68,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, onCloseRequest, ...pr ref: labelRef, className: styles['label-container'], children: open ? - + {renderMenu()} : From e6163085b5b25980d2cb5c5d7fc955975ab20745 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Tue, 5 Nov 2019 17:46:44 +0200 Subject: [PATCH 30/31] Simplified ColorInput --- src/common/ColorInput/ColorInput.js | 25 ++++++------------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js index 661dae50c..f9a682eb9 100644 --- a/src/common/ColorInput/ColorInput.js +++ b/src/common/ColorInput/ColorInput.js @@ -14,19 +14,6 @@ const ColorInput = ({ className, value, onChange, ...props }) => { const dataset = useDataset(props); const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false); const [tempValue, setTempValue] = React.useState(value); - const closeModal = (event) => { - event.nativeEvent.openModalPrevented = true; - setModalClosed(); - }; - const pickerLabelOnClick = React.useCallback((event) => { - if (typeof props.onClick === 'function') { - props.onClick(event); - } - - if (!event.nativeEvent.openModalPrevented) { - setModalOpen(); - } - }, [props.onClick]); const colorPickerOnInput = React.useCallback((event) => { setTempValue(event.value); }, []); @@ -40,23 +27,23 @@ const ColorInput = ({ className, value, onChange, ...props }) => { nativeEvent: event.nativeEvent }); } - - closeModal(event); - }, [onChange, tempValue, dataset, closeModal]); + setModalClosed(); + }, [onChange, tempValue, dataset]); React.useEffect(() => { setTempValue(value); }, [value, modalOpen]); return ( - + ); }; From 3aa7cf6ad5e64effe4efc568d4cd51fd397fd668 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 6 Nov 2019 13:23:45 +0200 Subject: [PATCH 31/31] Do not force auto focus --- src/common/Popup/Popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index 5b957392d..dc5c9bc16 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -68,7 +68,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, onCloseRequest, ...pr ref: labelRef, className: styles['label-container'], children: open ? - + {renderMenu()} :