diff --git a/src/components/Body/Body.jsx b/src/components/Body/Body.jsx index 93bedc4..b80f914 100644 --- a/src/components/Body/Body.jsx +++ b/src/components/Body/Body.jsx @@ -62,7 +62,11 @@ const Body = () => { }, [data.fullscreenPhotoId]); const handleRotationRight = () => { - handleClick(photosList[fullscreenIndex + 1].id); + let newIndex = fullscreenIndex + 1; + if (newIndex >= photosList.length) { + newIndex = 0; + } + handleClick(photosList[newIndex].id); }; const handleRotationLeft = () => { diff --git a/src/components/Body/MyModal.jsx b/src/components/Body/MyModal.jsx index c698893..5fde4c7 100644 --- a/src/components/Body/MyModal.jsx +++ b/src/components/Body/MyModal.jsx @@ -23,7 +23,7 @@ const MyModal = ({ return (
{isSlideShow - ? + ? : }
diff --git a/src/components/Body/Slideshow.jsx b/src/components/Body/Slideshow.jsx index f657d18..2af4896 100644 --- a/src/components/Body/Slideshow.jsx +++ b/src/components/Body/Slideshow.jsx @@ -1,39 +1,19 @@ import React from "react"; -import { useAppContext } from "../AppContext"; - import Control from "./Control"; import "../../styles/Body.css"; -const Slideshow = ({ photo, handleRotationRight, rightArrow }) => { - const timeoutRef = React.useRef(null); - - const { setIsSlideShow } = useAppContext(); - - function resetTimeout() { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - } - +const Slideshow = ({ photo, handleRotationRight }) => { React.useEffect(() => { - resetTimeout(); - timeoutRef.current = setTimeout( - () => { - if (rightArrow) { - handleRotationRight(); - } else { - setIsSlideShow(false); - } - }, - 3000 - ); + const interval = setInterval(() => { + handleRotationRight(); + }, 3000); return () => { - resetTimeout(); + clearInterval(interval); }; - }, [photo]); + }, [handleRotationRight]); return (
diff --git a/src/styles/theme-variables.css b/src/styles/theme-variables.css index 86f3ff4..df5bf32 100644 --- a/src/styles/theme-variables.css +++ b/src/styles/theme-variables.css @@ -2,7 +2,7 @@ --mainBGColor: #1A1A1A; --mainColor: white; --additionalColor: #8A8A8A; - --opacityBGColor: rgba(27, 27, 27, 0.5); + --opacityBGColor: #000000; --additionalBGColor: #2E2E2E; --colorRectangle: yellow; --borderRectangle: yellow;