310 lines
8.5 KiB

import React, { useState, useEffect } from "react";
import _ from "lodash";
import scroll from "../../../utils/scroll";
import Mobile from "./Mobile";
import qrImage from "../../../assets/images/qrImage.png";
import rightBg from "../../../assets/images/page-bg.png";
import leftBg from "../../../assets/images/page-bg-1.png";
export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [scale, setScale] = useState(null);
const [videoPosition, setVideoPosition] = useState(null);
const [unit, setUnit] = useState(null);
const [boxPosition, setBoxPosition] = useState({
translateY: null,
translateX: null,
rotate: null,
});
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,
-(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
6,
2 * height,
2.5 * height
)
);
setScale(
scroll.linearFormula(
window.scrollY > height ? height : window.scrollY,
0.8,
1,
0,
height
)
);
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(
window.scrollY > 2 * height ? 2 * height : window.scrollY,
-5,
10,
height,
2 * height
),
translateX: scroll.linearFormula(
window.scrollY > 2 * height ? 2 * height : window.scrollY,
-5,
32,
height,
2 * height
),
rotate: scroll.linearFormula(
window.scrollY > 2 * height ? 2 * height : window.scrollY,
5,
0,
height,
2 * height
),
});
} else if (window.scrollY > 3 * height) {
setBoxPosition({
...boxPosition,
translateY: scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
-30,
-30,
2.5 * height,
3 * height
),
translateX: scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
32,
32,
2.5 * height,
3 * height
),
rotate: scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
0,
0,
2.5 * height,
3 * height
),
});
}
window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY;
setTop(scroll.homeScrollHandler(page));
setScale(scaleHandler(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(() => {
// if (boxPosition.translateY < -17) {
// }
}, [boxPosition]);
useEffect(() => {
unitPositionHandler(window.scrollY);
}, [mobilePosition]);
const boxPositionHandler = (scrollY) => {
if (scrollY <= height) {
setBoxPosition({
translateY: -5,
translateX: -5,
rotate: 5,
});
}
if (scrollY > height && scrollY <= 2 * height) {
setBoxPosition({
...boxPosition,
translateY: scroll.linearFormula(scrollY, -5, 10, height, 2 * height),
translateX: scroll.linearFormula(scrollY, -5, 32, height, 2 * height),
rotate: scroll.linearFormula(scrollY, 5, 0, height, 2 * height),
});
}
if (scrollY > 2.5 * height && scrollY <= 3 * height) {
setBoxPosition({
...boxPosition,
translateY: scroll.linearFormula(
scrollY,
10,
-30,
2.5 * height,
3 * height
),
translateX: scroll.linearFormula(
scrollY,
32,
32,
2.5 * height,
3 * height
),
rotate: scroll.linearFormula(scrollY, 0, 0, 2.5 * height, 3 * height),
});
} else {
}
};
const mobilePositionHandler = (scrollY) => {
if (scrollY <= 2 * height) {
setMobilePosition(
-(((window.innerHeight * 10) / 20 / window.innerWidth) * 100)
);
} else if (scrollY > 2 * height && scrollY <= 2.5 * height) {
setMobilePosition(
scroll.linearFormula(
scrollY,
-(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
6,
2 * height,
2.5 * height
)
);
} else {
setMobilePosition(6);
}
};
const videoPositionHandler = (scrollY) => {
if (scrollY <= 3.5 * height) {
setVideoPosition(() => null);
} 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 <= 2.8 * height) {
setUnit(3);
} else if (scrollY > 2.8 * height && scrollY < 3.5 * height) {
setUnit(4);
}
};
const scaleHandler = (scrollY) => {
if (scrollY === 0) {
setScale(0.8);
} else if (scrollY > 0 && scrollY <= height) {
setScale(
scroll.linearFormula(
scrollY,
0.8,
1,
0,
height
)
);
} else {
setScale(1);
}
};
return (
<div
onClick={(e) => e.stopPropagation()}
className={_.join(
["home-page2 h-screen w-full fixed left-0 origin-top overflow-hidden"],
" "
)}
style={{
top: top,
transform: `rotateX(${
window.scrollY > 0
? window.scrollY <= height
? 90 - (window.scrollY / height) * 90
: 0
: 90
}deg) scale(${scale})`,
}}
>
<div
className={_.join(
[
"relative shadow-2xl transform flex bg-white text-center overflow-hidden",
],
" "
)}
style={{
transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
width: "140%",
height: "140%",
}}
>
<div className="w-1/2 h-full relative">
<img
src={rightBg}
alt=""
// style={{
// transform: `rotate(-${boxPosition.rotate}deg))`,
// }}
className="w-full"
/>
<video
className={_.join(
[
"video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer",
],
" "
)}
controls
>
<source
src={`https://dnvn.ir/api/v1/file/${20840}`}
type={"video/mp4"}
/>
</video>
</div>
<div className="w-1/2 h-full relative">
<img
src={leftBg}
alt=""
className="absolute w-full h-full left-0 top-0"
/>
<div className="absolute left-5 top-5 h-40 w-40 z-10 bg-white">
<img src={qrImage} alt="" />
</div>
<div
className="absolute left-7 bg-black z-10"
style={{
height: (window.innerHeight * 9) / 25 - 40,
width: (window.innerHeight * 10) / 20 - 16,
bottom: (window.innerHeight * 9) / 30,
}}
></div>
</div>
</div>
{/* mobile phone */}
<Mobile
mobilePosition={mobilePosition}
videoPosition={videoPosition}
autoPlay={autoPlay}
unit={unit}
/>
{/* video */}
</div>
);
}