diff --git a/src/assets/images/ar.jpg b/src/assets/images/ar.jpg new file mode 100644 index 0000000..9eb4ebd Binary files /dev/null and b/src/assets/images/ar.jpg differ diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index bee3b3b..f2a704a 100644 --- a/src/components/JolPlayer/index.js +++ b/src/components/JolPlayer/index.js @@ -4,36 +4,36 @@ import JoLPlayer from "jol-player"; function Video({ fileIds, posterId, autoPlay }) { const videoRef = useRef(null); const [flag, setFlag] = useState(false); - useEffect(() => { - window.addEventListener("scroll", () => { - if (window.scrollY > 500) { - if (!localStorage.getItem("joiRect")) { - const jolRect = document - .getElementById("video-joi") - .getBoundingClientRect(); - localStorage.setItem("joiRect", JSON.stringify(jolRect)); - } - } - }); - }, []); + // useEffect(() => { + // window.addEventListener("scroll", () => { + // if (window.scrollY > 500) { + // if (!localStorage.getItem("joiRect")) { + // const jolRect = document + // .getElementById("video-joi") + // .getBoundingClientRect(); + // localStorage.setItem("joiRect", JSON.stringify(jolRect)); + // } + // } + // }); + // }, []); - const videoMethod = (status) => { - if (status === "play") { - videoRef.current.play(); - setFlag(() => true); - } - }; + // const videoMethod = (status) => { + // if (status === "play") { + // videoRef.current.play(); + // setFlag(() => true); + // } + // }; // useEffect(() => { // console.log(`videoRef.current`, videoRef.current); // }, [videoRef.current]); - useEffect(() => { - if (window.scrollY > 3 * window.innerHeight) { - if (autoPlay && !flag) { - videoMethod("play"); - } - } - }, [autoPlay]); + // useEffect(() => { + // if (window.scrollY > 3 * window.innerHeight) { + // if (autoPlay && !flag) { + // videoMethod("play"); + // } + // } + // }, [autoPlay]); return ( diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index c896aeb..acc728b 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,7 +1,7 @@ -import location from '../../utils/location'; +import location from "../../utils/location"; const initialState = { - theme : localStorage.getItem('theme') || 'light', + theme: localStorage.getItem("theme") || "light", homeData: [], newProducts: [], levels: [], @@ -35,6 +35,21 @@ const initialState = { activeCategory: null, categories: null, bookSection: null, + grades: { + 0: "پیش دبستان", + 1: "اول", + 2: "دوم", + 3: "سوم", + 4: "چهارم", + 5: "پنجم", + 6: "ششم", + 7: "هفتم", + 8: "هشتم", + 9: "نهم", + 10: "دهم", + 11: "یازدهم", + 12: "دوازدهم", + }, }; const grades = [ @@ -57,7 +72,7 @@ export default function publicApi(state = initialState, action) { switch (type) { case "public/setTheme": localStorage.setItem("theme", data); - return { ...state, location: false, error : null, theme: data }; + return { ...state, location: false, error: null, theme: data }; case "active/video": return { ...state, @@ -79,15 +94,13 @@ export default function publicApi(state = initialState, action) { loading: false, bookSection: data, error: null, - selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0] + selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0], }; case "public/vod/bookCourse": let allCats; allCats = Array.from( - new Set( - data.vods.map((item) => item.categoryId && item.categoryId) - ) + new Set(data.vods.map((item) => item.categoryId && item.categoryId)) ); return { ...state, @@ -102,7 +115,9 @@ export default function publicApi(state = initialState, action) { categories: allCats.map((item) => data.vods.filter((item1) => item1.categoryId === item) ), - selectedVideo: data.vods.filter((item ) => item.id !== location.getId())[0], + selectedVideo: data.vods.filter( + (item) => item.id !== location.getId() + )[0], }; case "public/homePage": let itemsLevel; @@ -124,101 +139,9 @@ export default function publicApi(state = initialState, action) { error: null, homeData: data, }; - // case "public/filter": - // const realList = - // state.newProducts.length === 0 - // ? state.homeData.filter( - // (item) => item.title === "جدیدترین کتاب‌های دانوین" - // )[0].data - // : state.newProducts; - // if (state.newProducts.length === 0) { - // state = { - // ...state, - // newProducts: realList, - // }; - // console.log("here1"); - // } - // const level = data.levels; - // const search = data.search; - // if (level.length > 0 || search) { - // localStorage.setItem("filter", "ON"); - // } else { - // return { - // ...state, - // loading: false, - // error: null, - // homeData: state.homeData.map((item) => - // item.title === "جدیدترین کتاب‌های دانوین" - // ? { ...item, data: state.newProducts } - // : { ...item } - // ), - // newProducts: [], - // }; - // } - // let byLevelFilter = []; - // if (level.length > 0) { - // level.map((item1) => { - // for (let i = 0; i < realList.length; i++) { - // if (grades[realList[i].book.gradeId] === item1) { - // byLevelFilter.push(realList[i]); - // } - // } - // }); - // } else { - // byLevelFilter = realList; - // } - // // let bySubjectFilter = []; - // // if (subject.length > 0) { - // // subject.map((item1) => { - // // for (let i = 0; i < byLevelFilter.length; i++) { - // // if (byLevelFilter[i].name === item1) { - // // bySubjectFilter.push(byLevelFilter[i]); - // // } - // // } - // // }); - // // } else { - // // bySubjectFilter = byLevelFilter; - // // } - - // const bySearchFilter = search - // ? byLevelFilter.filter((item1) => item1.name.indexOf(search) !== -1) - // : byLevelFilter; - // // if (sort === "گران ترین") { - // // finalSort = bySearchFilter.sort((item1, item2) => { - // // return item1.product[0].price - item2.product[0].price; - // // }); - // // } else { - // // finalSort = bySearchFilter; - // // } - - // return { - // ...state, - // loading: false, - // error: null, - // homeData: state.homeData.map((item) => - // item.title === "جدیدترین کتاب‌های دانوین" - // ? { ...item, data: bySearchFilter } - // : { ...item } - // ), - // }; - // case "faq/list": - // return { ...state, loading: false, error: null, faqList: data }; - // case "public/faq/search": - // return { - // ...state, - // loading: false, - // error: null, - // searchResult: state.faqList.filter( - // (item) => - // item.title.indexOf(data) !== -1 || - // item.description.indexOf(data) !== -1 - // ), - // }; case "public/contact": return { ...state, loading: false, error: null, contactData: data }; - // case "public/ar": - // return { ...state, loading: false, error: null, arList: data }; case "public/blogList": return { ...state, loading: false, error: null, blogList: data }; case "public/blogInfo": diff --git a/src/utils/scroll.js b/src/utils/scroll.js index 583e62e..c0a3c49 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -95,31 +95,36 @@ class scroll { }; videoLinearFormula = (currentScroll) => { - if(!localStorage.getItem("htmlRect")){ - localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect())); + if (!localStorage.getItem("htmlRect")) { + localStorage.setItem( + "htmlRect", + JSON.stringify(document.getElementById("video").getBoundingClientRect()) + ); } - const htmlRect = JSON.parse(localStorage.getItem("htmlRect")); + const htmlRect = + JSON.parse(localStorage.getItem("htmlRect")) || + document.getElementById("video").getBoundingClientRect(); const joiRect = JSON.parse(localStorage.getItem("joiRect")); const currentWidth = this.linearFormula( currentScroll, htmlRect.width, joiRect.width, - 3 * window.innerHeight, + 3.5 * window.innerHeight, 4 * window.innerHeight ); const currentHeight = this.linearFormula( currentScroll, htmlRect.height, joiRect.height, - 3 * window.innerHeight, + 3.5 * window.innerHeight, 4 * window.innerHeight ); const currentLeft = this.linearFormula( currentScroll, htmlRect.left, joiRect.left, - 3 * window.innerHeight, + 3.5 * window.innerHeight, 4 * window.innerHeight ); @@ -127,10 +132,9 @@ class scroll { currentScroll, htmlRect.top, joiRect.top - window.innerHeight, - 3 * window.innerHeight, + 3.5 * window.innerHeight, 4 * window.innerHeight ); - return { width: currentWidth, height: currentHeight, @@ -145,30 +149,30 @@ class scroll { currentScroll, testRect.width, window.innerWidth, - 5.5 * window.innerHeight, - 6 * window.innerHeight + 4.5 * window.innerHeight, + 5 * window.innerHeight ); const currentHeight = this.linearFormula( currentScroll, testRect.height, window.innerHeight, - 5.5 * window.innerHeight, - 6 * window.innerHeight + 4.5 * window.innerHeight, + 5 * window.innerHeight ); const currentLeft = this.linearFormula( currentScroll, testRect.left, 0, - 5.5 * window.innerHeight, - 6 * window.innerHeight + 4.5 * window.innerHeight, + 5 * window.innerHeight ); const currentTop = this.linearFormula( currentScroll, testRect.top, 0, - 5.5 * window.innerHeight, - 6 * window.innerHeight + 4.5 * window.innerHeight, + 5 * window.innerHeight ); return { @@ -177,7 +181,7 @@ class scroll { top: currentTop, left: currentLeft, }; - } + }; } const _scroll = new scroll(); diff --git a/src/views/Home/Page1/index.js b/src/views/Home/Page1/index.js index 53341f3..13fef51 100644 --- a/src/views/Home/Page1/index.js +++ b/src/views/Home/Page1/index.js @@ -48,7 +48,12 @@ export default function Page1({ list, page }) { useEffect(() => {}, [page]); return (
@@ -98,8 +103,8 @@ export default function Page1({ list, page }) { className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7" />
-
-
+
+
لیست محصولات @@ -113,12 +118,22 @@ export default function Page1({ list, page }) { آزمون ها
- - ورود به فروشگاه - +
+

+ لذت یادگیری را با دانوین تجربه کنید +

+

+ ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی + جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش + کشور ایجاد کنیم. +

+ + ورود به فروشگاه + +
+ +
+ ) +} diff --git a/src/views/Home/Page2/Mobile/QrResult/index.js b/src/views/Home/Page2/Mobile/QrResult/index.js new file mode 100644 index 0000000..e592927 --- /dev/null +++ b/src/views/Home/Page2/Mobile/QrResult/index.js @@ -0,0 +1,72 @@ +import React from "react"; +import olum2Image from "../../../../../assets/images/olum-2.svg"; +import { connect } from "react-redux"; +import _ from "lodash"; + +function QrResult({ book, grades, checked }) { + return ( +
+
+ {book.name} +
+

{book.name}

+ + {_.join(["پایه", grades[book.grade]], " ")} + +

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

+
+
+
+
    + +
+
+
+ ); +} + +export default connect((state) => ({ + grades: state.publicApi.grades, +}))(QrResult); + +QrResult.defaultProps = { + book: { + name: "علوم اجتماعی", + page: 67, + grade: 2, + imageUrl: olum2Image, + }, + dataTypes : [ + { + name : 'تمامی محتواها', + type : 'all' + }, + { + name : 'صوت', + type : 'voice' + }, + { + name : 'ویدئو', + type : 'video' + }, + { + name : 'پی دی اف', + type : 'pdf' + }, + { + name : 'پاور‌پوینت', + type : 'ppt' + }, + { + name : 'لینک‌ها', + type : 'links' + }, + ] +}; diff --git a/src/views/Home/Page2/Mobile/QrScanner/index.js b/src/views/Home/Page2/Mobile/QrScanner/index.js new file mode 100644 index 0000000..9abd21c --- /dev/null +++ b/src/views/Home/Page2/Mobile/QrScanner/index.js @@ -0,0 +1,36 @@ +import React from "react"; + +export default function QrScanner() { + return ( +
+
+
+
+
+
+
+ ); +} diff --git a/src/views/Home/Page2/Mobile/index.js b/src/views/Home/Page2/Mobile/index.js index 32e4c36..de58df8 100644 --- a/src/views/Home/Page2/Mobile/index.js +++ b/src/views/Home/Page2/Mobile/index.js @@ -1,25 +1,15 @@ import React, { useEffect, useState } from "react"; import _ from "lodash"; -import {connect} from 'react-redux'; - -function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) { - const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); - useEffect(() => { - if (mobilePosition > 0) { - setChecked(true); - } else { - setChecked(false); - } - }, [mobilePosition]); +import { connect } from "react-redux"; +import QrResult from "./QrResult"; +import QrScanner from "./QrScanner"; +import AR from "./AR"; +function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) { return (
2500 ? "items-center justify-center" : "", - window.scrollY > 2500 ? "bg-black" : "", - ], + ["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"], " " )} style={{ @@ -30,81 +20,93 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) { // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`, }} > -
2500 ? "hidden" : "", - ], - " " - )} - > -
+
+ className={_.join( + [ + "absolute left-0 top-0 h-full w-full", + unit === 1 ? "opacity-100" : "opacity-0", + ], + " " + )} + > + +
+ className={_.join( + [ + "absolute w-full h-full min-h-full transform", + unit === 2 ? "opacity-100" : "opacity-0", + ], + " " + )} + > + +
+ className={_.join( + [ + "absolute w-full h-full min-h-full transform", + unit === 3 ? "opacity-100" : "opacity-0", + ], + " " + )} + > + +
-
- -
2500 ? "hidden" : "", - ], - " " - )} - >
- {window.scrollY > 2500 ? ( - - ) : null} + + + ); } -export default connect((state) => ({ - selectedVideo : state.publicApi.selectedVideo -}), {})(Mobile); \ No newline at end of file +export default connect( + (state) => ({ + selectedVideo: state.publicApi.selectedVideo, + }), + {} +)(Mobile); diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js index b9a132d..ff64ba6 100644 --- a/src/views/Home/Page2/index.js +++ b/src/views/Home/Page2/index.js @@ -8,6 +8,7 @@ export default function Page2({ list, page, autoPlay }) { const height = window.innerHeight; const [top, setTop] = useState(window.innerHeight); const [videoPosition, setVideoPosition] = useState(null); + const [unit, setUnit] = useState(null); const [boxPosition, setBoxPosition] = useState({ translateY: null, translateX: null, @@ -15,6 +16,8 @@ export default function Page2({ list, page, autoPlay }) { }); const [mobilePosition, setMobilePosition] = useState(null); useEffect(() => { + // localStorage.removeItem('htmlRect'); + // localStorage.removeItem('joiRect'); setMobilePosition( scroll.linearFormula( window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, @@ -24,11 +27,14 @@ export default function Page2({ list, page, autoPlay }) { 2.5 * height ) ); - setVideoPosition( - window.scrollY > 3 * height - ? scroll.videoLinearFormula(window.scrollY) - : null - ); + if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) { + setVideoPosition( + window.scrollY > 4 * height + ? scroll.videoLinearFormula(4 * height) + : scroll.videoLinearFormula(window.scrollY) + ); + } + unitPositionHandler(window.scrollY); if (window.scrollY < 2.5 * height) { setBoxPosition({ translateY: scroll.linearFormula( @@ -81,13 +87,23 @@ export default function Page2({ list, page, autoPlay }) { } window.addEventListener("scroll", (e) => { + const scrollY = window.scrollY; setTop(scroll.homeScrollHandler(page)); - boxPositionHandler(window.scrollY); - mobilePositionHandler(window.scrollY); - videoPositionHandler(window.scrollY); + boxPositionHandler(scrollY); + mobilePositionHandler(scrollY); + if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) { + unitPositionHandler(scrollY); + } + if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) { + videoPositionHandler(scrollY); + } }); }, []); + useEffect(() => { + unitPositionHandler(window.scrollY); + },[mobilePosition]) + const boxPositionHandler = (scrollY) => { if (scrollY <= height) { setBoxPosition({ @@ -142,17 +158,37 @@ export default function Page2({ list, page, autoPlay }) { 2.5 * height ) ); + }else{ + setMobilePosition(6); } }; const videoPositionHandler = (scrollY) => { - if (scrollY <= 3 * height) { + if (scrollY <= 3.5 * height) { setVideoPosition(() => null); - } else if (scrollY > 3 * height && scrollY < 4 * height) { + } else if (scrollY > 3.5 * height && scrollY < 4 * height) { setVideoPosition(scroll.videoLinearFormula(scrollY)); } else { } }; + + const unitPositionHandler = (scrollY) => { + if (scrollY > 2 * height && scrollY <= 2.5 * height) { + if (mobilePosition > 0) { + setUnit(2); + } else { + setUnit(1); + } + } + else if(scrollY > 2.5 * height && scrollY <= 2.7 * height){ + setUnit(2); + } + else if(scrollY > 2.7 * height && scrollY <= 3.2 * height){ + setUnit(3); + }else if(scrollY > 3.2 * height && scrollY < 3.5 * height){ + setUnit(4); + } + }; return (
e.stopPropagation()} @@ -201,6 +237,7 @@ export default function Page2({ list, page, autoPlay }) { mobilePosition={mobilePosition} videoPosition={videoPosition} autoPlay={autoPlay} + unit={unit} /> {/* video */}
diff --git a/src/views/Home/Test/index.js b/src/views/Home/Test/index.js index dee3621..5bfd144 100644 --- a/src/views/Home/Test/index.js +++ b/src/views/Home/Test/index.js @@ -35,17 +35,12 @@ export default function Test({ title, duration, questions }) { const height = window.innerHeight; if (scrollY <= 4.5 * height) { setTranslateY(() => 0); - setTestPosition(() => null) + setTestPosition(() => null); } else if (scrollY > 4.5 * height && scrollY < 5 * height) { setTranslateY(() => scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height) ); setTestPosition(() => null); - } else if(scrollY > 5.5 * height && scrollY < 6 * height) { - setTestPosition(() => scroll.testLinearFolmula(scrollY)); - setTranslateY(() => 0); - }else{ - } }; return ( @@ -56,11 +51,11 @@ export default function Test({ title, duration, questions }) { style={{ minHeight: window.innerHeight - 180, transform: `translateY(${translateY}%)`, - position : testPosition ? 'fixed' : 'static', - left : testPosition?.left ? testPosition?.left : 'auto', - top : testPosition?.top ? testPosition?.top : 'auto', - width : testPosition?.width ? testPosition?.width : 'auto', - height : testPosition?.height ? testPosition?.height : 'auto' + position: testPosition ? "fixed" : "static", + left: testPosition?.left ? testPosition?.left : "auto", + top: testPosition?.top ? testPosition?.top : "auto", + width: testPosition?.width ? testPosition?.width : "auto", + height: testPosition?.height ? testPosition?.height : "auto", }} >
{ if (window.scrollY > 3 * window.innerHeight) { setAutoPlay(() => true); - // alert('here'); } else { setAutoPlay(() => false); } @@ -23,7 +19,7 @@ export default function Home() { return (
diff --git a/tailwind.config.js b/tailwind.config.js index 4627379..2fb32e5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,13 +12,16 @@ module.exports = { textColor : (theme) => ({ ...theme("colors"), primary: "#235A90", + blueC0: "#196EC0", blueE8 : '#2E81E8', green71 : '#067182', blue52 : '#132F52', + blue5F : '#05335F' }), borderColor : (theme) => ({ ...theme("colors"), blueC0: "#196EC0", + blueFE : "#C1E0FE" }) }, variants: {