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 0000000..bcb274a Binary files /dev/null and b/src/assets/icons/Rectangle 60.png differ diff --git a/src/assets/icons/arrow-left.png b/src/assets/icons/arrow-left.png new file mode 100644 index 0000000..70d90d4 Binary files /dev/null and b/src/assets/icons/arrow-left.png differ diff --git a/src/assets/icons/line1.png b/src/assets/icons/line1.png new file mode 100644 index 0000000..c2ccbb4 Binary files /dev/null and b/src/assets/icons/line1.png differ diff --git a/src/assets/icons/line2.png b/src/assets/icons/line2.png new file mode 100644 index 0000000..779511e Binary files /dev/null and b/src/assets/icons/line2.png differ diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx index 3734ad5..992d695 100644 --- a/src/components/HomeSearchBox/index.tsx +++ b/src/components/HomeSearchBox/index.tsx @@ -1,36 +1,39 @@ -import React from "react"; +import React, { useState } from "react"; import "./index.scss"; -import search from '../../assets/icons/search.png'; +import search from "../../assets/icons/search.png"; import voice from "../../assets/icons/voice.png"; -export default function HomeSearchBox(props : any) { - const {lastItems} = props; +export default function HomeSearchBox(props: any) { + const { lastItems, setVocal, inputValue, setInputValue } = props; return (
e.preventDefault()}> - + setInputValue(e.target.value)} + value={inputValue} + /> - +
- +
); } 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 ? -
+ <> +
+ + {window.innerWidth > 1007 ?
: null} + + + + + + {window.innerWidth > 1007 ? : null} + {window.innerWidth > 1007 ?
+ {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"