From d349a1266b1d357ce3537f12d910c286bbac7ee3 Mon Sep 17 00:00:00 2001 From: Viraj Chandra Date: Sat, 30 Sep 2023 02:35:57 +0530 Subject: [PATCH] audio --- src/components/introAudio/IntroAudio.js | 157 ++++++++---------- src/motionUtils.js | 1 + src/pages/home/sections/section1/Section1.css | 2 +- src/pages/home/sections/section1/Section1.js | 21 ++- 4 files changed, 79 insertions(+), 102 deletions(-) diff --git a/src/components/introAudio/IntroAudio.js b/src/components/introAudio/IntroAudio.js index 6bb60da..a2beacd 100644 --- a/src/components/introAudio/IntroAudio.js +++ b/src/components/introAudio/IntroAudio.js @@ -1,31 +1,10 @@ -import React, {useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import intro_music from "../../assets/audio/intro-music.mp3"; import "./IntroAudio.css"; - -const IntroAudio = () => { - // Intro-Music-Logic +const IntroAudio = () => { const [notPlaying, setnotPlaying] = useState(true); - const [scrollisPlaying, setscrollisPlaying] = useState(null); const audioRef = React.createRef(); - //This part inside useEffect is only to test that music playing upon scrolling part. - const scrollThreshold = 100; - useEffect(() => { - // Function to handle the scroll event - const handleScroll = () => { - //threshold here defines how many pixels you will scroll when the music starts to play - - if (window.scrollY >= scrollThreshold && !scrollisPlaying) { - audioRef.current.play(); - setscrollisPlaying(true); - setnotPlaying(false); //To change the icon - } - }; - window.addEventListener("scroll", handleScroll); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, [scrollisPlaying]); const toggle = () => { if (notPlaying) { @@ -33,100 +12,98 @@ const IntroAudio = () => { } else { audioRef.current.pause(); } - setscrollisPlaying(false); setnotPlaying(!notPlaying); }; return (
- - -
- -
+ /> + + + )} + +
- ) -} + ); +}; -export default IntroAudio \ No newline at end of file +export default IntroAudio; diff --git a/src/motionUtils.js b/src/motionUtils.js index c1582ca..41f6835 100644 --- a/src/motionUtils.js +++ b/src/motionUtils.js @@ -26,6 +26,7 @@ export const sliderSettings = { slidesToShow: 3, slidesToScroll: 1, initialSlide: 0, + lazyload: true, touchMove: true, useCSS: true, autoplay: true, diff --git a/src/pages/home/sections/section1/Section1.css b/src/pages/home/sections/section1/Section1.css index 1adc5ff..454e2c2 100644 --- a/src/pages/home/sections/section1/Section1.css +++ b/src/pages/home/sections/section1/Section1.css @@ -141,7 +141,7 @@ .codeutsava__section1-side-links { position: absolute; left: 48px; - bottom: 4rem; + bottom: 5rem; margin: 0; padding: 0; list-style: none; diff --git a/src/pages/home/sections/section1/Section1.js b/src/pages/home/sections/section1/Section1.js index 85055e6..c0482d5 100644 --- a/src/pages/home/sections/section1/Section1.js +++ b/src/pages/home/sections/section1/Section1.js @@ -3,7 +3,6 @@ import "./Section1.css"; import codeutsavaTitle from "../../../../assets/images/codeutsavaTitle3d.svg"; import discord from "../../../../assets/images/discord.svg"; import wel from "../../../../assets/images/welcome.png"; -import intro_music from "../../../../assets/audio/intro-music.mp3"; import { animate, motion, transform } from "framer-motion"; import { @@ -19,16 +18,16 @@ const Section1 = () => { const c1 = "#7f00a6"; const c2 = "#b200ee"; - // React.useEffect(() => { - // const script = document.createElement("script"); - // script.src = "https://apply.devfolio.co/v2/sdk.js"; - // script.async = true; - // script.defer = true; - // document.body.appendChild(script); - // return () => { - // document.body.removeChild(script); - // }; - // }, []); + React.useEffect(() => { + const script = document.createElement("script"); + script.src = "https://apply.devfolio.co/v2/sdk.js"; + script.async = true; + script.defer = true; + document.body.appendChild(script); + return () => { + document.body.removeChild(script); + }; + }, []); const canvasRef = useRef(null); useEffect(() => {