diff --git a/src/components/Histories.tsx b/src/components/Histories.tsx index a8251b0..3673666 100644 --- a/src/components/Histories.tsx +++ b/src/components/Histories.tsx @@ -38,7 +38,6 @@ const Histories = () => { setIsViewportEntered(true); } - const [offset, setOffset] = useState(0); const [videoRefs, setVideoRefs] = useState< React.RefObject[] >([]); @@ -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); } } diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx index 2b7959c..4640694 100644 --- a/src/components/Reviews.tsx +++ b/src/components/Reviews.tsx @@ -37,12 +37,6 @@ const Reviews = () => { if (isViewportEntered) return; setIsViewportEntered(true); } - - const [offset, setOffset] = useState(0); - const [videoRefs, setVideoRefs] = useState< - React.RefObject[] - >([]); - 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 ( {
-

+

Отзывы

клиентов

+
+
+
+

Егор Бобров

+

+ Коммерческий директор авторского квартала «Машаров»{" "} +

+
+
{VIDEOS.map((item, index) => ( {
-

- {item.title} -

Эффективность инструмента была подтверждена буквально в первый день после его внедрения. Например, один из @@ -228,12 +172,6 @@ const Reviews = () => {

-
-
-
{VIDEOS.map((video, index) => (