You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
71 lines
2.0 KiB
import React, { useState, useEffect } from "react"; |
|
import SpeechRecognition, { |
|
useSpeechRecognition, |
|
} from "react-speech-recognition"; |
|
import { toast } from "react-toastify"; |
|
import MicIcon from "@material-ui/icons/Mic"; |
|
import TextField from "@material-ui/core/TextField"; |
|
|
|
import line1 from "../../assets/icons/line1.png"; |
|
import line2 from "../../assets/icons/line2.png"; |
|
import arrowLeft from "../../assets/icons/arrow-left.png"; |
|
|
|
import "./Vocal.scss"; |
|
import { stat } from "fs"; |
|
|
|
const Vocal = (props: any) => { |
|
const { transcript, resetTranscript } = useSpeechRecognition(); |
|
const [flag, setFlag] = useState(false); |
|
const [pause, setPause] = useState(false); |
|
|
|
const start = () => { |
|
setPause(false); |
|
SpeechRecognition.startListening({ language: "fa_IR" }); |
|
setTimeout(() => { |
|
if (true) { |
|
SpeechRecognition.stopListening(); |
|
setPause(true); |
|
} |
|
}, 7000); |
|
}; |
|
|
|
useEffect(() => { |
|
if (!flag) { |
|
resetTranscript(); |
|
setFlag(() => true); |
|
start(); |
|
} |
|
}); |
|
|
|
useEffect(() => { |
|
props.setInputValue(() => transcript); |
|
}, [transcript]); |
|
|
|
return ( |
|
<div className="vocal-modal d-flex"> |
|
<img src={arrowLeft} className="vocal-modal__back" onClick={() => props.setVocal(false)} /> |
|
<div className="vocal-modal__content d-flex flex-column"> |
|
<div className="vocal-modal__content--toggle d-flex justify-content-center aling-items-center"> |
|
<img src={line2} onClick={(e) => start()} /> |
|
<img |
|
src={line1} |
|
style={{ transform: "translateX(5px)" }} |
|
onClick={(e) => start()} |
|
/> |
|
</div> |
|
<div className="vocal-modal__content--input"> |
|
{pause ? ( |
|
<h2> |
|
چیزی نشنیدیم :( |
|
<br /> |
|
روی آیکن موج بزنید تا دوباره امتحان کنید. |
|
</h2> |
|
) : ( |
|
<h1>در حال گوش کردن ...</h1> |
|
)} |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
export default Vocal;
|
|
|