Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

addons screen uses new installed_addons model

Browse source
This commit is contained in:
nklhrstv 2020-09-15 17:42:19 +03:00
parent 01a2d5162b
commit c0085b6368
4 changed files with 178 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/routes/Addons/Addons.js
View file

@ -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 }) => {
/>
</div>
{
remoteAddons.selectable.catalogs.length === 0 && remoteAddons.catalog_resource === null ?
<div className={styles['message-container']}>
No addons
</div>
:
remoteAddons.catalog_resource === null ?
installedAddons.selected !== null ?
installedAddons.type_names.length === 0 ?
<div className={styles['message-container']}>
No select
No addons ware installed!
</div>
:
installedAddons.addons.length === 0 ?
<div className={styles['message-container']}>
No addons ware installed for that type!
</div>
:
<div className={styles['addons-list-container']}>
{
installedAddons.addons
.filter(searchFilterPredicate)
.map((addon, index) => (
<Addon
key={index}
className={styles['addon']}
id={addon.manifest.id}
name={addon.manifest.name}
version={addon.manifest.version}
logo={addon.manifest.logo}
description={addon.manifest.description}
types={addon.manifest.types}
installed={addon.installed}
onToggle={onAddonToggle}
onShare={onAddonShare}
dataset={{ addon }}
/>
))
}
</div>
:
remoteAddons.selected !== null ?
remoteAddons.catalog_resource.content.type === 'Err' ?
<div className={styles['message-container']}>
Addons could not be loaded
Addons could not be loaded!
</div>
:
remoteAddons.catalog_resource.content.type === 'Loading' ?
<div className={styles['message-container']}>
Loading
Loading!
</div>
:
<div className={styles['addons-list-container']}>
{
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) => (
<Addon
key={index}
@ -161,6 +195,10 @@ const Addons = ({ urlParams, queryParams }) => {
))
}
</div>
:
<div className={styles['message-container']}>
No select
</div>
}
</div>
{

56
src/routes/Addons/useInstalledAddons.js Normal file
View file

@ -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;

44
src/routes/Addons/useRemoteAddons.js
View file

@ -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
});
};

72
src/routes/Addons/useSelectableInputs.js
View file

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