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

Addons screen ui adapted to changes in core

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-13 13:34:28 +02:00
parent b2bfcee2f8
commit ef1aa994d8
4 changed files with 188 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,49 +1,69 @@
const React = require('react'); const React = require('react');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common'); const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon'); const Addon = require('./Addon');
const AddonPrompt = require('./AddonPrompt');
const useAddons = require('./useAddons'); const useAddons = require('./useAddons');
const useSelectedAddon = require('./useSelectedAddon'); const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles'); const styles = require('./styles');
const Addons = ({ urlParams, queryParams }) => { const Addons = ({ urlParams, queryParams }) => {
const inputRef = React.useRef(null); const addons = useAddons(urlParams);
const [query, setQuery] = React.useState(''); const selectInputs = useSelectableInputs(addons);
const queryOnChange = React.useCallback((event) => { const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
setQuery(event.currentTarget.value); const addAddonUrlInputRef = React.useRef(null);
}, []); const addAddonOnSubmit = React.useCallback(() => {
const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams); if (addAddonUrlInputRef.current !== null) {
const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false); // TODO install addon
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const [sharedAddon, setSharedAddon] = React.useState(null);
const onAddAddonButtonClicked = React.useCallback(() => {
setAddAddonModalOpened(true);
}, []);
const onAddButtonClicked = React.useCallback(() => {
if (inputRef.current.value.length > 0) {
setSelectedAddon(inputRef.current.value);
setAddAddonModalOpened(false);
} }
}, [setSelectedAddon]); }, []);
const installedAddon = React.useCallback((currentAddon) => { const addAddonModalButtons = React.useMemo(() => {
return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl); return [
}, [installedAddons]); {
const toggleAddon = React.useCallback(() => { className: styles['cancel-button'],
installedAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon); label: 'Cancel',
clearSelectedAddon(); props: {
}, [selectedAddon]); onClick: closeAddAddonModal
}
},
{
label: 'Add',
props: {
onClick: addAddonOnSubmit
}
}
];
}, []);
const [search, setSearch] = React.useState('');
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
}, []);
const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
const shareModalOnClose = React.useCallback(() => {
setSharedTransportUrl(null);
}, []);
const onAddonShare = React.useCallback((event) => {
setSharedTransportUrl(event.dataset.transportUrl);
}, []);
React.useLayoutEffect(() => {
closeAddAddonModal(null);
setSearch('');
setSharedTransportUrl(null);
}, [urlParams, queryParams]);
return ( return (
<div className={styles['addons-container']}> <div className={styles['addons-container']}>
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} /> <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
<div className={styles['addons-content']}> <div className={styles['addons-content']}>
<div className={styles['top-bar-container']}> <div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}> <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} /> <Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div> <div className={styles['add-button-label']}>Add addon</div>
</Button> </Button>
{dropdowns.map((dropdown, index) => ( {selectInputs.map((selectInput, index) => (
<Multiselect {...dropdown} key={index} className={styles['dropdown']} /> <Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))} ))}
<label className={styles['search-bar-container']}> <label className={styles['search-bar-container']}>
<Icon className={styles['icon']} icon={'ic_search'} /> <Icon className={styles['icon']} icon={'ic_search'} />
@ -51,114 +71,90 @@ const Addons = ({ urlParams, queryParams }) => {
className={styles['search-input']} className={styles['search-input']}
type={'text'} type={'text'}
placeholder={'Search addons...'} placeholder={'Search addons...'}
value={query} value={search}
onChange={queryOnChange} onChange={searchInputOnChange}
/> />
</label> </label>
</div> </div>
<div className={styles['addons-list-container']}> {
{ addons.selectable.catalogs.length === 0 && addons.catalog_resource === null ?
error !== null ? <div className={styles['message-container']}>
No addons
</div>
:
addons.catalog_resource === null ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
{error.type}{error.type === 'Other' ? ` - ${error.content}` : null} No select
</div> </div>
: :
Array.isArray(addons) ? addons.catalog_resource.content.type === 'Err' ?
addons.filter((addon) => query.length === 0 ||
((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon
{...addon.manifest}
key={index}
installed={installedAddon(addon)}
className={styles['addon']}
toggle={() => setSelectedAddon(addon.transportUrl)}
onShareButtonClicked={() => setSharedAddon(addon)}
/>
))
:
<div className={styles['message-container']}> <div className={styles['message-container']}>
Loading Addons could not be loaded
</div> </div>
} :
</div> addons.catalog_resource.content.type === 'Loading' ?
{ <div className={styles['message-container']}>
addAddonModalOpened ? Loading
<ModalDialog </div>
className={styles['add-addon-prompt-container']} :
title={'Add addon'} <div className={styles['addons-container']}>
buttons={[ {
{ addons.catalog_resource.content.content
label: 'Cancel', .filter((addon) => {
className: styles['cancel-button'], return search.length === 0 ||
props: { (
title: 'Cancel', (typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(search.toLowerCase())) ||
onClick: () => setAddAddonModalOpened(false) (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(search.toLowerCase()))
} );
}, })
{ .map((addon, index) => (
label: 'Add', <Addon
props: { key={index}
title: 'Add', className={styles['addon']}
onClick: onAddButtonClicked id={addon.manifest.id}
} name={addon.manifest.name}
} logo={addon.manifest.logo}
]} description={addon.manifest.description}
onCloseRequest={() => setAddAddonModalOpened(false)} types={addon.manifest.types}
> version={addon.manifest.version}
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} /> transportUrl={addon.transportUrl}
</ModalDialog> onShare={onAddonShare}
: dataset={{ transportUrl: addon.transportUrl }}
null />
} ))
{ }
selectedAddon !== null ? </div>
<ModalDialog
className={styles['addon-prompt-container']}
buttons={[
{
label: 'Cancel',
className: styles['cancel-button'],
props: {
title: 'Cancel',
onClick: clearSelectedAddon
}
},
{
label: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
props: {
title: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
onClick: toggleAddon
}
}
]}
onCloseRequest={clearSelectedAddon}
>
<AddonPrompt
{...selectedAddon.manifest}
transportUrl={selectedAddon.transportUrl}
installed={installedAddon(selectedAddon)}
official={selectedAddon.flags.official}
cancel={clearSelectedAddon}
/>
</ModalDialog>
:
null
}
{
sharedAddon !== null ?
<ModalDialog className={styles['share-prompt-container']} title={'Share addon'} onCloseRequest={() => setSharedAddon(null)}>
<SharePrompt
url={sharedAddon.transportUrl}
close={() => setSharedAddon(null)}
/>
</ModalDialog>
:
null
} }
</div> </div>
{
addAddonModalOpen ?
<ModalDialog
className={styles['add-addon-modal-container']}
title={'Add addon'}
buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}>
<TextInput
ref={addAddonUrlInputRef}
className={styles['addon-url-input']}
type={'text'}
placeholder={'Paste url...'}
onSubmit={addAddonOnSubmit}
/>
</ModalDialog>
:
null
}
{
typeof sharedTransportUrl === 'string' ?
<ModalDialog
className={styles['share-modal-container']}
title={'Share addon'}
onCloseRequest={shareModalOnClose}>
<SharePrompt className={styles['share-prompt-container']} url={sharedTransportUrl} />
</ModalDialog>
:
null
}
</div> </div>
); );
}; };

