mirror of
https://github.com/mue/mue.git
synced 2026-07-19 23:14:10 +02:00
feat: new sliders, dropdowns, text inputs, update settings ui, fix language bug
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
@@ -1,5 +1,6 @@
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { MenuItem } from '@mui/material';
|
||||
|
||||
import Header from '../../Header';
|
||||
import Checkbox from '../../Checkbox';
|
||||
@@ -10,6 +11,8 @@ import Radio from '../../Radio';
|
||||
import ColourSettings from './Colour';
|
||||
import CustomSettings from './Custom';
|
||||
|
||||
import { values } from 'modules/helpers/settings/modals';
|
||||
|
||||
export default class BackgroundSettings extends PureComponent {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
@@ -17,6 +20,7 @@ export default class BackgroundSettings extends PureComponent {
|
||||
super();
|
||||
this.state = {
|
||||
backgroundType: localStorage.getItem('backgroundType') || 'api',
|
||||
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
|
||||
backgroundCategories: [this.getMessage('modals.main.loading')]
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
@@ -76,31 +80,25 @@ export default class BackgroundSettings extends PureComponent {
|
||||
];
|
||||
|
||||
const interval = (
|
||||
<>
|
||||
<br/><br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
|
||||
<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>
|
||||
</>
|
||||
<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>
|
||||
);
|
||||
|
||||
const APISettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
|
||||
<br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' manual={true}>
|
||||
{this.state.backgroundCategories.map((category) => (
|
||||
<option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
|
||||
<MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<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>
|
||||
@@ -114,6 +112,8 @@ export default class BackgroundSettings extends PureComponent {
|
||||
switch (this.state.backgroundType) {
|
||||
case 'custom': backgroundSettings = <CustomSettings interval={interval}/>; break;
|
||||
case 'colour': backgroundSettings = <ColourSettings/>; break;
|
||||
case 'random_colour': backgroundSettings = <></>; break;
|
||||
case 'random_gradient': backgroundSettings = <></>; break;
|
||||
default: backgroundSettings = APISettings; break;
|
||||
}
|
||||
|
||||
@@ -138,25 +138,27 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<option value='random_colour'>{getMessage('modals.main.settings.sections.background.type.random_colour')}</option>
|
||||
<option value='random_gradient'>{getMessage('modals.main.settings.sections.background.type.random_gradient')}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
|
||||
|
||||
{backgroundSettings}
|
||||
|
||||
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
|
||||
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
|
||||
|
||||
<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('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
|
||||
<br/>
|
||||
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
|
||||
<option value='none'>None</option>
|
||||
<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('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
|
||||
{this.state.backgroundFilter !== 'none' ?
|
||||
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import variables from 'modules/variables';
|
||||
import { PureComponent, Fragment } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Cancel } from '@mui/icons-material';
|
||||
import { TextField } from '@mui/material';
|
||||
|
||||
import Checkbox from '../../Checkbox';
|
||||
import FileUpload from '../../FileUpload';
|
||||
@@ -96,16 +97,17 @@ export default class CustomSettings extends PureComponent {
|
||||
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.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)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false}/>
|
||||
<TextField value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false} varient='outlined' />
|
||||
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
|
||||
<Cancel/>
|
||||
</button> : null}
|
||||
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</span>
|
||||
{this.videoCustomSettings(index)}
|
||||
<br/><br/>
|
||||
</Fragment>
|
||||
))}
|
||||
<br/><br/>
|
||||
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{this.getMessage('modals.main.settings.sections.background.source.add_background')}</button>
|
||||
<br/><br/>
|
||||
<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)} />
|
||||
{this.props.interval}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user