mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 10:42:12 +00:00
AddonPrompt finalized
This commit is contained in:
NikolaBorislavovHristov
parent
4404e0a032
commit
330881c0d6
9 changed files with 368 additions and 280 deletions
135
src/routes/Addons/AddonPrompt/AddonPrompt.js
Normal file
135
src/routes/Addons/AddonPrompt/AddonPrompt.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { useFocusable } = require('stremio-router');
|
||||
const { Button } = require('stremio/common');
|
||||
const styles = require('./styles');
|
||||
|
||||
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel }) => {
|
||||
const focusable = useFocusable();
|
||||
React.useEffect(() => {
|
||||
const onKeyUp = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
cancel();
|
||||
}
|
||||
};
|
||||
if (focusable) {
|
||||
window.addEventListener('keyup', onKeyUp);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('keyup', onKeyUp);
|
||||
};
|
||||
}, [cancel, focusable]);
|
||||
return (
|
||||
<div className={classnames(className, styles['addon-prompt-container'])}>
|
||||
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} />
|
||||
</Button>
|
||||
<div className={styles['addon-prompt-content']}>
|
||||
<div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
|
||||
{
|
||||
typeof logo === 'string' && logo.length > 0 ?
|
||||
<div className={styles['logo-container']}>
|
||||
<img className={styles['logo']} src={logo} alt={' '} />
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{typeof name === 'string' && name.length > 0 ? name : id}
|
||||
{' '}
|
||||
{
|
||||
typeof version === 'string' && version.length > 0 ?
|
||||
<span className={styles['version-container']}>v.{version}</span>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
{
|
||||
typeof description === 'string' && description.length > 0 ?
|
||||
<div className={styles['section-container']}>
|
||||
<span className={styles['section-header']}>{description}</span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
typeof transportUrl === 'string' && transportUrl.length > 0 ?
|
||||
<div className={styles['section-container']}>
|
||||
<span className={styles['section-header']}>URL: </span>
|
||||
<span className={classnames(styles['section-label'], styles['transport-url-label'])}>{transportUrl}</span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
Array.isArray(types) && types.length > 0 ?
|
||||
<div className={styles['section-container']}>
|
||||
<span className={styles['section-header']}>Supported types: </span>
|
||||
<span className={styles['section-label']}>
|
||||
{
|
||||
types.length === 1 ?
|
||||
types[0]
|
||||
:
|
||||
types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
Array.isArray(catalogs) && catalogs.length > 0 ?
|
||||
<div className={styles['section-container']}>
|
||||
<span className={styles['section-header']}>Supported catalogs: </span>
|
||||
<span className={styles['section-label']}>
|
||||
{
|
||||
catalogs.length === 1 ?
|
||||
catalogs[0].name
|
||||
:
|
||||
catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
!official ?
|
||||
<div className={styles['section-container']}>
|
||||
<div className={classnames(styles['section-label'], styles['disclaimer-label'])}>Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.</div>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className={styles['buttons-container']}>
|
||||
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'cancel'} onClick={cancel}>
|
||||
<div className={styles['label']}>Cancel</div>
|
||||
</Button>
|
||||
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}>
|
||||
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AddonPrompt.propTypes = {
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
logo: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
types: PropTypes.arrayOf(PropTypes.string),
|
||||
catalogs: PropTypes.arrayOf(PropTypes.shape({
|
||||
name: PropTypes.string
|
||||
})),
|
||||
version: PropTypes.string,
|
||||
transportUrl: PropTypes.string,
|
||||
installed: PropTypes.bool,
|
||||
official: PropTypes.bool,
|
||||
cancel: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = AddonPrompt;
|
||||
3
src/routes/Addons/AddonPrompt/index.js
Normal file
3
src/routes/Addons/AddonPrompt/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
const AddonPrompt = require('./AddonPrompt');
|
||||
|
||||
module.exports = AddonPrompt;
|
||||
154
src/routes/Addons/AddonPrompt/styles.less
Normal file
154
src/routes/Addons/AddonPrompt/styles.less
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
.addon-prompt-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3rem 0;
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.close-button-container {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 1;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
|
||||
.addon-prompt-content {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
align-self: stretch;
|
||||
padding: 0 3rem;
|
||||
overflow-y: auto;
|
||||
|
||||
.title-container {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
word-break: break-all;
|
||||
|
||||
&.title-with-logo-container {
|
||||
&::first-line {
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin-right: 0.5rem;
|
||||
background-color: var(--color-surfacelight20);
|
||||
float: left;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.version-container {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.section-container {
|
||||
margin-top: 1rem;
|
||||
|
||||
.section-header {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
|
||||
&.transport-url-label {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&.disclaimer-label {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 2rem;
|
||||
padding: 0 3rem;
|
||||
|
||||
.button-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
max-height: 2.4em;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button, .uninstall-button {
|
||||
outline-color: var(--color-surfacedark);
|
||||
outline-style: solid;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
|
||||
.install-button {
|
||||
background-color: var(--color-signal5);
|
||||
|
||||
&:hover, &:focus {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color-surfacedarker);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,28 @@
|
|||
const React = require('react');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Modal } = require('stremio-router');
|
||||
const { Button, Dropdown, NavBar, TextInput } = require('stremio/common');
|
||||
const Addon = require('./Addon');
|
||||
const AddonPrompt = require('./AddonPrompt');
|
||||
const useAddons = require('./useAddons');
|
||||
const useSelectedAddon = require('./useSelectedAddon');
|
||||
const styles = require('./styles');
|
||||
|
||||
const Addons = ({ urlParams }) => {
|
||||
const Addons = ({ urlParams, queryParams }) => {
|
||||
const [query, setQuery] = React.useState('');
|
||||
const queryOnChange = React.useCallback((event) => {
|
||||
setQuery(event.currentTarget.value);
|
||||
}, []);
|
||||
const [addons, dropdowns] = useAddons(urlParams.category, urlParams.type);
|
||||
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
|
||||
const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.clearSelectedAddonPrevented) {
|
||||
clearSelectedAddon();
|
||||
}
|
||||
}, []);
|
||||
const addonPromptOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.clearSelectedAddonPrevented = true;
|
||||
}, []);
|
||||
return (
|
||||
<div className={styles['addons-container']}>
|
||||
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
|
||||
|
|
@ -39,6 +51,16 @@ const Addons = ({ urlParams }) => {
|
|||
<Addon {...addon} key={addon.id} className={styles['addon']} />
|
||||
))}
|
||||
</div>
|
||||
{
|
||||
selectedAddon !== null ?
|
||||
<Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
|
||||
<div className={styles['addon-prompt-container']} onClick={addonPromptOnClick}>
|
||||
<AddonPrompt {...selectedAddon} className={styles['addon-prompt']} cancel={clearSelectedAddon} />
|
||||
</div>
|
||||
</Modal>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Input } from 'stremio/common';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const MAX_DESCRIPTION_SYMBOLS = 200;
|
||||
|
||||
const renderName = (name) => {
|
||||
if (name.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['name']}>{name}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderVersion = (version) => {
|
||||
if (version.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['version']}>v. {version}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderType = (types) => {
|
||||
if (types.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['types']}>
|
||||
{types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderDescription = (description) => {
|
||||
if (description.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['description']}>{description.length > MAX_DESCRIPTION_SYMBOLS ? description.slice(0, MAX_DESCRIPTION_SYMBOLS) + '...' : description}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const InstallAddonDialog = (props) => {
|
||||
return (
|
||||
<div className={styles['install-addon-dialog']}>
|
||||
<Input className={styles['x-container']} type={'button'}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
|
||||
</Input>
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['install-label']}>Install Add-on</div>
|
||||
<div className={styles['basic-info']}>
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
<div className={styles['header-container']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
<div className={styles['notice']}>
|
||||
Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.
|
||||
</div>
|
||||
<div className={styles['buttons']}>
|
||||
<Input className={classnames(styles['button'], styles['cancel-button'])} type={'button'} onClick={props.onClose}>
|
||||
<div className={styles['label']}>Cancel</div>
|
||||
</Input>
|
||||
<Input className={classnames(styles['button'], styles['install-button'])} type={'button'} onClick={props.onInstallClicked} >
|
||||
<div className={styles['label']}>Install</div>
|
||||
</Input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
InstallAddonDialog.propTypes = {
|
||||
className: PropTypes.string,
|
||||
logo: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
version: PropTypes.string.isRequired,
|
||||
types: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onInstallClicked: PropTypes.func.isRequired
|
||||
};
|
||||
InstallAddonDialog.defaultProps = {
|
||||
logo: '',
|
||||
name: '',
|
||||
version: '',
|
||||
types: [],
|
||||
description: ''
|
||||
};
|
||||
|
||||
export default InstallAddonDialog;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import InstallAddonDialog from './InstallAddonDialog';
|
||||
|
||||
export default InstallAddonDialog;
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
.install-addon-dialog {
|
||||
--addon-dialog-width: 450px;
|
||||
--spacing: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.install-addon-dialog {
|
||||
padding: calc(var(--spacing) * 0.6);
|
||||
width: var(--addon-dialog-width);
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.x-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
|
||||
.icon {
|
||||
padding: 0.3em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: var(--color-surfacedark);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
fill: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.icon {
|
||||
background-color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: 0 var(--spacing) var(--spacing) var(--spacing);
|
||||
|
||||
.install-label {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.logo-container {
|
||||
margin-right: var(--spacing);
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
|
||||
.name {
|
||||
margin-right: var(--spacing);
|
||||
max-width: 10em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.version {
|
||||
flex: 1;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
min-height: 1.2em;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 0.5em 0;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
font-weight: 100;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&.cancel-button {
|
||||
margin-right: 3em;
|
||||
background-color: var(--color-surfacedark);
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
background-color: var(--color-signal5);
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: var(--color-signal560);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -114,4 +114,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addon-prompt-modal-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-background60);
|
||||
|
||||
.addon-prompt-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 50rem;
|
||||
height: 80%;
|
||||
|
||||
.addon-prompt {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
src/routes/Addons/useSelectedAddon.js
Normal file
30
src/routes/Addons/useSelectedAddon.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
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)
|
||||
.then((resp) => resp.json())
|
||||
.then((manifest) => setAddon({ ...manifest, transportUrl }));
|
||||
}, [transportUrl]);
|
||||
const clear = React.useCallback(() => {
|
||||
if (active) {
|
||||
const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
|
||||
const queryParams = new URLSearchParams(search);
|
||||
queryParams.delete('addon');
|
||||
window.location.replace(`#${pathname}?${queryParams.toString()}`);
|
||||
}
|
||||
}, [active]);
|
||||
return [addon, clear];
|
||||
};
|
||||
|
||||
module.exports = useSelectedAddon;
|
||||
Loading…
Reference in a new issue