history fixed + review starting
This commit is contained in:
@@ -51,7 +51,6 @@ const Histories = () => {
|
||||
});
|
||||
const [selectedVideo, setSelectedVideo] = useState<number>(0);
|
||||
const [_document, setDocument] = useState<Document>();
|
||||
const [isVideoFinish, setIsVideoFinish] = useState(false);
|
||||
|
||||
function handleOnLeftMove(): void {
|
||||
if (selectedVideo > 0) {
|
||||
@@ -108,7 +107,7 @@ const Histories = () => {
|
||||
const currentVideoRef = videoRefs[selectedVideo];
|
||||
if (!currentVideoRef || !currentVideoRef.current) return;
|
||||
|
||||
const progress = Math.round(
|
||||
const progress = Math.ceil(
|
||||
(100 / currentVideoRef.current.duration) *
|
||||
currentVideoRef.current.currentTime
|
||||
);
|
||||
@@ -129,24 +128,13 @@ const Histories = () => {
|
||||
return () => clearInterval(interval);
|
||||
}, [selectedVideo, videoRefs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (100 - 5 < videoProgress) {
|
||||
if (selectedVideo >= videoRefs.length - 1) {
|
||||
// setOffset(0);
|
||||
console.log("first");
|
||||
setSelectedVideo(0);
|
||||
setVideoProgress(0);
|
||||
const currentVideoRef = videoRefs[selectedVideo];
|
||||
if (currentVideoRef && currentVideoRef.current) {
|
||||
currentVideoRef.current.currentTime = 0;
|
||||
}
|
||||
} else {
|
||||
console.log("second");
|
||||
// setOffset((prev) => prev - 1);
|
||||
setSelectedVideo((prev) => prev + 1);
|
||||
}
|
||||
function handleOnVideoEnd(): void {
|
||||
if (selectedVideo >= videoRefs.length - 1) {
|
||||
setSelectedVideo(0);
|
||||
} else {
|
||||
setSelectedVideo((prev) => prev + 1);
|
||||
}
|
||||
}, [videoProgress]);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -222,10 +210,12 @@ const Histories = () => {
|
||||
ref={videoRefs[index]}
|
||||
src={isViewportEntered ? video.value : ""}
|
||||
muted
|
||||
loop
|
||||
// loop
|
||||
playsInline
|
||||
preload="metadata"
|
||||
className="w-full h-full object-cover touch-none"
|
||||
onEnded={handleOnVideoEnd}
|
||||
// onEnded={() => console.log("first")}
|
||||
/>
|
||||
|
||||
<div
|
||||
|
||||
@@ -9,7 +9,7 @@ type ProjectYearSectionProps = {
|
||||
|
||||
const ProjectsSection = ({ year, projects }: ProjectYearSectionProps) => {
|
||||
return (
|
||||
<div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4 pt-4">
|
||||
<div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4 pt-8">
|
||||
<LabelCard label={year} />
|
||||
{projects.map((project, index) => (
|
||||
<ProjectCard key={index} {...project} />
|
||||
|
||||
+10
-26
@@ -145,9 +145,9 @@ const Reviews = () => {
|
||||
onViewportEnter={handleViewportEnter}
|
||||
className="container mx-auto 2xl:max-w-screen-2xl flex flex-col justify-center 2xl:mb-[200px] sm:mb-[120px] mb-20"
|
||||
>
|
||||
<div className="sm:border-b border-b-[#3D425C] 2xl:h-[760px] xl:h-[687px] sm:h-[656px] h-full">
|
||||
<div className="sm:border-b border-b-[#3D425C] 2xl:h-[594px] xl:h-[484px] sm:h-[404px] h-full">
|
||||
<div className="flex sm:h-full h-fit sm:flex-row flex-col sm:w-full sm:mx-0 mx-auto">
|
||||
<div className=" flex flex-col justify-between 2xl:min-w-[384px] xl:min-w-[308px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
|
||||
<div className=" flex flex-col justify-between 2xl:min-w-[496px] xl:min-w-[395px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
|
||||
<div className="2xl:pr-10 xl:pr-8 sm:pr-[37px]">
|
||||
<h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] leading-10 sm:mb-10 mb-6 font-gilroy">
|
||||
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
|
||||
@@ -164,13 +164,18 @@ const Reviews = () => {
|
||||
>
|
||||
{(state) => (
|
||||
<div
|
||||
className={`absolute 2xl:w-[344px] xl:w-[276px] sm:w-[226px] w-[280px] transition-opacity duration-300 ${state}`}
|
||||
className={`absolute 2xl:w-[456px] xl:w-[363px] sm:w-[350px] w-[280px] transition-opacity duration-300 ${state}`}
|
||||
>
|
||||
<p className="font-semibold mb-4 2xl:text-xl xl:text-[16px] sm:block hidden">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="font-normal 2xl:text-[16px] xl:text-[14px] sm:block hidden">
|
||||
{item.desc}
|
||||
Эффективность инструмента была подтверждена буквально в
|
||||
первый день после его внедрения. Например, один из
|
||||
клиентов, посетив офис и увидев свою будущую квартиру с
|
||||
помощью интерактивной панели, сразу решил купить
|
||||
недвижимость в этом проекте, отказавшись от других
|
||||
вариантов
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -208,28 +213,7 @@ const Reviews = () => {
|
||||
selectedVideo === index ? "opacity-100" : "opacity-60"
|
||||
}`}
|
||||
>
|
||||
<video
|
||||
poster={"/images/posters/integra_crm.jpg"}
|
||||
// poster={video.poster}
|
||||
ref={videoRefs[index]}
|
||||
src={isViewportEntered ? video.value : ""}
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
preload="metadata"
|
||||
className="w-full h-full object-cover touch-none"
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`absolute bottom-0 w-full h-1 bg-[#52587A] sm:block hidden transition-opacity duration-500 ${
|
||||
offset === -1 * index ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-0 bg-white h-1 transition-[width] duration-500"
|
||||
style={{ width: `${videoProgress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<img src="/images/posters/integra_crm.jpg" alt="img" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user