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

conflicts with development resolved

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-16 11:30:57 +02:00
commit bfe1c783a8
10 changed files with 388 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/common/useInLibrary.js
View file

@ -1,12 +1,60 @@
const useBinaryState = require('stremio/common/useBinaryState');
const React = require('react');
const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const useInLibrary = (id) => {
const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
if (typeof id === 'string') {
return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
} else {
return [false, null, null, null];
}
const useInLibrary = (metaItem) => {
const { core } = useServices();
const initLibraryItemsState = React.useCallback(() => {
return core.getState('library_items');
}, []);
const libraryItems = useModelState({
model: 'library_items',
init: initLibraryItemsState
});
const addToLibrary = React.useCallback((metaItem) => {
core.dispatch({
action: 'UserOp',
args: {
userOp: 'AddToLibrary',
args: {
meta_item: metaItem,
now: new Date()
}
}
});
}, []);
const removeFromLibrary = React.useCallback((id) => {
core.dispatch({
action: 'UserOp',
args: {
userOp: 'RemoveFromLibrary',
args: {
id,
now: new Date()
}
}
});
}, []);
const inLibrary = React.useMemo(() => {
return typeof metaItem === 'object' && metaItem !== null ?
libraryItems.ids.includes(metaItem.id)
:
false;
}, [metaItem, libraryItems]);
const toggleInLibrary = React.useMemo(() => {
if (typeof metaItem !== 'object' || metaItem === null) {
return null;
}
return () => {
if (inLibrary) {
removeFromLibrary(metaItem.id);
} else {
addToLibrary(metaItem);
}
};
}, [metaItem, inLibrary]);
return [inLibrary, toggleInLibrary];
};
module.exports = useInLibrary;

71
src/routes/Addons/Addon/Addon.js
View file

@ -2,24 +2,54 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');
const Addon = ({ className, id, name, logo, description, types, version, installed, toggle, onShareButtonClicked }) => {
const onKeyUp = React.useCallback((event) => {
if (event.key === 'Enter' && typeof toggle === 'function') {
toggle(event);
const Addon = ({ className, id, name, version, logo, description, types, installed, onToggle, onShare, dataset }) => {
const toggleButtonOnClick = React.useCallback((event) => {
if (typeof onToggle === 'function') {
onToggle({
type: 'toggle',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [toggle]);
}, [onToggle, dataset]);
const shareButtonOnClick = React.useCallback((event) => {
if (typeof onShare === 'function') {
onShare({
type: 'share',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onShare, dataset]);
const onKeyDown = React.useCallback((event) => {
if (event.key === 'Enter' && typeof onToggle === 'function') {
onToggle({
type: 'toggle',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onToggle, dataset]);
const renderLogoFallback = React.useMemo(() => () => {
return (
<Icon className={styles['icon']} icon={'ic_addons'} />
);
}, []);
return (
<Button className={classnames(styles['addon-container'], className)} data-id={id} onKeyUp={onKeyUp}>
<Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
<div className={styles['logo-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
<img className={styles['logo']} src={logo} alt={' '} />
:
<Icon className={styles['icon']} icon={'ic_addons'} />
}
<Image
className={styles['logo']}
src={logo}
alt={' '}
renderFallback={renderLogoFallback}
/>
</div>
<div className={styles['info-container']}>
<div className={styles['name-container']} title={typeof name === 'string' && name.length > 0 ? name : id}>
@ -32,10 +62,10 @@ const Addon = ({ className, id, name, logo, description, types, version, install
null
}
{
Array.isArray(types) ?
Array.isArray(types) && types.length > 0 ?
<div className={styles['types-container']}>
{
types.length <= 1 ?
types.length === 1 ?
types.join('')
:
types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
@ -52,10 +82,10 @@ const Addon = ({ className, id, name, logo, description, types, version, install
}
</div>
<div className={styles['buttons-container']}>
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} onClick={toggle}>
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_share'} />
<div className={styles['label']}>Share addon</div>
</Button>
@ -68,13 +98,14 @@ Addon.propTypes = {
className: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string,
version: PropTypes.string,
logo: PropTypes.string,
description: PropTypes.string,
types: PropTypes.arrayOf(PropTypes.string),
version: PropTypes.string,
installed: PropTypes.bool,
toggle: PropTypes.func,
onShareButtonClicked: PropTypes.func
onToggle: PropTypes.func,
onShare: PropTypes.func,
dataset: PropTypes.objectOf(PropTypes.string)
};
module.exports = Addon;

25
src/routes/Addons/Addon/styles.less
View file

@ -1,7 +1,6 @@
.addon-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
padding: 1rem;
background-color: var(--color-backgroundlighter);
@ -17,6 +16,7 @@
display: block;
width: 100%;
height: 100%;
padding: 0.5rem;
object-fit: contain;
object-position: center;
}
@ -31,14 +31,13 @@
}
.info-container {
flex-grow: 1000;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
min-width: 40rem;
padding: 0 0.5rem;
.name-container {
@ -47,7 +46,7 @@
flex-basis: auto;
padding: 0 0.5rem;
max-height: 3.6em;
font-size: 1.5rem;
font-size: 1.6rem;
color: var(--color-surfacelighter);
}
@ -55,6 +54,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
@ -83,22 +83,14 @@
}
.buttons-container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
min-width: 17rem;
flex: none;
width: 17rem;
.install-button-container, .uninstall-button-container, .share-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 17rem;
height: 3.5rem;
padding: 0 1rem;
@ -106,13 +98,8 @@
margin-top: 1rem;
}
&:not(:last-child) {
margin-right: 1rem;
}
.icon {
flex: none;
display: block;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;

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

@ -1,50 +1,93 @@
const React = require('react');
const PropTypes = require('prop-types');
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 AddonPrompt = require('./AddonPrompt');
const useAddons = require('./useAddons');
const useSelectedAddon = require('./useSelectedAddon');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
const queryParams = new URLSearchParams([['addon', transportUrl]]);
if (addonsCatalogRequest !== null) {
const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}?${queryParams}`);
} else {
window.location.replace(`#/addons?${queryParams}`);
}
};
const Addons = ({ urlParams, queryParams }) => {
const inputRef = React.useRef(null);
const [query, setQuery] = React.useState('');
const queryOnChange = React.useCallback((event) => {
setQuery(event.currentTarget.value);
}, []);
const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false);
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);
const addons = useAddons(urlParams);
const selectInputs = useSelectableInputs(addons);
const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
const addAddonUrlInputRef = React.useRef(null);
const addAddonOnSubmit = React.useCallback(() => {
if (addAddonUrlInputRef.current !== null) {
const addonsCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
null;
navigateToAddonDetails(addonsCatalogRequest, addAddonUrlInputRef.current.value);
}
}, [setSelectedAddon]);
const installedAddon = React.useCallback((currentAddon) => {
return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
}, [installedAddons]);
const toggleAddon = React.useCallback(() => {
installedAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
clearSelectedAddon();
}, [selectedAddon]);
}, [addons]);
const addAddonModalButtons = React.useMemo(() => {
return [
{
className: styles['cancel-button'],
label: 'Cancel',
props: {
onClick: closeAddAddonModal
}
},
{
label: 'Add',
props: {
onClick: addAddonOnSubmit
}
}
];
}, [addAddonOnSubmit]);
const [search, setSearch] = React.useState('');
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
}, []);
const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
const clearSharedTransportUrl = React.useCallback(() => {
setSharedTransportUrl(null);
}, []);
const onAddonShare = React.useCallback((event) => {
setSharedTransportUrl(event.dataset.transportUrl);
}, []);
const onAddonToggle = React.useCallback((event) => {
const addonsCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
null;
navigateToAddonDetails(addonsCatalogRequest, event.dataset.transportUrl);
}, [addons]);
React.useLayoutEffect(() => {
closeAddAddonModal();
setSearch('');
clearSharedTransportUrl();
}, [urlParams, queryParams]);
return (
<div className={styles['addons-container']}>
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
<div className={styles['addons-content']}>
<div className={styles['top-bar-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}>
<div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div>
</Button>
{dropdowns.map((dropdown, index) => (
<Multiselect {...dropdown} key={index} className={styles['dropdown']} />
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
<label className={styles['search-bar-container']}>
<Icon className={styles['icon']} icon={'ic_search'} />
@ -52,114 +95,94 @@ const Addons = ({ urlParams, queryParams }) => {
className={styles['search-input']}
type={'text'}
placeholder={'Search addons...'}
value={query}
onChange={queryOnChange}
value={search}
onChange={searchInputOnChange}
/>
</label>
</div>
<div className={styles['addons-list-container']}>
{
error !== null ?
{
addons.selectable.catalogs.length === 0 && addons.catalog_resource === null ?
<div className={styles['message-container']}>
No addons
</div>
:
addons.catalog_resource === null ?
<div className={styles['message-container']}>
{error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
No select
</div>
:
Array.isArray(addons) ?
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)}
/>
))
:
addons.catalog_resource.content.type === 'Err' ?
<div className={styles['message-container']}>
Loading
Addons could not be loaded
</div>
}
</div>
{
addAddonModalOpened ?
<ModalDialog
className={styles['add-addon-prompt-container']}
title={'Add addon'}
buttons={[
{
label: 'Cancel',
className: styles['cancel-button'],
props: {
title: 'Cancel',
onClick: () => setAddAddonModalOpened(false)
}
},
{
label: 'Add',
props: {
title: 'Add',
onClick: onAddButtonClicked
}
}
]}
onCloseRequest={() => setAddAddonModalOpened(false)}
>
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
</ModalDialog>
:
null
}
{
selectedAddon !== null ?
<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
:
addons.catalog_resource.content.type === 'Loading' ?
<div className={styles['message-container']}>
Loading
</div>
:
<div className={styles['addons-list-container']}>
{
addons.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()))
);
})
.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={{ transportUrl: addon.transportUrl }}
/>
))
}
</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={clearSharedTransportUrl}>
<SharePrompt
className={styles['share-prompt-container']}
url={sharedTransportUrl}
/>
</ModalDialog>
:
null
}
</div>
);
};

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

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

48
src/routes/Addons/useAddonDetails.js Normal file
View file

@ -0,0 +1,48 @@
const React = require('react');
const { useModelState } = require('stremio/common');
const initAddonDetailsState = () => ({
descriptor: null
});
const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
const descriptor = addonDetails.descriptor !== null && addonDetails.descriptor.content.type === 'Ready' ?
{
...addonDetails.descriptor,
content: {
...addonDetails.descriptor.content,
installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
}
}
:
addonDetails.descriptor;
return { descriptor };
};
const useAddonDetails = (queryParams) => {
const loadAddonDetailsAction = React.useMemo(() => {
if (queryParams.has('addon')) {
return {
action: 'Load',
args: {
load: 'AddonDetails',
args: {
transport_url: queryParams.get('addon')
}
}
};
} else {
return {
action: 'Unload'
};
}
}, [queryParams]);
return useModelState({
model: 'addon_details',
action: loadAddonDetailsAction,
mapWithCtx: mapAddonDetailsStateWithCtx,
init: initAddonDetailsState,
});
};
module.exports = useAddonDetails;

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

@ -15,8 +15,28 @@ const initAddonsState = () => ({
const mapAddonsStateWithCtx = (addons, ctx) => {
const selectable = addons.selectable;
const catalog_resource = addons.catalog_resource;
// TODO add MY catalogId replace catalog content if resource catalog id is MY
// TODO 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
}
}))
}
}
:
addons.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 selectedCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
{
base: null,
path: {
resource: 'addon_catalog',
id: null,
type_name: null,
extra: []
}
};
const catalogSelect = {
title: 'Select catalog',
options: addons.selectable.catalogs
@ -36,7 +24,8 @@ const mapSelectableInputs = (addons) => {
})),
selected: addons.selectable.catalogs
.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)),
onSelect: (event) => {
@ -52,7 +41,8 @@ const mapSelectableInputs = (addons) => {
})),
selected: addons.selectable.types
.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)),
onSelect: (event) => {

35
src/routes/Addons/useSelectedAddon.js
View file

@ -1,35 +0,0 @@
const React = require('react');
const UrlUtils = require('url');
const { routesRegexp, useLocationHash, useRouteActive } = require('stremio/common');
const useSelectedAddon = (transportUrl) => {
const [addon, setAddon] = React.useState(null);
const locationHash = useLocationHash();
const active = useRouteActive(routesRegexp.addons.regexp);
React.useEffect(() => {
if (typeof transportUrl !== 'string') {
setAddon(null);
return;
}
fetch(transportUrl) // TODO
.then((resp) => resp.json())
.then((manifest) => setAddon({ manifest, transportUrl, flags: {} }));
}, [transportUrl]);
const clear = React.useCallback(() => {
if (active) {
const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
const queryParams = new URLSearchParams(search || '');
queryParams.delete('addon');
if ([...queryParams].length !== 0) {
window.location.replace(`#${pathname}?${queryParams.toString()}`);
} else {
window.location.replace(`#${pathname}`);
}
setAddon(null);
}
}, [active, locationHash]);
return [addon, clear, setAddon];
};
module.exports = useSelectedAddon;

15
src/routes/MetaDetails/MetaDetails.js
View file

@ -12,7 +12,20 @@ const MetaDetails = ({ urlParams }) => {
const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(metaDetails.selected.meta_resource_ref, metaDetails.meta_resources);
const streamsResourceRef = metaDetails.selected.streams_resource_ref;
const streamsResources = metaDetails.streams_resources;
const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef !== null ? metaResourceRef.id : null);
const metaItem = React.useMemo(() => {
return selectedMetaResource !== null ?
selectedMetaResource.content.content
:
metaResourceRef !== null ?
{
id: metaResourceRef.id,
type: metaResourceRef.type_name,
name: ''
}
:
null;
}, [metaResourceRef, selectedMetaResource]);
const [inLibrary, toggleInLibrary] = useInLibrary(metaItem);
return (
<div className={styles['metadetails-container']}>
<NavBar