feat: keybinds (WIP)

src/components/modals/main/settings/sections/Keybinds.jsx

@@ -0,0 +1,82 @@
+import { PureComponent } from 'react';
+
+import Checkbox from '../Checkbox';
+
+export default class KeybindSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  listen(type) {
+    let currentKeybinds = this.state.keybinds;
+    currentKeybinds[type] = 'Recording...';
+    this.setState({
+      keybinds: currentKeybinds
+    });
+    this.forceUpdate();
+
+    let keys = '';
+    const keydown = document.addEventListener('keydown', (event) => {
+      if (keys === '') {
+        keys = event.key;
+      } else {
+        keys = `${keys}+${event.key}`;
+      }
+    });
+
+    const keyup = document.addEventListener('keyup', () => {
+      document.removeEventListener('keydown', keydown);
+      let keybinds = this.state.keybinds;
+      keybinds[type] = keys;
+      localStorage.setItem('keybinds', JSON.stringify(keybinds));
+      this.setState({
+        keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+      });
+    });
+
+    document.removeEventListener('keyup', keyup);
+
+    document.querySelector('.reminder-info').style.display = 'block';
+    return localStorage.setItem('showReminder', true);
+  }
+
+  reset(type) {
+    let keybinds = this.state.keybinds;
+    keybinds[type] = '';
+    localStorage.setItem('keybinds', JSON.stringify(keybinds));
+    this.setState({
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+    });
+
+    document.querySelector('.reminder-info').style.display = 'block';
+    return localStorage.setItem('showReminder', true);
+  }
+
+  render() {
+    return (
+      <>
+        <h2>Keybinds</h2>
+        <Checkbox name='keybindsEnabled' text='Enabled' element='.other' />
+        <div className='keybind'>
+          <p>Favourite Background</p>
+          <input type='text' onClick={() => this.listen('favouriteBackground')} value={this.state.keybinds['favouriteBackground'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('favouriteBackground')}>Reset</span>
+        </div>
+        <div className='keybind'>
+          <p>Maximise Background</p>
+          <input type='text' onClick={() => this.listen('maximiseBackground')} value={this.state.keybinds['maximiseBackground'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('maximiseBackground')}>Reset</span>
+        </div>
+        <div className='keybind'>
+          <p>Pin Notes</p>
+          <input type='text' onClick={() => this.listen('pinNotes')} value={this.state.keybinds['pinNotes'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('pinNotes')}>Reset</span>
+        </div>
+      </>
+    );
+  }
+}

src/components/modals/main/tabs/Settings.jsx

@@ -15,6 +15,7 @@ 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';
 
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
@@ -34,6 +35,7 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
+        <div label='Keybinds' name='keybinds'><Keybinds/></div>
         <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -20,7 +20,8 @@ import {
   AssessmentOutlined as Stats,
   Code as Sideload,
   AddCircleOutline as Added,
-  CreateNewFolderOutlined as Create
+  CreateNewFolderOutlined as Create,
+  KeyboardAltOutlined as Keybinds
 } from '@material-ui/icons';
 
 function Tab(props) {
@@ -58,6 +59,7 @@ function Tab(props) {
     case settings.order.title: icon = <Order/>; break;
     case settings.language.title: icon = <Language/>; divider = true; break;
     case settings.advanced.title: icon = <Advanced/>; break;
+    case 'Keybinds': icon = <Keybinds/>; break;
     case settings.stats.title: icon = <Stats/>; break;
     case settings.experimental.title: icon = <Experimental/>; divider = true; break;
     case settings.changelog: icon = <Changelog/>; break;

src/components/widgets/background/Favourite.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { Star, StarBorder } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
@@ -55,6 +56,16 @@ export default class Favourite extends PureComponent {
       return null;
     }
 
-    return <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
+    const favourite = <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
+
+    if (window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.favouriteBackground} onKeyDown={() => this.favourite()}>
+          {favourite}
+        </Hotkeys>
+      );
+    } else {
+      return favourite;
+    }
   }
 }

src/components/widgets/background/Maximise.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { Fullscreen } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
@@ -54,10 +55,20 @@ export default class Maximise extends PureComponent {
   }
 
   render() {
-    return (
+    const maximise = (
       <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
         <Fullscreen onClick={this.maximise} className='topicons' />
       </Tooltip>
     );
+
+    if (window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.maximiseBackground} onKeyDown={() => this.maximise()}>
+          {maximise}
+        </Hotkeys>
+      );
+    } else {
+      return maximise;
+    }
   }
 }

src/components/widgets/navbar/Notes.jsx

@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
 import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import { toast } from 'react-toastify';
+import Hotkeys from 'react-hot-keys';
 
 export default class Notes extends PureComponent {
   constructor() {
@@ -49,8 +50,8 @@ export default class Notes extends PureComponent {
   }
 
   render() {
-    return (
-      <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
+    const notes = (
+        <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
         <div className='topbarnotes'>
           <NotesRounded/>
           <h3>{this.language.title}</h3>
@@ -60,5 +61,15 @@ export default class Notes extends PureComponent {
         <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
       </span>
     );
+    
+    if (window.keybinds.pinNotes && window.keybinds.pinNotes !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.pinNotes} onKeyDown={() => this.pin()}>
+          {notes}
+        </Hotkeys>
+      );
+    } else {
+      return notes;
+    }
   }
 }

src/index.js

@@ -37,6 +37,12 @@ if (localStorage.getItem('stats') === 'true') {
   };
 }
 
+if (localStorage.getItem('keybindsEnabled') === 'true') {
+  window.keybinds = JSON.parse(localStorage.getItem('keybinds') || '{}');
+} else {
+  window.keybinds = {};
+}
+
 render(
   <App/>,
   document.getElementById('root')