From 316d8c036b359e438d83f3b85093b17a00330878 Mon Sep 17 00:00:00 2001 From: Chigozirim Igweamaka Date: Thu, 9 May 2024 20:46:28 +0100 Subject: [PATCH] Make some little improvements to the UI --- client/src/components/CarouselSliders.js | 38 +++++++++--------- client/src/components/Form.js | 2 - client/src/components/Listen.js | 2 +- .../styles/CarouselSliders.module.css | 40 +++++-------------- client/src/components/styles/Form.module.css | 4 +- client/src/index.css | 15 ++++++- 6 files changed, 45 insertions(+), 56 deletions(-) diff --git a/client/src/components/CarouselSliders.js b/client/src/components/CarouselSliders.js index 9a4ac67..2afc14a 100644 --- a/client/src/components/CarouselSliders.js +++ b/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 : (
{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 (
onReady(event, match.youtubeid)} + onReady={(event) => onReady(event, match.YouTubeID)} onPlay={onPlay} />
@@ -62,18 +62,18 @@ const CarouselSliders = (props) => { )}
- {props.matches.map((_, index) => { + {props.matches.map((match, _) => { return ( { - setActiveIdx(index); + setActiveVideoID(match.YouTubeID); }} > ); diff --git a/client/src/components/Form.js b/client/src/components/Form.js index 014ab52..53ce522 100644 --- a/client/src/components/Form.js +++ b/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; } diff --git a/client/src/components/Listen.js b/client/src/components/Listen.js index 1052c8f..1ea96af 100644 --- a/client/src/components/Listen.js +++ b/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"} ); }; diff --git a/client/src/components/styles/CarouselSliders.module.css b/client/src/components/styles/CarouselSliders.module.css index bc70e05..ed91e77 100644 --- a/client/src/components/styles/CarouselSliders.module.css +++ b/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; - } */ -} \ No newline at end of file +} \ No newline at end of file diff --git a/client/src/components/styles/Form.module.css b/client/src/components/styles/Form.module.css index 0702199..623beb5 100644 --- a/client/src/components/styles/Form.module.css +++ b/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; } } diff --git a/client/src/index.css b/client/src/index.css index 1a050ac..08ee64c 100644 --- a/client/src/index.css +++ b/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; }