add experimental voice search feature

src/components/modals/Settings.jsx

@@ -103,6 +103,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='view' text={this.props.language.experimental.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
             <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
+            <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} />
           </Section>
           <LanguageSettings language={this.props.language} />
 

src/components/widgets/Greeting.jsx

@@ -6,7 +6,7 @@ export default class Greeting extends React.PureComponent {
     this.state = {
       greeting: ''
     };
- }
+  }
 
   doEvents(time, message) {
     if (localStorage.getItem('events') === 'false') return message;

src/components/widgets/Search.jsx

@@ -1,8 +1,26 @@
 import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
+import MicIcon from '@material-ui/icons/Mic';
+
 const searchEngines = require('../../modules/searchEngines.json');
 
 export default class Search extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      url: '',
+      query: ''
+    };
+  }
+
+  startSpeechRecognition() {
+    if (localStorage.getItem('voiceSearch') === 'false') return;
+    const voiceSearch = new window.webkitSpeechRecognition();
+    voiceSearch.start();
+    voiceSearch.onresult = (event) => document.getElementById('searchtext').value = event.results[0][0].transcript;
+    voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + document.getElementById('searchtext').value, 1000);
+  }
+
   render() {
     if (localStorage.getItem('searchBar') === 'false') return null;
 
@@ -24,10 +42,20 @@ export default class Search extends React.PureComponent {
       window.location.href = url + `?${query}=` + value;
     };
 
+    let microphone = null;
+    if (localStorage.getItem('voiceSearch') === 'true') {
+      this.setState({
+        url: url,
+        query: query
+      });
+      microphone = <MicIcon className='micIcon' onClick={() => this.startSpeechRecognition()}/>;
+    }
+
     return (
       <div id='searchBar' className='searchbar'>
         <form id='searchBar' className='searchbarform' action={url}>
-            <SearchIcon onClick={() => searchButton()} />
+        {microphone}
+            <SearchIcon onClick={() => searchButton()} id='searchButton' />
             <input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>

src/scss/modules/_search.scss

@@ -37,3 +37,7 @@
 .input.searchtext {
   border: none;
 }
+
+.micIcon {
+  margin-right: 10px;
+}

src/translations/en.json

@@ -59,7 +59,8 @@
             "animations": "Animations",
             "view": "View",
             "favourite": "Favourite",
-            "refresh": "Refresh"
+            "refresh": "Refresh",
+            "voicesearch": "Voice Search"
         },
         "language": "Language",
         "apply": "Apply",