mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 23:14:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(translations): new translation system

Browse Source
This commit is contained in:
David Ralph
2021-09-10 16:38:53 +01:00
parent 941c168486
commit b0eeff1bf8
63 changed files with 651 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
@@ -13,14 +14,16 @@ import ColourSettings from './Colour';
import EventBus from 'modules/helpers/eventbus';
export default class BackgroundSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
customBackground: [''],
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundCategories: [window.language.modals.main.loading]
backgroundCategories: [this.getMessage(this.languagecode, 'modals.main.loading')]
};
this.language = window.language.modals.main.settings;
this.controller = new AbortController();
}
@@ -29,7 +32,7 @@ export default class BackgroundSettings extends PureComponent {
this.setState({
customBackground: ['']
});
toast(window.language.toasts.reset);
toast(this.getMessage(this.languagecode, 'toasts.reset'));
EventBus.dispatch('refresh', 'background');
}
@@ -77,8 +80,8 @@ export default class BackgroundSettings extends PureComponent {
if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
return (
<>
<Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
<Checkbox name='backgroundVideoMute' text={this.language.sections.background.source.mute_video}/>
<Checkbox name='backgroundVideoLoop' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.loop_video')}/>
<Checkbox name='backgroundVideoMute' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.mute_video')}/>
</>
);
} else {
@@ -88,7 +91,7 @@ export default class BackgroundSettings extends PureComponent {
marketplaceType = () => {
if (localStorage.getItem('photo_packs')) {
return <option value='photo_pack'>{window.language.modals.main.navbar.marketplace}</option>;
return <option value='photo_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
}
}
@@ -131,7 +134,7 @@ export default class BackgroundSettings extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
backgroundCategories: [window.language.modals.update.offline.title]
backgroundCategories: [this.getMessage(this.languagecode, 'modals.update.offline.title')]
});
}
@@ -144,8 +147,6 @@ export default class BackgroundSettings extends PureComponent {
}
render() {
const { background } = this.language.sections;
let backgroundSettings;
const apiOptions = [
@@ -166,29 +167,29 @@ export default class BackgroundSettings extends PureComponent {
const APISettings = (
<>
<br/>
<Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<Radio title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<br/>
<Dropdown label={background.category} name='apiCategory'>
<Dropdown label={this.getMessage(this.languagecode, '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={background.source.quality.title} name='apiQuality' element='.other'>
<option value='original'>{background.source.quality.original}</option>
<option value='high'>{background.source.quality.high}</option>
<option value='normal'>{background.source.quality.normal}</option>
<option value='datasaver'>{background.source.quality.datasaver}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
<option value='original'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.original')}</option>
<option value='high'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.high')}</option>
<option value='normal'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.normal')}</option>
<option value='datasaver'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.datasaver')}</option>
</Dropdown>
<br/><br/>
<Dropdown label={background.interval.title} name='backgroundchange'>
<option value='refresh'>{window.language.tabname}</option>
<option value='60000'>{background.interval.minute}</option>
<option value='1800000'>{background.interval.half_hour}</option>
<option value='3600000'>{background.interval.hour}</option>
<option value='86400000'>{background.interval.day}</option>
<option value='604800000'>{window.language.widgets.date.week}</option>
<option value='2628000000'>{background.interval.month}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
<option value='refresh'>{this.getMessage(this.languagecode, 'tabname')}</option>
<option value='60000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{this.getMessage(this.languagecode, 'widgets.date.week')}</option>
<option value='2628000000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
</>
);
@@ -196,12 +197,12 @@ export default class BackgroundSettings extends PureComponent {
const customSettings = (
<>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
{this.state.customBackground.map((_url, index) => (
<Fragment key={index}>
{this.state.customBackground.length > 1 ? <button className='reset round round-small' onClick={() => this.removeCustomBackground(index)}>x</button> : null}
<input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{background.source.upload}</span>
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.ypload')}</span>
{this.videoCustomSettings(index)}
<br/><br/>
</Fragment>
@@ -224,41 +225,41 @@ export default class BackgroundSettings extends PureComponent {
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
<Checkbox name='bgtransition' text={background.transition} element='.other' />
<Checkbox name='photoInformation' text={background.photo_information} element='.other' />
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title')}</h2>
<Switch name='background' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='background' element='#backgroundImage' />
<Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
<Checkbox name='bgtransition' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.transition')} element='.other' />
<Checkbox name='photoInformation' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.photo_information')} element='.other' />
<Checkbox name='photoMap' text='Show location map on photo information if available' element='.other'/>
<h3>{background.source.title}</h3>
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.title')}</h3>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
{this.marketplaceType()}
<option value='api'>{background.type.api}</option>
<option value='custom'>{background.type.custom_image}</option>
<option value='colour'>{background.type.custom_colour}</option>
<option value='api'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_image')}</option>
<option value='colour'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_colour')}</option>
</Dropdown>
<br/>
{backgroundSettings}
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} category='navbar' />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} category='navbar' />
<Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='view' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.view')} category='navbar' />
<Checkbox name='favouriteEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
<Checkbox name='downloadbtn' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.download')} element='.other' />
<h3>{background.effects.title}</h3>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<br/><br/>
<Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background' element='#backgroundImage'>
<option value='grayscale'>{background.effects.filters.grayscale}</option>
<option value='sepia'>{background.effects.filters.sepia}</option>
<option value='invert'>{background.effects.filters.invert}</option>
<option value='saturate'>{background.effects.filters.saturate}</option>
<option value='contrast'>{background.effects.filters.contrast}</option>
<Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
<option value='grayscale'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.contrast')}</option>
</Dropdown>
<Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
</>
);
}

14
src/components/modals/main/settings/sections/background/Colour.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { ColorPicker } from 'react-color-gradient-picker';
import { toast } from 'react-toastify';
@@ -11,13 +12,14 @@ import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.
export default class ColourSettings extends PureComponent {
DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
GradientPickerInitalState = undefined;
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
constructor() {
super();
this.state = {
gradientSettings: this.DefaultGradientSettings
};
this.language = window.language.modals.main.settings;
}
resetColour() {
@@ -25,7 +27,7 @@ export default class ColourSettings extends PureComponent {
this.setState({
gradientSettings: this.DefaultGradientSettings
});
toast(window.language.toasts.reset);
toast(this.getMessage(this.languagecode, 'toasts.reset'));
}
initialiseColourPickerState(gradientSettings) {
@@ -109,7 +111,7 @@ export default class ColourSettings extends PureComponent {
gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
});
}
return this.language.sections.background.source.disabled;
return this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.disabled');
}
onColourPickerChange = (attrs, name) => {
@@ -141,8 +143,6 @@ export default class ColourSettings extends PureComponent {
}
render() {
const { background } = this.language.sections;
let colourSettings = null;
if (typeof this.state.gradientSettings === 'object') {
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
@@ -175,14 +175,14 @@ export default class ColourSettings extends PureComponent {
colourSettings = (
<>
{gradientInputs}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button></>) : null}
{!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
</>
);
}
return (
<>
<p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
{colourSettings}
</>
);