Make some little improvements to the UI

client/src/components/CarouselSliders.js

@@ -1,15 +1,16 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import YouTube from "react-youtube";
 import styles from "./styles/CarouselSliders.module.css";
 
 const CarouselSliders = (props) => {
-  const [activeIdx, setActiveIdx] = React.useState(0);
+  const [activeVideoID, setActiveVideoID] = React.useState(null);
   const players = useRef({});
 
-  const opts = {
-    // width: "420",
-    // height: "210",
-  };
+  const activeVid = props.matches.length ? props.matches[0].YouTubeID : "";
+
+  useEffect(() => {
+    setActiveVideoID(activeVid);
+  }, [props.matches]);
 
   const onReady = (event, videoId) => {
     players.current[videoId] = event.target;
@@ -17,6 +18,8 @@ const CarouselSliders = (props) => {
 
   const onPlay = (event) => {
     const videoId = event.target.getVideoData().video_id;
+    setActiveVideoID(videoId);
+
     // Pause other videos
     Object.values(players.current).forEach((player) => {
       const otherVideoId = player.getVideoData().video_id;
@@ -35,24 +38,21 @@ const CarouselSliders = (props) => {
         {!props.matches.length ? null : (
           <div className={styles.Slider}>
             {props.matches.map((match, index) => {
-              const [h, m, s] = match.timestamp.split(":");
-              const timestamp =
-                parseInt(h, 10) * 360 + parseInt(m, 10) * 60 + parseInt(s, 10);
+              const start = (parseInt(match.Timestamp) / 1000) | 0;
 
               return (
                 <div
                   key={index}
-                  id={`slide-${index}`}
+                  id={`slide-${match.YouTubeID}`}
                   className={styles.SlideItem}
                 >
                   <YouTube
-                    videoId={match.youtubeid}
+                    videoId={match.YouTubeID}
                     opts={{
-                      ...opts,
-                      playerVars: { start: timestamp, rel: 0 },
+                      playerVars: { start: start, rel: 0 },
                     }}
                     iframeClassName={styles.Iframe}
-                    onReady={(event) => onReady(event, match.youtubeid)}
+                    onReady={(event) => onReady(event, match.YouTubeID)}
                     onPlay={onPlay}
                   />
                 </div>
@@ -62,18 +62,18 @@ const CarouselSliders = (props) => {
         )}
 
         <div className={styles.Circles}>
-          {props.matches.map((_, index) => {
+          {props.matches.map((match, _) => {
             return (
               <a
-                key={index}
+                key={match.YouTubeID}
                 className={
-                  index !== activeIdx
+                  match.YouTubeID !== activeVideoID
                     ? styles.Link
                     : `${styles.Link} ${styles.ActiveLink}`
                 }
-                href={`#slide-${index}`}
+                href={`#slide-${match.YouTubeID}`}
                 onClick={() => {
-                  setActiveIdx(index);
+                  setActiveVideoID(match.YouTubeID);
                 }}
               ></a>
             );

client/src/components/Form.js

@@ -17,13 +17,11 @@ const Form = ({ socket }) => {
     }
 
     socket.emit("newDownload", spotifyUrl);
-    console.log("newDownload: ", spotifyUrl);
     setFormState(initialState);
   };
 
   const spotifyURLisValid = (url) => {
     if (url.length === 0) {
-      console.log("Spotify URL required");
       return false;
     }
 

client/src/components/Listen.js

@@ -14,7 +14,7 @@ const ListenButton = ({ isListening, onClick, disable }) => {
           : `${styles.ListenButton} ${styles.Enabled}`
       }
     >
-      {disable ? "Loading..." : isListening ? "Listening..." : "Listen"}
+      {isListening ? "Listening..." : "Listen"}
     </button>
   );
 };

client/src/components/styles/CarouselSliders.module.css

@@ -3,14 +3,12 @@
 }
 
 .Slider {
-    /* height: 90vmin; */
-    width: 100%;
-    /* background-color: #c1c1c1; */
     display: flex;
     overscroll-behavior-inline: contain;
     scroll-snap-type: inline mandatory;
     overflow-x: scroll;
     scroll-behavior: smooth;
+    
 }
 
 .Slider::-webkit-scrollbar {
@@ -35,7 +33,6 @@
     height: 100%;
     width: 100%;
     margin-left: 20px;
-   flex-grow: 1;
    scroll-snap-align: center;
 }
 
@@ -43,21 +40,17 @@
 .SlideItem:nth-child(2) { background-color: dodgerblue;}
 .SlideItem:nth-child(3) { background-color: greenyellow;}
 
-.Iframe {
-    width: 500px;
-    height: 300px;
-  }
 
-@media screen and (max-width: 500px) {
+
+@media (min-width: 768px) {
     .Iframe {
-        width: 420px;
-        height: 200px;
+        width: 450px;
+        height: 300px;
     }
+}
 
-    .Slider {
-        overflow-x: hidden;
-    }
 
+@media screen and (min-width: 768px) {
     .Circles {
         display: flex;
         align-items: center;
@@ -71,25 +64,10 @@
         display: inline-block;
         border-radius: 50%;
         background-color: #c1c1c1;
+        transition: all 0.5s ease-in-out;
     }
 
     .Link.ActiveLink {
         background-color: #6a0dad;
       }
 }
-@media screen and (max-width: 600px) {
-    .Iframe {
-        width: 820px;
-        height: 400px;
-    }
-}
-
-@media screen and (max-width: 700px) {
-    .Iframe {
-        width: 420px;
-        height: 210px;
-    }
-    /* .SlideItem {
-        width: 20;
-    } */
-} 

client/src/components/styles/Form.module.css

@@ -4,7 +4,7 @@ Form {
     margin-bottom: 30px;
     display: flex;
     gap: 12px;
-    align-items: end;
+    align-items: flex-end;
     justify-content: center;
   }
   
@@ -14,7 +14,7 @@ Form {
       margin: auto;
       display: flex;
       gap: 12px;
-      align-items: end;
+      align-items: flex-end;
       justify-content: center;
     }
   }

client/src/index.css

@@ -48,11 +48,24 @@ main {
 }
 
 .App {
-  width: 65%;
+  width: 55%;
   margin: auto;
   padding-bottom: 20px;
 }
 
+.TopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+@media screen and (max-width: 600px) {
+  .App {
+    width: 80%;
+  }
+}
+
 .songs {
   text-align: right;
 }