diff --git a/package.json b/package.json index 945ea25..5bf13ff 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "react-toastify": "^8.1.0", + "react-wavesurfer": "^0.8.6", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.4.0", diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg new file mode 100644 index 0000000..4717281 --- /dev/null +++ b/src/assets/icons/link.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg new file mode 100644 index 0000000..6c1af40 --- /dev/null +++ b/src/assets/icons/pdf.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Wave/index.js b/src/components/Wave/index.js new file mode 100644 index 0000000..167b36f --- /dev/null +++ b/src/components/Wave/index.js @@ -0,0 +1,20 @@ +// require('wavesurfer.js'); + +import React, { useState } from "react"; +import Wavesurfer from "react-wavesurfer"; + +const WaveAudio = ({ audioFile }) => { + const [playing, setPlaying] = useState(false); + const [pos, setPos] = useState(0); + + return ( + setPos(() => e.originalArgs[0])} + playing={playing} + /> + ); +}; + +export default WaveAudio; \ No newline at end of file diff --git a/src/views/Home/Page2/Mobile/QrResult/Link/index.js b/src/views/Home/Page2/Mobile/QrResult/Link/index.js new file mode 100644 index 0000000..d9a8f69 --- /dev/null +++ b/src/views/Home/Page2/Mobile/QrResult/Link/index.js @@ -0,0 +1,14 @@ +import React from "react"; +import linkIcon from "../../../../../../assets/icons/link.svg"; + +export default function PDF({ link }) { + return ( + +

{link.name}

