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) => (
+
+ ))
+ }
+
- 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;
};