From c0085b6368754f7bf9b6f544f6685c862fb35758 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 15 Sep 2020 17:42:19 +0300 Subject: [PATCH] addons screen uses new installed_addons model --- src/routes/Addons/Addons.js | 88 +++++++++++++++++------- src/routes/Addons/useInstalledAddons.js | 56 +++++++++++++++ src/routes/Addons/useRemoteAddons.js | 44 +++--------- src/routes/Addons/useSelectableInputs.js | 72 +++++++++++++------ 4 files changed, 178 insertions(+), 82 deletions(-) create mode 100644 src/routes/Addons/useInstalledAddons.js diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index 047a8a885..3615dd61b 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -6,6 +6,7 @@ const { useRouteFocused } = require('stremio-router'); const Icon = require('@stremio/stremio-icons/dom'); const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common'); const Addon = require('./Addon'); +const useInstalledAddons = require('./useInstalledAddons'); const useRemoteAddons = require('./useRemoteAddons'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); @@ -18,26 +19,33 @@ const Addons = ({ urlParams, queryParams }) => { } const nextPath = args.hasOwnProperty('request') ? - `/${encodeURIComponent(args.request.base)}/${encodeURIComponent(args.request.path.id)}/${encodeURIComponent(args.request.path.type_name)}` + `/${encodeURIComponent(args.request.path.type_name)}/${encodeURIComponent(args.request.base)}/${encodeURIComponent(args.request.path.id)}` : - typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string' ? - `/${encodeURIComponent(urlParams.transportUrl)}/${encodeURIComponent(urlParams.catalogId)}/${encodeURIComponent(urlParams.type)}` + args.hasOwnProperty('type_name') ? + typeof args.type_name === 'string' ? + `/${encodeURIComponent(args.type_name)}` + : + '' : - ''; + typeof urlParams.type === 'string' && typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' ? + `/${encodeURIComponent(urlParams.type)}/${encodeURIComponent(urlParams.transportUrl)}/${encodeURIComponent(urlParams.catalogId)}` + : + ''; const nextQueryParams = new URLSearchParams(queryParams); if (args.hasOwnProperty('detailsTransportUrl')) { - if (args.detailsTransportUrl === null) { - nextQueryParams.delete('addon'); - } else { + if (typeof args.detailsTransportUrl === 'string') { nextQueryParams.set('addon', args.detailsTransportUrl); + } else { + nextQueryParams.delete('addon'); } } - window.location.replace(`#/addons${nextPath}?${nextQueryParams}`); + window.location = `#/addons${nextPath}?${nextQueryParams}`; }, [routeFocused, urlParams, queryParams]); + const installedAddons = useInstalledAddons(urlParams); const remoteAddons = useRemoteAddons(urlParams); const detailsTransportUrl = queryParams.get('addon'); - const selectInputs = useSelectableInputs(remoteAddons, navigate); + const selectInputs = useSelectableInputs(installedAddons, remoteAddons, navigate); const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false); const addAddonUrlInputRef = React.useRef(null); const addAddonOnSubmit = React.useCallback(() => { @@ -84,6 +92,13 @@ const Addons = ({ urlParams, queryParams }) => { const closeAddonDetails = React.useCallback(() => { navigate({ detailsTransportUrl: null }); }, [navigate]); + const searchFilterPredicate = React.useCallback((addon) => { + return search.length === 0 || + ( + (typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(search.toLowerCase())) || + (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(search.toLowerCase())) + ); + }, [search]); React.useLayoutEffect(() => { closeAddAddonModal(); setSearch(''); @@ -113,36 +128,55 @@ const Addons = ({ urlParams, queryParams }) => { /> { - remoteAddons.selectable.catalogs.length === 0 && remoteAddons.catalog_resource === null ? -
- No addons -
- : - remoteAddons.catalog_resource === null ? + installedAddons.selected !== null ? + installedAddons.type_names.length === 0 ?
- No select + No addons ware installed!
: + installedAddons.addons.length === 0 ? +
+ No addons ware installed for that type! +
+ : +
+ { + installedAddons.addons + .filter(searchFilterPredicate) + .map((addon, index) => ( + + )) + } +
+ : + remoteAddons.selected !== null ? remoteAddons.catalog_resource.content.type === 'Err' ?
- Addons could not be loaded + Addons could not be loaded!
: remoteAddons.catalog_resource.content.type === 'Loading' ?
- Loading + Loading!
:
{ remoteAddons.catalog_resource.content.content - .filter((addon) => { - return search.length === 0 || - ( - (typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(search.toLowerCase())) || - (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(search.toLowerCase())) - ); - }) + .filter(searchFilterPredicate) .map((addon, index) => ( { )) }
+ : +
+ No select +
} { diff --git a/src/routes/Addons/useInstalledAddons.js b/src/routes/Addons/useInstalledAddons.js new file mode 100644 index 000000000..b4e0b6fca --- /dev/null +++ b/src/routes/Addons/useInstalledAddons.js @@ -0,0 +1,56 @@ +// Copyright (C) 2017-2020 Smart code 203358507 + +const React = require('react'); +const { useServices } = require('stremio/services'); +const { useModelState } = require('stremio/common'); + +const mapAddonsState = (installedAddons) => { + const selected = installedAddons.selected; + const type_names = installedAddons.type_names; + const addons = installedAddons.addons.map((addon) => ({ + transportUrl: addon.transportUrl, + installed: true, + manifest: { + id: addon.manifest.id, + name: addon.manifest.name, + version: addon.manifest.version, + logo: addon.manifest.logo, + description: addon.manifest.description, + types: addon.manifest.types + } + })); + return { selected, type_names, addons }; +}; + +const useInstalledAddons = (urlParams) => { + const { core } = useServices(); + const initAddonsState = React.useMemo(() => { + const installedAddons = core.transport.getState('installed_addons'); + return mapAddonsState(installedAddons); + }, []); + const loadAddonsAction = React.useMemo(() => { + if (typeof urlParams.transportUrl !== 'string' && typeof urlParams.catalogId !== 'string') { + return { + action: 'Load', + args: { + model: 'InstalledAddonsWithFilters', + args: { + type_name: urlParams.type + } + } + }; + } else { + return { + action: 'Unload' + }; + } + }, [urlParams]); + return useModelState({ + model: 'installed_addons', + action: loadAddonsAction, + map: mapAddonsState, + init: initAddonsState + }); +}; + +module.exports = useInstalledAddons; diff --git a/src/routes/Addons/useRemoteAddons.js b/src/routes/Addons/useRemoteAddons.js index 17dc40b5e..41314154d 100644 --- a/src/routes/Addons/useRemoteAddons.js +++ b/src/routes/Addons/useRemoteAddons.js @@ -1,10 +1,10 @@ // Copyright (C) 2017-2020 Smart code 203358507 const React = require('react'); -const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); const initAddonsState = () => ({ + selected: null, selectable: { types: [], catalogs: [] @@ -13,6 +13,7 @@ const initAddonsState = () => ({ }); const mapAddonsStateWithCtx = (addons, ctx) => { + const selected = addons.selected; const selectable = addons.selectable; const catalog_resource = addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ? { @@ -35,27 +36,12 @@ const mapAddonsStateWithCtx = (addons, ctx) => { } : addons.catalog_resource; - return { selectable, catalog_resource }; -}; - -const onNewAddonsState = (addons) => { - if (addons.catalog_resource === null && addons.selectable.catalogs.length > 0) { - return { - action: 'Load', - args: { - model: 'CatalogWithFilters', - args: { - request: addons.selectable.catalogs[0].request - } - } - }; - } + return { selected, selectable, catalog_resource }; }; const useRemoteAddons = (urlParams) => { - const { core } = useServices(); const loadAddonsAction = React.useMemo(() => { - if (typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string') { + if (typeof urlParams.type === 'string' && typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string') { return { action: 'Load', args: { @@ -74,30 +60,16 @@ const useRemoteAddons = (urlParams) => { } }; } else { - const addons = core.transport.getState('remote_addons'); - if (addons.selectable.catalogs.length > 0) { - return { - action: 'Load', - args: { - model: 'CatalogWithFilters', - args: { - request: addons.selectable.catalogs[0].request - } - } - }; - } else { - return { - action: 'Unload' - }; - } + return { + action: 'Unload' + }; } }, [urlParams]); return useModelState({ model: 'remote_addons', action: loadAddonsAction, mapWithCtx: mapAddonsStateWithCtx, - init: initAddonsState, - onNewState: onNewAddonsState + init: initAddonsState }); }; diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index 616e5f9c8..dd64c3ce9 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/src/routes/Addons/useSelectableInputs.js @@ -2,49 +2,79 @@ const React = require('react'); -const mapSelectableInputs = (addons, navigate) => { +const ALL_TYPES_OPTION = { + value: null, + label: 'All' +}; + +const mapSelectableInputs = (installedAddons, remoteAddons, navigate) => { const catalogSelect = { title: 'Select catalog', - options: addons.selectable.catalogs + options: remoteAddons.selectable.catalogs .map(({ name, request }) => ({ value: JSON.stringify(request), label: name - })), - selected: addons.selectable.catalogs + })) + .concat({ + value: JSON.stringify(ALL_TYPES_OPTION.value), + label: 'Installed' + }), + selected: remoteAddons.selectable.catalogs .filter(({ request }) => { - return addons.catalog_resource !== null && - addons.catalog_resource.request.base === request.base && - addons.catalog_resource.request.path.id === request.path.id; + return remoteAddons.selected !== null && + remoteAddons.selected.request.base === request.base && + remoteAddons.selected.request.path.id === request.path.id; }) - .map(({ request }) => JSON.stringify(request)), + .map(({ request }) => JSON.stringify(request)) + .concat(installedAddons.selected !== null ? JSON.stringify(ALL_TYPES_OPTION.value) : []), onSelect: (event) => { - navigate({ request: JSON.parse(event.value) }); + const value = JSON.parse(event.value); + if (value === ALL_TYPES_OPTION.value) { + navigate({ type_name: value }); + return; + } + + navigate({ request: value }); } }; const typeSelect = { title: 'Select type', - options: addons.selectable.types - .map(({ name, request }) => ({ + options: installedAddons.selected !== null ? + [{ label: ALL_TYPES_OPTION.label, value: JSON.stringify(ALL_TYPES_OPTION.value) }].concat(installedAddons.type_names.map((type_name) => ({ + value: JSON.stringify(type_name), + label: type_name + }))) + : + remoteAddons.selectable.types.map(({ name, request }) => ({ value: JSON.stringify(request), label: name })), - selected: addons.selectable.types - .filter(({ request }) => { - return addons.catalog_resource !== null && - addons.catalog_resource.request.path.type_name === request.path.type_name; - }) - .map(({ request }) => JSON.stringify(request)), + selected: installedAddons.selected !== null ? + [JSON.stringify(installedAddons.selected.type_name)] + : + remoteAddons.selectable.types + .filter(({ request }) => { + return remoteAddons.selected !== null && + remoteAddons.selected.request.path.type_name === request.path.type_name; + }) + .map(({ request }) => JSON.stringify(request)), onSelect: (event) => { - navigate({ request: JSON.parse(event.value) }); + const value = JSON.parse(event.value); + if (value === ALL_TYPES_OPTION.value || typeof value === 'string') { + navigate({ type_name: value }); + return; + } + + navigate({ request: value }); } }; return [catalogSelect, typeSelect]; }; -const useSelectableInputs = (addons, navigate) => { +const useSelectableInputs = (installedAddons, remoteAddons, navigate) => { const selectableInputs = React.useMemo(() => { - return mapSelectableInputs(addons, navigate); - }, [addons, navigate]); + return mapSelectableInputs(installedAddons, remoteAddons, navigate); + }, [installedAddons, remoteAddons, navigate]); return selectableInputs; };