2020-08-26 13:32:52 +00:00
|
|
|
import React from 'react';
|
|
|
|
import SearchIcon from '@material-ui/icons/Search';
|
2020-10-13 14:30:53 +00:00
|
|
|
import MicIcon from '@material-ui/icons/Mic';
|
|
|
|
|
2020-11-29 14:32:08 +00:00
|
|
|
import './search.scss';
|
|
|
|
|
|
|
|
const searchEngines = require('./search_engines.json');
|
2020-08-26 13:32:52 +00:00
|
|
|
|
|
|
|
export default class Search extends React.PureComponent {
|
2020-10-13 14:30:53 +00:00
|
|
|
constructor(...args) {
|
|
|
|
super(...args);
|
|
|
|
this.state = {
|
|
|
|
url: '',
|
|
|
|
query: ''
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
startSpeechRecognition() {
|
|
|
|
const voiceSearch = new window.webkitSpeechRecognition();
|
|
|
|
voiceSearch.start();
|
2021-01-16 18:39:03 +00:00
|
|
|
const searchText = document.getElementById('searchtext');
|
|
|
|
voiceSearch.onresult = (event) => searchText.value = event.results[0][0].transcript;
|
|
|
|
voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + searchText.value, 1000);
|
2020-10-13 14:30:53 +00:00
|
|
|
}
|
|
|
|
|
2020-08-26 13:32:52 +00:00
|
|
|
render() {
|
|
|
|
let url;
|
|
|
|
let query = 'q';
|
|
|
|
|
2020-09-19 13:53:33 +00:00
|
|
|
const setting = localStorage.getItem('searchEngine');
|
|
|
|
const info = searchEngines.find(i => i.settingsName === setting);
|
2020-09-23 09:48:23 +00:00
|
|
|
if (info !== undefined) {
|
|
|
|
url = info.url;
|
|
|
|
if (info.query) query = info.query;
|
|
|
|
}
|
2020-08-26 13:32:52 +00:00
|
|
|
|
2020-11-05 16:01:31 +00:00
|
|
|
if (setting === 'custom') url = localStorage.getItem('customSearchEngine');
|
2020-09-18 11:58:37 +00:00
|
|
|
|
2020-08-26 13:32:52 +00:00
|
|
|
const searchButton = () => {
|
2020-10-11 15:54:07 +00:00
|
|
|
const value = document.getElementById('searchtext').value || 'mue fast';
|
2020-09-16 11:32:09 +00:00
|
|
|
window.location.href = url + `?${query}=` + value;
|
2020-09-15 21:38:32 +00:00
|
|
|
};
|
2020-08-26 13:32:52 +00:00
|
|
|
|
2020-10-13 14:30:53 +00:00
|
|
|
let microphone = null;
|
|
|
|
if (localStorage.getItem('voiceSearch') === 'true') {
|
|
|
|
this.setState({
|
|
|
|
url: url,
|
|
|
|
query: query
|
|
|
|
});
|
|
|
|
microphone = <MicIcon className='micIcon' onClick={() => this.startSpeechRecognition()}/>;
|
|
|
|
}
|
|
|
|
|
2020-09-16 10:43:58 +00:00
|
|
|
return (
|
2021-01-16 18:39:03 +00:00
|
|
|
<div id='searchBar'>
|
|
|
|
<form action={url}>
|
2020-10-13 16:50:22 +00:00
|
|
|
{microphone}
|
2020-10-13 14:30:53 +00:00
|
|
|
<SearchIcon onClick={() => searchButton()} id='searchButton' />
|
2020-08-26 13:32:52 +00:00
|
|
|
<input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>
|
|
|
|
<div className='blursearcbBG'/>
|
|
|
|
</form>
|
|
|
|
</div>
|
2020-09-16 10:43:58 +00:00
|
|
|
);
|
2020-08-26 13:32:52 +00:00
|
|
|
}
|
2020-10-15 14:23:01 +00:00
|
|
|
}
|