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

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;