+ +
+ ); +} diff --git a/src/views/Home/Page2/Mobile/QrResult/PDF/index.js b/src/views/Home/Page2/Mobile/QrResult/PDF/index.js new file mode 100644 index 0000000..b82b936 --- /dev/null +++ b/src/views/Home/Page2/Mobile/QrResult/PDF/index.js @@ -0,0 +1,15 @@ +import React from "react"; +import pdfIcon from '../../../../../../assets/icons/pdf.svg'; + +export default function PDF({ pdf }) { + return ( + +

{pdf.name}

+ +
+ ); +} diff --git a/src/views/Home/Page2/Mobile/QrResult/Voice/index.js b/src/views/Home/Page2/Mobile/QrResult/Voice/index.js new file mode 100644 index 0000000..6ce8d3f --- /dev/null +++ b/src/views/Home/Page2/Mobile/QrResult/Voice/index.js @@ -0,0 +1,13 @@ +import React from "react"; + +export default function Voice({ voice }) { + return ( +
+ + {/* {voice.name} */} +
+ ); +} diff --git a/src/views/Home/Page2/Mobile/QrResult/index.js b/src/views/Home/Page2/Mobile/QrResult/index.js index e592927..9b70ffc 100644 --- a/src/views/Home/Page2/Mobile/QrResult/index.js +++ b/src/views/Home/Page2/Mobile/QrResult/index.js @@ -1,17 +1,48 @@ -import React from "react"; +import React, { useState } from "react"; import olum2Image from "../../../../../assets/images/olum-2.svg"; import { connect } from "react-redux"; import _ from "lodash"; +import PDF from "./PDF"; +import Link from "./Link"; +import Voice from "./Voice"; +// import WaveAudio from "../../../../../components/Wave"; -function QrResult({ book, grades, checked }) { +const Identifier = ({ item, activeType }) => { + return ( + <> + {activeType === "all" ? ( + <> + {item.type === "voice" ? : null} + {item.type === "link" ? : null} + {item.type === "pdf" ? : null} + + ) : ( + <> + {item.type === "voice" && item.type === activeType ? ( + + ) : null} + {item.type === "link" && item.type === activeType ? ( + + ) : null} + {item.type === "pdf" && item.type === activeType ? ( + + ) : null} + + )} + + ); +}; +function QrResult({ book, grades, checked, dataTypes, list }) { + const [activeType, setActivetType] = useState("all"); return (
e.stopPropagation()} >
{book.name} @@ -20,13 +51,45 @@ function QrResult({ book, grades, checked }) { {_.join(["پایه", grades[book.grade]], " ")} -

{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}

+

+ {_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")} +

-
-
    - +
    +
      + {dataTypes.map((item, index) => ( +
    • setActivetType(item.type)} + className={_.join( + [ + "w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300", + activeType === item.type + ? "font-bold bg-blueFF" + : "font-light bg-white", + ], + " " + )} + style={{ + borderBottom: + activeType === item.type + ? "1px solid #E8FCFF" + : "1px solid #C1E0FE", + }} + > + {item.name} +
    • + ))}
    +
    + {list.map((item, index) => ( + + ))} +
); @@ -43,30 +106,49 @@ QrResult.defaultProps = { grade: 2, imageUrl: olum2Image, }, - dataTypes : [ + dataTypes: [ + { + name: "تمامی محتواها", + type: "all", + }, + { + name: "صوت", + type: "voice", + }, + { + name: "ویدئو", + type: "video", + }, { - name : 'تمامی محتواها', - type : 'all' + name: "پی دی اف", + type: "pdf", }, { - name : 'صوت', - type : 'voice' + name: "پاور‌پوینت", + type: "ppt", }, { - name : 'ویدئو', - type : 'video' + name: "لینک‌ها", + type: "link", }, + ], + list: [ { - name : 'پی دی اف', - type : 'pdf' + name: "استاد رضایی فصل پنجم", + type: "voice", + value: + "https://assets.mixkit.co/sfx/preview/mixkit-fast-rocket-whoosh-1714.mp3", }, { - name : 'پاور‌پوینت', - type : 'ppt' + name: "فایل پی دی اف تمارین مربوط به درس چهاردهم", + type: "pdf", + value: + "https://smallpdf.com/handle-widget#url=https://assets.ctfassets.net/l3l0sjr15nav/29D2yYGKlHNm0fB2YM1uW4/8e638080a0603252b1a50f35ae8762fd/Get_Started_With_Smallpdf.pdf", }, { - name : 'لینک‌ها', - type : 'links' + name: "لینک مربوط به محتوای یک چیز نامعلوم است", + type: "link", + value: "https://www.aparat.com/", }, - ] + ], }; diff --git a/src/views/Home/Page2/Mobile/Video/index.js b/src/views/Home/Page2/Mobile/Video/index.js new file mode 100644 index 0000000..09b8ede --- /dev/null +++ b/src/views/Home/Page2/Mobile/Video/index.js @@ -0,0 +1,76 @@ +import React, { useState, useEffect } from "react"; +import _ from "lodash"; +import ARImage from "../../../../../assets/images/ar.jpg"; +import scroll from "../../../../../utils/scroll"; + +export default function Video({ selectedVideo, videoPosition }) { + const height = window.innerHeight; + const [top, setTop] = useState(null); + useEffect(() => { + scroll.linearFormula( + window.scrollY > 3 * height ? 3 * height : window.scrollY, + 70, + 50, + 2.8 * height, + 3 * height + ); + window.addEventListener("scroll", () => { + console.log(window.scrollY); + videoTopPositionHandler(window.scrollY); + }); + }, []); + + const videoTopPositionHandler = (scrollY) => { + console.log(scrollY); + if (scrollY < 2.8 * height) { + setTop(() => 50); + } else if (scrollY >= 2.8 * height && scrollY < 3 * height) { + setTop(() => + scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height) + ); + } else { + setTop(() => 50); + } + }; + return ( +
+ + +
+ ); +} diff --git a/src/views/Home/Page2/Mobile/index.js b/src/views/Home/Page2/Mobile/index.js index de58df8..e9eb1d3 100644 --- a/src/views/Home/Page2/Mobile/index.js +++ b/src/views/Home/Page2/Mobile/index.js @@ -4,6 +4,7 @@ import { connect } from "react-redux"; import QrResult from "./QrResult"; import QrScanner from "./QrScanner"; import AR from "./AR"; +import Video from "./Video"; function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) { return ( @@ -25,7 +26,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit } className={_.join( [ "absolute left-0 top-0 h-full w-full", - unit === 1 ? "opacity-100" : "opacity-0", + unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0", ], " " )} @@ -35,8 +36,8 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
- +
diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js index ff64ba6..44c61d9 100644 --- a/src/views/Home/Page2/index.js +++ b/src/views/Home/Page2/index.js @@ -100,9 +100,13 @@ export default function Page2({ list, page, autoPlay }) { }); }, []); + useEffect(() => { + // if (boxPosition.translateY < -17) { + // } + }, [boxPosition]); useEffect(() => { unitPositionHandler(window.scrollY); - },[mobilePosition]) + }, [mobilePosition]); const boxPositionHandler = (scrollY) => { if (scrollY <= height) { @@ -158,7 +162,7 @@ export default function Page2({ list, page, autoPlay }) { 2.5 * height ) ); - }else{ + } else { setMobilePosition(6); } }; @@ -171,6 +175,7 @@ export default function Page2({ list, page, autoPlay }) { } else { } }; + const unitPositionHandler = (scrollY) => { if (scrollY > 2 * height && scrollY <= 2.5 * height) { @@ -179,13 +184,11 @@ export default function Page2({ list, page, autoPlay }) { } else { setUnit(1); } - } - else if(scrollY > 2.5 * height && scrollY <= 2.7 * height){ + } else if (scrollY > 2.5 * height && scrollY <= 2.7 * height) { setUnit(2); - } - else if(scrollY > 2.7 * height && scrollY <= 3.2 * height){ + } else if (scrollY > 2.7 * height && scrollY <= 2.8 * height) { setUnit(3); - }else if(scrollY > 3.2 * height && scrollY < 3.5 * height){ + } else if (scrollY > 2.8 * height && scrollY < 3.5 * height) { setUnit(4); } }; @@ -224,9 +227,9 @@ export default function Page2({ list, page, autoPlay }) {
0 ? "opacity-0 z-0" : "opacity-100 z-30", ], " " diff --git a/src/views/Home/Test/Question.js b/src/views/Home/Test/Question.js index 33e66ba..974742b 100644 --- a/src/views/Home/Test/Question.js +++ b/src/views/Home/Test/Question.js @@ -24,7 +24,7 @@ export default function Question({ question }) { )} style={{ backgroundColor: select === option ? "#32af00" : "transparent", - borderColor: select === option ? "transparent" : "#f5f5f5", + borderColor: select === option ? "transparent" : "#777", borderWidth: 1, borderStyle: "solid", }} diff --git a/src/views/Home/Test/index.js b/src/views/Home/Test/index.js index 5bfd144..da8d088 100644 --- a/src/views/Home/Test/index.js +++ b/src/views/Home/Test/index.js @@ -60,7 +60,7 @@ export default function Test({ title, duration, questions }) { >
( ))} +
); } @@ -96,14 +102,5 @@ Test.defaultProps = { "امکان دارد شاید و یا یک چیز دیگررر", ], }, - { - text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", - options: [ - "امکان دارد شاید و یا یک چیز دیگر", - "امکان دارد شاید و یا یک چیز دیگرر", - "امکان دارد شاید و یا یک چیز دیگرر", - "امکان دارد شاید و یا یک چیز دیگررر", - ], - }, ], }; diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 8657d30..787230b 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -16,6 +16,17 @@ export default function Home() { } else { setAutoPlay(() => false); } + if ( + !JSON.parse(localStorage.getItem("joiRect")) && + window.scrollY > 1000 + ) { + localStorage.setItem( + "joiRect", + JSON.stringify( + document.getElementById("video-joi").getBoundingClientRect() + ) + ); + } }); }, []); return ( diff --git a/tailwind.config.js b/tailwind.config.js index 2fb32e5..10faa30 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,16 +7,20 @@ module.exports = { blueC0: "#196EC0", blueB0 : "#517AB0", blue90: "#235A90", - blueFF : '#E8FCFF' + blueFF : '#E8FCFF', + redFF : '#FFE6E6', + yellow2 : '#FDFFDA' }), textColor : (theme) => ({ ...theme("colors"), primary: "#235A90", blueC0: "#196EC0", blueE8 : '#2E81E8', - green71 : '#067182', blue52 : '#132F52', - blue5F : '#05335F' + blue5F : '#05335F', + green71 : '#067182', + red5F : '#5F1A05', + yellow1 : '#5F5F05', }), borderColor : (theme) => ({ ...theme("colors"), diff --git a/yarn.lock b/yarn.lock index 0d7ea31..d092ffb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9517,6 +9517,11 @@ react-toastify@^8.1.0: dependencies: clsx "^1.1.1" +react-wavesurfer@^0.8.6: + version "0.8.6" + resolved "https://registry.yarnpkg.com/react-wavesurfer/-/react-wavesurfer-0.8.6.tgz#da05f3f501e566a63853f9babec45a5251111538" + integrity sha1-2gXz9QHlZqY4U/m6vsRaUlERFTg= + react@^17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"