reza added some option

temp
Reza_ashrafi 3 years ago
parent 0fe08f3825
commit 1d113815e7
  1. BIN
      src/assets/images/ar.jpg
  2. 50
      src/components/JolPlayer/index.js
  3. 123
      src/redux/reducers/public.js
  4. 38
      src/utils/scroll.js
  5. 33
      src/views/Home/Page1/index.js
  6. 11
      src/views/Home/Page2/Mobile/AR/index.js
  7. 72
      src/views/Home/Page2/Mobile/QrResult/index.js
  8. 36
      src/views/Home/Page2/Mobile/QrScanner/index.js
  9. 162
      src/views/Home/Page2/Mobile/index.js
  10. 57
      src/views/Home/Page2/index.js
  11. 17
      src/views/Home/Test/index.js
  12. 6
      src/views/Home/index.js
  13. 3
      tailwind.config.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

@ -4,36 +4,36 @@ import JoLPlayer from "jol-player";
function Video({ fileIds, posterId, autoPlay }) { function Video({ fileIds, posterId, autoPlay }) {
const videoRef = useRef(null); const videoRef = useRef(null);
const [flag, setFlag] = useState(false); const [flag, setFlag] = useState(false);
useEffect(() => { // useEffect(() => {
window.addEventListener("scroll", () => { // window.addEventListener("scroll", () => {
if (window.scrollY > 500) { // if (window.scrollY > 500) {
if (!localStorage.getItem("joiRect")) { // if (!localStorage.getItem("joiRect")) {
const jolRect = document // const jolRect = document
.getElementById("video-joi") // .getElementById("video-joi")
.getBoundingClientRect(); // .getBoundingClientRect();
localStorage.setItem("joiRect", JSON.stringify(jolRect)); // localStorage.setItem("joiRect", JSON.stringify(jolRect));
} // }
} // }
}); // });
}, []); // }, []);
const videoMethod = (status) => { // const videoMethod = (status) => {
if (status === "play") { // if (status === "play") {
videoRef.current.play(); // videoRef.current.play();
setFlag(() => true); // setFlag(() => true);
} // }
}; // };
// useEffect(() => { // useEffect(() => {
// console.log(`videoRef.current`, videoRef.current); // console.log(`videoRef.current`, videoRef.current);
// }, [videoRef.current]); // }, [videoRef.current]);
useEffect(() => { // useEffect(() => {
if (window.scrollY > 3 * window.innerHeight) { // if (window.scrollY > 3 * window.innerHeight) {
if (autoPlay && !flag) { // if (autoPlay && !flag) {
videoMethod("play"); // videoMethod("play");
} // }
} // }
}, [autoPlay]); // }, [autoPlay]);
return ( return (

@ -1,7 +1,7 @@
import location from '../../utils/location'; import location from "../../utils/location";
const initialState = { const initialState = {
theme : localStorage.getItem('theme') || 'light', theme: localStorage.getItem("theme") || "light",
homeData: [], homeData: [],
newProducts: [], newProducts: [],
levels: [], levels: [],
@ -35,6 +35,21 @@ const initialState = {
activeCategory: null, activeCategory: null,
categories: null, categories: null,
bookSection: null, bookSection: null,
grades: {
0: "پیش دبستان",
1: "اول",
2: "دوم",
3: "سوم",
4: "چهارم",
5: "پنجم",
6: "ششم",
7: "هفتم",
8: "هشتم",
9: "نهم",
10: "دهم",
11: "یازدهم",
12: "دوازدهم",
},
}; };
const grades = [ const grades = [
@ -57,7 +72,7 @@ export default function publicApi(state = initialState, action) {
switch (type) { switch (type) {
case "public/setTheme": case "public/setTheme":
localStorage.setItem("theme", data); localStorage.setItem("theme", data);
return { ...state, location: false, error : null, theme: data }; return { ...state, location: false, error: null, theme: data };
case "active/video": case "active/video":
return { return {
...state, ...state,
@ -79,15 +94,13 @@ export default function publicApi(state = initialState, action) {
loading: false, loading: false,
bookSection: data, bookSection: data,
error: null, error: null,
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0] selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0],
}; };
case "public/vod/bookCourse": case "public/vod/bookCourse":
let allCats; let allCats;
allCats = Array.from( allCats = Array.from(
new Set( new Set(data.vods.map((item) => item.categoryId && item.categoryId))
data.vods.map((item) => item.categoryId && item.categoryId)
)
); );
return { return {
...state, ...state,
@ -102,7 +115,9 @@ export default function publicApi(state = initialState, action) {
categories: allCats.map((item) => categories: allCats.map((item) =>
data.vods.filter((item1) => item1.categoryId === 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": case "public/homePage":
let itemsLevel; let itemsLevel;
@ -124,101 +139,9 @@ export default function publicApi(state = initialState, action) {
error: null, error: null,
homeData: data, 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": case "public/contact":
return { ...state, loading: false, error: null, contactData: data }; return { ...state, loading: false, error: null, contactData: data };
// case "public/ar":
// return { ...state, loading: false, error: null, arList: data };
case "public/blogList": case "public/blogList":
return { ...state, loading: false, error: null, blogList: data }; return { ...state, loading: false, error: null, blogList: data };
case "public/blogInfo": case "public/blogInfo":

@ -95,31 +95,36 @@ class scroll {
}; };
videoLinearFormula = (currentScroll) => { videoLinearFormula = (currentScroll) => {
if(!localStorage.getItem("htmlRect")){ if (!localStorage.getItem("htmlRect")) {
localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect())); 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 joiRect = JSON.parse(localStorage.getItem("joiRect"));
const currentWidth = this.linearFormula( const currentWidth = this.linearFormula(
currentScroll, currentScroll,
htmlRect.width, htmlRect.width,
joiRect.width, joiRect.width,
3 * window.innerHeight, 3.5 * window.innerHeight,
4 * window.innerHeight 4 * window.innerHeight
); );
const currentHeight = this.linearFormula( const currentHeight = this.linearFormula(
currentScroll, currentScroll,
htmlRect.height, htmlRect.height,
joiRect.height, joiRect.height,
3 * window.innerHeight, 3.5 * window.innerHeight,
4 * window.innerHeight 4 * window.innerHeight
); );
const currentLeft = this.linearFormula( const currentLeft = this.linearFormula(
currentScroll, currentScroll,
htmlRect.left, htmlRect.left,
joiRect.left, joiRect.left,
3 * window.innerHeight, 3.5 * window.innerHeight,
4 * window.innerHeight 4 * window.innerHeight
); );
@ -127,10 +132,9 @@ class scroll {
currentScroll, currentScroll,
htmlRect.top, htmlRect.top,
joiRect.top - window.innerHeight, joiRect.top - window.innerHeight,
3 * window.innerHeight, 3.5 * window.innerHeight,
4 * window.innerHeight 4 * window.innerHeight
); );
return { return {
width: currentWidth, width: currentWidth,
height: currentHeight, height: currentHeight,
@ -145,30 +149,30 @@ class scroll {
currentScroll, currentScroll,
testRect.width, testRect.width,
window.innerWidth, window.innerWidth,
5.5 * window.innerHeight, 4.5 * window.innerHeight,
6 * window.innerHeight 5 * window.innerHeight
); );
const currentHeight = this.linearFormula( const currentHeight = this.linearFormula(
currentScroll, currentScroll,
testRect.height, testRect.height,
window.innerHeight, window.innerHeight,
5.5 * window.innerHeight, 4.5 * window.innerHeight,
6 * window.innerHeight 5 * window.innerHeight
); );
const currentLeft = this.linearFormula( const currentLeft = this.linearFormula(
currentScroll, currentScroll,
testRect.left, testRect.left,
0, 0,
5.5 * window.innerHeight, 4.5 * window.innerHeight,
6 * window.innerHeight 5 * window.innerHeight
); );
const currentTop = this.linearFormula( const currentTop = this.linearFormula(
currentScroll, currentScroll,
testRect.top, testRect.top,
0, 0,
5.5 * window.innerHeight, 4.5 * window.innerHeight,
6 * window.innerHeight 5 * window.innerHeight
); );
return { return {
@ -177,7 +181,7 @@ class scroll {
top: currentTop, top: currentTop,
left: currentLeft, left: currentLeft,
}; };
} };
} }
const _scroll = new scroll(); const _scroll = new scroll();

@ -48,7 +48,12 @@ export default function Page1({ list, page }) {
useEffect(() => {}, [page]); useEffect(() => {}, [page]);
return ( return (
<div <div
className={_.join(["home-page1 w-full pt-20 h-screen fixed left-0"], " ")} className={_.join(
[
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0",
],
" "
)}
style={{ top: top }} style={{ top: top }}
> >
<FloatWithMouse /> <FloatWithMouse />
@ -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" className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7"
/> />
</div> </div>
<div className="container flex flex-row justify-between relative transform translate-y-9"> <div className="container flex flex-row justify-between relative transform translate-y-12" style={{ alignItems: 'start'}}>
<div className="list-none flex flex-row items-center bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md"> <div className="list-none flex flex-row bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
<strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300"> <strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300">
لیست محصولات لیست محصولات
</strong> </strong>
@ -113,12 +118,22 @@ export default function Page1({ list, page }) {
آزمون ها آزمون ها
</Link> </Link>
</div> </div>
<Link <div className="flex flex-col">
to="/products" <h1 className="text-xl font-semibold text-blueC0">
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md" لذت یادگیری را با دانوین تجربه کنید
> </h1>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" /> <p className="text-blue5F font-light text-sm w-64 mt-1 text-justify">
</Link> ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی
جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش
کشور ایجاد کنیم.
</p>
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end animate-bounce"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
</div>
</div> </div>
<img <img

@ -0,0 +1,11 @@
import React from 'react';
import ARImage from '../../../../../assets/images/ar.jpg';
export default function AR() {
return (
<div className="relative flex w-full h-full">
<img src={ARImage} className="w-full absolute bottom-0 left-0" />
</div>
)
}

@ -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 (
<div
className={_.join(
[
"relative w-full h-full min-h-full transition-all transform flex flex-col px-2 pt-10 bg-white",
],
" "
)}
>
<div className="w-full flex flex-row items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
<div className="flex flex-col">
<h1 className="font-semibold text-primary">{book.name}</h1>
<strong className="text-blueC0 font-light mt-2 text-sm">
{_.join(["پایه", grades[book.grade]], " ")}
</strong>
<p className="mt-1 text-blueC0 text-sm">{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}</p>
</div>
</div>
<div className="flex flex-column rounded-md border border-blueFE overflow-hidden">
<ul className="w-full flex flex-row list-none">
</ul>
</div>
</div>
);
}
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'
},
]
};

@ -0,0 +1,36 @@
import React from "react";
export default function QrScanner() {
return (
<div className="relative w-full h-full">
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "62%" }}
></div>
<div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
);
}

@ -1,25 +1,15 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import _ from "lodash"; import _ from "lodash";
import {connect} from 'react-redux'; import { connect } from "react-redux";
import QrResult from "./QrResult";
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) { import QrScanner from "./QrScanner";
const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); import AR from "./AR";
useEffect(() => {
if (mobilePosition > 0) {
setChecked(true);
} else {
setChecked(false);
}
}, [mobilePosition]);
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) {
return ( return (
<div <div
className={_.join( className={_.join(
[ ["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"],
"fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl",
window.scrollY > 2500 ? "items-center justify-center" : "",
window.scrollY > 2500 ? "bg-black" : "",
],
" " " "
)} )}
style={{ style={{
@ -30,81 +20,93 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) {
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`, // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
}} }}
> >
<div <div className="relative w-full h-full flex">
className={_.join(
[
"relative w-full h-full min-h-full",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
>
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div <div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" className={_.join(
style={{ [
top: "10%", "absolute left-0 top-0 h-full w-full",
height: "28%", unit === 1 ? "opacity-100" : "opacity-0",
width: "25%", ],
}} " "
></div> )}
>
<QrScanner />
</div>
<div <div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" className={_.join(
style={{ [
top: "10%", "absolute w-full h-full min-h-full transform",
height: "28%", unit === 2 ? "opacity-100" : "opacity-0",
width: "25%", ],
}} " "
></div> )}
>
<QrResult />
</div>
<div <div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" className={_.join(
style={{ height: "62%" }} [
></div> "absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<AR />
</div>
<div <div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
<div
className={_.join(
[
"relative w-full h-full min-h-full bg-green-200 transition-all transform",
checked ? "-translate-y-full" : "",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
></div>
{window.scrollY > 2500 ? (
<video
id="video"
className={_.join( className={_.join(
[ [
"video outline-none animation-puls bg-black", "absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
window.scrollY > 3 * window.innerHeight ? "fixed" : "static", 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'}
> >
<source src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`} type={"video/mp4"} /> <video
</video> id="video"
) : null} className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 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"}
>
<source
src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`}
type={"video/mp4"}
/>
</video>
</div>
</div>
</div> </div>
); );
} }
export default connect((state) => ({ export default connect(
selectedVideo : state.publicApi.selectedVideo (state) => ({
}), {})(Mobile); selectedVideo: state.publicApi.selectedVideo,
}),
{}
)(Mobile);

@ -8,6 +8,7 @@ export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight; const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight); const [top, setTop] = useState(window.innerHeight);
const [videoPosition, setVideoPosition] = useState(null); const [videoPosition, setVideoPosition] = useState(null);
const [unit, setUnit] = useState(null);
const [boxPosition, setBoxPosition] = useState({ const [boxPosition, setBoxPosition] = useState({
translateY: null, translateY: null,
translateX: null, translateX: null,
@ -15,6 +16,8 @@ export default function Page2({ list, page, autoPlay }) {
}); });
const [mobilePosition, setMobilePosition] = useState(null); const [mobilePosition, setMobilePosition] = useState(null);
useEffect(() => { useEffect(() => {
// localStorage.removeItem('htmlRect');
// localStorage.removeItem('joiRect');
setMobilePosition( setMobilePosition(
scroll.linearFormula( scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
@ -24,11 +27,14 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height 2.5 * height
) )
); );
setVideoPosition( if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
window.scrollY > 3 * height setVideoPosition(
? scroll.videoLinearFormula(window.scrollY) window.scrollY > 4 * height
: null ? scroll.videoLinearFormula(4 * height)
); : scroll.videoLinearFormula(window.scrollY)
);
}
unitPositionHandler(window.scrollY);
if (window.scrollY < 2.5 * height) { if (window.scrollY < 2.5 * height) {
setBoxPosition({ setBoxPosition({
translateY: scroll.linearFormula( translateY: scroll.linearFormula(
@ -81,13 +87,23 @@ export default function Page2({ list, page, autoPlay }) {
} }
window.addEventListener("scroll", (e) => { window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY;
setTop(scroll.homeScrollHandler(page)); setTop(scroll.homeScrollHandler(page));
boxPositionHandler(window.scrollY); boxPositionHandler(scrollY);
mobilePositionHandler(window.scrollY); mobilePositionHandler(scrollY);
videoPositionHandler(window.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) => { const boxPositionHandler = (scrollY) => {
if (scrollY <= height) { if (scrollY <= height) {
setBoxPosition({ setBoxPosition({
@ -142,17 +158,37 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height 2.5 * height
) )
); );
}else{
setMobilePosition(6);
} }
}; };
const videoPositionHandler = (scrollY) => { const videoPositionHandler = (scrollY) => {
if (scrollY <= 3 * height) { if (scrollY <= 3.5 * height) {
setVideoPosition(() => null); setVideoPosition(() => null);
} else if (scrollY > 3 * height && scrollY < 4 * height) { } else if (scrollY > 3.5 * height && scrollY < 4 * height) {
setVideoPosition(scroll.videoLinearFormula(scrollY)); setVideoPosition(scroll.videoLinearFormula(scrollY));
} else { } 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 ( return (
<div <div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -201,6 +237,7 @@ export default function Page2({ list, page, autoPlay }) {
mobilePosition={mobilePosition} mobilePosition={mobilePosition}
videoPosition={videoPosition} videoPosition={videoPosition}
autoPlay={autoPlay} autoPlay={autoPlay}
unit={unit}
/> />
{/* video */} {/* video */}
</div> </div>

@ -35,17 +35,12 @@ export default function Test({ title, duration, questions }) {
const height = window.innerHeight; const height = window.innerHeight;
if (scrollY <= 4.5 * height) { if (scrollY <= 4.5 * height) {
setTranslateY(() => 0); setTranslateY(() => 0);
setTestPosition(() => null) setTestPosition(() => null);
} else if (scrollY > 4.5 * height && scrollY < 5 * height) { } else if (scrollY > 4.5 * height && scrollY < 5 * height) {
setTranslateY(() => setTranslateY(() =>
scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height) scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
); );
setTestPosition(() => null); setTestPosition(() => null);
} else if(scrollY > 5.5 * height && scrollY < 6 * height) {
setTestPosition(() => scroll.testLinearFolmula(scrollY));
setTranslateY(() => 0);
}else{
} }
}; };
return ( return (
@ -56,11 +51,11 @@ export default function Test({ title, duration, questions }) {
style={{ style={{
minHeight: window.innerHeight - 180, minHeight: window.innerHeight - 180,
transform: `translateY(${translateY}%)`, transform: `translateY(${translateY}%)`,
position : testPosition ? 'fixed' : 'static', position: testPosition ? "fixed" : "static",
left : testPosition?.left ? testPosition?.left : 'auto', left: testPosition?.left ? testPosition?.left : "auto",
top : testPosition?.top ? testPosition?.top : 'auto', top: testPosition?.top ? testPosition?.top : "auto",
width : testPosition?.width ? testPosition?.width : 'auto', width: testPosition?.width ? testPosition?.width : "auto",
height : testPosition?.height ? testPosition?.height : 'auto' height: testPosition?.height ? testPosition?.height : "auto",
}} }}
> >
<header <header

@ -3,10 +3,7 @@ import Navbar from "../../components/Navbar";
import Page1 from "./Page1"; import Page1 from "./Page1";
import Page2 from "./Page2"; import Page2 from "./Page2";
// import Page3 from "./Page3";
// import Page4 from "./Page4";
import VideoTube from "./VideoTube"; import VideoTube from "./VideoTube";
// import Dots from "../../components/Dots";
export default function Home() { export default function Home() {
const [autoPlay, setAutoPlay] = useState(false); const [autoPlay, setAutoPlay] = useState(false);
@ -14,7 +11,6 @@ export default function Home() {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) { if (window.scrollY > 3 * window.innerHeight) {
setAutoPlay(() => true); setAutoPlay(() => true);
// alert('here');
} else { } else {
setAutoPlay(() => false); setAutoPlay(() => false);
} }
@ -23,7 +19,7 @@ export default function Home() {
return ( return (
<div <div
className="flex flex-col bg-white relative w-full rtl" className="flex flex-col bg-white relative w-full rtl"
style={{ height: "700vh" }} style={{ height: "900vh" }}
> >
<Navbar /> <Navbar />
<Page1 page={1} /> <Page1 page={1} />

@ -12,13 +12,16 @@ module.exports = {
textColor : (theme) => ({ textColor : (theme) => ({
...theme("colors"), ...theme("colors"),
primary: "#235A90", primary: "#235A90",
blueC0: "#196EC0",
blueE8 : '#2E81E8', blueE8 : '#2E81E8',
green71 : '#067182', green71 : '#067182',
blue52 : '#132F52', blue52 : '#132F52',
blue5F : '#05335F'
}), }),
borderColor : (theme) => ({ borderColor : (theme) => ({
...theme("colors"), ...theme("colors"),
blueC0: "#196EC0", blueC0: "#196EC0",
blueFE : "#C1E0FE"
}) })
}, },
variants: { variants: {

Loading…
Cancel
Save