65
src/routes/Addons/styles.less
View file

@ -1,3 +1,7 @@
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
}
.addons-container { .addons-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -16,11 +20,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.top-bar-container { .selectable-inputs-container {
flex: none; flex: none;
align-self: stretch;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 2rem; padding: 1.5rem;
overflow: visible; overflow: visible;
.add-button-container { .add-button-container {
@ -30,7 +35,7 @@
align-items: center; align-items: center;
height: 3rem; height: 3rem;
max-width: 15rem; max-width: 15rem;
margin-right: 1rem; margin-right: 1.5rem;
padding: 0 1rem; padding: 0 1rem;
background-color: var(--color-signal5); background-color: var(--color-signal5);
@ -40,8 +45,8 @@
.icon { .icon {
flex: none; flex: none;
width: 1.5rem; width: 1.2rem;
height: 1.5rem; height: 1.2rem;
margin-right: 1rem; margin-right: 1rem;
fill: var(--color-surfacelighter); fill: var(--color-surfacelighter);
} }
@ -56,12 +61,17 @@
} }
} }
.dropdown { .select-input-container {
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 15rem; flex-basis: 15rem;
height: 3rem; height: 3rem;
margin-right: 1rem; margin-right: 1.5rem;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
} }
.search-bar-container { .search-bar-container {
@ -72,7 +82,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 3rem; height: 3rem;
margin-right: 1rem;
padding: 0 1rem; padding: 0 1rem;
background-color: var(--color-backgroundlighter); background-color: var(--color-backgroundlighter);
cursor: text; cursor: text;
@ -82,7 +91,7 @@
} }
.icon { .icon {
display: block; flex: none;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
margin-right: 1rem; margin-right: 1rem;
@ -91,7 +100,6 @@
.search-input { .search-input {
flex: 1; flex: 1;
align-self: stretch;
color: var(--color-surfacelighter); color: var(--color-surfacelighter);
&::placeholder { &::placeholder {
@ -103,32 +111,31 @@
} }
} }
.addons-list-container { .message-container {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
padding: 0 2rem; padding: 0 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.addons-container {
flex: 1;
align-self: stretch;
padding: 0 1.5rem;
overflow-y: auto; overflow-y: auto;
.addon { .addon {
width: 100%; margin-bottom: 1.5rem;
margin-bottom: 2rem;
}
.message-container {
padding: 0 2rem;
font-size: 2rem;
color: var(--color-surfacelighter);
} }
} }
} }
} }
.add-addon-prompt-container { .add-addon-modal-container {
.url-content { .addon-url-input {
flex: 1; width: 25rem;
width: 100%; padding: 0.5rem 1rem;
padding: 0.5rem;
font-size: 0.9rem;
color: var(--color-surfacedark); color: var(--color-surfacedark);
border: thin solid var(--color-surface); border: thin solid var(--color-surface);
} }
@ -138,8 +145,8 @@
} }
} }
.addon-prompt-container { .share-modal-container {
.cancel-button { .share-prompt-container {
background-color: var(--color-surfacedark); width: 25rem;
} }
} }

