From 7ab77e94ae36cf5e1294ae1a48338e9340f699ca Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Thu, 16 Sep 2021 01:31:16 +0430 Subject: [PATCH] reza added something --- package.json | 1 + src/assets/icons/Rectangle 60.png | Bin 0 -> 8972 bytes src/assets/icons/arrow-left.png | Bin 0 -> 567 bytes src/assets/icons/line1.png | Bin 0 -> 984 bytes src/assets/icons/line2.png | Bin 0 -> 929 bytes src/components/HomeSearchBox/index.tsx | 39 ++++---- src/components/Vocal/Vocal.scss | 74 ++++++++++++++ src/components/Vocal/Vocal.tsx | 71 +++++++++++++ src/types/comp.d.ts | 3 +- src/views/Home/Books/index.scss | 1 + src/views/Home/Courses/Course/index.scss | 4 +- src/views/Home/index.scss | 1 + src/views/Home/index.tsx | 121 ++++++++++++----------- yarn.lock | 5 + 14 files changed, 244 insertions(+), 76 deletions(-) create mode 100644 src/assets/icons/Rectangle 60.png create mode 100644 src/assets/icons/arrow-left.png create mode 100644 src/assets/icons/line1.png create mode 100644 src/assets/icons/line2.png create mode 100644 src/components/Vocal/Vocal.scss create mode 100644 src/components/Vocal/Vocal.tsx diff --git a/package.json b/package.json index ee84e32..ed21bc6 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "react-redux": "^7.2.5", "react-refresh": "^0.8.3", "react-router-dom": "^5.3.0", + "react-speech-recognition": "^3.8.2", "react-spring-3d-carousel": "^1.2.1", "react-toastify": "^8.0.2", "redux": "^4.1.1", diff --git a/src/assets/icons/Rectangle 60.png b/src/assets/icons/Rectangle 60.png new file mode 100644 index 0000000000000000000000000000000000000000..bcb274af27f47393883ba99f2692e82be9f4dc91 GIT binary patch literal 8972 zcmeAS@N?(olHy`uVBq!ia0y~yU|hq%z&wwG4JZ=-R7Dv`u@pObhHwBu4M$1`1A_vC zr;B4qMcmt~jhqY$Jj{-}|6kDZdw96CsX#O3+uo-f0tyZd2c9z}Z?Mbvuwi215U5~c zJFN^7b#OY6pqeE#iGh)cg=d;PP=ukerQx906%`er2#17@Jy3*^iIcH;>IzQ}kXD0; zI*ee?TG}Dl9xIpz2I%l=0fDCSa$_{dzf?~o3AyZCIkil%H`9~c#8e*eqY&2Jn78j!h>}ZuVT33#? zE=Jp9qYcH;ruArNWVDww+OHh#iH{Buj1H=d4nvI&+>MSXj*h{Oj#`fnr;koRj855% z&Lxe`zKzaTj!vYG+^Og4ssITF2Bz(xwE&|N_oFKchSVC21B`2ro`yoJHj L)z4*}Q$iB}n}v8# literal 0 HcmV?d00001 diff --git a/src/assets/icons/arrow-left.png b/src/assets/icons/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..70d90d454dc9207639cf5fe4e2fc0c1ca84a2c8b GIT binary patch literal 567 zcmV-70?7S|P)`F#Ew-Iq}m6}8sq z_81@E(Ef(@2ec-e&1N{C&*^>Nbn>HIF5h8r&xhetGzb#oyR+HsIi9x%1Jo;^ZcY*O zJr;liz}=Fr0RvP3s3+fsIC_A)2V76@V(OhEA~A>Dy4`NCbfr@1!oY)s5eLmj0-HeK z!a+o0>YGMveiyzM)L!cMX0CC}%J!C?_yUC^lH3P*DATe;?GY zfqrOruwpC-0@Z9bjh+M)d&QDqi^W2<+iiAQIF?ITD`vY=0*(bne`yE5Z#XuXG@KKd zB%Cvt6r2|@2{>J&*OyI3-%PCPHu>GU({s$ZIFHy~0CqrU(E002ovPDHLk FV1ksr_YeR8 literal 0 HcmV?d00001 diff --git a/src/assets/icons/line1.png b/src/assets/icons/line1.png new file mode 100644 index 0000000000000000000000000000000000000000..c2ccbb483cac09fe6ce3f86950e9738bb8205045 GIT binary patch literal 984 zcmeAS@N?(olHy`uVBq!ia0vp^X&}tO1|%)-KS=^oEX7WqAsj$Z!;#X#z`)$^>Eakt z5%+ekZ=Q&uK&!F30~3q6!v;n_hDR(MovK1f$JtoS8>AN;;N8LCe!^t@pT~LT;FaH7xf9NDAG*%i;m-7#%RpIM;W$HD3S0JS_A_QdfwLKy zXN0gu{0V-#Eu2kaci2ix#>raS_Zl6zvDND==Zuh@Z>KUITNj$;cVNk>-1R&LWov_q znbbn_s#6;_W>1|ZY_PKEwl;H5?CL9X8a$`oj+0Dy6Sedii_fY%-%hzPFJ@l1IqO;M zQs=oB-T0YbF~?K$F}ZM3}<;B>zgjsz?m8D8{d}d#;9zlzgjS# zowriY;Cz;qFsIt4Sku~@YzB$u(M<>EOt!es#$6iLBs#@FV`5ZF+9#?Ff}($yh}#ealXcr+NH{G-^=Il z?YBD~bD-jj7VGEOp!qMK?o+nN&w6l%!)I&U(u8TzKcrH#%TuKqu2wNFd-#Zd#*X%@ z7oJNTU|3dnP9{$%ZOf0%$9N8e*JoM&QdJ9<1j5LZ#nM14E!d7rh;rO}_)*5V{jc15_)jlFd6pehte-yfbjY)dTn5Zv z7v=wEPV+vW%)l&hUcy4}wAAKEcaYO%Hs4e~Zdt(7XZdhOon6T*9(_Z6Q$$NO&eWo<^K6)_2?NHTW zremuU7Jq8UR9R!Lldy-&OpBjP;lrPrK1V%#uUQ+oYnAq%`O;z2g{nS1H`JcW@_bTV zy}pKh@RaPBljj;T*92Ep99ZI=w_3o!Z0@CEMzz?Y=+=gfFQ?3VZJzO>dy~trtSn$w OW$<+Mb6Mw<&;$Sw=e30Z literal 0 HcmV?d00001 diff --git a/src/assets/icons/line2.png b/src/assets/icons/line2.png new file mode 100644 index 0000000000000000000000000000000000000000..779511e4992dbee2ca6d88e9f52c7aebb583b66f GIT binary patch literal 929 zcmeAS@N?(olHy`uVBq!ia0vp^X&}tO1|%)-KS=^oEX7WqAsj$Z!;#X#z`z{g>Eakt z5%+fP-n=UgBCVTkg*xN|oj64wvQDUAa#*y0*@~-UN}o_% zm?hT7*t3#pS>{8sx$c*u)`mUb`f}f`x0{b!<}xtPcsqOQ)?G_w+LM9iuPhV*+5t3v#+pCb4l;MkgS~DBi67H9wBBXL zua{X`8)|tsGEhIqn%Q zg~|&Vg#-0JMl^1mse8^S*6)g$OjLnRT6Y8I;xn8KGh|{92QmszGf-zpC@SG~XZ49V zG>4(#Z~Mcu>cErbhb8$$8G16~ t8F&(WL=Akok24$#VZ6Mh05A6+Q?}gKDF^
e.preventDefault()}> - + setInputValue(e.target.value)} + value={inputValue} + /> - +
- +
    - { - lastItems.map((item : any, i : any) => ( -
  • {item}
    • - )) - } + {lastItems.map((item: any, i: any) => ( +
  • + {item} +
    • + ))}
); } HomeSearchBox.defaultProps = { - lastItems : [ - 'دوره علوم تجربی', - 'دوره علوم انسانی', - 'تمامی دوره‌ها' - ] -} \ No newline at end of file + lastItems: ["دوره علوم تجربی", "دوره علوم انسانی", "تمامی دوره‌ها"], +}; diff --git a/src/components/Vocal/Vocal.scss b/src/components/Vocal/Vocal.scss new file mode 100644 index 0000000..259cec5 --- /dev/null +++ b/src/components/Vocal/Vocal.scss @@ -0,0 +1,74 @@ +.vocal-modal{ + width: 100vw; + height: 100vh; + position: fixed; + top : 0px; + left: 0px; + background-color: rgba(0, 0, 0, 0.822); + align-items: center; + justify-content: center; + z-index: 1000; + &__back{ + position: fixed; + top: 20px; + left: 12px; + z-index: 200; + } + h1,h2{ + margin: 20px auto 0px; + width: fit-content; + } + h1{ + color: white; + font-family: numeralLight; + font-size: calc(100vw / 20); + } + h2{ + color: rgb(196, 196, 196); + font-family: numeralLight; + font-size: calc(100vw / 24); + position: fixed; + bottom: 70px; + left: 50%; + background-color: rgba(255, 255, 255, 0.062); + padding: 10px 15px; + border-radius: 10px; + transform: translate(-50% , 0px); + } + &__content{ + width : calc(100% - 60px); + height: 320px; + border-radius: 5px; + margin-left: auto; + margin-right: auto; + padding : 4px 10px; + &--toggle{ + width: 140px; + height: 140px; + align-items: center; + border-radius: 100px; + margin : 20px auto; + svg{ + margin : 0px auto; + } + } + } +} + + + + +.vocal-modal__content--input .MuiFormControl-root{ + border : none !important; +} + +.vocal-modal__content--input{ + margin-top: 20px; +} + +.vocal-modal__content--input input{ + width: 100%; + border : none; + font-size: 22px; + color: #707070; +} \ No newline at end of file diff --git a/src/components/Vocal/Vocal.tsx b/src/components/Vocal/Vocal.tsx new file mode 100644 index 0000000..b774083 --- /dev/null +++ b/src/components/Vocal/Vocal.tsx @@ -0,0 +1,71 @@ +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); + } + }, 5000); + }; + + useEffect(() => { + if (!flag) { + resetTranscript(); + setFlag(() => true); + start(); + } + }); + + useEffect(() => { + props.setInputValue(() => transcript); + }, [transcript]); + + return ( +
+ props.setVocal(false)} /> +
+
+ start()} /> + start()} + /> +
+
+ {pause ? ( +

+ چیزی نشنیدیم :( +
+ روی آیکن موج بزنید تا دوباره امتحان کنید. +

+ ) : ( +

در حال گوش کردن ...

+ )} +
+
+
+ ); +}; +export default Vocal; diff --git a/src/types/comp.d.ts b/src/types/comp.d.ts index 744a0b9..34ab2e4 100644 --- a/src/types/comp.d.ts +++ b/src/types/comp.d.ts @@ -1 +1,2 @@ -declare module '3d-react-carousal'; \ No newline at end of file +declare module '3d-react-carousal'; +declare module 'react-speech-recognition'; \ No newline at end of file diff --git a/src/views/Home/Books/index.scss b/src/views/Home/Books/index.scss index 205b211..cfcd18f 100644 --- a/src/views/Home/Books/index.scss +++ b/src/views/Home/Books/index.scss @@ -81,6 +81,7 @@ @media screen and (max-width: 640px) { .home-books { max-width: 500px; + padding: 0px 0px 20px; &__list{ width: 100%; overflow-x: scroll; diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss index 458bdce..8fe8170 100644 --- a/src/views/Home/Courses/Course/index.scss +++ b/src/views/Home/Courses/Course/index.scss @@ -83,8 +83,8 @@ @media screen and (max-width : 640px){ .home-courses-course{ img{ - width: 250px; - height: 180px; + width: calc(100vw / 1.7); + height: calc(100vw / 2.2); } h2{ font-size: calc(100vw / 25); diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss index 0d7b4de..fb063f1 100644 --- a/src/views/Home/index.scss +++ b/src/views/Home/index.scss @@ -23,5 +23,6 @@ @media screen and (max-width: 640px) { .home{ padding: 60px 10px 0px; + position: relative; } } diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index ac037ee..a73b874 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -1,16 +1,17 @@ -import React, {useState} from "react"; +import React, { useState, useEffect } from "react"; import "./index.scss"; import Navbar from "../../components/Navbar/index"; import HomeSearchBox from "../../components/HomeSearchBox/index"; import Courses from "./Courses/index"; import GradeFilter from "../../components/GradeFilter/index"; -import Books from './Books/index'; +import Books from "./Books/index"; import Blogs from "./Blogs/index"; import Footer from "./Footer/index"; import Header from "./Header/index"; import AppDownload from "./AppDownload/index"; +import Vocal from "../../components/Vocal/Vocal"; -import olum7 from "../../assets/images/olum7.jpg"; +import olum7 from "../../assets/images/olum7.jpg"; import olum8 from "../../assets/images/olum8.jpg"; import olum9 from "../../assets/images/olum9.jpg"; import header from "../../assets/images/header.png"; @@ -18,31 +19,42 @@ import blog1 from "../../assets/images/blog1.png"; import blog2 from "../../assets/images/blog2.png"; import blog3 from "../../assets/images/blog3.png"; -export default function Home(props : any) { +export default function Home(props: any) { const [grade, setGrade] = useState(null); - const {courses, grades, headerData, blogs} = props; + const [vocal, setVocal] = useState(false); + const [inputValue, setInputValue] = useState(""); + const { courses, grades, headerData, blogs } = props; + + useEffect(() => { + if (inputValue) { + setVocal(false); + } + }, [inputValue]); return ( -
- - { - window.innerWidth > 1007 ? -
: null - } - - - - - - { - window.innerWidth > 1007 ? - : null - } - { - window.innerWidth > 1007 ? -
: null - } - -
+ <> +
+ + {window.innerWidth > 1007 ?
: null} + + + + + + {window.innerWidth > 1007 ? : null} + {window.innerWidth > 1007 ?
: null} + +
+ {vocal ? ( + + ) : null} + ); } @@ -91,39 +103,39 @@ Home.defaultProps = { tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], }, ], - grades : [ - 'اول', - 'دوم', - 'سوم', - 'چهارم', - 'پنجم', - 'ششم', - 'هفتم', - 'هشتم', - 'نهم', - 'دهم', - 'یازدهم', - 'دوازدهم', + grades: [ + "اول", + "دوم", + "سوم", + "چهارم", + "پنجم", + "ششم", + "هفتم", + "هشتم", + "نهم", + "دهم", + "یازدهم", + "دوازدهم", ], - headerData : [ + headerData: [ { - id : 0, - name : "آیا هیجان زندگی همچنان باقی است؟", - subTitle : "سوالاتی که پاسخی برای آنها نیست!", - text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ', - author : 'جورج جونیور', - imageUrl : header, + id: 0, + name: "آیا هیجان زندگی همچنان باقی است؟", + subTitle: "سوالاتی که پاسخی برای آنها نیست!", + text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ", + author: "جورج جونیور", + imageUrl: header, }, { - id : 1, - name : "آیا هیجان زندگی همچنان باقی است؟", - subTitle : "سوالاتی که پاسخی برای آنها نیست!", - text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ', - author : 'جورج جونیور', - imageUrl : header, + id: 1, + name: "آیا هیجان زندگی همچنان باقی است؟", + subTitle: "سوالاتی که پاسخی برای آنها نیست!", + text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ", + author: "جورج جونیور", + imageUrl: header, }, ], - blogs : [ + blogs: [ { id: 0, name: "فیزیک کوانتوم و موارد مشابه", @@ -152,6 +164,5 @@ Home.defaultProps = { imageUrl: blog1, tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], }, - ] + ], }; - diff --git a/yarn.lock b/yarn.lock index c489609..2c6f84e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9761,6 +9761,11 @@ react-router@5.2.1: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-speech-recognition@^3.8.2: + version "3.8.2" + resolved "https://registry.yarnpkg.com/react-speech-recognition/-/react-speech-recognition-3.8.2.tgz#c82e187db92e32e506f0593d80a2347f2079e0fd" + integrity sha512-ZbA8wNNdWPAiN7tHsMc/cgfRkssAQwL3F8yMDEbuxLCT0II7YrNurNb3hAq5X58+zMn7YQO+S3OZt0mp5QA38w== + react-spring-3d-carousel@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/react-spring-3d-carousel/-/react-spring-3d-carousel-1.2.1.tgz#25d5d94e76a212b6e791c2543f61c7c87763e8e9"