Skip to content

Commit a570289

Browse files
mohdashraf010897mohdashraf010897
authored
Merge pull request #2215 from appbaseio/fix/vue-voice-search
Fix/vue voice search
2 parents 1a5c981 + 94d9d20 commit a570289

File tree

7 files changed

+343
-355
lines changed

7 files changed

+343
-355
lines changed

‎packages/vue/src/components/search/addons/Mic.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Mic = {
6363
}
6464
this.instance = new SpeechRecognition();
6565
this.instance.continuous = true;
66-
this.instance.interimResults = true;
66+
this.instance.interimResults = false;
6767
this.instance.lang = lang;
6868
if (getInstance) {
6969
getInstance(this.instance);
@@ -112,12 +112,12 @@ const Mic = {
112112
const { className } = this.$props;
113113
switch (status) {
114114
case STATUS.active:
115-
return <ListenSvg className={className} nativeOnClick={this.handleClick} />;
115+
return <ListenSvg className={className} onClick={this.handleClick} />;
116116
case STATUS.stopped:
117117
case STATUS.denied:
118-
return <MuteSvg className={className} nativeOnClick={this.handleClick} />;
118+
return <MuteSvg className={className} onClick={this.handleClick} />;
119119
default:
120-
return <MicSvg className={className} nativeOnClick={this.handleClick} />;
120+
return <MicSvg className={className} onClick={this.handleClick} />;
121121
}
122122
},
123123
},

