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}
+
+ {_.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 ? (
- 3 * window.innerHeight ? "fixed" : "static",
+ "absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
+ unit === 4 ? "opacity-100" : "opacity-0",
],
" "
)}
- style={{
- height: window.scrollY <= 3 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height,
- width: window.scrollY <= 3 * window.innerHeight ? "100%" : videoPosition?.width,
- left : window.scrollY > 3 * window.innerHeight ? videoPosition?.left : 'auto',
- top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto',
- }}
- controls
- autoPlay={'true'}
>
-
-
- ) : null}
+ 3.5 * window.innerHeight ? "fixed" : "static",
+ ],
+ " "
+ )}
+ style={{
+ height:
+ window.scrollY < 3.5 * window.innerHeight
+ ? (window.innerHeight * 9) / 25
+ : videoPosition?.height,
+ width:
+ window.scrollY < 3.5 * window.innerHeight
+ ? "100%"
+ : videoPosition?.width,
+ left:
+ window.scrollY < 3.5 * window.innerHeight
+ ? "auto"
+ : videoPosition?.left,
+ top:
+ window.scrollY < 3.5 * window.innerHeight
+ ? "auto"
+ : videoPosition?.top,
+ }}
+ controls
+ autoPlay={"true"}
+ >
+
+
+
+
);
}
-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: {