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

refactor: cleanup

Browse Source
This commit is contained in:
David Ralph
2021-09-28 23:04:04 +01:00
parent 883f025fbb
commit 80a7b6a56c
58 changed files with 295 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/ErrorBoundary.jsx
View File

@@ -12,7 +12,7 @@ export default class ErrorBoundary extends PureComponent {
static getDerivedStateFromError(error) {
console.log(error);
window.stats.postEvent('modal', 'Error occurred');
variables.stats.postEvent('modal', 'Error occurred');
return {
error: true
};

7
src/components/modals/Modals.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent, Suspense, lazy } from 'react';
import Modal from 'react-modal';
import Hotkeys from 'react-hot-keys';
@@ -29,7 +30,7 @@ export default class Modals extends PureComponent {
this.setState({
welcomeModal: true
});
window.stats.postEvent('modal', 'Opened welcome');
variables.stats.postEvent('modal', 'Opened welcome');
}
if (window.location.search === '?nointro=true') {
@@ -59,7 +60,7 @@ export default class Modals extends PureComponent {
});
if (action !== false) {
window.stats.postEvent('modal', `Opened ${type.replace('Modal', '')}`);
variables.stats.postEvent('modal', `Opened ${type.replace('Modal', '')}`);
}
}
@@ -78,7 +79,7 @@ export default class Modals extends PureComponent {
<Feedback modalClose={() => this.toggleModal('feedbackModal', false)}/>
</Modal>
</Suspense>
{window.keybinds.toggleModal && window.keybinds.toggleModal !== '' ? <Hotkeys keyName={window.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null}
{variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null}
</>
);
}

4
src/components/modals/feedback/Feedback.jsx
View File