‎packages/vue/src/components/shared/ListenSvg.css‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {
2+
0% {
3+
opacity: 0;
4+
}
5+
13.89% {
6+
opacity: 1;
7+
}
8+
100% {
9+
opacity: 1;
10+
}
11+
}
12+
@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {
13+
0% {
14+
opacity: 0;
15+
}
16+
13.89% {
17+
opacity: 1;
18+
}
19+
100% {
20+
opacity: 1;
21+
}
22+
}
23+
@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {
24+
0% {
25+
opacity: 0;
26+
}
27+
27.78% {
28+
opacity: 1;
29+
}
30+
100% {
31+
opacity: 1;
32+
}
33+
}
34+
@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {
35+
0% {
36+
opacity: 0;
37+
}
38+
27.78% {
39+
opacity: 1;
40+
}
41+
100% {
42+
opacity: 1;
43+
}
44+
}
45+
@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {
46+
0% {
47+
opacity: 0;
48+
}
49+
41.67% {
50+
opacity: 1;
51+
}
52+
100% {
53+
opacity: 1;
54+
}
55+
}
56+
@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {
57+
0% {
58+
opacity: 0;
59+
}
60+
41.67% {
61+
opacity: 1;
62+
}
63+
100% {
64+
opacity: 1;
65+
}
66+
}
67+
@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {
68+
0% {
69+
opacity: 0;
70+
}
71+
55.56% {
72+
opacity: 1;
73+
}
74+
100% {
75+
opacity: 1;
76+
}
77+
}
78+
@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {
79+
0% {
80+
opacity: 0;
81+
}
82+
55.56% {
83+
opacity: 1;
84+
}
85+
100% {
86+
opacity: 1;
87+
}
88+
}
89+
@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {
90+
0% {
91+
opacity: 0;
92+
}
93+
69.44% {
94+
opacity: 1;
95+
}
96+
100% {
97+
opacity: 1;
98+
}
99+
}
100+
@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {
101+
0% {
102+
opacity: 0;
103+
}
104+
69.44% {
105+
opacity: 1;
106+
}
107+
100% {
108+
opacity: 1;
109+
}
110+
}
111+
@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {
112+
0% {
113+
opacity: 0;
114+
}
115+
83.33% {
116+
opacity: 1;
117+
}
118+
100% {
119+
opacity: 1;
120+
}
121+
}
122+
@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {
123+
0% {
124+
opacity: 0;
125+
}
126+
83.33% {
127+
opacity: 1;
128+
}
129+
100% {
130+
opacity: 1;
131+
}
132+
}
133+
@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {
134+
0% {
135+
opacity: 0;
136+
}
137+
97.22% {
138+
opacity: 1;
139+
}
140+
100% {
141+
opacity: 1;
142+
}
143+
}
144+
@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {
145+
0% {
146+
opacity: 0;
147+
}
148+
97.22% {
149+
opacity: 1;
150+
}
151+
100% {
152+
opacity: 1;
153+
}
154+
}
155+
#el_hiibMG0x- * {
156+
-webkit-animation-duration: 1.2s;
157+
animation-duration: 1.2s;
158+
-webkit-animation-iteration-count: infinite;
159+
animation-iteration-count: infinite;
160+
-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
161+
animation-timing-function: cubic-bezier(0, 0, 1, 1);
162+
}
163+
#el_QJeJ_2CDw5 {
164+
stroke: none;
165+
stroke-width: 1;
166+
fill: none;
167+
}
168+
#el_UYYCfubTRf {
169+
-webkit-transform: translate(163px, 123px);
170+
transform: translate(163px, 123px);
171+
}
172+
#el_uzZNtK32Zi {
173+
fill: #d8d8d8;
174+
}
175+
#el_EYKQ2N9Kgy {
176+
fill: #d8d8d8;
177+
}
178+
#el_6SDP2LAgKC {
179+
-webkit-transform: translate(37.846924px, 0px);
180+
transform: translate(37.846924px, 0px);
181+
}
182+
#el_-Vm65Ltfy7 {
183+
fill: #0B6AFF;
184+
}
185+
#el_q04iZcSim4 {
186+
fill: #d8d8d8;
187+
}
188+
#el_6WKby7wXqV {
189+
-webkit-transform: translate(37.846924px, 0px);
190+
transform: translate(37.846924px, 0px);
191+
-webkit-animation-fill-mode: backwards;
192+
animation-fill-mode: backwards;
193+
opacity: 0;
194+
-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;
195+
animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;
196+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
197+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
198+
}
199+
#el_9bggsfQOtU {
200+
fill: #0B6AFF;
201+
}
202+
#el_NKxqi9eIym {
203+
fill: #d8d8d8;
204+
}
205+
#el_Wi-my975tM {
206+
-webkit-transform: translate(37.846924px, 0px);
207+
transform: translate(37.846924px, 0px);
208+
-webkit-animation-fill-mode: backwards;
209+
animation-fill-mode: backwards;
210+
opacity: 0;
211+
-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;
212+
animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;
213+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
214+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
215+
}
216+
#el_zclQ34fvf7 {
217+
fill: #0B6AFF;
218+
}
219+
#el_1OsvRT8HkeZ {
220+
fill: #d8d8d8;
221+
}
222+
#el_DkfFFTaFxy8 {
223+
-webkit-transform: translate(37.846924px, 0px);
224+
transform: translate(37.846924px, 0px);
225+
-webkit-animation-fill-mode: backwards;
226+
animation-fill-mode: backwards;
227+
opacity: 0;
228+
-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;
229+
animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;
230+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
231+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
232+
}
233+
#el_aa9sjx4H0vA {
234+
fill: #0B6AFF;
235+
}
236+
#el_tea114vWg0J {
237+
fill: #d8d8d8;
238+
}
239+
#el_34IgwiMB5rf {
240+
-webkit-transform: translate(37.846924px, 0px);
241+
transform: translate(37.846924px, 0px);
242+
-webkit-animation-fill-mode: backwards;
243+
animation-fill-mode: backwards;
244+
opacity: 0;
245+
-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;
246+
animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;
247+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
248+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
249+
}
250+
#el_z5u6RAFhx7d {
251+
fill: #0B6AFF;
252+
}
253+
#el_7nfuWmA5Uhy {
254+
fill: #d8d8d8;
255+
}
256+
#el_DeebuCsPTGA {
257+
-webkit-transform: translate(37.846924px, 0px);
258+
transform: translate(37.846924px, 0px);
259+
-webkit-animation-fill-mode: backwards;
260+
animation-fill-mode: backwards;
261+
opacity: 0;
262+
-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;
263+
animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;
264+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
265+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
266+
}
267+
#el__ZcqlS20zcw {
268+
fill: #0B6AFF;
269+
}
270+
#el_8DnEQnD7VWV {
271+
fill: #d8d8d8;
272+
}
273+
#el_ZOjjrPTvyrv {
274+
-webkit-transform: translate(37.846924px, 0px);
275+
transform: translate(37.846924px, 0px);
276+
-webkit-animation-fill-mode: backwards;
277+
animation-fill-mode: backwards;
278+
opacity: 0;
279+
-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;
280+
animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;
281+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
282+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
283+
}
284+
#el_FYYKCI_u24e {
285+
fill: #0B6AFF;
286+
}
287+
#el_XZty4MnTp5Y {
288+
fill: #d8d8d8;
289+
}
290+
#el_2FATegVmf0K {
291+
-webkit-transform: translate(37.846924px, 0px);
292+
transform: translate(37.846924px, 0px);
293+
-webkit-animation-fill-mode: backwards;
294+
animation-fill-mode: backwards;
295+
opacity: 0;
296+
-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;
297+
animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;
298+
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
299+
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
300+
}
301+
#el_RMT1KUfbdF8 {
302+
fill: #0B6AFF;
303+
}
304+
#el_RgLcovvFiO1 {
305+
fill: #d8d8d8;
306+
}

0 commit comments

Comments
 (0)