mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 10:42:12 +00:00
Settings ui reimplemented and adapted to changes in core
This commit is contained in:
nklhrstv
parent
4dfb67263f
commit
9169f177de
12 changed files with 768 additions and 701 deletions
|
|
@ -1,287 +0,0 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
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] === 'true' ? 'false' : 'true');
|
||||
};
|
||||
|
||||
const colorChanged = React.useCallback((event) => {
|
||||
const id = event.dataset.id;
|
||||
const color = event.value;
|
||||
onPreferenceChanged(id, color);
|
||||
}, [onPreferenceChanged]);
|
||||
|
||||
const updateDropdown = React.useCallback((event) => {
|
||||
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) {
|
||||
// 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();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Determines whether the link should be opened in new window or in the current one.
|
||||
const getTargetFor = url => ['//', 'http://', 'https://', 'file://', 'ftp://', 'mailto:', 'magnet:']
|
||||
.some(scheme => url.startsWith(scheme)) ? '_blank' : '_self'
|
||||
|
||||
// TODO: If we get the user data after initialization, these should be wrapped in React.useState and set by React.useEffect
|
||||
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>
|
||||
{(section.inputs || [])
|
||||
.map((input) => {
|
||||
if (input.type === 'user') {
|
||||
return (
|
||||
<React.Fragment key={'user'}>
|
||||
<div className={classnames(styles['input-container'], styles['user-container'])}>
|
||||
{
|
||||
!preferences.user
|
||||
?
|
||||
<div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
|
||||
:
|
||||
<div style={{ backgroundImage: `url('${preferences.user.avatar}'), url('/images/default_avatar.png')` }} className={styles['avatar']} />
|
||||
}
|
||||
<div className={styles['email']}>{!preferences.user ? 'Anonymous user' : preferences.user.email}</div>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['button-container'])}>
|
||||
<Button className={styles['button']} href={'#/intro'}>
|
||||
<div className={styles['label']}>{preferences.user ? 'LOG OUT' : 'SIGN IN'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={changePasswordUrl} target={'_blank'} onClick={checkUser}>
|
||||
<div className={styles['label']}>{'Change password'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
<div className={styles['text']}>
|
||||
<div className={styles['label']}>{'Import options'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={'https://www.stremio.com/#TODO:install-facebook-addon'} target={'_blank'} onClick={checkUser}>
|
||||
<div className={styles['label']}>{'Import from Facebook'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={'https://www.stremio.com/#TODO:export-user-data'} target={'_blank'} onClick={checkUser}>
|
||||
<div className={styles['label']}>{'Export user data'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={webCalUrl} target={'_blank'} onClick={checkUser}>
|
||||
<div className={styles['label']}>{'Subscribe to calendar'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<div className={styles['label']}>{'Contact support'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} href={'https://docs.google.com/forms/d/e/1FAIpQLScubrlTpDMIPUUBlhZ5lwcXl3HxzKfunIMCX5Jnp-cDyglWjQ/viewform?usp=sf_link'} target={'_blank'}>
|
||||
<div className={styles['label']}>{'Request account deletion'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['button-container'])}>
|
||||
<div className={styles['input-header']}>{'Trakt Scrobbling'}</div>
|
||||
<Button className={styles['button']}>
|
||||
<Icon className={styles['icon']} icon={'ic_trackt'} />
|
||||
<div className={styles['label']}>{preferences.user && preferences.user.trakt ? 'ALREADY UTHENTIATED' : 'AUTHENTIATE'}</div>
|
||||
</Button>
|
||||
</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]} dataset={{ 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]} dataset={{ 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}
|
||||
<Multiselect options={input.options} selected={[preferences[input.id]]} dataset={{ name: input.id }} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'link') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Button ref={input.ref} className={styles['link']} href={input.href} target={getTargetFor(input.href)}>
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'button') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['button-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Button ref={input.ref} className={styles['button']} href={input.href}>
|
||||
{input.icon ? <Icon className={styles['icon']} icon={input.icon} /> : null}
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'checkbox') {
|
||||
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] === 'true'} onClick={toggleCheckbox.bind(null, input.id)}>
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'static-text') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<div className={styles['text']}>
|
||||
{input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null}
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'color') {
|
||||
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']} dataset={{ 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>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={className} onScroll={onScroll}>
|
||||
{sectionsElements}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
SectionsList.propTypes = {
|
||||
className: PropTypes.string,
|
||||
sections: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
ref: PropTypes.shape({
|
||||
current: PropTypes.object,
|
||||
}).isRequired,
|
||||
inputs: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.string.isRequired,
|
||||
id: PropTypes.string,
|
||||
header: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
options: PropTypes.arrayOf(PropTypes.shape({
|
||||
label: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
})),
|
||||
})),
|
||||
})),
|
||||
preferences: PropTypes.object,
|
||||
onPreferenceChanged: PropTypes.func.isRequired,
|
||||
onScroll: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
module.exports = SectionsList;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const SectionsList = require('./SectionsList');
|
||||
|
||||
module.exports = SectionsList;
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
: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 0;
|
||||
margin: 0 2rem;
|
||||
width: var(--input-width);
|
||||
overflow: visible;
|
||||
|
||||
.section-header {
|
||||
margin: 1.5rem 0;
|
||||
font-size: 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin: 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
|
||||
.input-header {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
flex: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&.user-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
margin: 0 1rem;
|
||||
width: 4.2rem;
|
||||
height: 4.2rem;
|
||||
border-radius: 50%;
|
||||
border: var(--focusable-border-size) solid var(--color-primary);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.email {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.select-container {
|
||||
.dropdown {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.link-container {
|
||||
margin: 0;
|
||||
.link {
|
||||
padding: .75rem 0;
|
||||
display: block;
|
||||
color: var(--color-secondarylight);
|
||||
|
||||
&:focus {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-container {
|
||||
.button {
|
||||
padding: 0.7rem;
|
||||
min-height: calc(var(--input-width) * 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 1.4rem;
|
||||
height: 100%;
|
||||
margin-right: 0.5rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-container {
|
||||
.checkbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.checkbox-icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.text-container {
|
||||
margin: 0;
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: .75rem 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: var(--color-signal5);
|
||||
}
|
||||
|
||||
.x-icon {
|
||||
margin-right: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: var(--color-signal2);
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-container {
|
||||
.color-picker {
|
||||
box-shadow: inset 0px 0px .2rem 0px var(--color-surfacelighter20);
|
||||
height: calc(var(--input-width) * 0.08);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const { Button } = require('stremio/common');
|
||||
const classnames = require('classnames');
|
||||
const styles = require('./styles');
|
||||
|
||||
const SectionsSelector = ({ className, sections, selectedSectionId, onSelectedSection }) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
{sections.map((section) =>
|
||||
<Button key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={onSelectedSection}>
|
||||
{section.id}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SectionsSelector.propTypes = {
|
||||
className: PropTypes.string,
|
||||
sections: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
})),
|
||||
selectedSectionId: PropTypes.string.isRequired,
|
||||
onSelectedSection: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
module.exports = SectionsSelector;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const SectionsSelector = require('./SectionsSelector');
|
||||
|
||||
module.exports = SectionsSelector;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.section-label {
|
||||
padding: 1rem;
|
||||
font-size: 1.1rem;
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surface20);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +1,300 @@
|
|||
const React = require('react');
|
||||
const { NavBar } = require('stremio/common');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { useServices } = require('stremio/services');
|
||||
const { Button, Checkbox, NavBar, Multiselect, ColorInput, useProfile, useStreamingServer } = require('stremio/common');
|
||||
const useProfileSettingsInputs = require('./useProfileSettingsInputs');
|
||||
const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
|
||||
const styles = require('./styles');
|
||||
const SectionsSelector = require('./SectionsSelector');
|
||||
const SectionsList = require('./SectionsList');
|
||||
const { settingsSections } = require('./constants');
|
||||
const useSettings = require('./useSettings');
|
||||
|
||||
const GENERAL_SECTION = 'general';
|
||||
const PLAYER_SECTION = 'player';
|
||||
const STREAMING_SECTION = 'streaming';
|
||||
|
||||
const Settings = () => {
|
||||
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: 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 });
|
||||
}
|
||||
|
||||
const changeSection = React.useCallback((event) => {
|
||||
const currentSectionId = event.currentTarget.dataset.section;
|
||||
const section = sections.find((section) => section.id === currentSectionId);
|
||||
//setSelectedSectionId(currentSectionId);
|
||||
scrollContainerRef.current.scrollTo({
|
||||
top: section.ref.current.offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, [sections]);
|
||||
|
||||
const sectionListOnScorll = React.useCallback((event) => {
|
||||
const scrollContainer = event.currentTarget;
|
||||
if (scrollContainer.scrollTop + scrollContainer.clientHeight === scrollContainer.scrollHeight) {
|
||||
setSelectedSectionId(sections[sections.length - 1].id);
|
||||
} else {
|
||||
for (let i = sections.length - 1; i >= 0; i--) {
|
||||
if (sections[i].ref.current.offsetTop <= scrollContainer.scrollTop) {
|
||||
setSelectedSectionId(sections[i].id);
|
||||
break;
|
||||
}
|
||||
const { core } = useServices();
|
||||
const profile = useProfile();
|
||||
const streaminServer = useStreamingServer();
|
||||
const {
|
||||
interfaceLanguageSelect,
|
||||
subtitlesLanguageSelect,
|
||||
subtitlesSizeSelect,
|
||||
subtitlesTextColorInput,
|
||||
subtitlesBackgroundColorInput,
|
||||
subtitlesOutlineColorInput,
|
||||
bingeWatchingCheckbox,
|
||||
playInBackgroundCheckbox,
|
||||
playInExternalPlayerCheckbox
|
||||
} = useProfileSettingsInputs();
|
||||
const {
|
||||
cacheSizeSelect,
|
||||
torrentProfileSelect
|
||||
} = useStreamingServerSettingsInputs();
|
||||
const [section, setSection] = React.useState(GENERAL_SECTION);
|
||||
const sectionsContainerRef = React.useRef(null);
|
||||
const sectionsContainerOnScorll = React.useCallback((event) => {
|
||||
}, []);
|
||||
const sideMenuButtonOnClick = React.useCallback((event) => {
|
||||
}, []);
|
||||
const logoutButtonOnClick = React.useCallback(() => {
|
||||
core.dispatch({
|
||||
action: 'Ctx',
|
||||
args: {
|
||||
action: 'Logout'
|
||||
}
|
||||
}
|
||||
}, [sections]);
|
||||
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div className={styles['settings-parent-container']}>
|
||||
<div className={styles['settings-container']}>
|
||||
<NavBar
|
||||
className={styles['nav-bar']}
|
||||
backButton={true}
|
||||
addonsButton={true}
|
||||
fullscreenButton={true}
|
||||
notificationsMenu={true}
|
||||
navMenu={true} />
|
||||
<div className={styles['settings-container']}>
|
||||
<SectionsSelector className={styles['side-menu']} sections={sections} selectedSectionId={selectedSectionId} onSelectedSection={changeSection} />
|
||||
<SectionsList ref={scrollContainerRef} className={styles['scroll-container']} sections={sections} preferences={preferences} onPreferenceChanged={updatePreference} onScroll={sectionListOnScorll} />
|
||||
navMenu={true}
|
||||
/>
|
||||
<div className={styles['settings-content']}>
|
||||
<div className={styles['side-menu-container']}>
|
||||
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: section === GENERAL_SECTION })} data-section={GENERAL_SECTION} onClick={sideMenuButtonOnClick}>
|
||||
General
|
||||
</Button>
|
||||
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: section === PLAYER_SECTION })} data-section={PLAYER_SECTION} onClick={sideMenuButtonOnClick}>
|
||||
Player
|
||||
</Button>
|
||||
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: section === STREAMING_SECTION })} data-section={STREAMING_SECTION} onClick={sideMenuButtonOnClick}>
|
||||
Streaming server
|
||||
</Button>
|
||||
</div>
|
||||
<div ref={sectionsContainerRef} className={styles['sections-container']} onScroll={sectionsContainerOnScorll}>
|
||||
<div className={styles['section-container']}>
|
||||
<div className={styles['section-title']}>General</div>
|
||||
<div className={classnames(styles['option-container'], styles['user-info-option-container'])}>
|
||||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: profile.auth === null ?
|
||||
'url(\'/images/anonymous.png\')'
|
||||
:
|
||||
`url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-label']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
|
||||
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
profile.auth === null ?
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['label']}>{'Log in / Sign up'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_user'} />
|
||||
<div className={styles['label']}>{'User panel'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['label']}>Addons</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Interface language</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...interfaceLanguageSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Trakt Scrobbling</div>
|
||||
</div>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'}>
|
||||
<Icon className={styles['icon']} icon={'ic_trackt'} />
|
||||
<div className={styles['label']}>Authenticate</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Facebook import</div>
|
||||
</div>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Authenticate</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Calendar</div>
|
||||
</div>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Subscribe'}>
|
||||
<Icon className={styles['icon']} icon={'ic_calendar'} />
|
||||
<div className={styles['label']}>Subscribe</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'}>
|
||||
<div className={styles['label']}>Export user data</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Contact support'}>
|
||||
<div className={styles['label']}>Contact support</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Terms of Service'}>
|
||||
<div className={styles['label']}>Terms of Service</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Privacy Policy'}>
|
||||
<div className={styles['label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
profile.auth !== null ?
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['label']}>Log out</div>
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className={styles['section-container']}>
|
||||
<div className={styles['section-title']}>Player</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Subtitles language</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...subtitlesLanguageSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Subtitles size</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...subtitlesSizeSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Subtitles text color</div>
|
||||
</div>
|
||||
<ColorInput
|
||||
className={classnames(styles['option-input-container'], styles['color-input-container'])}
|
||||
{...subtitlesTextColorInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Subtitles background color</div>
|
||||
</div>
|
||||
<ColorInput
|
||||
className={classnames(styles['option-input-container'], styles['color-input-container'])}
|
||||
{...subtitlesBackgroundColorInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Subtitles outline color</div>
|
||||
</div>
|
||||
<ColorInput
|
||||
className={classnames(styles['option-input-container'], styles['color-input-container'])}
|
||||
{...subtitlesOutlineColorInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Auto-play next episode</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
|
||||
{...bingeWatchingCheckbox}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Play in background</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
|
||||
{...playInBackgroundCheckbox}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Hardware-accelerated decoding</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
|
||||
checked={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['section-container']}>
|
||||
<div className={styles['section-title']}>Streaming Server</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Status</div>
|
||||
</div>
|
||||
<div className={classnames(styles['option-input-container'], styles['info-container'])}>
|
||||
<div className={styles['label']}>Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Base Url</div>
|
||||
</div>
|
||||
<div className={classnames(styles['option-input-container'], styles['info-container'])}>
|
||||
<div className={styles['label']}>http://</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
cacheSizeSelect !== null ?
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Cache size</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...cacheSizeSelect}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
torrentProfileSelect !== null ?
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Torrent profile</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...torrentProfileSelect}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,13 @@
|
|||
.settings-parent-container {
|
||||
:import('~stremio/common/Checkbox/styles.less') {
|
||||
checkbox-icon: icon;
|
||||
}
|
||||
|
||||
:import('~stremio/common/Multiselect/styles.less') {
|
||||
multiselect-menu-container: menu-container;
|
||||
multiselect-label: label;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -10,32 +19,280 @@
|
|||
align-self: stretch;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--color-backgroundlight);
|
||||
--input-width: 35rem;
|
||||
|
||||
.side-menu {
|
||||
padding: 1rem;
|
||||
width: 17rem;
|
||||
|
||||
.side-menu-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 17rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.side-menu-button {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
padding: 1rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
&.selected {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
padding: 0 2rem;
|
||||
.sections-container {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
padding: 0 2rem;
|
||||
overflow-y: auto;
|
||||
|
||||
>:not(:last-child) {
|
||||
border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
overflow: visible;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: thin solid var(--color-primary40);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
font-size: 1.8rem;
|
||||
line-height: 3.4rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.option-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 35rem;
|
||||
margin-bottom: 2rem;
|
||||
overflow: visible;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.option-name-container, .option-input-container {
|
||||
flex: 1 1 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
line-height: 1.5rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.option-name-container {
|
||||
justify-content: flex-start;
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.option-input-container {
|
||||
padding: 1rem;
|
||||
|
||||
&.button-container {
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
|
||||
&.multiselect-container {
|
||||
>.multiselect-label {
|
||||
line-height: 1.5rem;
|
||||
max-height: 1.5rem;
|
||||
}
|
||||
|
||||
.multiselect-menu-container {
|
||||
max-height: calc(3.2rem * 7);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.link-container {
|
||||
flex: 0 1 auto;
|
||||
padding: 1rem 0;
|
||||
|
||||
&:hover {
|
||||
.label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-container {
|
||||
justify-content: center;
|
||||
|
||||
.checkbox-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.color-input-container {
|
||||
padding: 1.75rem 1rem;
|
||||
}
|
||||
|
||||
&.info-container {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-option-container {
|
||||
.avatar-container {
|
||||
flex: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: content-box;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.email-label {
|
||||
flex: 1;
|
||||
font-size: 1.4rem;
|
||||
max-height: 3.6em;
|
||||
padding: 0 2rem;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////
|
||||
|
||||
.subscription-container,
|
||||
.language-picker-container,
|
||||
.size-picker-container,
|
||||
.color-picker-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 35rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.label-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin-right: 0.5rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-button-container, .multiselect-container, .color-input {
|
||||
flex: 1;
|
||||
padding: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-container {
|
||||
.subscribe-button-container {
|
||||
color: var(--color-surfacelighter);
|
||||
text-align: center;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-picker-container, .size-picker-container {
|
||||
overflow: visible;
|
||||
|
||||
.multiselect-container {
|
||||
.multiselect-menu-container {
|
||||
max-height: calc(3.2rem * 7);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-container {
|
||||
.color-input {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-option-container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
max-width: 35rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.label {
|
||||
flex: none;
|
||||
width: calc(50% - 0.5rem);
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
flex: none;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(25% - 1rem);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
103
src/routes/Settings/useProfileSettingsInputs.js
Normal file
103
src/routes/Settings/useProfileSettingsInputs.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
const React = require('react');
|
||||
const { useProfile } = require('stremio/common');
|
||||
const languages = require('./languages');
|
||||
|
||||
const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
|
||||
|
||||
const useProfileSettingsInputs = () => {
|
||||
const profile = useProfile();
|
||||
const interfaceLanguageSelect = React.useMemo(() => ({
|
||||
options: Object.keys(languages).map((code) => ({
|
||||
value: code,
|
||||
label: languages[code]
|
||||
})),
|
||||
selected: [profile.settings.interface_language],
|
||||
renderLabelText: () => {
|
||||
return typeof languages[profile.settings.interface_language] === 'string' ?
|
||||
languages[profile.settings.interface_language]
|
||||
:
|
||||
profile.settings.interface_language;
|
||||
},
|
||||
onSelect: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.interface_language]);
|
||||
const subtitlesLanguageSelect = React.useMemo(() => ({
|
||||
options: Object.keys(languages).map((code) => ({
|
||||
value: code,
|
||||
label: languages[code]
|
||||
})),
|
||||
selected: [profile.settings.subtitles_language],
|
||||
renderLabelText: () => {
|
||||
return typeof languages[profile.settings.subtitles_language] === 'string' ?
|
||||
languages[profile.settings.subtitles_language]
|
||||
:
|
||||
profile.settings.subtitles_language;
|
||||
},
|
||||
onSelect: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.subtitles_language]);
|
||||
const subtitlesSizeSelect = React.useMemo(() => ({
|
||||
options: SUBTITLES_SIZES.map((size) => ({
|
||||
value: `${size}`,
|
||||
label: `${size}%`
|
||||
})),
|
||||
selected: [`${profile.settings.subtitles_size}`],
|
||||
renderLabelText: () => {
|
||||
return `${profile.settings.subtitles_size}%`;
|
||||
},
|
||||
onSelect: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.subtitles_size]);
|
||||
const subtitlesTextColorInput = React.useMemo(() => ({
|
||||
value: profile.settings.subtitles_text_color,
|
||||
onChange: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.subtitles_text_color]);
|
||||
const subtitlesBackgroundColorInput = React.useMemo(() => ({
|
||||
value: profile.settings.subtitles_background_color,
|
||||
onChange: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.subtitles_background_color]);
|
||||
const subtitlesOutlineColorInput = React.useMemo(() => ({
|
||||
value: profile.settings.subtitles_outline_color,
|
||||
onChange: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.subtitles_outline_color]);
|
||||
const bingeWatchingCheckbox = React.useMemo(() => ({
|
||||
checked: profile.settings.binge_watching,
|
||||
onClick: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.binge_watching]);
|
||||
const playInBackgroundCheckbox = React.useMemo(() => ({
|
||||
checked: profile.settings.play_in_background,
|
||||
onClick: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.play_in_background]);
|
||||
const playInExternalPlayerCheckbox = React.useMemo(() => ({
|
||||
checked: profile.settings.play_in_external_player,
|
||||
onClick: (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
}), [profile.settings.play_in_external_player]);
|
||||
return {
|
||||
interfaceLanguageSelect,
|
||||
subtitlesLanguageSelect,
|
||||
subtitlesSizeSelect,
|
||||
subtitlesTextColorInput,
|
||||
subtitlesBackgroundColorInput,
|
||||
subtitlesOutlineColorInput,
|
||||
bingeWatchingCheckbox,
|
||||
playInBackgroundCheckbox,
|
||||
playInExternalPlayerCheckbox
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = useProfileSettingsInputs;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
const React = require('react');
|
||||
const { useServices } = require('stremio/services');
|
||||
|
||||
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];
|
||||
};
|
||||
108
src/routes/Settings/useStreamingServerSettingsInputs.js
Normal file
108
src/routes/Settings/useStreamingServerSettingsInputs.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
const React = require('react');
|
||||
const isEqual = require('lodash.isequal');
|
||||
const { useStreamingServer } = require('stremio/common');
|
||||
|
||||
const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
|
||||
|
||||
const cacheSizeToString = (size) => {
|
||||
return size === null ?
|
||||
'Infinite'
|
||||
:
|
||||
size === 0 ?
|
||||
'No caching'
|
||||
:
|
||||
`${size / 1024 / 1024 / 1024}GiB`;
|
||||
};
|
||||
|
||||
const TORRENT_PROFILES = {
|
||||
default: {
|
||||
btDownloadSpeedHardLimit: 2621440,
|
||||
btDownloadSpeedSoftLimit: 1677721.6,
|
||||
btHandshakeTimeout: 20000,
|
||||
btMaxConnections: 35,
|
||||
btMinPeersForStable: 5,
|
||||
btRequestTimeout: 4000
|
||||
},
|
||||
soft: {
|
||||
btDownloadSpeedHardLimit: 1677721.6,
|
||||
btDownloadSpeedSoftLimit: 1677721.6,
|
||||
btHandshakeTimeout: 20000,
|
||||
btMaxConnections: 35,
|
||||
btMinPeersForStable: 5,
|
||||
btRequestTimeout: 4000
|
||||
},
|
||||
fast: {
|
||||
btDownloadSpeedHardLimit: 39321600,
|
||||
btDownloadSpeedSoftLimit: 4194304,
|
||||
btHandshakeTimeout: 20000,
|
||||
btMaxConnections: 200,
|
||||
btMinPeersForStable: 10,
|
||||
btRequestTimeout: 4000
|
||||
}
|
||||
};
|
||||
|
||||
const useStreaminServerSettingsInputs = () => {
|
||||
const streaminServer = useStreamingServer();
|
||||
const cacheSizeSelect = React.useMemo(() => {
|
||||
if (streaminServer.type !== 'Ready') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
options: CACHE_SIZES.map((size) => ({
|
||||
label: cacheSizeToString(size),
|
||||
value: JSON.stringify(size)
|
||||
})),
|
||||
selected: [JSON.stringify(streaminServer.settings.cacheSize)],
|
||||
renderLabelText: () => {
|
||||
return cacheSizeToString(streaminServer.settings.cacheSize);
|
||||
}
|
||||
};
|
||||
}, [streaminServer.type, streaminServer.settings && streaminServer.settings.cacheSize]);
|
||||
const torrentProfileSelect = React.useMemo(() => {
|
||||
if (streaminServer.type !== 'Ready') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedTorrentProfile = {
|
||||
btDownloadSpeedHardLimit: streaminServer.settings.btDownloadSpeedHardLimit,
|
||||
btDownloadSpeedSoftLimit: streaminServer.settings.btDownloadSpeedSoftLimit,
|
||||
btHandshakeTimeout: streaminServer.settings.btHandshakeTimeout,
|
||||
btMaxConnections: streaminServer.settings.btMaxConnections,
|
||||
btMinPeersForStable: streaminServer.settings.btMinPeersForStable,
|
||||
btRequestTimeout: streaminServer.settings.btRequestTimeout
|
||||
};
|
||||
const isCustomTorrentProfileSelected = Object.values(TORRENT_PROFILES).every((torrentProfile) => {
|
||||
return !isEqual(torrentProfile, selectedTorrentProfile);
|
||||
});
|
||||
return {
|
||||
options: Object.keys(TORRENT_PROFILES)
|
||||
.map((profileName) => ({
|
||||
label: profileName,
|
||||
value: JSON.stringify(TORRENT_PROFILES[profileName])
|
||||
}))
|
||||
.concat(
|
||||
isCustomTorrentProfileSelected ?
|
||||
[{
|
||||
label: 'custom',
|
||||
value: JSON.stringify(selectedTorrentProfile)
|
||||
}]
|
||||
:
|
||||
[]
|
||||
),
|
||||
selected: [JSON.stringify(selectedTorrentProfile)],
|
||||
renderLabelText: () => {
|
||||
return Object.keys(TORRENT_PROFILES).reduce((result, profileName) => {
|
||||
if (isEqual(TORRENT_PROFILES[profileName], selectedTorrentProfile)) {
|
||||
return profileName;
|
||||
}
|
||||
|
||||
return result;
|
||||
}, 'custom');
|
||||
}
|
||||
};
|
||||
}, [streaminServer.type, streaminServer.settings]);
|
||||
return { cacheSizeSelect, torrentProfileSelect };
|
||||
};
|
||||
|
||||
module.exports = useStreaminServerSettingsInputs;
|
||||
Loading…
Reference in a new issue