@@ -55,7 +55,7 @@ export default class FeedbackModal extends PureComponent {
}
});
await fetch(window.constants.FEEDBACK_FORM, {
await fetch(variables.constants.FEEDBACK_FORM, {
method: 'POST'
});
@@ -75,7 +75,7 @@ export default class FeedbackModal extends PureComponent {
<h1>{this.getMessage('modals.feedback.title')}</h1>
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<form>
<input type='hidden' name='version' value={window.constants.VERSION} />
<input type='hidden' name='version' value={variables.constants.VERSION} />
<div className='question'>
<label>{this.getMessage('modals.feedback.question_one')}</label>
<br/><br/>

2
src/components/modals/main/marketplace/Item.jsx
View File

@@ -46,7 +46,7 @@ export default class Item extends PureComponent {
}
// prevent console error
let iconsrc = window.constants.DDG_IMAGE_PROXY + this.props.data.icon;
let iconsrc = variables.constants.DDG_IMAGE_PROXY + this.props.data.icon;
if (!this.props.data.icon) {
iconsrc = null;
}

2
src/components/modals/main/marketplace/Items.jsx
View File

@@ -3,7 +3,7 @@ export default function Items({ items, toggleFunction }) {
<div className='items'>
{items.map((item) => (
<div className='item' onClick={() => toggleFunction(item.name)} key={item.name}>
<img alt='icon' draggable='false' src={window.constants.DDG_IMAGE_PROXY + item.icon_url} />
<img alt='icon' draggable='false' src={variables.constants.DDG_IMAGE_PROXY + item.icon_url} />
<div className='details'>
<h4>{item.display_name || item.name}</h4>
<p>{item.author}</p>

2
src/components/modals/main/marketplace/Lightbox.jsx
View File

@@ -1,5 +1,5 @@
export default function Lightbox({ modalClose, img }) {
window.stats.postEvent('modal', 'Opened lightbox');
variables.stats.postEvent('modal', 'Opened lightbox');
return (
<>

10
src/components/modals/main/marketplace/SideloadFailedModal.jsx
View File

@@ -1,12 +1,16 @@
import variables from 'modules/variables';
export default function SideloadFailedModal({ modalClose, reason }) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<h1 style={{ textAlign: 'center' }}>Error</h1>
<span>Failed to sideload addon</span>
<h1 style={{ textAlign: 'center' }}>{getMessage('modals.main.error_boundary.error')}</h1>
<span>{getMessage('modals.main.addons.sideload.failed')}</span>
<br/><br/>
<span>{reason}</span>
<div className='resetfooter'>
<button className='import' onClick={modalClose}>Close</button>
<button className='import' onClick={modalClose}>{getMessage('modals.welcome.buttons.close')}</button>
</div>
</>
);

8
src/components/modals/main/marketplace/sections/Added.jsx
View File

@@ -43,7 +43,7 @@ export default class Added extends PureComponent {
},
button: this.buttons.uninstall
});
window.stats.postEvent('marketplace', 'Item viewed');
variables.stats.postEvent('marketplace', 'Item viewed');
} else {
this.setState({
item: {}
@@ -61,7 +61,7 @@ export default class Added extends PureComponent {
installed: JSON.parse(localStorage.getItem('installed'))
});
window.stats.postEvent('marketplace', 'Uninstall');
variables.stats.postEvent('marketplace', 'Uninstall');
}
sortAddons(value, sendEvent) {
@@ -88,14 +88,14 @@ export default class Added extends PureComponent {
});
if (sendEvent) {
window.stats.postEvent('marketplace', 'Sort');
variables.stats.postEvent('marketplace', 'Sort');
}
}
updateCheck() {
let updates = 0;
this.state.installed.forEach(async (item) => {
const data = await (await fetch(window.constants.MARKETPLACE_URL + '/item/' + item.name)).json();
const data = await (await fetch(variables.constants.MARKETPLACE_URL + '/item/' + item.name)).json();
if (data.version !== item.version) {
updates++;
}

16
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -33,7 +33,7 @@ export default class Marketplace extends PureComponent {
let info;
// get item info
try {
info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`, { signal: this.controller.signal })).json();
info = await (await fetch(`${variables.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`, { signal: this.controller.signal })).json();
} catch (e) {
if (this.controller.signal.aborted === false) {
return toast(this.getMessage('toasts.error'));
@@ -78,7 +78,7 @@ export default class Marketplace extends PureComponent {
button: button
});
window.stats.postEvent('marketplace-item', `${this.state.item.display_name} viewed`);
variables.stats.postEvent('marketplace-item', `${this.state.item.display_name} viewed`);
} else {
this.setState({
item: {}
@@ -87,8 +87,8 @@ export default class Marketplace extends PureComponent {
}
async getItems() {
const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/items/' + this.props.type, { signal: this.controller.signal })).json();
const featured = await (await fetch(window.constants.MARKETPLACE_URL + '/featured', { signal: this.controller.signal })).json();
const { data } = await (await fetch(variables.constants.MARKETPLACE_URL + '/items/' + this.props.type, { signal: this.controller.signal })).json();
const featured = await (await fetch(variables.constants.MARKETPLACE_URL + '/featured', { signal: this.controller.signal })).json();
if (this.controller.signal.aborted === true) {
return;
@@ -116,8 +116,8 @@ export default class Marketplace extends PureComponent {
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
});
window.stats.postEvent('marketplace-item', `${this.state.item.display_name} ${(type === 'install' ? 'installed': 'uninstalled')}`);
window.stats.postEvent('marketplace', (type === 'install' ? 'Install': 'Uninstall'));
variables.stats.postEvent('marketplace-item', `${this.state.item.display_name} ${(type === 'install' ? 'installed': 'uninstalled')}`);
variables.stats.postEvent('marketplace', (type === 'install' ? 'Install': 'Uninstall'));
}
sortMarketplace(value, sendEvent) {
@@ -144,7 +144,7 @@ export default class Marketplace extends PureComponent {
});
if (sendEvent) {
window.stats.postEvent('marketplace', 'Sort');
variables.stats.postEvent('marketplace', 'Sort');
}
}
@@ -186,7 +186,7 @@ export default class Marketplace extends PureComponent {
const featured = () => {
const openFeatured = () => {
window.stats.postEvent('marketplace', 'Featured clicked');
variables.stats.postEvent('marketplace', 'Featured clicked');
window.open(this.state.featured.buttonLink);
};

16
src/components/modals/main/marketplace/sections/Sideload.jsx
View File

@@ -24,17 +24,17 @@ export default class Sideload extends PureComponent {
installAddon(input) {
let failedReason = '';
if (!input.name) {
failedReason = 'No name provided';
failedReason = getMessage('modals.main.addons.sideload.errors.no_name');
} else if (!input.author) {
failedReason = 'No author provided';
failedReason = getMessage('modals.main.addons.sideload.errors.no_author');
} else if (!input.type) {
failedReason = 'No type provided';
failedReason = getMessage('modals.main.addons.sideload.errors.no_type');
} else if (!input.version) {
failedReason = 'No version provided';
failedReason = getMessage('modals.main.addons.sideload.errors.no_version');
} else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
failedReason = 'Invalid photos object';
failedReason = getMessage('modals.main.addons.sideload.errors.invalid_photos');
} else if (input.type === 'quotes' && (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)) {
failedReason = 'Invalid quotes object';
failedReason = getMessage('modals.main.addons.sideload.errors.invalid_quotes');
}
if (failedReason !== '') {
@@ -46,7 +46,7 @@ export default class Sideload extends PureComponent {
install(input.type, input);
toast(this.getMessage('toasts.installed'));
window.stats.postEvent('marketplace', 'Sideload');
variables.stats.postEvent('marketplace', 'Sideload');
}
render() {
@@ -55,7 +55,7 @@ export default class Sideload extends PureComponent {
<div className='emptyMessage'>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
<LocalMall/>
<h1>{this.getMessage('modals.main.addons.sideload')}</h1>
<h1>{this.getMessage('modals.main.addons.sideload.title')}</h1>
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</button>
</div>
<Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showFailed: false })} isOpen={this.state.showFailed} className='Modal resetmodal mainModal sideloadModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

3
src/components/modals/main/settings/Checkbox.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Checkbox as CheckboxUI, FormControlLabel } from '@mui/material';
@@ -19,7 +20,7 @@ export default class Checkbox extends PureComponent {
checked: value
});
window.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {

2
src/components/modals/main/settings/Dropdown.jsx
View File

@@ -24,7 +24,7 @@ export default class Dropdown extends PureComponent {
return;
}
window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
this.setState({
value,

2
src/components/modals/main/settings/Radio.jsx
View File

@@ -32,7 +32,7 @@ export default class Radio extends PureComponent {
value
});
window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {

2
src/components/modals/main/settings/ResetModal.jsx
View File

@@ -4,7 +4,7 @@ import { setDefaultSettings } from 'modules/helpers/settings';
export default function ResetModal({ modalClose }) {
const reset = () => {
window.stats.postEvent('setting', 'Reset');
variables.stats.postEvent('setting', 'Reset');
setDefaultSettings('reset');
window.location.reload();
};

3
src/components/modals/main/settings/Switch.jsx
View File

@@ -1,3 +1,4 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
@@ -19,7 +20,7 @@ export default class Switch extends PureComponent {
checked: value
});
window.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {

32
src/components/modals/main/settings/sections/About.jsx
View File

@@ -26,10 +26,10 @@ export default class About extends PureComponent {
let contributors, sponsors, photographers, versionData;
try {
versionData = await (await fetch(window.constants.GITHUB_URL + '/repos/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/releases', { signal: this.controller.signal })).json();
contributors = await (await fetch(window.constants.GITHUB_URL + '/repos/'+ window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/contributors', { signal: this.controller.signal })).json();
sponsors = (await (await fetch(window.constants.SPONSORS_URL + '/list', { signal: this.controller.signal })).json()).sponsors;
photographers = await (await fetch(window.constants.API_URL + '/images/photographers', { signal: this.controller.signal })).json();
versionData = await (await fetch(variables.constants.GITHUB_URL + '/repos/' + variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/releases', { signal: this.controller.signal })).json();
contributors = await (await fetch(variables.constants.GITHUB_URL + '/repos/'+ variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/contributors', { signal: this.controller.signal })).json();
sponsors = (await (await fetch(variables.constants.SPONSORS_URL + '/list', { signal: this.controller.signal })).json()).sponsors;
photographers = await (await fetch(variables.constants.API_URL + '/images/photographers', { signal: this.controller.signal })).json();
} catch (e) {
if (this.controller.signal.aborted === true) {
return;
@@ -48,7 +48,7 @@ export default class About extends PureComponent {
const newVersion = versionData[0].tag_name;
let update = this.getMessage('modals.main.settings.sections.about.version.no_update');
if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
if (Number(variables.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
update = `${this.getMessage('modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
}
@@ -85,22 +85,22 @@ export default class About extends PureComponent {
<>
<h2>{this.getMessage('modals.main.settings.sections.about.title')}</h2>
<img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
<p>{this.getMessage('modals.main.settings.sections.about.copyright')} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
<p>{this.getMessage('modals.main.settings.sections.about.version.title')} {window.constants.VERSION} ({this.state.update})</p>
<a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<p>{this.getMessage('modals.main.settings.sections.about.copyright')} {variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{variables.constants.COPYRIGHT_NAME}</a> ({variables.constants.COPYRIGHT_LICENSE})</p>
<p>{this.getMessage('modals.main.settings.sections.about.version.title')} {variables.constants.VERSION} ({this.state.update})</p>
<a href={variables.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<h3>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
<a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
<a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
<a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
<a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
<a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
<a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
<a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
<a href={'https://instagram.com/' + variables.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
<a href={'https://facebook.com/' + variables.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
<a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
<h3>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
<p>
<a href={'https://github.com/sponsors/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a>
&nbsp; • &nbsp;<a href={'https://ko-fi.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a>
&nbsp; • &nbsp;<a href={'https://patreon.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
<a href={'https://github.com/sponsors/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a>
&nbsp; • &nbsp;<a href={'https://ko-fi.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a>
&nbsp; • &nbsp;<a href={'https://patreon.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
</p>
<h3>{this.getMessage('modals.main.settings.sections.about.resources_used.title')}</h3>

3
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -54,7 +54,8 @@ export default function AppearanceSettings() {
<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true}
display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />
</>
);
}

2
src/components/modals/main/settings/sections/Changelog.jsx
View File

@@ -19,7 +19,7 @@ export default class Changelog extends PureComponent {
}
async getUpdate() {
const data = await (await fetch(window.constants.BLOG_POST + '/index.json', { signal: this.controller.signal })).json();
const data = await (await fetch(variables.constants.BLOG_POST + '/index.json', { signal: this.controller.signal })).json();
if (this.controller.signal.aborted === true) {
return;

9
src/components/modals/main/settings/sections/Experimental.jsx
View File

@@ -5,14 +5,13 @@ import Slider from '../Slider';
import EventBus from 'modules/helpers/eventbus';
export default function ExperimentalSettings() {
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.experimental.title')}</h2>
<p>{getMessage(languagecode, 'modals.main.settings.sections.experimental.warning')}</p>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.experimental.developer')}</h3>
<h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
<p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
<h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
<Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
<Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
<br/>

35
src/components/modals/main/settings/sections/Keybinds.jsx
View File

@@ -5,8 +5,7 @@ import Switch from '../Switch';
import KeybindInput from '../KeybindInput';
export default class KeybindSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
@@ -22,7 +21,7 @@ export default class KeybindSettings extends PureComponent {
listen(type) {
const currentKeybinds = this.state.keybinds;
currentKeybinds[type] = this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.recording');
currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording');
this.setState({
keybinds: currentKeybinds
});
@@ -98,32 +97,30 @@ export default class KeybindSettings extends PureComponent {
}
render() {
const { getMessage, languagecode } = this;
return (
<>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.keybinds.title')}</h2>
<Switch name='keybindsEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} element='.other' />
<h2>{this.getMessage('modals.main.settings.sections.keybinds.title')}</h2>
<Switch name='keybindsEnabled' text={this.getMessage('modals.main.settings.enabled')} element='.other' />
<table className='keybind-table'>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
</tr>
</table>
</>

15
src/components/modals/main/settings/sections/Language.jsx
View File

@@ -5,15 +5,14 @@ import Radio from '../Radio';
const languages = require('modules/languages.json');
export default class BackgroundSettings extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
export default class LanguageSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
quoteLanguages: [{
name: this.getMessage(this.languagecode, 'modals.main.loading'),
name: this.getMessage('modals.main.loading'),
value: 'loading'
}]
};
@@ -21,7 +20,7 @@ export default class BackgroundSettings extends PureComponent {
}
async getQuoteLanguages() {
const data = await (await fetch(window.constants.API_URL + '/quotes/languages', { signal: this.controller.signal })).json();
const data = await (await fetch(variables.constants.API_URL + '/quotes/languages', { signal: this.controller.signal })).json();
if (this.controller.signal.aborted === true) {
return;
@@ -44,7 +43,7 @@ export default class BackgroundSettings extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return this.setState({
quoteLanguages: [{
name: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description'),
name: this.getMessage('modals.main.marketplace.offline.description'),
value: 'loading'
}]
});
@@ -61,9 +60,9 @@ export default class BackgroundSettings extends PureComponent {
render() {
return (
<>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}</h2>
<h2>{this.getMessage('modals.main.settings.sections.language.title')}</h2>
<Radio name='language' options={languages} element='.other' />
<h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.quote')}</h3>
<h3>{this.getMessage('modals.main.settings.sections.language.quote')}</h3>
<Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
</>
);

2
src/components/modals/main/settings/sections/Order.jsx
View File

@@ -70,7 +70,7 @@ export default class OrderSettings extends PureComponent {
componentDidUpdate() {
localStorage.setItem('order', JSON.stringify(this.state.items));
window.stats.postEvent('setting', 'Widget order');
variables.stats.postEvent('setting', 'Widget order');
EventBus.dispatch('refresh', 'widgets');
}

2
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -88,7 +88,7 @@ export default class QuoteSettings extends PureComponent {
<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' 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/>

3
src/components/modals/main/settings/sections/Search.jsx
View File

@@ -5,7 +5,6 @@ import { toast } from 'react-toastify';
import Header from '../Header';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Radio from '../Radio';
import EventBus from 'modules/helpers/eventbus';
@@ -74,8 +73,6 @@ export default class SearchSettings extends PureComponent {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} category='widgets'/>
<h2>{this.getMessage('modals.main.settings.sections.search.title')}</h2>
<Switch name='searchBar' text={this.getMessage('modals.main.settings.enabled')} category='widgets' />
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>

2
src/components/modals/main/settings/sections/Weather.jsx
View File

@@ -33,7 +33,7 @@ export default class TimeSettings extends PureComponent {
getAuto() {
navigator.geolocation.getCurrentPosition(async (position) => {
const data = await (await fetch(`${window.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`)).json();
const data = await (await fetch(`${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`)).json();
this.setState({
location: data[0].name
});

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

@@ -29,7 +29,7 @@ export default class BackgroundSettings extends PureComponent {
}
async getBackgroundCategories() {
const data = await (await fetch(window.constants.API_URL + '/images/categories', { signal: this.controller.signal })).json();
const data = await (await fetch(variables.constants.API_URL + '/images/categories', { signal: this.controller.signal })).json();
if (this.controller.signal.aborted === true) {
return;

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

@@ -100,7 +100,7 @@ export default class ColourSettings extends PureComponent {
return newState;
});
window.stats.postEvent('setting', 'Changed backgroundtype from colour to gradient');
variables.stats.postEvent('setting', 'Changed backgroundtype from colour to gradient');
}
currentGradientSettings = () => {

2
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -96,7 +96,7 @@ 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'/>
<input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false}/>
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<Cancel/>
</button> : null}

2
src/components/modals/main/tabs/Addons.jsx
View File

@@ -11,7 +11,7 @@ export default function Addons() {
return (
<Tabs>
<div label={getMessage('modals.main.addons.added')} name='added'><Added/></div>
<div label={getMessage('modals.main.addons.sideload')} name='sideload'><Sideload/></div>
<div label={getMessage('modals.main.addons.sideload.title')} name='sideload'><Sideload/></div>
<div label={getMessage('modals.main.addons.create.title')} name='create'><Create/></div>
</Tabs>
);

30
src/components/modals/main/tabs/Settings.jsx
View File

@@ -1,25 +1,25 @@
import variables from 'modules/variables';
import Tabs from './backend/Tabs';
import About from '../settings/sections/About';
import Language from '../settings/sections/Language';
import Search from '../settings/sections/Search';
import Navbar from '../settings/sections/Navbar';
import Greeting from '../settings/sections/Greeting';
import Time from '../settings/sections/Time';
import Quote from '../settings/sections/Quote';
import Appearance from '../settings/sections/Appearance';
import Background from '../settings/sections/background/Background';
import Advanced from '../settings/sections/Advanced';
import Changelog from '../settings/sections/Changelog';
import Order from '../settings/sections/Order';
import Experimental from '../settings/sections/Experimental';
import QuickLinks from '../settings/sections/QuickLinks';
import Weather from '../settings/sections/Weather';
import Stats from '../settings/sections/Stats';
import Keybinds from '../settings/sections/Keybinds';
import Message from '../settings/sections/Message';
import Quote from '../settings/sections/Quote';
import Date from '../settings/sections/Date';
import Navbar from '../settings/sections/Navbar';
import Message from '../settings/sections/Message';
import Background from '../settings/sections/background/Background';
import Search from '../settings/sections/Search';
import Weather from '../settings/sections/Weather';
import Order from '../settings/sections/Order';
import Appearance from '../settings/sections/Appearance';
import Language from '../settings/sections/Language';
import Advanced from '../settings/sections/Advanced';
import Keybinds from '../settings/sections/Keybinds';
import Stats from '../settings/sections/Stats';
import Experimental from '../settings/sections/Experimental';
import Changelog from '../settings/sections/Changelog';
import About from '../settings/sections/About';
export default function Settings() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

39
src/components/modals/main/tabs/backend/Tab.jsx
View File

@@ -4,28 +4,30 @@ import {
SettingsRounded as Settings,
Widgets as Addons,
ShoppingBasket as Marketplace,
AccessAlarm as Time,
MenuOutlined as Navbar,
EmojiPeopleOutlined as Greeting,
AccessAlarm as Time,
FormatQuoteOutlined as Quote,
Link as QuickLinks,
DateRangeOutlined as Date,
SmsOutlined as Message,
PhotoOutlined as Background,
Search,
CloudOutlined as Weather,
List as Order,
FormatPaintOutlined as Appearance,
Translate as Language,
SettingsOutlined as Advanced,
BugReportOutlined as Experimental,
KeyboardAltOutlined as Keybinds,
AssessmentOutlined as Stats,
NewReleasesOutlined as Changelog,
InfoOutlined as About,
BugReportOutlined as Experimental,
List as Order,
CloudOutlined as Weather,
SettingsOutlined as Advanced,
Link as QuickLinks,
SmsOutlined as Message,
AssessmentOutlined as Stats,
Code as Sideload,
AddCircleOutline as Added,
CreateNewFolderOutlined as Create,
KeyboardAltOutlined as Keybinds,
DateRangeOutlined as Date,
MenuOutlined as Navbar
CreateNewFolderOutlined as Create
} from '@mui/icons-material';
function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -50,17 +52,18 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
case getMessage('modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
case getMessage('modals.main.settings.sections.appearance.navbar.title'): icon = <Navbar/>; break;
case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;
case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
case getMessage('modals.main.settings.sections.language.title'): icon = <Language/>; divider = true; break;
case getMessage('modals.main.settings.sections.advanced.title'): icon = <Advanced/>; break;
case getMessage('modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
@@ -70,7 +73,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
case getMessage('modals.main.settings.sections.about.title'): icon = <About/>; break;
case getMessage('modals.main.addons.added'): icon = <Added/>; break;
case getMessage('modals.main.addons.sideload'): icon = <Sideload/>; break;
case getMessage('modals.main.addons.sideload.title'): icon = <Sideload/>; break;
case getMessage('modals.main.addons.create.title'): icon = <Create/>; break;
case getMessage('modals.main.marketplace.photo_packs'): icon = <Background/>; break;

2
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@@ -16,7 +16,7 @@ export default class Tabs extends PureComponent {
onClick = (tab, name) => {
if (name !== this.state.currentName) {
window.stats.postEvent('tab', `Opened ${name}`);
variables.stats.postEvent('tab', `Opened ${name}`);
}
this.setState({

6
src/components/modals/welcome/WelcomeSections.jsx
View File

@@ -123,7 +123,7 @@ export default class WelcomeSections extends PureComponent {
const chooseLanguage = (
<>
<h1>{this.getMessage('modals.welcome.sections.language.title')}</h1>
<p>{this.getMessage('modals.welcome.sections.language.description')} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
<p>{this.getMessage('modals.welcome.sections.language.description')} <a href={variables.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
<Radio name='language' options={languages} category='welcomeLanguage'/>
</>
);
@@ -178,9 +178,9 @@ export default class WelcomeSections extends PureComponent {
<Checkbox name='ddgProxy' text={this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage('modals.main.settings.sections.background.title') + ')'}/>
<p>{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}</p>
<h3 className='quicktip'>{this.getMessage('modals.welcome.sections.privacy.links.title')}</h3>
<a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<a className='privacy' href={variables.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<br/><br/>
<a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.source_code')}</a>
<a className='privacy' href={'https://github.com/' + variables.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage('modals.welcome.sections.privacy.links.source_code')}</a>
</>
);