Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

reza added some option

Browse Source
temp
Reza_ashrafi 3 years ago
parent 0fe08f3825
commit 1d113815e7
13 changed files with 351 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/ar.jpg
  2. 50
      src/components/JolPlayer/index.js
  3. 121
      src/redux/reducers/public.js
  4. 36
      src/utils/scroll.js
  5. 23
      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. 124
      src/views/Home/Page2/Mobile/index.js
  10. 53
      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

BIN
src/assets/images/ar.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

50
src/components/JolPlayer/index.js
Unescape View File

@ -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 (

121
src/redux/reducers/public.js
Unescape View File

@ -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 = [
@ -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":

36
src/utils/scroll.js
Unescape View File

@ -96,30 +96,35 @@ 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();

23
src/views/Home/Page1/index.js
Unescape View File

@ -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,13 +118,23 @@ export default function Page1({ list, page }) {
آزمون ها آزمون ها
</Link> </Link>
</div> </div>
<div className="flex flex-col">
<h1 className="text-xl font-semibold text-blueC0">
لذت یادگیری را با دانوین تجربه کنید
</h1>
<p className="text-blue5F font-light text-sm w-64 mt-1 text-justify">
ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی
جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش
کشور ایجاد کنیم.
</p>
<Link <Link
to="/products" to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md" 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" /> ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link> </Link>
</div> </div>
</div>
<img <img
src={arrowBottomIcon} src={arrowBottomIcon}

11
src/views/Home/Page2/Mobile/AR/index.js
Unescape View File

@ -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>
)
}

72
src/views/Home/Page2/Mobile/QrResult/index.js
Unescape View File

@ -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'
},
]
};

36
src/views/Home/Page2/Mobile/QrScanner/index.js
Unescape View File

@ -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>
);
}

124
src/views/Home/Page2/Mobile/index.js
Unescape View File

@ -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 className="relative w-full h-full flex">
<div <div
className={_.join( className={_.join(
[ [
"relative w-full h-full min-h-full", "absolute left-0 top-0 h-full w-full",
window.scrollY > 2500 ? "hidden" : "", unit === 1 ? "opacity-100" : "opacity-0",
], ],
" " " "
)} )}
> >
<QrScanner />
</div>
<div <div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" className={_.join(
style={{ height: "10%" }} [
></div> "absolute w-full h-full min-h-full transform",
<div unit === 2 ? "opacity-100" : "opacity-0",
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" ],
style={{ " "
top: "10%", )}
height: "28%", >
width: "25%", <QrResult />
}} </div>
></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 <div
className="scanner absolute bg-green-300" className={_.join(
style={{ height: 5, width: "50%", left: "25%", top: "10%" }} [
></div> "absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<AR />
</div> </div>
<div <div
className={_.join( className={_.join(
[ [
"relative w-full h-full min-h-full bg-green-200 transition-all transform", "absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
checked ? "-translate-y-full" : "", unit === 4 ? "opacity-100" : "opacity-0",
window.scrollY > 2500 ? "hidden" : "",
], ],
" " " "
)} )}
></div> >
{window.scrollY > 2500 ? (
<video <video
id="video" id="video"
className={_.join( className={_.join(
[ [
"video outline-none animation-puls bg-black", "video outline-none animation-puls bg-black",
window.scrollY > 3 * window.innerHeight ? "fixed" : "static", window.scrollY > 3.5 * window.innerHeight ? "fixed" : "static",
], ],
" " " "
)} )}
style={{ style={{
height: window.scrollY <= 3 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height, height:
width: window.scrollY <= 3 * window.innerHeight ? "100%" : videoPosition?.width, window.scrollY < 3.5 * window.innerHeight
left : window.scrollY > 3 * window.innerHeight ? videoPosition?.left : 'auto', ? (window.innerHeight * 9) / 25
top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto', : 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 controls
autoPlay={'true'} autoPlay={"true"}
> >
<source src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`} type={"video/mp4"} /> <source
src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`}
type={"video/mp4"}
/>
</video> </video>
) : null} </div>
</div>
</div> </div>
); );
} }
export default connect((state) => ({ export default connect(
selectedVideo : state.publicApi.selectedVideo (state) => ({
}), {})(Mobile); selectedVideo: state.publicApi.selectedVideo,
}),
{}
)(Mobile);

53
src/views/Home/Page2/index.js
Unescape View File

@ -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
) )
); );
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
setVideoPosition( setVideoPosition(
window.scrollY > 3 * height window.scrollY > 4 * height
? scroll.videoLinearFormula(window.scrollY) ? scroll.videoLinearFormula(4 * height)
: null : 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>

17
src/views/Home/Test/index.js
Unescape View File

@ -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

6
src/views/Home/index.js
Unescape View File

@ -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} />

3
tailwind.config.js
Unescape View File

@ -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: {

Write Preview
Loading…
Cancel
Save