reviews
This commit is contained in:
@@ -38,7 +38,6 @@ const Histories = () => {
|
||||
setIsViewportEntered(true);
|
||||
}
|
||||
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [videoRefs, setVideoRefs] = useState<
|
||||
React.RefObject<HTMLVideoElement>[]
|
||||
>([]);
|
||||
@@ -55,14 +54,12 @@ const Histories = () => {
|
||||
function handleOnLeftMove(): void {
|
||||
if (selectedVideo > 0) {
|
||||
setSelectedVideo((prev) => prev - 1);
|
||||
// setOffset((prev) => prev + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnRightMove(): void {
|
||||
if (selectedVideo < 2) {
|
||||
setSelectedVideo((prev) => prev + 1);
|
||||
// setOffset((prev) => prev - 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+13
-75
@@ -37,12 +37,6 @@ const Reviews = () => {
|
||||
if (isViewportEntered) return;
|
||||
setIsViewportEntered(true);
|
||||
}
|
||||
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [videoRefs, setVideoRefs] = useState<
|
||||
React.RefObject<HTMLVideoElement>[]
|
||||
>([]);
|
||||
const [videoProgress, setVideoProgress] = useState(0);
|
||||
const [cardWidth, setCardWidth] = useState(0);
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: handleOnRightMove,
|
||||
@@ -55,25 +49,17 @@ const Reviews = () => {
|
||||
function handleOnLeftMove(): void {
|
||||
if (selectedVideo > 0) {
|
||||
setSelectedVideo((prev) => prev - 1);
|
||||
setOffset((prev) => prev + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnRightMove(): void {
|
||||
if (selectedVideo < 2) {
|
||||
setSelectedVideo((prev) => prev + 1);
|
||||
setOffset((prev) => prev - 1);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setDocument(document);
|
||||
|
||||
setVideoRefs((elRefs) =>
|
||||
Array.from({ length: VIDEOS.length }, (_, index) => index).map(
|
||||
(_, i) => elRefs[i] || createRef()
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -82,64 +68,16 @@ const Reviews = () => {
|
||||
const clientWidth = _document.children[0].clientWidth;
|
||||
|
||||
if (clientWidth >= 1600) {
|
||||
setCardWidth(420);
|
||||
setCardWidth(1000);
|
||||
} else if (clientWidth >= 1280) {
|
||||
setCardWidth(379);
|
||||
setCardWidth(805);
|
||||
} else if (clientWidth >= 640) {
|
||||
setCardWidth(370);
|
||||
setCardWidth(736);
|
||||
} else {
|
||||
setCardWidth(clientWidth - 16);
|
||||
}
|
||||
}, [_document]);
|
||||
|
||||
useEffect(() => {
|
||||
videoRefs.forEach((video, index) => {
|
||||
if (!video.current) return;
|
||||
if (index === selectedVideo) {
|
||||
video.current.play();
|
||||
} else {
|
||||
video.current.pause();
|
||||
}
|
||||
});
|
||||
}, [videoRefs, selectedVideo, isViewportEntered]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentVideoRef = videoRefs[selectedVideo];
|
||||
if (!currentVideoRef || !currentVideoRef.current) return;
|
||||
|
||||
const progress = Math.round(
|
||||
(100 / currentVideoRef.current.duration) *
|
||||
currentVideoRef.current.currentTime
|
||||
);
|
||||
setVideoProgress(progress);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (!currentVideoRef || !currentVideoRef.current) return;
|
||||
const progress =
|
||||
(100 / currentVideoRef.current.duration) *
|
||||
currentVideoRef.current.currentTime;
|
||||
|
||||
setVideoProgress(progress);
|
||||
if (progress === 100) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [selectedVideo, videoRefs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (100 - 3 < videoProgress) {
|
||||
if (offset <= -1 * videoRefs.length + 1) {
|
||||
setOffset(0);
|
||||
setSelectedVideo(0);
|
||||
} else {
|
||||
setOffset((prev) => prev - 1);
|
||||
setSelectedVideo((prev) => prev + 1);
|
||||
}
|
||||
}
|
||||
}, [videoProgress]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
onViewportEnter={handleViewportEnter}
|
||||
@@ -149,12 +87,21 @@ const Reviews = () => {
|
||||
<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-[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">
|
||||
<h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] leading-10 sm:mb-8 mb-6 font-gilroy">
|
||||
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
|
||||
Отзывы
|
||||
</p>
|
||||
<p>клиентов</p>
|
||||
</h2>
|
||||
<div className="flex gap-6 mb-8">
|
||||
<div className="w-[72px] h-[72px] bg-white rounded-full" />
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Егор Бобров</h2>
|
||||
<p className="w-[272px] opacity-80">
|
||||
Коммерческий директор авторского квартала «Машаров»{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{VIDEOS.map((item, index) => (
|
||||
<Transition
|
||||
@@ -166,9 +113,6 @@ const Reviews = () => {
|
||||
<div
|
||||
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">
|
||||
Эффективность инструмента была подтверждена буквально в
|
||||
первый день после его внедрения. Например, один из
|
||||
@@ -228,12 +172,6 @@ const Reviews = () => {
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto flex gap-2 h-2 sm:hidden">
|
||||
<div className="bg-[#a1a2a6] w-10 h-full rounded-full overflow-hidden">
|
||||
<div
|
||||
className="bg-white w-0 h-full rounded-full transition-all duration-500"
|
||||
style={{ width: `${videoProgress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
{VIDEOS.map((video, index) => (
|
||||
<div
|
||||
key={video.id}
|
||||
|
||||
Reference in New Issue
Block a user