25
src/routes/Addons/useAddons.js
View file

@ -15,8 +15,29 @@ const initAddonsState = () => ({
const mapAddonsStateWithCtx = (addons, ctx) => { const mapAddonsStateWithCtx = (addons, ctx) => {
const selectable = addons.selectable; const selectable = addons.selectable;
const catalog_resource = addons.catalog_resource; // TODO replace catalog content if resource catalog id is MY
// TODO add MY catalogId replace catalog content if resource catalog id is MY const catalog_resource = addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ?
{
...addons.catalog_resource,
content: {
...addons.catalog_resource.content,
content: addons.catalog_resource.content.content.map((descriptor) => ({
transportUrl: descriptor.transportUrl,
installed: ctx.content.addons.some((addon) => addon.transportUrl === descriptor.transportUrl),
manifest: {
id: descriptor.manifest.id,
name: descriptor.manifest.name,
version: descriptor.manifest.version,
logo: descriptor.manifest.logo,
description: descriptor.manifest.description,
types: descriptor.manifest.types,
catalogs: descriptor.manifest.catalogs,
}
}))
}
}
:
addons.catalog_resource;
return { selectable, catalog_resource }; return { selectable, catalog_resource };
}; };

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

@ -15,18 +15,6 @@ const equalWithouExtra = (request1, request2) => {
}; };
const mapSelectableInputs = (addons) => { const mapSelectableInputs = (addons) => {
const selectedCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
{
base: null,
path: {
resource: 'addon_catalog',
id: null,
type_name: null,
extra: []
}
};
const catalogSelect = { const catalogSelect = {
title: 'Select catalog', title: 'Select catalog',
options: addons.selectable.catalogs options: addons.selectable.catalogs
@ -36,7 +24,8 @@ const mapSelectableInputs = (addons) => {
})), })),
selected: addons.selectable.catalogs selected: addons.selectable.catalogs
.filter(({ load_request: { path: { id } } }) => { .filter(({ load_request: { path: { id } } }) => {
return id === selectedCatalogRequest.path.id; return addons.catalog_resource !== null &&
addons.catalog_resource.request.path.id === id;
}) })
.map(({ load_request }) => JSON.stringify(load_request)), .map(({ load_request }) => JSON.stringify(load_request)),
onSelect: (event) => { onSelect: (event) => {
@ -52,7 +41,8 @@ const mapSelectableInputs = (addons) => {
})), })),
selected: addons.selectable.types selected: addons.selectable.types
.filter(({ load_request }) => { .filter(({ load_request }) => {
return equalWithouExtra(load_request, selectedCatalogRequest); return addons.catalog_resource !== null &&
equalWithouExtra(addons.catalog_resource.request, load_request);
}) })
.map(({ load_request }) => JSON.stringify(load_request)), .map(({ load_request }) => JSON.stringify(load_request)),
onSelect: (event) => { onSelect: (event) => {