mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-28 21:18:47 +00:00
Hardcoded user settings. Determine if link is internal
This commit is contained in:
Vladimir Borisov
parent
c9d5a4e42f
commit
0d03bfe9db
3 changed files with 144 additions and 89 deletions
|
|
@ -5,7 +5,7 @@ const ColorInput = require('../ColorInput');
|
|||
const classnames = require('classnames');
|
||||
const styles = require('../styles');
|
||||
|
||||
const SectionsList = React.forwardRef(({className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
|
||||
const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
|
||||
const scrollContainerRef = ref;
|
||||
const toggleCheckbox = (id) => {
|
||||
onPreferenceChanged(id, !preferences[id]);
|
||||
|
|
@ -20,83 +20,141 @@ const SectionsList = React.forwardRef(({className, sections, preferences, onPref
|
|||
onPreferenceChanged(data.name, data.value);
|
||||
};
|
||||
|
||||
// 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'
|
||||
|
||||
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 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']} type={'button'}>
|
||||
<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']} type={'link'} href={changePasswordUrl} target={'_blank'}>
|
||||
<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']} type={'link'} href={'https://www.stremio.com/#TODO:install-facebook-addon'} target={'_blank'}>
|
||||
<div className={styles['label']}>{'Import from Facebook'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} type={'link'} href={'https://www.stremio.com/#TODO:export-user-data'} target={'_blank'}>
|
||||
<div className={styles['label']}>{'Export user data'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} type={'link'} href={webCalUrl} target={'_blank'}>
|
||||
<div className={styles['label']}>{'Subscribe to calendar'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
<Button className={styles['link']} type={'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']} type={'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']} type={'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 === '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} />
|
||||
</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']} type={input.type} 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']} type={input.type} 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]} 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']} defaultValue={preferences[input.id]} tabIndex={'-1'} onChange={colorChanged.bind(null, input.id)} />
|
||||
{/* <TextInput className={styles['color-picker']} type={input.type} defaultValue={input.color} tabIndex={'-1'} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={scrollContainerRef} className={className} onScroll={onScroll}>
|
||||
{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 (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['user-container'])}>
|
||||
{
|
||||
!preferences[input.id]
|
||||
?
|
||||
<div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
|
||||
:
|
||||
<div style={{ backgroundImage: `url('${this.props.avatar}'), url('/images/default_avatar.png')` }} className={styles['avatar']} />
|
||||
}
|
||||
<div className={styles['email']}>{!preferences[input.id] ? 'Anonymous user' : preferences[input.id].email}</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} />
|
||||
</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']} type={input.type} href={input.href} target={'_blank'}>
|
||||
<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']} type={input.type}>
|
||||
{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]} 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']} defaultValue={preferences[input.id]} tabIndex={'-1'} onChange={colorChanged.bind(null, input.id)} />
|
||||
{/* <TextInput className={styles['color-picker']} type={input.type} defaultValue={input.color} tabIndex={'-1'} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{sectionsElements}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,10 +5,16 @@ const SectionsSelector = require('./SectionsSelector');
|
|||
const SectionsList = require('./SectionsList');
|
||||
const { settingsSections, SECTIONS_ORDER } = require('./constants');
|
||||
|
||||
const devTestWithUser = true;
|
||||
|
||||
const settingsValues = {
|
||||
"user": null,
|
||||
"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": "",
|
||||
"default_subtitles_language": "bul",
|
||||
"default_subtitles_size": "100%",
|
||||
"subtitles_background": "",
|
||||
"subtitles_color": "#ffffff",
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
const settingsSections = {
|
||||
"General": {
|
||||
"inputs": [
|
||||
{ "section": "General", "label": "Username", "type": "user", "id": "user" },
|
||||
{ "section": "General", "label": "LOG OUT", "type": "button", "id": "log_out" },
|
||||
{ "section": "General", "label": "Change password", "type": "link", "href": "", "id": "change_password" },
|
||||
{ "section": "General", "label": "Import options", "type": "static-text", "id": "import_options" },
|
||||
{ "section": "General", "label": "Import from Facebook", "type": "link", "href": "", "id": "import_from_facebook" },
|
||||
{ "section": "General", "label": "Export user data", "type": "link", "href": "", "id": "export_user_data" },
|
||||
{ "section": "General", "label": "Subscribe to calendar", "type": "link", "href": "", "id": "subscribe_to_calendar" },
|
||||
{ "section": "General", "label": "Contact support", "type": "link", "id": "contact_support" },
|
||||
{ "section": "General", "label": "Request account deletion", "type": "link", "id": "request_account_deletion" },
|
||||
{ "section": "General", "header": "Trakt Scrobbling", "label": "AUTHENTICATE", "type": "button", "icon": "ic_trackt", "id": "authenticate" },
|
||||
{ "section": "General", "type": "user" },
|
||||
{ "section": "General", "header": "UI Language", "label": "UI Language", "type": "select", "options": [{ "label": "Български език", "value": "bul" }, { "label": "English", "value": "eng" }, { "label": "Deutsch", "value": "ger" }, { "label": "Español", "value": "esp" }, { "label": "Italiano", "value": "ita" }], "id": "ui_language" },
|
||||
],
|
||||
},
|
||||
"Player": {
|
||||
"inputs": [
|
||||
{ "section": "Player", "label": "ADD-ONS", "type": "button", "icon": "ic_addons", "id": "add-ons" },
|
||||
{ "section": "Player", "label": "ADD-ONS", "type": "button", "icon": "ic_addons", "id": "add-ons", "href": "#/addons" },
|
||||
{ "section": "Player", "header": "Default Subtitles Language", "label": "Default Subtitles Language", "type": "select", "options": [{ "label": "Български език", "value": "bul" }, { "label": "English", "value": "eng" }, { "label": "Deutsch", "value": "ger" }, { "label": "Español", "value": "esp" }, { "label": "Italiano", "value": "ita" }], "id": "default_subtitles_language" },
|
||||
{ "section": "Player", "header": "Default Subtitles Size", "label": "Default Subtitles Size", "type": "select", "options": [{ "label": "72%", "value": "72%" }, { "label": "80%", "value": "80%" }, { "label": "100%", "value": "100%" }, { "label": "120%", "value": "120%" }, { "label": "140%", "value": "140%" }, { "label": "160%", "value": "160%" }, { "label": "180%", "value": "180%" }], "id": "default_subtitles_size" },
|
||||
{ "section": "Player", "header": "Subtitles Background", "label": "Subtitles background", "type": "select", "options": [{ "label": "None", "value": "" }, { "label": "Solid", "value": "solid" }, { "label": "Transparent", "value": "transparent" }], "id": "subtitles_background" },
|
||||
|
|
|
|||
Loading…
Reference in a new issue