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

fix(search): replace createRef with useRef for microphone icon

Browse Source
This commit is contained in:
alexsparkes
2026-01-24 14:39:35 +00:00
parent 17bbdeb7b9
commit 64f69bbbbd
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/features/search/Search.jsx
View File

@@ -1,9 +1,11 @@
/* global chrome */ /* global chrome */
import variables from 'config/variables'; import variables from 'config/variables';
import { memo, createRef, useEffect, useState, useCallback } from 'react'; import { memo, useRef, useEffect, useState, useCallback } from 'react';
import { MdSearch, MdMic } from 'react-icons/md'; import { MdSearch, MdMic } from 'react-icons/md';
import { Tooltip } from 'components/Elements'; import { Tooltip } from 'components/Elements';
import EventBus from 'utils/eventbus';
import './search.scss'; import './search.scss';
function Search() { function Search() {
@@ -12,7 +14,7 @@ function Search() {
localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons', localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons',
); );
const micIcon = createRef(); const micIcon = useRef(null);
const startSpeechRecognition = useCallback(() => { const startSpeechRecognition = useCallback(() => {
const voiceSearch = new window.webkitSpeechRecognition(); const voiceSearch = new window.webkitSpeechRecognition();
@@ -64,8 +66,10 @@ function Search() {
<MdMic className="micIcon" /> <MdMic className="micIcon" />
</button>, </button>,
); );
} else {
setMicrophone(null);
} }
}, [micIcon, startSpeechRecognition]); }, [startSpeechRecognition]);
useEffect(() => { useEffect(() => {
init(); init();
@@ -75,6 +79,12 @@ function Search() {
element.focus(); element.focus();
} }
} }
EventBus.on('refresh', (data) => {
if (data === 'search') {
init();
}
});
}, [init]); }, [init]);
function searchButton(e) { function searchButton(e) {

71
src/features/search/options/SearchOptions.jsx
View File

@@ -6,47 +6,48 @@ import { Checkbox } from 'components/Form/Settings';
import EventBus from 'utils/eventbus'; import EventBus from 'utils/eventbus';
const SearchOptions = () => { const SEARCH_SECTION = 'modals.main.settings.sections.search';
const SEARCH_SECTION = 'modals.main.settings.sections.search';
const ChromePolicyWarning = () => { const ChromePolicyWarning = () => {
return ( return (
<div className="itemWarning" style={{ marginBottom: '20px' }}> <div className="itemWarning" style={{ marginBottom: '20px' }}>
<MdOutlineWarning /> <MdOutlineWarning />
<div className="text"> <div className="text">
<span className="header">Search Engine Selection Removed</span> <span className="header">Search Engine Selection Removed</span>
<span>{variables.getMessage(`${SEARCH_SECTION}.chrome_policy_warning`)}</span> <span>{variables.getMessage(`${SEARCH_SECTION}.chrome_policy_warning`)}</span>
</div>
</div> </div>
); </div>
}; );
};
const AdditionalOptions = () => { const AdditionalOptions = () => {
return ( return (
<Row final={true}> <Row final={true}>
<Content <Content
title={variables.getMessage('modals.main.settings.additional_settings')} title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)} subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
/> />
<Action> <Action>
{/* not supported on firefox */} {/* not supported on firefox */}
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? ( {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
<Checkbox
name="voiceSearch"
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
category="search"
/>
) : null}
<Checkbox <Checkbox
name="searchFocus" name="voiceSearch"
text={variables.getMessage(`${SEARCH_SECTION}.focus`)} text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
category="search" category="search"
element=".other"
/> />
</Action> ) : null}
</Row> <Checkbox
); name="searchFocus"
}; text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
category="search"
element=".other"
/>
</Action>
</Row>
);
};
const SearchOptions = () => {
return ( return (
<> <>