mirror of
https://github.com/mue/mue.git
synced 2026-07-18 06:24:17 +02:00
feat: multiple custom quotes, fix background settings
This commit is contained in:
David Ralph
@@ -1,8 +1,8 @@
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { PureComponent, Fragment } from 'react';
|
||||
import { Cancel } from '@mui/icons-material';
|
||||
|
||||
import Checkbox from '../Checkbox';
|
||||
import Text from '../Text';
|
||||
import Switch from '../Switch';
|
||||
import Slider from '../Slider';
|
||||
import Dropdown from '../Dropdown';
|
||||
@@ -14,6 +14,7 @@ export default class QuoteSettings extends PureComponent {
|
||||
super();
|
||||
this.state = {
|
||||
quoteType: localStorage.getItem('quoteType') || 'api',
|
||||
customQuote: this.getCustom()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -23,13 +24,80 @@ export default class QuoteSettings extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
resetCustom = () => {
|
||||
localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
|
||||
this.setState({
|
||||
customQuote: [{
|
||||
quote: '',
|
||||
author: ''
|
||||
}]
|
||||
});
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
EventBus.dispatch('refresh', 'background');
|
||||
}
|
||||
|
||||
customQuote(e, text, index, type) {
|
||||
const result = (text === true) ? e.target.value : e.target.result;
|
||||
|
||||
const customQuote = this.state.customQuote;
|
||||
customQuote[index][type] = result;
|
||||
this.setState({
|
||||
customQuote
|
||||
});
|
||||
this.forceUpdate();
|
||||
|
||||
localStorage.setItem('customQuote', JSON.stringify(customQuote));
|
||||
document.querySelector('.reminder-info').style.display = 'block';
|
||||
localStorage.setItem('showReminder', true);
|
||||
}
|
||||
|
||||
modifyCustomQuote(type, index) {
|
||||
const customQuote = this.state.customQuote;
|
||||
if (type === 'add') {
|
||||
customQuote.push({
|
||||
quote: '',
|
||||
author: ''
|
||||
});
|
||||
} else {
|
||||
customQuote.splice(index, 1);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
customQuote
|
||||
});
|
||||
this.forceUpdate();
|
||||
|
||||
localStorage.setItem('customQuote', JSON.stringify(customQuote));
|
||||
}
|
||||
|
||||
getCustom() {
|
||||
let data = JSON.parse(localStorage.getItem('customQuote'));
|
||||
if (data === null) {
|
||||
data = [{
|
||||
quote: localStorage.getItem('customQuote') || '',
|
||||
author: localStorage.getItem('customQuoteAuthor') || ''
|
||||
}];
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
render() {
|
||||
let customSettings;
|
||||
if (this.state.quoteType === 'custom') {
|
||||
customSettings = (
|
||||
<>
|
||||
<Text title={this.getMessage('modals.main.settings.sections.quote.custom')} name='customQuote' category='quote' />
|
||||
<Text title={this.getMessage('modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
|
||||
<p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
|
||||
{this.state.customQuote.map((_url, index) => (
|
||||
<Fragment key={index}>
|
||||
<input type='text' style={{marginRight: '10px'}} value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')}></input>
|
||||
<input type='text' value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')}></input>
|
||||
{this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)}>
|
||||
<Cancel/>
|
||||
</button> : null}
|
||||
<br/><br/>
|
||||
</Fragment>
|
||||
))}
|
||||
<button className='uploadbg' onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')}</button>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
@@ -54,6 +122,8 @@ export default class QuoteSettings extends PureComponent {
|
||||
<>
|
||||
<h2>{this.getMessage('modals.main.settings.sections.quote.title')}</h2>
|
||||
<Switch name='quote' text={this.getMessage('modals.main.settings.enabled')} category='quote' element='.quotediv' />
|
||||
<Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
|
||||
<br/>
|
||||
<Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
|
||||
<Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
|
||||
{this.marketplaceType()}
|
||||
@@ -61,7 +131,6 @@ export default class QuoteSettings extends PureComponent {
|
||||
<option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
|
||||
</Dropdown>
|
||||
{customSettings}
|
||||
<Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
|
||||
|
||||
<h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
|
||||
<Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
|
||||
@@ -70,4 +139,4 @@ export default class QuoteSettings extends PureComponent {
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { getMessage, languagecode } = this;
|
||||
const { getMessage } = this;
|
||||
|
||||
let backgroundSettings;
|
||||
|
||||
@@ -157,29 +157,29 @@ export default class BackgroundSettings extends PureComponent {
|
||||
const APISettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Radio title={getMessage(languagecode, 'modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
|
||||
<Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
|
||||
<br/>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.category')} name='apiCategory'>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
|
||||
{this.state.backgroundCategories.map((category) => (
|
||||
<option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
|
||||
))}
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
|
||||
<option value='original'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.original')}</option>
|
||||
<option value='high'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.high')}</option>
|
||||
<option value='normal'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.normal')}</option>
|
||||
<option value='datasaver'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.datasaver')}</option>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
|
||||
<option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
|
||||
<option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
|
||||
<option value='normal'>{getMessage('modals.main.settings.sections.background.source.quality.normal')}</option>
|
||||
<option value='datasaver'>{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}</option>
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
|
||||
<option value='refresh'>{getMessage(languagecode, 'tabname')}</option>
|
||||
<option value='60000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
|
||||
<option value='1800000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
|
||||
<option value='3600000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
|
||||
<option value='86400000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
|
||||
<option value='604800000'>{getMessage(languagecode, 'widgets.date.week')}</option>
|
||||
<option value='2628000000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
|
||||
<option value='refresh'>{getMessage('tabname')}</option>
|
||||
<option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
|
||||
<option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
|
||||
<option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
|
||||
<option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
|
||||
<option value='604800000'>{getMessage('widgets.date.week')}</option>
|
||||
<option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
@@ -187,19 +187,19 @@ export default class BackgroundSettings extends PureComponent {
|
||||
const customSettings = (
|
||||
<>
|
||||
<ul>
|
||||
<p>{getMessage(languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</span></p>
|
||||
<p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage('modals.main.settings.buttons.reset')}</span></p>
|
||||
{this.state.customBackground.map((_url, index) => (
|
||||
<Fragment key={index}>
|
||||
<input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
|
||||
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
|
||||
<Cancel/>
|
||||
</button> : null}
|
||||
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage(languagecode, 'modals.main.settings.sections.background.source.upload')}</span>
|
||||
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
|
||||
{this.videoCustomSettings(index)}
|
||||
<br/><br/>
|
||||
</Fragment>
|
||||
))}
|
||||
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage(languagecode, 'modals.main.settings.sections.background.source.add_background')}</button>
|
||||
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
|
||||
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
|
||||
</ul>
|
||||
</>
|
||||
@@ -217,41 +217,41 @@ export default class BackgroundSettings extends PureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{getMessage(languagecode, 'modals.main.settings.sections.background.title')}</h2>
|
||||
<Switch name='background' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='background' element='#backgroundImage' />
|
||||
<Checkbox name='ddgProxy' text={getMessage(languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
|
||||
<Checkbox name='bgtransition' text={getMessage(languagecode, 'modals.main.settings.sections.background.transition')} element='.other' />
|
||||
<Checkbox name='photoInformation' text={getMessage(languagecode, 'modals.main.settings.sections.background.photo_information')} element='.other' />
|
||||
<Checkbox name='photoMap' text={getMessage(languagecode, 'modals.main.settings.sections.background.show_map')} element='.other'/>
|
||||
<h2>{getMessage('modals.main.settings.sections.background.title')}</h2>
|
||||
<Switch name='background' text={getMessage('modals.main.settings.enabled')} category='background' element='#backgroundImage' />
|
||||
<Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
|
||||
<Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
|
||||
<Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />
|
||||
<Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other'/>
|
||||
|
||||
<h3>{getMessage(languagecode, 'modals.main.settings.sections.background.source.title')}</h3>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
|
||||
<h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
|
||||
{this.marketplaceType()}
|
||||
<option value='api'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.api')}</option>
|
||||
<option value='custom'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.custom_image')}</option>
|
||||
<option value='colour'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.custom_colour')}</option>
|
||||
<option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
|
||||
<option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
|
||||
<option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
|
||||
{backgroundSettings}
|
||||
|
||||
<h3>{getMessage(languagecode, 'modals.main.settings.sections.background.buttons.title')}</h3>
|
||||
<Checkbox name='view' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.view')} category='navbar' />
|
||||
<Checkbox name='favouriteEnabled' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
|
||||
<Checkbox name='downloadbtn' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.download')} element='.other' />
|
||||
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
|
||||
<Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
|
||||
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
|
||||
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
|
||||
|
||||
<h3>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.title')}</h3>
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
|
||||
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
|
||||
<option value='grayscale'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.grayscale')}</option>
|
||||
<option value='sepia'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.sepia')}</option>
|
||||
<option value='invert'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.invert')}</option>
|
||||
<option value='saturate'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.saturate')}</option>
|
||||
<option value='contrast'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.contrast')}</option>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
|
||||
<option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
|
||||
<option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
|
||||
<option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
|
||||
<option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
|
||||
<option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
|
||||
</Dropdown>
|
||||
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -77,14 +77,26 @@ export default class Quote extends PureComponent {
|
||||
|
||||
switch (this.state.type) {
|
||||
case 'custom':
|
||||
const customQuote = localStorage.getItem('customQuote');
|
||||
const customQuoteAuthor = localStorage.getItem('customQuoteAuthor');
|
||||
let customQuote;
|
||||
try {
|
||||
customQuote = JSON.parse(localStorage.getItem('customQuote'));
|
||||
} catch (e) {
|
||||
// move to new format
|
||||
customQuote = [{
|
||||
quote: localStorage.getItem('customQuote'),
|
||||
author: localStorage.getItem('customQuoteAuthor')
|
||||
}];
|
||||
localStorage.setItem('customQuote', JSON.stringify(customQuote));
|
||||
}
|
||||
|
||||
if (customQuote) {
|
||||
// pick random
|
||||
customQuote = customQuote[Math.floor(Math.random() * customQuote.length)];
|
||||
|
||||
if (customQuote !== '' && customQuote !== 'undefined' && customQuote !== ['']) {
|
||||
return this.setState({
|
||||
quote: '"' + customQuote + '"',
|
||||
author: customQuoteAuthor,
|
||||
authorlink: this.getAuthorLink(customQuote)
|
||||
quote: '"' + customQuote.quote + '"',
|
||||
author: customQuote.author,
|
||||
authorlink: this.getAuthorLink(customQuote.author)
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user