import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
import KeybindInput from '../KeybindInput';
export default class KeybindSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
this.state = {
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
cancelled: false,
};
}
showReminder() {
document.querySelector('.reminder-info').style.display = 'none';
return localStorage.setItem('showReminder', false);
}
listen(type) {
const currentKeybinds = this.state.keybinds;
currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording');
this.setState({
keybinds: currentKeybinds,
cancelled: false,
});
this.forceUpdate();
let keys = '';
let previouskey = '';
this.keydown = document.addEventListener('keydown', (event) => {
if (event.key === previouskey && this.state.cancelled === true) {
return;
}
if (keys === '') {
keys = event.key;
} else {
keys = `${keys}+${event.key}`;
}
previouskey = event.key;
});
this.keyup = document.addEventListener('keyup', () => {
if (this.state.cancelled === true) {
return;
}
document.removeEventListener('keydown', this.keydown);
const keybinds = this.state.keybinds;
keybinds[type] = keys.split('+').slice(0, 4).join('+');
localStorage.setItem('keybinds', JSON.stringify(keybinds));
this.setState({
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
});
});
document.removeEventListener('keyup', this.keyup);
this.showReminder();
}
cancel(type) {
document.removeEventListener('keydown', this.keydown);
document.removeEventListener('keyup', this.keyup);
const currentKeybinds = this.state.keybinds;
delete currentKeybinds[type];
this.setState({
keybinds: currentKeybinds,
cancelled: true,
});
this.forceUpdate();
}
reset(type) {
const keybinds = this.state.keybinds;
keybinds[type] = '';
localStorage.setItem('keybinds', JSON.stringify(keybinds));
this.setState({
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
cancelled: true,
});
this.showReminder();
}
action(action, e) {
switch (action) {
case 'listen':
this.listen(e);
break;
case 'cancel':
this.cancel(e);
break;
case 'reset':
this.reset(e);
break;
default:
break;
}
}
render() {
return (
<>
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|