Merge branch 'main' of https://github.com/dvm-bitspilani/oasis-2024-web

dvm-bitspilani · Oct 17, 2024 · f5a768a · f5a768a
2 parents cffc4d9 + 642e55c
commit f5a768a
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 13 deletions.
diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss
@@ -44,6 +44,12 @@
       scale: 0.5;
     }
 
+    @media screen and (max-width: 600px) {
+      top: 1rem;
+      left: 1rem;
+      scale: 0.3;
+    }
+
     svg {
       mix-blend-mode: difference;
     }
@@ -150,7 +156,6 @@
           margin-top: 73px;
           font-size: 55px;
           line-height: 70px;
-
           text-align: center;
         }
 
@@ -159,6 +164,10 @@
           line-height: 50px;
           margin-top: 50px;
         }
+
+        @media screen and (max-height: 700px) and (max-width: 600px) {
+          margin-top: 2rem;
+        }
       }
       .eventSubTitle {
         margin: 20px 0;
@@ -383,6 +392,8 @@
       }
 
       .longDescription {
+        font-size: 1.75rem;
+        line-height: 40px;
         @media screen and (max-height: 900px) {
           font-size: 1.25rem;
           line-height: 1.5rem;

diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx
@@ -217,7 +217,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
                 </div>
                 <div
                   className={`${styles.eventDescription} ${
-                    eventsList[eventID]?.about.length > 500
+                    eventsList[eventID]?.about.length > 350
                       ? `${styles.longDescription}`
                       : ""
                   }`}

diff --git a/components/Landing/Grid/grid.module.scss b/components/Landing/Grid/grid.module.scss
@@ -12,4 +12,13 @@
     height: 100lvh;
     object-fit: cover;
   }
+}
+
+@media(max-width: 5500px) and (min-width:1920px) {
+  .grid {
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx
@@ -15,6 +15,8 @@ interface Props {
   music: string;
   artist: string;
   spotifyUrl: string;
+  playingArtist: string | null;
+  setPlayingArtist: any;
 }
 
 gsap.registerPlugin(ScrollTrigger);
@@ -27,6 +29,8 @@ export default function Artist({
   music,
   artist,
   spotifyUrl,
+  playingArtist,
+  setPlayingArtist,
 }: Props) {
   const artistRef: any = useRef(null);
   useGSAP(
@@ -96,6 +100,8 @@ export default function Artist({
           music={music}
           spotifyUrl={spotifyUrl}
           reverse={!reverse}
+          playingArtist={playingArtist}
+          setPlayingArtist={setPlayingArtist}
         />
       </div>
     </div>

diff --git a/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx b/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx
@@ -11,38 +11,47 @@ interface Props {
   artist: string;
   spotifyUrl: string;
   reverse: boolean;
+  playingArtist: string | null;
+  setPlayingArtist: any;
 }
 
 export default function MusicSection({
   music,
   artist,
   spotifyUrl,
   reverse,
+  playingArtist,
+  setPlayingArtist,
 }: Props) {
   const [isMusicPlaying, setIsMusicPlaying] = useState(false);
 
   function playClickHandler() {
-    const allAudios = document.querySelectorAll(".music");
     const thisAudio: HTMLMediaElement = document.querySelector(`#${artist}`)!;
-    allAudios.forEach((elem: any) => {
-      if (!elem.paused) {
-        elem.pause();
-      }
-    });
-    if (!isMusicPlaying) {
+    if (playingArtist !== artist) {
       thisAudio
         .play()
         .then(() => {
+          setPlayingArtist(artist);
           setIsMusicPlaying(true);
         })
         .catch((err) => {
           console.log(err);
         });
-    } else {
+    } else if (playingArtist === artist) {
+      thisAudio.pause();
+      setPlayingArtist(null);
       setIsMusicPlaying(false);
     }
   }
 
+  useEffect(() => {
+    const thisAudio: HTMLMediaElement = document.querySelector(`#${artist}`)!;
+    if (playingArtist !== artist && !thisAudio.paused) {
+      thisAudio.pause();
+      setIsMusicPlaying(false);
+    }
+  }, [playingArtist]);
+
   return (
     <>
       <audio className="music" id={artist} loop>

diff --git a/components/MobileLanding/MobileLanding/MobileLanding.tsx b/components/MobileLanding/MobileLanding/MobileLanding.tsx
@@ -22,6 +22,7 @@ import EventsMobile from "../EventsPageMobile/EventsPageMobile";
 import Slideshow from "../Slideshow/Slideshow";
 
 export default function MobileLanding() {
+  const [playingArtist, setPlayingArtist] = useState(null);
   return (
     <main className={styles.mobileLandingWrapper}>
       <div className={styles.landing}>
@@ -91,7 +92,9 @@ export default function MobileLanding() {
             date={26}
             artist="vishal"
             music="/Audio/kaiseHua.mp3"
-            spotifyUrl="https://open.spotify.com/artist/5wJ1H6ud777odtZl5gG507?si=sez0PAMwRJSGuWPbhjodrQ"
+            spotifyUrl="https://open.spotify.com/playlist/4ynQv4hlWScbngDokGCjjA?si=8x8WBvC6T1mK9o9ztInOAA"
+            playingArtist={playingArtist}
+            setPlayingArtist={setPlayingArtist}
           />
           <Artist
             image={seedheMaut}
@@ -100,7 +103,9 @@ export default function MobileLanding() {
             date={25}
             artist="seedhe"
             music="/Audio/khattaFlow.mp3"
-            spotifyUrl="https://open.spotify.com/artist/2oBG74gAocPMFv6Ij9ykdo?si=UWya2Fu5TQq4BB0XH6txzA"
+            spotifyUrl="https://open.spotify.com/playlist/7cK7NvCBOdSv7f62e5CgAQ?si=DpdIC1uHTki9YJJDjaQZPw"
+            playingArtist={playingArtist}
+            setPlayingArtist={setPlayingArtist}
           />
           <Artist
             image={yellowDiary}
@@ -109,7 +114,9 @@ export default function MobileLanding() {
             date={24}
             artist="yellow"
             music="/Audio/rozroz.mp3"
-            spotifyUrl="https://open.spotify.com/artist/6xlrAAgxcRlgCXnbg2hcFc?si=DbSoZgHhRjyuWv3ME-H-ow"
+            spotifyUrl="https://open.spotify.com/playlist/1DXS4vvkCPMRfKVjAiTeZB?si=bYzlzZHrTziSqQgh37mX6g"
+            playingArtist={playingArtist}
+            setPlayingArtist={setPlayingArtist}
           />
         </div>
         <Image