mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
Merge branch 'master' of github.com:Stremio/stremio-web into detail-page
This commit is contained in:
NikolaBorislavovHristov
commit
104bac91ec
27 changed files with 951 additions and 757 deletions
|
|
@ -1,41 +1,19 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const AColorPicker = require('a-color-picker');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Modal } = require('stremio-router');
|
||||
const Button = require('stremio/common/Button');
|
||||
const useBinaryState = require('stremio/common/useBinaryState');
|
||||
const ModalDialog = require('stremio/common/ModalDialog');
|
||||
const useDataset = require('stremio/common/useDataset');
|
||||
const ColorPicker = require('./ColorPicker');
|
||||
const styles = require('./styles');
|
||||
|
||||
const COLOR_FORMAT = 'hexcss4';
|
||||
|
||||
const ColorInput = ({ className, value, onChange, ...props }) => {
|
||||
value = AColorPicker.parseColor(value, COLOR_FORMAT);
|
||||
const dataset = useDataset(props);
|
||||
const [modalOpen, openModal, closeModal] = useBinaryState(false);
|
||||
const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false);
|
||||
const [tempValue, setTempValue] = React.useState(value);
|
||||
const pickerLabelOnClick = React.useCallback((event) => {
|
||||
if (typeof props.onClick === 'function') {
|
||||
props.onClick(event);
|
||||
}
|
||||
|
||||
if (!event.nativeEvent.openModalPrevented) {
|
||||
openModal();
|
||||
}
|
||||
}, [props.onClick]);
|
||||
const modalContainerOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.openModalPrevented = true;
|
||||
}, []);
|
||||
const modalContainerOnMouseDown = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.closeModalPrevented) {
|
||||
closeModal();
|
||||
}
|
||||
}, []);
|
||||
const modalContentOnMouseDown = React.useCallback((event) => {
|
||||
event.nativeEvent.closeModalPrevented = true;
|
||||
}, []);
|
||||
const colorPickerOnInput = React.useCallback((event) => {
|
||||
setTempValue(event.value);
|
||||
}, []);
|
||||
|
|
@ -49,34 +27,23 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
|
|||
nativeEvent: event.nativeEvent
|
||||
});
|
||||
}
|
||||
|
||||
closeModal();
|
||||
setModalClosed();
|
||||
}, [onChange, tempValue, dataset]);
|
||||
React.useEffect(() => {
|
||||
setTempValue(value);
|
||||
}, [value, modalOpen]);
|
||||
return (
|
||||
<Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={pickerLabelOnClick}>
|
||||
<React.Fragment>
|
||||
<Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={setModalOpen} />
|
||||
{
|
||||
modalOpen ?
|
||||
<Modal className={styles['color-input-modal-container']} onMouseDown={modalContainerOnMouseDown} onClick={modalContainerOnClick}>
|
||||
<div className={styles['color-input-container']} onMouseDown={modalContentOnMouseDown}>
|
||||
<div className={styles['header-container']}>
|
||||
<div className={styles['title']}>Choose a color:</div>
|
||||
<Button className={styles['close-button-container']} title={'Close'} onClick={closeModal}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} />
|
||||
</Button>
|
||||
</div>
|
||||
<ColorPicker className={styles['color-picker']} value={tempValue} onInput={colorPickerOnInput} />
|
||||
<Button className={styles['submit-button-container']} title={'Submit'} onClick={submitButtonOnClick}>
|
||||
<div className={styles['label']}>Select</div>
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick, 'data-autofocus': true } }]} onCloseRequest={setModalClosed}>
|
||||
<ColorPicker value={tempValue} onInput={colorPickerOnInput} />
|
||||
</ModalDialog>
|
||||
:
|
||||
null
|
||||
}
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
.color-input-modal-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
background-color: var(--color-backgrounddarker40);
|
||||
|
||||
.color-input-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 25rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.header-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.2rem;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.close-button-container {
|
||||
flex: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0.25rem;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedark20);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color-surfacedarker);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--color-surfacedarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
flex: none;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.submit-button-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-signal5);
|
||||
|
||||
&:hover, &:focus {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color-surfacedarker);
|
||||
}
|
||||
|
||||
.label {
|
||||
max-height: 2.4em;
|
||||
text-align: center;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,38 +7,48 @@ const { Modal } = require('stremio-router');
|
|||
const styles = require('./styles');
|
||||
|
||||
const ModalDialog = ({ className, children, title, buttons, onCloseRequest }) => {
|
||||
const dispatchCloseRequestEvent = React.useCallback(event => {
|
||||
if (typeof onCloseRequest === 'function') {
|
||||
onCloseRequest({
|
||||
type: 'closeRequest',
|
||||
reactEvent: event,
|
||||
nativeEvent: event.nativeEvent
|
||||
});
|
||||
}
|
||||
}, [onCloseRequest]);
|
||||
React.useEffect(() => {
|
||||
const onKeyDown = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
dispatchCloseRequestEvent(event);
|
||||
onCloseRequest({
|
||||
type: 'close',
|
||||
nativeEvent: event
|
||||
});
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [dispatchCloseRequestEvent]);
|
||||
const onModalContainerMouseDown = React.useCallback(event => {
|
||||
}, [onCloseRequest]);
|
||||
const closeButtonOnClick = React.useCallback((event) => {
|
||||
onCloseRequest({
|
||||
type: 'close',
|
||||
reactEvent: event,
|
||||
nativeEvent: event.nativeEvent
|
||||
});
|
||||
}, [onCloseRequest]);
|
||||
const onModalContainerMouseDown = React.useCallback((event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
dispatchCloseRequestEvent(event);
|
||||
onCloseRequest({
|
||||
type: 'close',
|
||||
reactEvent: event,
|
||||
nativeEvent: event.nativeEvent
|
||||
});
|
||||
}
|
||||
}, [dispatchCloseRequestEvent]);
|
||||
}, [onCloseRequest]);
|
||||
return (
|
||||
<Modal className={styles['modal-container']} onMouseDown={onModalContainerMouseDown}>
|
||||
<div className={classnames(className, styles['modal-dialog-container'])}>
|
||||
<Button className={styles['close-button-container']} title={'Close'} onClick={dispatchCloseRequestEvent}>
|
||||
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} />
|
||||
</Button>
|
||||
<h1>{title}</h1>
|
||||
{
|
||||
typeof title === 'string' && title.length > 0 ?
|
||||
<h1>{title}</h1>
|
||||
:
|
||||
null
|
||||
}
|
||||
<div className={styles['modal-dialog-content']}>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,15 +45,20 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.modal-dialog-content {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
>:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-buttons {
|
||||
margin-top: 1rem;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -94,6 +99,6 @@
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,12 +99,16 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
|
|||
<div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
|
||||
{
|
||||
options.length > 0 ?
|
||||
options.map(({ label, value }) => (
|
||||
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
|
||||
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
|
||||
<Icon className={styles['icon']} icon={'ic_check'} />
|
||||
</Button>
|
||||
))
|
||||
options.map(({ label, value }) => {
|
||||
const isSelected = selected.includes(value);
|
||||
const title = typeof label === 'string' ? label : value;
|
||||
return (
|
||||
<Button key={value} className={classnames(styles['option-container'], { 'selected': isSelected })} title={title} data-value={value} data-autofocus={isSelected ? true : null} onClick={optionOnClick}>
|
||||
<div className={styles['label']}>{title}</div>
|
||||
<Icon className={styles['icon']} icon={'ic_check'} />
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
:
|
||||
<div className={styles['no-options-container']}>
|
||||
<div className={styles['label']}>No options available</div>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@ const React = require('react');
|
|||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { useServices } = require('stremio/services');
|
||||
const Button = require('stremio/common/Button');
|
||||
const Popup = require('stremio/common/Popup');
|
||||
const useBinaryState = require('stremio/common/useBinaryState');
|
||||
const useFullscreen = require('stremio/common/useFullscreen');
|
||||
const useUser = require('./useUser');
|
||||
const useUser = require('stremio/common/useUser');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavMenu = ({ className }) => {
|
||||
const { core } = useServices();
|
||||
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
const user = useUser();
|
||||
|
|
@ -21,6 +23,14 @@ const NavMenu = ({ className }) => {
|
|||
const popupMenuOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.togglePopupPrevented = true;
|
||||
}, []);
|
||||
const logoutButtonOnClick = React.useCallback(() => {
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
args: {
|
||||
userOp: 'Logout'
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<Popup
|
||||
open={menuOpen}
|
||||
|
|
@ -38,17 +48,17 @@ const NavMenu = ({ className }) => {
|
|||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: user.anonymous ?
|
||||
backgroundImage: !user ?
|
||||
`url('/images/anonymous.png')`
|
||||
:
|
||||
`url('${user.avatar}'), url('/images/default_avatar.png')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['email-label']}>{user.anonymous ? 'Anonymous user' : user.email}</div>
|
||||
<div className={styles['email-label']}>{!user ? 'Anonymous user' : user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={user.anonymous ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={user.logout}>
|
||||
<div className={styles['logout-label']}>{user.anonymous ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
<Button className={styles['logout-button-container']} title={!user ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['logout-label']}>{!user ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
|
|
|
|||
|
|
@ -2,55 +2,34 @@ 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/Button');
|
||||
const TextInput = require('stremio/common/TextInput');
|
||||
const styles = require('./styles');
|
||||
|
||||
const SharePrompt = ({ className, label, url, close }) => {
|
||||
const SharePrompt = ({ className, url }) => {
|
||||
const inputRef = React.useRef(null);
|
||||
const focusable = useFocusable();
|
||||
const copyToClipboard = React.useCallback(() => {
|
||||
inputRef.current.select();
|
||||
document.execCommand('copy');
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
const onKeyUp = (event) => {
|
||||
if (event.key === 'Escape' && typeof close === 'function') {
|
||||
close();
|
||||
}
|
||||
};
|
||||
if (focusable) {
|
||||
window.addEventListener('keyup', onKeyUp);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('keyup', onKeyUp);
|
||||
};
|
||||
}, [close, focusable]);
|
||||
return (
|
||||
<div className={classnames(className, styles['share-prompt-container'])}>
|
||||
<Button className={styles['close-button-container']}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} onClick={close} />
|
||||
</Button>
|
||||
<div className={styles['share-prompt-content']}>
|
||||
<div className={styles['share-prompt-label']}>{label}</div>
|
||||
<div className={styles['buttons-container']}>
|
||||
<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_facebook'} />
|
||||
<div className={styles['label']}>FACEBOOK</div>
|
||||
</Button>
|
||||
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_twitter'} />
|
||||
<div className={styles['label']}>TWITTER</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['url-container']}>
|
||||
<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 className={styles['buttons-container']}>
|
||||
<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_facebook'} />
|
||||
<div className={styles['label']}>FACEBOOK</div>
|
||||
</Button>
|
||||
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_twitter'} />
|
||||
<div className={styles['label']}>TWITTER</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['url-container']}>
|
||||
<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>
|
||||
);
|
||||
|
|
@ -58,9 +37,7 @@ const SharePrompt = ({ className, label, url, close }) => {
|
|||
|
||||
SharePrompt.propTypes = {
|
||||
className: PropTypes.string,
|
||||
label: PropTypes.string.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
close: PropTypes.func
|
||||
url: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
module.exports = SharePrompt;
|
||||
|
|
|
|||
|
|
@ -1,133 +1,107 @@
|
|||
.share-prompt-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2.4rem 0;
|
||||
background-color: var(--color-surfacelighter);
|
||||
.buttons-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.button-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 14rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 1.4rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1rem;
|
||||
|
||||
.button-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 14rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
}
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: 0.6rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
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 {
|
||||
.label {
|
||||
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);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-surfacelighter);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: 0.6rem;
|
||||
fill: var(--color-surfacedarker);
|
||||
}
|
||||
&:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacedarker);
|
||||
}
|
||||
&:focus {
|
||||
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
|
||||
outline-offset: calc(-2 * var(--focus-outline-size));
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const routesRegexp = {
|
|||
urlParamsNames: ['type', 'id', 'videoId']
|
||||
},
|
||||
addons: {
|
||||
regexp: /^\/addons(?:\/([^\/]*?))?(?:\/([^\/]*?))?\/?$/i,
|
||||
regexp: /^\/addons(?:\/([^\/]*?))?(?:\/([^\/]*?))?\/?$/i, // TODO both are required or none
|
||||
urlParamsNames: ['category', 'type']
|
||||
},
|
||||
settings: {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,18 @@ const { useServices } = require('stremio/services');
|
|||
|
||||
const useUser = () => {
|
||||
const { core } = useServices();
|
||||
const [user, setUser] = React.useState(state.ctx.auth ? state.ctx.auth.user : null);
|
||||
const [user, setUser] = React.useState(() => {
|
||||
const state = core.getState();
|
||||
return state.ctx.content.auth ? state.ctx.content.auth.user : null;
|
||||
});
|
||||
React.useEffect(() => {
|
||||
const onNewModel = () => {
|
||||
setUser(state.ctx.auth ? state.ctx.auth.user : null);
|
||||
const onNewState = () => {
|
||||
const state = core.getState();
|
||||
setUser(state.ctx.content.auth ? state.ctx.content.auth.user : null);
|
||||
};
|
||||
core.on('NewModel', onNewModel);
|
||||
core.on('NewModel', onNewState);
|
||||
return () => {
|
||||
core.off('NewModel', onNewModel);
|
||||
core.off('NewModel', onNewState);
|
||||
};
|
||||
}, []);
|
||||
return user;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,17 @@
|
|||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.fbAsyncInit = function() {
|
||||
FB.init({
|
||||
appId : '1537119779906825',
|
||||
autoLogAppEvents : false,
|
||||
xfbml : false,
|
||||
version : 'v2.5'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
|
||||
<script type="text/javascript">
|
||||
<%= compilation.assets['main.js'].source() %>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
|
|||
const { Button } = require('stremio/common');
|
||||
const styles = require('./styles');
|
||||
|
||||
const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, toggle }) => {
|
||||
const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, toggle, onShareButtonClicked }) => {
|
||||
const onKeyUp = React.useCallback((event) => {
|
||||
if (event.key === 'Enter' && typeof toggle === 'function') {
|
||||
toggle(event);
|
||||
|
|
@ -55,7 +55,7 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
|
|||
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} onClick={toggle}>
|
||||
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
|
||||
</Button>
|
||||
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1}>
|
||||
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<div className={styles['label']}>Share addon</div>
|
||||
</Button>
|
||||
|
|
@ -74,7 +74,8 @@ Addon.propTypes = {
|
|||
version: PropTypes.string,
|
||||
transportUrl: PropTypes.string,
|
||||
installed: PropTypes.bool,
|
||||
toggle: PropTypes.func
|
||||
toggle: PropTypes.func,
|
||||
onShareButtonClicked: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = Addon;
|
||||
|
|
|
|||
|
|
@ -1,116 +1,86 @@
|
|||
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]);
|
||||
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
|
||||
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>
|
||||
<div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
|
||||
{
|
||||
typeof description === 'string' && description.length > 0 ?
|
||||
<div className={styles['section-container']}>
|
||||
<span className={styles['section-header']}>{description}</span>
|
||||
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 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>
|
||||
typeof version === 'string' && version.length > 0 ?
|
||||
<span className={styles['version-container']}>v.{version}</span>
|
||||
:
|
||||
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>
|
||||
{
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
@ -127,9 +97,7 @@ AddonPrompt.propTypes = {
|
|||
})),
|
||||
version: PropTypes.string,
|
||||
transportUrl: PropTypes.string,
|
||||
installed: PropTypes.bool,
|
||||
official: PropTypes.bool,
|
||||
cancel: PropTypes.func
|
||||
official: PropTypes.bool
|
||||
};
|
||||
|
||||
module.exports = AddonPrompt;
|
||||
|
|
|
|||
|
|
@ -1,153 +1,54 @@
|
|||
.addon-prompt-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3rem 0;
|
||||
background-color: var(--color-surfacelighter);
|
||||
.title-container {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
word-break: break-all;
|
||||
|
||||
.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);
|
||||
&.title-with-logo-container {
|
||||
&::first-line {
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--color-backgrounddarker);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-prompt-content {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
align-self: stretch;
|
||||
padding: 0 3rem;
|
||||
overflow-y: auto;
|
||||
.section-container {
|
||||
margin-top: 1rem;
|
||||
|
||||
.title-container {
|
||||
font-size: 3rem;
|
||||
.section-header {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
word-break: break-all;
|
||||
|
||||
&.title-with-logo-container {
|
||||
&::first-line {
|
||||
line-height: 5rem;
|
||||
}
|
||||
&.transport-url-label {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.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);
|
||||
&.disclaimer-label {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
const React = require('react');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Modal } = require('stremio-router');
|
||||
const { Button, Dropdown, NavBar, TextInput } = require('stremio/common');
|
||||
const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
|
||||
const Addon = require('./Addon');
|
||||
const AddonPrompt = require('./AddonPrompt');
|
||||
const useAddons = require('./useAddons');
|
||||
|
|
@ -9,31 +8,42 @@ const useSelectedAddon = require('./useSelectedAddon');
|
|||
const styles = require('./styles');
|
||||
|
||||
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] = useAddons(urlParams.category, urlParams.type);
|
||||
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 addonPromptModalBackgroundOnClick = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.clearSelectedAddonPrevented) {
|
||||
clearSelectedAddon();
|
||||
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 addonPromptOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.clearSelectedAddonPrevented = true;
|
||||
}, []);
|
||||
}, [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]);
|
||||
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'}>
|
||||
<Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}>
|
||||
<Icon className={styles['icon']} icon={'ic_plus'} />
|
||||
<div className={styles['add-button-label']}>Add addon</div>
|
||||
</Button>
|
||||
{dropdowns.map((dropdown) => (
|
||||
<Dropdown {...dropdown} key={dropdown.name} className={styles['dropdown']} />
|
||||
{dropdowns.map((dropdown, index) => (
|
||||
<Multiselect {...dropdown} key={index} className={styles['dropdown']} />
|
||||
))}
|
||||
<label className={styles['search-bar-container']}>
|
||||
<Icon className={styles['icon']} icon={'ic_search'} />
|
||||
|
|
@ -46,21 +56,107 @@ const Addons = ({ urlParams, queryParams }) => {
|
|||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className={styles['addons-list-container']} >
|
||||
<div className={styles['addons-list-container']}>
|
||||
{
|
||||
addons.filter(({ name }) => query.length === 0 || (typeof name === 'string' && name.includes(query)))
|
||||
.map((addon) => (
|
||||
<Addon {...addon} key={addon.id} className={styles['addon']} />
|
||||
))
|
||||
error !== null ?
|
||||
<div className={styles['message-container']}>
|
||||
{error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
|
||||
</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)}
|
||||
/>
|
||||
))
|
||||
:
|
||||
<div className={styles['message-container']}>
|
||||
Loading
|
||||
</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 ?
|
||||
<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>
|
||||
<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}
|
||||
className={styles['prompt']}
|
||||
cancel={clearSelectedAddon}
|
||||
/>
|
||||
</ModalDialog>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
sharedAddon !== null ?
|
||||
<ModalDialog className={styles['share-prompt-container']} title={'Share addon'} onCloseRequest={() => setSharedAddon(null)}>
|
||||
<SharePrompt
|
||||
url={sharedAddon.transportUrl}
|
||||
className={styles['prompt']}
|
||||
close={() => setSharedAddon(null)}
|
||||
/>
|
||||
</ModalDialog>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2rem;
|
||||
overflow: visible;
|
||||
|
||||
.add-button-container {
|
||||
flex: none;
|
||||
|
|
@ -112,29 +113,41 @@
|
|||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
padding: 0 2rem;
|
||||
font-size: 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addon-prompt-modal-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-background60);
|
||||
.add-addon-prompt-container {
|
||||
width: 30rem;
|
||||
|
||||
.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;
|
||||
}
|
||||
.url-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-surfacedark);
|
||||
border: thin solid var(--color-surface);
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background-color: var(--color-surfacedark);
|
||||
}
|
||||
}
|
||||
|
||||
.addon-prompt-container {
|
||||
width: 50rem;
|
||||
|
||||
.cancel-button {
|
||||
background-color: var(--color-surfacedark);
|
||||
}
|
||||
}
|
||||
|
||||
.share-prompt-container {
|
||||
width: 30rem;
|
||||
}
|
||||
|
|
@ -1,72 +1,129 @@
|
|||
const React = require('react');
|
||||
const { useServices } = require('stremio/services');
|
||||
|
||||
const CATEGORIES = ['official', 'community', 'my'];
|
||||
const DEFAULT_CATEGORY = 'community';
|
||||
const DEFAULT_TYPE = 'all';
|
||||
const DEFAULT_TYPE = 'movie';
|
||||
const DEFAULT_CATEGORY = 'thirdparty';
|
||||
|
||||
const useAddons = (category, type) => {
|
||||
category = CATEGORIES.includes(category) ? category : DEFAULT_CATEGORY;
|
||||
type = typeof type === 'string' && type.length > 0 ? type : DEFAULT_TYPE;
|
||||
const addons = React.useMemo(() => {
|
||||
return [
|
||||
{
|
||||
id: 'com.linvo.cinemeta',
|
||||
name: 'Cinemeta',
|
||||
description: 'The official add-on for movie and series catalogs',
|
||||
types: ['movie', 'series'],
|
||||
version: '2.12.1',
|
||||
transportUrl: 'https://v3-cinemeta.strem.io/manifest.json',
|
||||
installed: true,
|
||||
official: true
|
||||
},
|
||||
{
|
||||
id: 'com.linvo.cinemeta2',
|
||||
name: 'Cinemeta2',
|
||||
logo: '/images/intro_background.jpg',
|
||||
description: 'The official add-on for movie and series catalogs',
|
||||
types: ['movie', 'series'],
|
||||
version: '2.12.2',
|
||||
transportUrl: 'https://v2-cinemeta.strem.io/manifest.json',
|
||||
installed: false,
|
||||
official: false
|
||||
const useAddons = (urlParams, queryParams) => {
|
||||
const { core } = useServices();
|
||||
const [addons, setAddons] = React.useState([[], [], [], [], null]);
|
||||
const installAddon = React.useCallback(descriptor => {
|
||||
core.dispatch({
|
||||
action: 'AddonOp',
|
||||
args: {
|
||||
addonOp: 'Install',
|
||||
args: descriptor
|
||||
}
|
||||
];
|
||||
});
|
||||
}, []);
|
||||
const onSelect = React.useCallback((event) => {
|
||||
const { name, value } = event.currentTarget.dataset;
|
||||
if (name === 'category') {
|
||||
const nextCategory = CATEGORIES.includes(value) ? value : '';
|
||||
window.location.replace(`#/addons/${nextCategory}/${type}`);
|
||||
} else if (name === 'type') {
|
||||
const nextType = typeof value === 'string' ? value : '';
|
||||
window.location.replace(`#/addons/${category}/${nextType}`);
|
||||
}
|
||||
}, [category, type]);
|
||||
const categoryDropdown = React.useMemo(() => {
|
||||
const selected = CATEGORIES.includes(category) ? [category] : [];
|
||||
const options = CATEGORIES
|
||||
.map((category) => ({ label: category, value: category }));
|
||||
return {
|
||||
name: 'category',
|
||||
selected,
|
||||
options,
|
||||
onSelect
|
||||
const uninstallAddon = React.useCallback(descriptor => {
|
||||
core.dispatch({
|
||||
action: 'AddonOp',
|
||||
args: {
|
||||
addonOp: 'Remove',
|
||||
args: {
|
||||
transport_url: descriptor.transportUrl
|
||||
}
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
const type = typeof urlParams.type === 'string' && urlParams.type.length > 0 ? urlParams.type : DEFAULT_TYPE;
|
||||
const category = typeof urlParams.category === 'string' && urlParams.category.length > 0 ? urlParams.category : DEFAULT_CATEGORY;
|
||||
const onNewState = () => {
|
||||
const state = core.getState();
|
||||
[...new Set(
|
||||
['all'].concat(...state.ctx.content.addons.map(addon => addon.manifest.types))
|
||||
)]
|
||||
.map((type) => (
|
||||
{
|
||||
is_selected: urlParams.category === 'my' && urlParams.type === type,
|
||||
name: 'my',
|
||||
load: {
|
||||
base: 'https://v3-cinemeta.strem.io/manifest.json',
|
||||
path: {
|
||||
resource: 'addon_catalog',
|
||||
type_name: type,
|
||||
id: 'my',
|
||||
extra: []
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
.forEach(addon => state.addons.catalogs.push(addon));
|
||||
const selectAddon = (transportUrl) => {
|
||||
window.location = `#/addons/${category}/${type}?addon=${transportUrl}`;
|
||||
};
|
||||
const selectInputs = [
|
||||
{
|
||||
selected: state.addons.catalogs
|
||||
.filter(({ is_selected }) => is_selected)
|
||||
.map(({ load }) => load.path.id),
|
||||
options: state.addons.catalogs
|
||||
.filter((catalog, index, catalogs) => {
|
||||
return catalogs.map(ctg => ctg.name).indexOf(catalog.name) === index;
|
||||
})
|
||||
.map(({ name, load }) => ({
|
||||
value: load.path.id,
|
||||
label: name
|
||||
})),
|
||||
onSelect: (event) => {
|
||||
const load = state.addons.catalogs.find(({ load: { path: { id } } }) => {
|
||||
return id === event.value;
|
||||
}).load;
|
||||
window.location = `#/addons/${encodeURIComponent(load.path.id)}/${encodeURIComponent(load.path.type_name)}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
selected: state.addons.catalogs
|
||||
.filter(({ is_selected }) => is_selected)
|
||||
.map(({ load }) => JSON.stringify(load)),
|
||||
options: state.addons.catalogs
|
||||
.filter(({ load: { path: { id } } }) => {
|
||||
return id === category;
|
||||
})
|
||||
.map(({ load }) => ({
|
||||
value: JSON.stringify(load),
|
||||
label: load.path.type_name
|
||||
})),
|
||||
onSelect: (event) => {
|
||||
const load = JSON.parse(event.value);
|
||||
window.location = `#/addons/${encodeURIComponent(load.path.id)}/${encodeURIComponent(load.path.type_name)}`;
|
||||
}
|
||||
}
|
||||
];
|
||||
const installedAddons = state.ctx.is_loaded ? state.ctx.content.addons : [];
|
||||
const addonsItems = urlParams.category === 'my' ?
|
||||
installedAddons.filter(addon => urlParams.type === 'all' || addon.manifest.types.includes(urlParams.type))
|
||||
:
|
||||
state.addons.content.type === 'Ready' ?
|
||||
state.addons.content.content
|
||||
:
|
||||
[];
|
||||
const error = state.addons.content.type === 'Err' && !state.ctx.is_loaded ? state.addons.content.content : null;
|
||||
setAddons([addonsItems, selectInputs, selectAddon, installedAddons, error]);
|
||||
};
|
||||
}, [category, onSelect]);
|
||||
const typeDropdown = React.useMemo(() => {
|
||||
const selected = typeof type === 'string' && type.length > 0 ? [type] : [];
|
||||
const options = ['all', 'movie', 'series', 'channel']
|
||||
.concat(selected)
|
||||
.filter((type, index, types) => types.indexOf(type) === index)
|
||||
.map((type) => ({ label: type, value: type }));
|
||||
return {
|
||||
name: 'type',
|
||||
selected,
|
||||
options,
|
||||
onSelect
|
||||
core.on('NewModel', onNewState);
|
||||
core.dispatch({
|
||||
action: 'Load',
|
||||
args: {
|
||||
load: 'CatalogFiltered',
|
||||
args: {
|
||||
base: 'https://v3-cinemeta.strem.io/manifest.json',
|
||||
path: {
|
||||
resource: 'addon_catalog',
|
||||
type_name: type,
|
||||
id: category,
|
||||
extra: []
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
core.off('NewModel', onNewState);
|
||||
};
|
||||
}, [type, onSelect]);
|
||||
return [addons, [categoryDropdown, typeDropdown]];
|
||||
}, [urlParams, queryParams]);
|
||||
return [addons, installAddon, uninstallAddon];
|
||||
};
|
||||
|
||||
module.exports = useAddons;
|
||||
|
|
|
|||
|
|
@ -12,19 +12,24 @@ const useSelectedAddon = (transportUrl) => {
|
|||
return;
|
||||
}
|
||||
|
||||
fetch(transportUrl)
|
||||
fetch(transportUrl) // TODO
|
||||
.then((resp) => resp.json())
|
||||
.then((manifest) => setAddon({ ...manifest, transportUrl }));
|
||||
.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);
|
||||
const queryParams = new URLSearchParams(search || '');
|
||||
queryParams.delete('addon');
|
||||
window.location.replace(`#${pathname}?${queryParams.toString()}`);
|
||||
if ([...queryParams].length !== 0) {
|
||||
window.location.replace(`#${pathname}?${queryParams.toString()}`);
|
||||
} else {
|
||||
window.location.replace(`#${pathname}`);
|
||||
}
|
||||
setAddon(null);
|
||||
}
|
||||
}, [active]);
|
||||
return [addon, clear];
|
||||
}, [active, locationHash]);
|
||||
return [addon, clear, setAddon];
|
||||
};
|
||||
|
||||
module.exports = useSelectedAddon;
|
||||
|
|
|
|||
|
|
@ -3,14 +3,15 @@ const classnames = require('classnames');
|
|||
const Icon = require('stremio-icons/dom');
|
||||
const { useRouteFocused } = require('stremio-router');
|
||||
const { Button } = require('stremio/common');
|
||||
const { useServices } = require('stremio/services');
|
||||
const CredentialsTextInput = require('./CredentialsTextInput');
|
||||
const ConsentCheckbox = require('./ConsentCheckbox');
|
||||
const styles = require('./styles');
|
||||
|
||||
const LOGIN_FORM = 'LOGIN_FORM';
|
||||
const SIGNUP_FORM = 'SIGNUP_FORM';
|
||||
const SIGNUP_FORM = 'signup';
|
||||
|
||||
const Intro = () => {
|
||||
const Intro = ({ queryParams }) => {
|
||||
const { core } = useServices();
|
||||
const routeFocused = useRouteFocused();
|
||||
const emailRef = React.useRef();
|
||||
const passwordRef = React.useRef();
|
||||
|
|
@ -22,17 +23,20 @@ const Intro = () => {
|
|||
const [state, dispatch] = React.useReducer(
|
||||
(state, action) => {
|
||||
switch (action.type) {
|
||||
case 'switch-form':
|
||||
return {
|
||||
form: state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM,
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
termsAccepted: false,
|
||||
privacyPolicyAccepted: false,
|
||||
marketingAccepted: false,
|
||||
error: ''
|
||||
};
|
||||
case 'set-form':
|
||||
if (state.form !== action.form) {
|
||||
return {
|
||||
form: action.form,
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
termsAccepted: false,
|
||||
privacyPolicyAccepted: false,
|
||||
marketingAccepted: false,
|
||||
error: ''
|
||||
};
|
||||
}
|
||||
return state;
|
||||
case 'change-credentials':
|
||||
return {
|
||||
...state,
|
||||
|
|
@ -55,7 +59,7 @@ const Intro = () => {
|
|||
}
|
||||
},
|
||||
{
|
||||
form: SIGNUP_FORM,
|
||||
form: queryParams.get('form'),
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
|
|
@ -65,27 +69,115 @@ const Intro = () => {
|
|||
error: ''
|
||||
}
|
||||
);
|
||||
const loginWithFacebook = React.useCallback(() => {
|
||||
alert('TODO: Facebook login');
|
||||
React.useEffect(() => {
|
||||
const onEvent = ({ event, args }) => {
|
||||
if (event === 'CtxActionErr') {
|
||||
dispatch({ type: 'error', error: args[1].args.message });
|
||||
}
|
||||
if (event === 'CtxChanged') {
|
||||
const state = core.getState();
|
||||
if (state.ctx.content.auth !== null) {
|
||||
window.location.replace('/');
|
||||
}
|
||||
}
|
||||
};
|
||||
core.on('Event', onEvent);
|
||||
return () => {
|
||||
core.off('Event', onEvent);
|
||||
};
|
||||
}, []);
|
||||
const loginWithFacebook = React.useCallback(() => {
|
||||
FB.login((response) => {
|
||||
if (response.status === 'connected') {
|
||||
fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 1000 })
|
||||
.then((resp) => {
|
||||
if (resp.status < 200 || resp.status >= 300) {
|
||||
throw new Error('Login failed at getting token from Stremio with status ' + resp.status);
|
||||
} else {
|
||||
return resp.json();
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
args: {
|
||||
userOp: 'Login',
|
||||
args: {
|
||||
email: state.email,
|
||||
password: response.authResponse.accessToken
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [state.email, state.password]);
|
||||
const loginWithEmail = React.useCallback(() => {
|
||||
if (typeof state.email !== 'string' || state.email.length === 0) {
|
||||
dispatch({ type: 'error', error: 'Invalid email' });
|
||||
return;
|
||||
}
|
||||
|
||||
alert('TODO: Login');
|
||||
if (state.password.length === 0) {
|
||||
dispatch({ type: 'error', error: 'Invalid password' });
|
||||
return;
|
||||
}
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
args: {
|
||||
userOp: 'Login',
|
||||
args: {
|
||||
email: state.email,
|
||||
password: state.password
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [state.email, state.password]);
|
||||
const loginAsGuest = React.useCallback(() => {
|
||||
if (!state.termsAccepted) {
|
||||
dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
|
||||
return;
|
||||
}
|
||||
|
||||
alert('TODO: Guest login');
|
||||
}, [state.termsAccepted, state.privacyPolicyAccepted, state.marketingAccepted]);
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
args: {
|
||||
userOp: 'Logout'
|
||||
}
|
||||
});
|
||||
location = '#/';
|
||||
}, [state.termsAccepted]);
|
||||
const signup = React.useCallback(() => {
|
||||
alert('TODO: Signup');
|
||||
if (!state.termsAccepted) {
|
||||
dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
|
||||
return;
|
||||
}
|
||||
if (!state.privacyPolicyAccepted) {
|
||||
dispatch({ type: 'error', error: 'You must accept the Privacy Policy' });
|
||||
return;
|
||||
}
|
||||
if (state.password !== state.confirmPassword) {
|
||||
dispatch({ type: 'error', error: 'Passwords do not match' });
|
||||
return;
|
||||
}
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
args: {
|
||||
userOp: 'Register',
|
||||
args: {
|
||||
email: state.email,
|
||||
password: state.password,
|
||||
gdpr_consent: {
|
||||
tos: state.termsAccepted,
|
||||
privacy: state.privacyPolicyAccepted,
|
||||
marketing: state.marketingAccepted,
|
||||
time: new Date(),
|
||||
from: 'web'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [state.email, state.password, state.confirmPassword, state.termsAccepted, state.privacyPolicyAccepted, state.marketingAccepted]);
|
||||
const emailOnChange = React.useCallback((event) => {
|
||||
dispatch({
|
||||
|
|
@ -130,9 +222,9 @@ const Intro = () => {
|
|||
const toggleMarketingAccepted = React.useCallback(() => {
|
||||
dispatch({ type: 'toggle-checkbox', name: 'marketingAccepted' });
|
||||
}, []);
|
||||
const switchForm = React.useCallback(() => {
|
||||
dispatch({ type: 'switch-form' });
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
dispatch({ type: 'set-form', form: queryParams.get('form') });
|
||||
}, [queryParams]);
|
||||
React.useEffect(() => {
|
||||
if (typeof state.error === 'string' && state.error.length > 0) {
|
||||
errorRef.current.scrollIntoView();
|
||||
|
|
@ -229,7 +321,7 @@ const Intro = () => {
|
|||
:
|
||||
null
|
||||
}
|
||||
<Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchForm}>
|
||||
<Button className={classnames(styles['form-button'], styles['switch-form-button'])} href={state.form === SIGNUP_FORM ? '#/intro?form=login' : '#/intro?form=signup'}>
|
||||
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,36 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const { Button, Dropdown, Checkbox, ColorInput } = require('stremio/common');
|
||||
const { Button, Multiselect, Checkbox, ColorInput } = require('stremio/common');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const classnames = require('classnames');
|
||||
const styles = require('./styles');
|
||||
|
||||
const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
|
||||
const toggleCheckbox = (id) => {
|
||||
onPreferenceChanged(id, !preferences[id]);
|
||||
onPreferenceChanged(id, preferences[id] === 'true' ? 'false' : 'true');
|
||||
};
|
||||
|
||||
const colorChanged = React.useCallback((event) => {
|
||||
const id = event.currentTarget.dataset.id;
|
||||
const color = event.nativeEvent.value;
|
||||
const id = event.dataset.id;
|
||||
const color = event.value;
|
||||
onPreferenceChanged(id, color);
|
||||
}, [onPreferenceChanged]);
|
||||
|
||||
const updateDropdown = React.useCallback((event) => {
|
||||
var data = event.currentTarget.dataset;
|
||||
onPreferenceChanged(data.name, data.value);
|
||||
const name = event.dataset.name;
|
||||
const value = event.reactEvent.currentTarget.dataset.value;
|
||||
onPreferenceChanged(name, value);
|
||||
}, [onPreferenceChanged]);
|
||||
|
||||
const updateStreamingDropdown = React.useCallback((event) => {
|
||||
const name = event.dataset.name;
|
||||
const value = event.reactEvent.currentTarget.dataset.value;
|
||||
const newPrefs = { ...preferences.streaming, [name]: value };
|
||||
onPreferenceChanged('streaming', newPrefs);
|
||||
}, [onPreferenceChanged, preferences.streaming]);
|
||||
|
||||
const checkUser = React.useCallback((event) => {
|
||||
if(! preferences.user) {
|
||||
if (!preferences.user) {
|
||||
// Here in Stremio 4 we show a toast with a message, asking the anonymous user to log in/register
|
||||
console.log('No user found');
|
||||
event.preventDefault();
|
||||
|
|
@ -37,6 +45,45 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
|
|||
const changePasswordUrl = preferences.user && 'https://www.strem.io/reset-password/' + preferences.user.email;
|
||||
const webCalUrl = preferences.user && 'webcal://www.strem.io/calendar/' + preferences.user._id + '.ics';
|
||||
|
||||
const formatBytes = inBytes => {
|
||||
if (inBytes === '0') return 'no caching';
|
||||
if (inBytes === 'Infinity') return '∞';
|
||||
|
||||
const bytes = parseInt(inBytes, 10);
|
||||
|
||||
const kilo = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
|
||||
const power = Math.floor(Math.log(bytes) / Math.log(kilo));
|
||||
|
||||
// More than 1024 yotta bytes
|
||||
if (power >= sizes.length) {
|
||||
power = sizes.length - 1;
|
||||
}
|
||||
return parseFloat((bytes / Math.pow(kilo, power)).toFixed(2)) + ' ' + sizes[power];
|
||||
}
|
||||
const cacheSizes = ['0', '2147483648', '5368709120', '10737418240', 'Infinity'];
|
||||
const mkCacheSizeOptions = sizes => sizes.map(size => ({
|
||||
label: formatBytes(size), // TODO: translation
|
||||
value: size.toString(),
|
||||
}))
|
||||
const supportedProfiles = ['default', 'soft', 'fast'];
|
||||
const mkProfiles = profiles => profiles.map(profile => ({
|
||||
label: profile[0].toUpperCase() + profile.slice(1).toLowerCase(), // TODO: translation
|
||||
value: profile,
|
||||
}))
|
||||
const [cachingOptions, setCachingOptions] = React.useState(mkProfiles(supportedProfiles));
|
||||
const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles));
|
||||
React.useEffect(() => {
|
||||
if (!preferences.streaming || typeof preferences.streaming.cacheSize === 'undefined') return;
|
||||
setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))]));
|
||||
}, [preferences.streaming && preferences.streaming.cacheSize]);
|
||||
React.useEffect(() => {
|
||||
if (preferences.streaming && preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) {
|
||||
setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile)));
|
||||
}
|
||||
}, [preferences.streaming && preferences.streaming.profile]);
|
||||
|
||||
const sectionsElements = sections.map((section) =>
|
||||
<div key={section.id} ref={section.ref} className={styles['section']} data-section={section.id}>
|
||||
<div className={styles['section-header']}>{section.id}</div>
|
||||
|
|
@ -104,11 +151,49 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
|
|||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
} else if (input.type === 'streaming') {
|
||||
return (
|
||||
preferences.streaming_loaded
|
||||
?
|
||||
<React.Fragment key={'streaming'}>
|
||||
{
|
||||
// The streaming server settings are shown only if server is available
|
||||
preferences.streaming_error
|
||||
?
|
||||
null
|
||||
:
|
||||
<React.Fragment>
|
||||
<div className={classnames(styles['input-container'], styles['select-container'])}>
|
||||
<div className={styles['input-header']}>Caching</div>
|
||||
<Multiselect options={cachingOptions} selected={[preferences.streaming.cacheSize]} data-name={'cacheSize'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['select-container'])}>
|
||||
<div className={styles['input-header']}>Torrent Profile</div>
|
||||
<Multiselect options={streamingProfiles} selected={[preferences.streaming.profile]} data-name={'profile'} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
{/* From here there is only presentation */}
|
||||
<div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
<div className={styles['input-header']}><strong>Streaming server URL:</strong> {preferences.server_url}</div>
|
||||
</div>
|
||||
<div key={'server_available'} className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
<div className={styles['text']}>
|
||||
<Icon className={classnames(styles['icon'], { [styles['x-icon']]: preferences.streaming_error })} icon={preferences.streaming_error ? 'ic_x' : 'ic_check'} />
|
||||
<div className={styles['label']}>{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available.'}{preferences.streaming_error && ' Reason: ' + preferences.streaming_error}</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
:
|
||||
<div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
<div className={styles['input-header']}>Loading streaming settgins...</div>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'select') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Dropdown options={input.options} selected={[preferences[input.id]]} name={input.id} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
|
||||
<Multiselect options={input.options} selected={[preferences[input.id]]} data-name={input.id} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'link') {
|
||||
|
|
@ -134,7 +219,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
|
|||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['checkbox-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id]} onClick={toggleCheckbox.bind(null, input.id)}>
|
||||
<Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id] === 'true'} onClick={toggleCheckbox.bind(null, input.id)}>
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
|
|
@ -153,7 +238,13 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
|
|||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['color-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<ColorInput className={styles['color-picker']} id={input.id} value={preferences[input.id]} onChange={colorChanged} />
|
||||
<ColorInput className={styles['color-picker']} data-id={input.id} value={preferences[input.id]} onChange={colorChanged} />
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'info') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'])}>
|
||||
<div className={styles['input-header']}><strong>{input.header}</strong> {preferences[input.id]}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,32 @@
|
|||
:import('~stremio/common/Checkbox/styles.less') {
|
||||
checkbox-icon: icon;
|
||||
}
|
||||
:import('~stremio/common/Multiselect/styles.less') {
|
||||
menu-container: menu-container;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
max-height: 30rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 4rem 2rem;
|
||||
padding: 4rem 0;
|
||||
margin: 0 2rem;
|
||||
width: var(--input-width);
|
||||
overflow: visible;
|
||||
|
||||
.section-header {
|
||||
margin: 0 1.5rem 1.5rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
|
||||
.input-header {
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -51,14 +63,13 @@
|
|||
&.select-container {
|
||||
.dropdown {
|
||||
height: 3rem;
|
||||
width: var(--input-width);
|
||||
}
|
||||
}
|
||||
|
||||
&.link-container {
|
||||
margin: 1rem 1.5rem;
|
||||
|
||||
margin: 0;
|
||||
.link {
|
||||
padding: .75rem 0;
|
||||
display: block;
|
||||
color: var(--color-secondarylight);
|
||||
|
||||
|
|
@ -75,7 +86,6 @@
|
|||
&.button-container {
|
||||
.button {
|
||||
padding: 0.7rem;
|
||||
width: var(--input-width);
|
||||
min-height: calc(var(--input-width) * 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -132,10 +142,12 @@
|
|||
}
|
||||
|
||||
&.text-container {
|
||||
margin: 0;
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: .75rem 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -160,7 +172,7 @@
|
|||
|
||||
&.color-container {
|
||||
.color-picker {
|
||||
width: var(--input-width);
|
||||
box-shadow: inset 0px 0px .2rem 0px var(--color-surfacelighter20);
|
||||
height: calc(var(--input-width) * 0.08);
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,21 +6,20 @@ const SectionsList = require('./SectionsList');
|
|||
const { settingsSections } = require('./constants');
|
||||
const useSettings = require('./useSettings');
|
||||
|
||||
const devTestWithUser = true;
|
||||
|
||||
const Settings = () => {
|
||||
const [preferences, setPreferences] = useSettings(devTestWithUser);
|
||||
const sections = React.useMemo(()=>Object.keys(settingsSections)
|
||||
const [preferences, setPreferences] = useSettings();
|
||||
const [dynamicSections, setDynamicSections] = React.useState(settingsSections);
|
||||
// TODO: The Streaming section should be handled separately
|
||||
const sections = React.useMemo(()=>Object.keys(dynamicSections)
|
||||
.map((section) => ({
|
||||
id: section,
|
||||
inputs: settingsSections[section],
|
||||
inputs: dynamicSections[section],
|
||||
ref: React.createRef()
|
||||
})), []);
|
||||
})), [dynamicSections]);
|
||||
|
||||
const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
|
||||
const scrollContainerRef = React.useRef(null);
|
||||
|
||||
/////////////////
|
||||
|
||||
const updatePreference = (option, value) => {
|
||||
setPreferences({ ...preferences, [option]: value });
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,22 +1,68 @@
|
|||
const React = require('react');
|
||||
const { useServices } = require('stremio/services');
|
||||
|
||||
module.exports = (devTestWithUser) => React.useState({
|
||||
"user": devTestWithUser ? {
|
||||
"_id": "neo",
|
||||
"email": "neo@example.com",
|
||||
"avatar": "https://www.thenational.ae/image/policy:1.891803:1566372420/AC17-Matrix-20-04.jpg?f=16x9&w=1200&$p$f$w=5867e40",
|
||||
} : null,
|
||||
"ui_language": "eng",
|
||||
"default_subtitles_language": "bul",
|
||||
"default_subtitles_size": "100%",
|
||||
"subtitles_background": "",
|
||||
"subtitles_color": "#ffffff",
|
||||
"subtitles_outline_color": "#000",
|
||||
"auto-play_next_episode": true,
|
||||
"pause_playback_when_minimized": false,
|
||||
"hardware-accelerated_decoding": true,
|
||||
"launch_player_in_a_separate_window_(advanced)": true,
|
||||
"caching": "2048",
|
||||
"torrent_profile": "profile-default",
|
||||
"streaming_server_is_available.": true,
|
||||
});
|
||||
const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']);
|
||||
|
||||
module.exports = () => {
|
||||
const { core } = useServices();
|
||||
|
||||
const [settings, setSettings] = React.useState({
|
||||
user: null,
|
||||
streaming: {},
|
||||
streaming_loaded: false,
|
||||
streaming_error: ""
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
const onNewState = () => {
|
||||
const { ctx, streaming_server_settings } = core.getState()
|
||||
try {
|
||||
const newSettings = {
|
||||
...settings,
|
||||
...ctx.content.settings,
|
||||
user: ctx.content.auth ? ctx.content.auth.user : null,
|
||||
streaming: streaming_server_settings && streaming_server_settings.ready || {},
|
||||
streaming_loaded: streaming_server_settings && !!(streaming_server_settings.error || streaming_server_settings.ready),
|
||||
streaming_error: streaming_server_settings && streaming_server_settings.error || "",
|
||||
};
|
||||
setSettings(newSettings);
|
||||
} catch (e) {
|
||||
console.log('Cannot update settings state', e);
|
||||
}
|
||||
};
|
||||
const onStoreError = ({ event, args }) => {
|
||||
if (event !== "SettingsStoreError") return;
|
||||
// TODO: Notify with maybe a toast?
|
||||
console.log(args)
|
||||
}
|
||||
|
||||
core.on('NewModel', onNewState);
|
||||
core.on('Event', onStoreError);
|
||||
|
||||
onNewState();
|
||||
|
||||
return () => {
|
||||
// Destructor function
|
||||
core.off('NewModel', onNewState);
|
||||
core.off('Event', onStoreError);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const setTheSettings = React.useCallback(newSettings => {
|
||||
const event = { action: 'Settings', args: { args: {} } };
|
||||
// This can be done with React.useEffect and newSettings.streaming as dependency
|
||||
const streamingServerSettingChanged = settings.streaming && Object.keys(newSettings.streaming)
|
||||
.some(prop => settings.streaming[prop] !== newSettings.streaming[prop]);
|
||||
if (streamingServerSettingChanged) {
|
||||
event.args = { settings: 'StoreStreamingServer', args: newSettings.streaming };
|
||||
} else {
|
||||
event.args.settings = 'Store';
|
||||
Object.keys(newSettings)
|
||||
.filter(prop => !IGNORED_SETTINGS.includes(prop))
|
||||
.forEach(key => event.args.args[key] = newSettings[key].toString());
|
||||
}
|
||||
core.dispatch(event);
|
||||
}, [settings])
|
||||
|
||||
return [settings, setTheSettings];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
const React = require('react');
|
||||
const { storiesOf } = require('@storybook/react');
|
||||
const { action } = require('@storybook/addon-actions');
|
||||
const Addon = require('stremio/routes/Addons/Addon');
|
||||
const styles = require('./styles');
|
||||
|
||||
storiesOf('Addon', module).add('Installed', () => (
|
||||
<div>Installed addon</div>
|
||||
<Addon
|
||||
className={styles['installed-addon-container']}
|
||||
id={'addon-id'}
|
||||
name={'Demo name'}
|
||||
logo={'/images/intro_background.jpg'}
|
||||
description={'Demo description'}
|
||||
types={['Demo type']}
|
||||
version={'1.0.0'}
|
||||
transportUrl={'Demo url'}
|
||||
installed={true}
|
||||
toggle={action('Demo item uninstall button clicked')}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
const React = require('react');
|
||||
const { storiesOf } = require('@storybook/react');
|
||||
const { action } = require('@storybook/addon-actions');
|
||||
const Addon = require('stremio/routes/Addons/Addon');
|
||||
const styles = require('./styles');
|
||||
|
||||
storiesOf('Addon', module).add('NotInstalled', () => (
|
||||
<div>Not installed addon</div>
|
||||
<Addon
|
||||
className={styles['not-installed-addon-container']}
|
||||
id={'addon-id'}
|
||||
name={'Demo name'}
|
||||
logo={'/images/intro_background.jpg'}
|
||||
description={'Demo description'}
|
||||
types={['Demo type']}
|
||||
version={'1.0.0'}
|
||||
transportUrl={'Demo url'}
|
||||
installed={false}
|
||||
toggle={action('Demo item install button clicked')}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
3
storybook/stories/Addon/styles.less
Normal file
3
storybook/stories/Addon/styles.less
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.installed-addon-container, .not-installed-addon-container {
|
||||
margin: 10px;
|
||||
}
|
||||
Loading…
Reference in a new issue