mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-05-05 23:19:07 +00:00
addon prompt, share prompt and addons adapted to the new modal dialog
This commit is contained in:
svetlagasheva
parent
cdc6ca4049
commit
86c7b746e3
7 changed files with 311 additions and 610 deletions
|
|
@ -45,15 +45,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-content {
|
.modal-dialog-content {
|
||||||
margin-top: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
|
>:not(:first-child) {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-buttons {
|
.modal-dialog-buttons {
|
||||||
margin-top: 1rem;
|
margin: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
@ -94,6 +99,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 1rem;
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,55 +2,34 @@ const React = require('react');
|
||||||
const PropTypes = require('prop-types');
|
const PropTypes = require('prop-types');
|
||||||
const classnames = require('classnames');
|
const classnames = require('classnames');
|
||||||
const Icon = require('stremio-icons/dom');
|
const Icon = require('stremio-icons/dom');
|
||||||
const { useRouteFocused } = require('stremio-router');
|
|
||||||
const Button = require('stremio/common/Button');
|
const Button = require('stremio/common/Button');
|
||||||
const TextInput = require('stremio/common/TextInput');
|
const TextInput = require('stremio/common/TextInput');
|
||||||
const styles = require('./styles');
|
const styles = require('./styles');
|
||||||
|
|
||||||
const SharePrompt = ({ className, label, url, close, onClick }) => {
|
const SharePrompt = ({ className, url }) => {
|
||||||
const inputRef = React.useRef(null);
|
const inputRef = React.useRef(null);
|
||||||
const focusRoute = useRouteFocused();
|
|
||||||
const copyToClipboard = React.useCallback(() => {
|
const copyToClipboard = React.useCallback(() => {
|
||||||
inputRef.current.select();
|
inputRef.current.select();
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
}, []);
|
}, []);
|
||||||
React.useEffect(() => {
|
|
||||||
const onKeyUp = (event) => {
|
|
||||||
if (event.key === 'Escape' && typeof close === 'function') {
|
|
||||||
close();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (focusRoute) {
|
|
||||||
window.addEventListener('keyup', onKeyUp);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('keyup', onKeyUp);
|
|
||||||
};
|
|
||||||
}, [close, focusRoute]);
|
|
||||||
return (
|
return (
|
||||||
<div className={classnames(className, styles['share-prompt-container'])} onClick={onClick}>
|
<div className={classnames(className, styles['share-prompt-container'])}>
|
||||||
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={close}>
|
<div className={styles['buttons-container']}>
|
||||||
<Icon className={styles['icon']} icon={'ic_x'} />
|
<Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
|
||||||
</Button>
|
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||||
<div className={styles['share-prompt-content']}>
|
<div className={styles['label']}>FACEBOOK</div>
|
||||||
<div className={styles['share-prompt-label']}>{label}</div>
|
</Button>
|
||||||
<div className={styles['buttons-container']}>
|
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
|
||||||
<Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
|
<Icon className={styles['icon']} icon={'ic_twitter'} />
|
||||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
<div className={styles['label']}>TWITTER</div>
|
||||||
<div className={styles['label']}>FACEBOOK</div>
|
</Button>
|
||||||
</Button>
|
</div>
|
||||||
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
|
<div className={styles['url-container']}>
|
||||||
<Icon className={styles['icon']} icon={'ic_twitter'} />
|
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
|
||||||
<div className={styles['label']}>TWITTER</div>
|
<Button className={styles['copy-button']} onClick={copyToClipboard}>
|
||||||
</Button>
|
<Icon className={styles['icon']} icon={'ic_link'} />
|
||||||
</div>
|
<div className={styles['label']}>Copy</div>
|
||||||
<div className={styles['url-container']}>
|
</Button>
|
||||||
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
|
|
||||||
<Button className={styles['copy-button']} onClick={copyToClipboard}>
|
|
||||||
<Icon className={styles['icon']} icon={'ic_link'} />
|
|
||||||
<div className={styles['label']}>Copy</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -58,10 +37,7 @@ const SharePrompt = ({ className, label, url, close, onClick }) => {
|
||||||
|
|
||||||
SharePrompt.propTypes = {
|
SharePrompt.propTypes = {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
label: PropTypes.string.isRequired,
|
url: PropTypes.string.isRequired
|
||||||
url: PropTypes.string.isRequired,
|
|
||||||
close: PropTypes.func,
|
|
||||||
onClick: PropTypes.func
|
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = SharePrompt;
|
module.exports = SharePrompt;
|
||||||
|
|
|
||||||
|
|
@ -1,133 +1,107 @@
|
||||||
.share-prompt-container {
|
.share-prompt-container {
|
||||||
position: relative;
|
.buttons-container {
|
||||||
z-index: 0;
|
flex: none;
|
||||||
display: flex;
|
align-self: stretch;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
padding: 2.4rem 0;
|
flex-direction: row;
|
||||||
background-color: var(--color-surfacelighter);
|
|
||||||
|
|
||||||
.close-button-container {
|
.button-container {
|
||||||
position: absolute;
|
flex-grow: 0;
|
||||||
top: 0.4rem;
|
flex-shrink: 1;
|
||||||
right: 0.4rem;
|
flex-basis: 14rem;
|
||||||
z-index: 1;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0.4rem;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-surfacelight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
fill: var(--color-backgrounddarker);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-prompt-content {
|
|
||||||
padding: 0 2.4rem;
|
|
||||||
|
|
||||||
.share-prompt-label {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
color: var(--color-backgrounddarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-container {
|
|
||||||
flex: none;
|
|
||||||
align-self: stretch;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 1.4rem 0;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
|
||||||
.button-container {
|
.icon {
|
||||||
flex-grow: 0;
|
flex: none;
|
||||||
flex-shrink: 1;
|
width: 1.4rem;
|
||||||
flex-basis: 14rem;
|
height: 1.4rem;
|
||||||
display: flex;
|
margin-right: 0.6rem;
|
||||||
flex-direction: row;
|
fill: var(--color-surfacelighter);
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
flex: none;
|
|
||||||
width: 1.4rem;
|
|
||||||
height: 1.4rem;
|
|
||||||
margin-right: 0.6rem;
|
|
||||||
fill: var(--color-surfacelighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-surfacelighter);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.facebook-button {
|
.label {
|
||||||
background-color: var(--color-facebook);
|
|
||||||
}
|
|
||||||
|
|
||||||
.twitter-button {
|
|
||||||
background-color: var(--color-twitter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: thin solid var(--color-surface);
|
|
||||||
|
|
||||||
.url-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 12rem;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-surfacedark);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button {
|
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
flex-basis: auto;
|
flex-basis: auto;
|
||||||
display: flex;
|
font-size: 0.8rem;
|
||||||
flex-direction: row;
|
font-weight: 500;
|
||||||
align-items: center;
|
color: var(--color-surfacelighter);
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
padding: 0.6rem 1rem;
|
}
|
||||||
background-color: var(--color-surface);
|
|
||||||
|
|
||||||
.icon {
|
&:hover {
|
||||||
flex: none;
|
filter: brightness(1.2);
|
||||||
width: 1.4rem;
|
}
|
||||||
height: 1.4rem;
|
|
||||||
margin-right: 0.6rem;
|
|
||||||
fill: var(--color-surfacedarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
&:focus {
|
||||||
color: var(--color-surfacedarker);
|
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
|
||||||
}
|
outline-offset: calc(-2 * var(--focus-outline-size));
|
||||||
|
}
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:not(:last-child) {
|
||||||
filter: brightness(1.2);
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.facebook-button {
|
||||||
|
background-color: var(--color-facebook);
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitter-button {
|
||||||
|
background-color: var(--color-twitter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border: thin solid var(--color-surface);
|
||||||
|
|
||||||
|
.url-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 12rem;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--color-surfacedark);
|
||||||
|
text-align: center;
|
||||||
|
border-right: thin solid var(--color-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
background-color: var(--color-surface);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
flex: none;
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
fill: var(--color-surfacedarker);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: var(--color-surfacedarker);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
|
||||||
|
outline-offset: calc(-1.5 * var(--focus-outline-size));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,116 +1,86 @@
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const PropTypes = require('prop-types');
|
const PropTypes = require('prop-types');
|
||||||
const classnames = require('classnames');
|
const classnames = require('classnames');
|
||||||
const Icon = require('stremio-icons/dom');
|
|
||||||
const { useRouteFocused } = require('stremio-router');
|
|
||||||
const { Button } = require('stremio/common');
|
|
||||||
const styles = require('./styles');
|
const styles = require('./styles');
|
||||||
|
|
||||||
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick, toggle }) => {
|
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
|
||||||
const focusRoute = useRouteFocused();
|
|
||||||
React.useEffect(() => {
|
|
||||||
const onKeyUp = (event) => {
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
cancel();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (focusRoute) {
|
|
||||||
window.addEventListener('keyup', onKeyUp);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('keyup', onKeyUp);
|
|
||||||
};
|
|
||||||
}, [cancel, focusRoute]);
|
|
||||||
return (
|
return (
|
||||||
<div className={classnames(className, styles['addon-prompt-container'])} onClick={onClick}>
|
<div className={classnames(className, styles['addon-prompt-container'])}>
|
||||||
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
|
<div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
|
||||||
<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 ?
|
typeof logo === 'string' && logo.length > 0 ?
|
||||||
<div className={styles['section-container']}>
|
<div className={styles['logo-container']}>
|
||||||
<span className={styles['section-header']}>{description}</span>
|
<img className={styles['logo']} src={logo} alt={' '} />
|
||||||
</div>
|
</div>
|
||||||
:
|
:
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
|
{typeof name === 'string' && name.length > 0 ? name : id}
|
||||||
|
{' '}
|
||||||
{
|
{
|
||||||
typeof transportUrl === 'string' && transportUrl.length > 0 ?
|
typeof version === 'string' && version.length > 0 ?
|
||||||
<div className={styles['section-container']}>
|
<span className={styles['version-container']}>v.{version}</span>
|
||||||
<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
|
null
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles['buttons-container']}>
|
{
|
||||||
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={cancel}>
|
typeof description === 'string' && description.length > 0 ?
|
||||||
<div className={styles['label']}>Cancel</div>
|
<div className={styles['section-container']}>
|
||||||
</Button>
|
<span className={styles['section-header']}>{description}</span>
|
||||||
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'} onClick={() => { toggle(); cancel() }}>
|
</div>
|
||||||
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
|
:
|
||||||
</Button>
|
null
|
||||||
</div>
|
}
|
||||||
|
{
|
||||||
|
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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -127,11 +97,7 @@ AddonPrompt.propTypes = {
|
||||||
})),
|
})),
|
||||||
version: PropTypes.string,
|
version: PropTypes.string,
|
||||||
transportUrl: PropTypes.string,
|
transportUrl: PropTypes.string,
|
||||||
installed: PropTypes.bool,
|
official: PropTypes.bool
|
||||||
official: PropTypes.bool,
|
|
||||||
cancel: PropTypes.func,
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
toggle: PropTypes.func
|
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = AddonPrompt;
|
module.exports = AddonPrompt;
|
||||||
|
|
|
||||||
|
|
@ -1,153 +1,54 @@
|
||||||
.addon-prompt-container {
|
.addon-prompt-container {
|
||||||
position: relative;
|
.title-container {
|
||||||
z-index: 0;
|
font-size: 3rem;
|
||||||
display: flex;
|
font-weight: 300;
|
||||||
flex-direction: column;
|
word-break: break-all;
|
||||||
padding: 3rem 0;
|
|
||||||
background-color: var(--color-surfacelighter);
|
|
||||||
|
|
||||||
.close-button-container {
|
&.title-with-logo-container {
|
||||||
position: absolute;
|
&::first-line {
|
||||||
top: 0.5rem;
|
line-height: 5rem;
|
||||||
right: 0.5rem;
|
}
|
||||||
z-index: 1;
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-surfacelight);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.logo-container {
|
||||||
display: block;
|
width: 5rem;
|
||||||
width: 100%;
|
height: 5rem;
|
||||||
height: 100%;
|
margin-right: 0.5rem;
|
||||||
fill: var(--color-backgrounddarker);
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.addon-prompt-content {
|
.section-container {
|
||||||
flex-grow: 0;
|
margin-top: 1rem;
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
align-self: stretch;
|
|
||||||
padding: 0 3rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.title-container {
|
.section-header {
|
||||||
font-size: 3rem;
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
font-size: 1.2rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
&.title-with-logo-container {
|
&.transport-url-label {
|
||||||
&::first-line {
|
user-select: text;
|
||||||
line-height: 5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
&.disclaimer-label {
|
||||||
width: 5rem;
|
font-style: italic;
|
||||||
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,8 +1,6 @@
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const classnames = require('classnames');
|
|
||||||
const Icon = require('stremio-icons/dom');
|
const Icon = require('stremio-icons/dom');
|
||||||
const { Modal, useRouteFocused } = require('stremio-router');
|
const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
|
||||||
const { Button, Multiselect, NavBar, TextInput, SharePrompt } = require('stremio/common');
|
|
||||||
const Addon = require('./Addon');
|
const Addon = require('./Addon');
|
||||||
const AddonPrompt = require('./AddonPrompt');
|
const AddonPrompt = require('./AddonPrompt');
|
||||||
const useAddons = require('./useAddons');
|
const useAddons = require('./useAddons');
|
||||||
|
|
@ -11,7 +9,6 @@ const styles = require('./styles');
|
||||||
|
|
||||||
const Addons = ({ urlParams, queryParams }) => {
|
const Addons = ({ urlParams, queryParams }) => {
|
||||||
const inputRef = React.useRef(null);
|
const inputRef = React.useRef(null);
|
||||||
const focusRoute = useRouteFocused();
|
|
||||||
const [query, setQuery] = React.useState('');
|
const [query, setQuery] = React.useState('');
|
||||||
const queryOnChange = React.useCallback((event) => {
|
const queryOnChange = React.useCallback((event) => {
|
||||||
setQuery(event.currentTarget.value);
|
setQuery(event.currentTarget.value);
|
||||||
|
|
@ -29,32 +26,13 @@ const Addons = ({ urlParams, queryParams }) => {
|
||||||
setAddAddonModalOpened(false);
|
setAddAddonModalOpened(false);
|
||||||
}
|
}
|
||||||
}, [setSelectedAddon]);
|
}, [setSelectedAddon]);
|
||||||
React.useEffect(() => {
|
|
||||||
const onKeyUp = (event) => {
|
|
||||||
if (event.key === 'Escape' && typeof close === 'function') {
|
|
||||||
setAddAddonModalOpened(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (focusRoute) {
|
|
||||||
window.addEventListener('keyup', onKeyUp);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('keyup', onKeyUp);
|
|
||||||
};
|
|
||||||
}, [close, focusRoute]);
|
|
||||||
const promptModalBackgroundOnClick = React.useCallback((event) => {
|
|
||||||
if (!event.nativeEvent.clearSelectedAddonPrevented) {
|
|
||||||
clearSelectedAddon();
|
|
||||||
setAddAddonModalOpened(false);
|
|
||||||
setSharedAddon(null);
|
|
||||||
}
|
|
||||||
}, [clearSelectedAddon]);
|
|
||||||
const promptOnClick = React.useCallback((event) => {
|
|
||||||
event.nativeEvent.clearSelectedAddonPrevented = true;
|
|
||||||
}, []);
|
|
||||||
const setInstalledAddon = React.useCallback((currentAddon) => {
|
const setInstalledAddon = React.useCallback((currentAddon) => {
|
||||||
return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
|
return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
|
||||||
}, [installedAddons]);
|
}, [installedAddons]);
|
||||||
|
const toggleAddon = React.useCallback(() => {
|
||||||
|
setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
|
||||||
|
clearSelectedAddon();
|
||||||
|
});
|
||||||
return (
|
return (
|
||||||
<div className={styles['addons-container']}>
|
<div className={styles['addons-container']}>
|
||||||
<NavBar className={styles['nav-bar']} backButton={true} title={'Add-ons'} />
|
<NavBar className={styles['nav-bar']} backButton={true} title={'Add-ons'} />
|
||||||
|
|
@ -108,62 +86,77 @@ const Addons = ({ urlParams, queryParams }) => {
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
addAddonModalOpened ?
|
addAddonModalOpened ?
|
||||||
<Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
|
<ModalDialog
|
||||||
<div className={classnames(styles['prompt-container'], styles['add-addon-prompt-container'])}>
|
className={styles['add-addon-prompt-container']}
|
||||||
<div className={classnames(styles['prompt'], styles['add-addon-prompt'])} onClick={promptOnClick}>
|
title={'Add add-on'}
|
||||||
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={() => setAddAddonModalOpened(false)}>
|
buttons={[
|
||||||
<Icon className={styles['icon']} icon={'ic_x'} />
|
{
|
||||||
</Button>
|
label: 'Cancel',
|
||||||
<div className={styles['add-addon-prompt-content']}>
|
className: styles['cancel-button'],
|
||||||
<div className={styles['add-addon-prompt-label']}>Add add-on</div>
|
props: {
|
||||||
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
|
title: 'Cancel',
|
||||||
<div className={styles['buttons-container']}>
|
onClick: () => setAddAddonModalOpened(false)
|
||||||
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={() => setAddAddonModalOpened(false)}>
|
}
|
||||||
<div className={styles['label']}>Cancel</div>
|
},
|
||||||
</Button>
|
{
|
||||||
<Button className={classnames(styles['button-container'], styles['add-button'])} title={'Add'} onClick={onAddButtonClicked}>
|
label: 'Add',
|
||||||
<div className={styles['label']}>Add</div>
|
props: {
|
||||||
</Button>
|
title: 'Add',
|
||||||
</div>
|
onClick: onAddButtonClicked
|
||||||
</div>
|
}
|
||||||
</div>
|
}
|
||||||
</div>
|
]}
|
||||||
</Modal>
|
onCloseRequest={() => setAddAddonModalOpened(false)}
|
||||||
|
>
|
||||||
|
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
|
||||||
|
</ModalDialog>
|
||||||
:
|
:
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
selectedAddon !== null ?
|
selectedAddon !== null ?
|
||||||
<Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
|
<ModalDialog
|
||||||
<div className={classnames(styles['prompt-container'], styles['addon-prompt-container'])}>
|
className={styles['addon-prompt-container']}
|
||||||
<AddonPrompt
|
buttons={[
|
||||||
{...selectedAddon.manifest}
|
{
|
||||||
transportUrl={selectedAddon.transportUrl}
|
label: 'Cancel',
|
||||||
installed={setInstalledAddon(selectedAddon)}
|
className: styles['cancel-button'],
|
||||||
official={selectedAddon.flags.official}
|
props: {
|
||||||
className={styles['prompt']}
|
title: 'Cancel',
|
||||||
cancel={clearSelectedAddon}
|
onClick: clearSelectedAddon
|
||||||
onClick={promptOnClick}
|
}
|
||||||
toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)}
|
},
|
||||||
/>
|
{
|
||||||
</div>
|
label: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
|
||||||
</Modal>
|
props: {
|
||||||
|
title: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
|
||||||
|
onClick: toggleAddon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
onCloseRequest={clearSelectedAddon}
|
||||||
|
>
|
||||||
|
<AddonPrompt
|
||||||
|
{...selectedAddon.manifest}
|
||||||
|
transportUrl={selectedAddon.transportUrl}
|
||||||
|
installed={setInstalledAddon(selectedAddon)}
|
||||||
|
official={selectedAddon.flags.official}
|
||||||
|
className={styles['prompt']}
|
||||||
|
cancel={clearSelectedAddon}
|
||||||
|
/>
|
||||||
|
</ModalDialog>
|
||||||
:
|
:
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
sharedAddon !== null ?
|
sharedAddon !== null ?
|
||||||
<Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
|
<ModalDialog className={styles['share-prompt-container']} title={'Share add-on'} onCloseRequest={() => setSharedAddon(null)}>
|
||||||
<div className={classnames(styles['prompt-container'], styles['share-prompt-container'])}>
|
<SharePrompt
|
||||||
<SharePrompt
|
url={sharedAddon.transportUrl}
|
||||||
label={'Share add-on'}
|
className={styles['prompt']}
|
||||||
url={sharedAddon.transportUrl}
|
close={() => setSharedAddon(null)}
|
||||||
className={styles['prompt']}
|
/>
|
||||||
close={() => setSharedAddon(null)}
|
</ModalDialog>
|
||||||
onClick={promptOnClick}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
:
|
:
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -123,145 +123,31 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prompt-modal-container {
|
.add-addon-prompt-container {
|
||||||
display: flex;
|
width: 30rem;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--color-background60);
|
|
||||||
|
|
||||||
.prompt-container {
|
.url-content {
|
||||||
flex: none;
|
flex: 1;
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
padding: 0.5rem;
|
||||||
justify-content: center;
|
font-size: 0.9rem;
|
||||||
height: 80%;
|
color: var(--color-surfacedark);
|
||||||
|
border: thin solid var(--color-surface);
|
||||||
.prompt {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-addon-prompt-container {
|
.cancel-button {
|
||||||
width: 30rem;
|
background-color: var(--color-surfacedark);
|
||||||
|
|
||||||
.add-addon-prompt {
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 2.4rem 0;
|
|
||||||
background-color: var(--color-surfacelighter);
|
|
||||||
|
|
||||||
.close-button-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.4rem;
|
|
||||||
right: 0.4rem;
|
|
||||||
z-index: 1;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0.4rem;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-surfacelight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
fill: var(--color-backgrounddarker);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-addon-prompt-content {
|
|
||||||
padding: 0 2.4rem;
|
|
||||||
|
|
||||||
.add-addon-prompt-label {
|
|
||||||
margin-bottom: 1.4rem;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
color: var(--color-backgrounddarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-content {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-surfacedark);
|
|
||||||
border: thin solid var(--color-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-container {
|
|
||||||
flex: none;
|
|
||||||
align-self: stretch;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-top: 2rem;
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 3rem;
|
|
||||||
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.2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-button {
|
|
||||||
outline-color: var(--color-surfacedark);
|
|
||||||
outline-style: solid;
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
background-color: var(--color-surfacelight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: var(--color-backgrounddarker);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-button {
|
|
||||||
background-color: var(--color-signal5);
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline-color: var(--color-surfacedarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: var(--color-surfacelighter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.addon-prompt-container {
|
|
||||||
width: 50rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-prompt-container {
|
|
||||||
width: 30rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.addon-prompt-container {
|
||||||
|
width: 50rem;
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
background-color: var(--color-surfacedark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-prompt-container {
|
||||||
|
width: 30rem;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue