diff --git a/components/LandingPage/LandingPage.tsx b/components/LandingPage/LandingPage.tsx index 2a4b801..4224757 100644 --- a/components/LandingPage/LandingPage.tsx +++ b/components/LandingPage/LandingPage.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import TopSongs from "../modules/TopSongs/TopSongs"; // import HotSongs from "../modules/HotSongs"; -// import NewReleases from "../modules/NewReleases"; +import NewReleases from "../modules/NewReleases"; import PageCard from "../modules/__modules__/Card/PageCard"; // import FeaturedAlbum from "../modules/FeaturedAlbum"; @@ -11,7 +11,7 @@ const LandingPage = () => { return (
- {/* */} + {/* */} diff --git a/components/modules/AdminDashboard/_modules/BestArtist/index.tsx b/components/modules/AdminDashboard/_modules/BestArtist/index.tsx index f799c41..4135973 100644 --- a/components/modules/AdminDashboard/_modules/BestArtist/index.tsx +++ b/components/modules/AdminDashboard/_modules/BestArtist/index.tsx @@ -9,7 +9,7 @@ const BestArtist = () => {

Best Artist

{ streamsBgClassName="bg-green-500" /> { streamsBgClassName="bg-primary" /> { -// const [isPlaying, setIsPlaying] = useState(-1); -// const [isPaused, setIsPaused] = useState(false); -// return ( -//
-//

-// New Release -//

-//
-// live background -//
-//
-//
-// -//
-//
-//
-// -//
-//
-//
-//
-// {songs.map((item, index) => { -// return ( -//
-//
-// {item.title} -//
-//
-//

{item.title}

-//

{item.artist}

-//
-//
-// -//
-//
{ -// if (isPlaying === index && !isPaused) { -// setIsPaused(true); -// setIsPlaying(index); -// } else { -// setIsPaused(false); -// } -// setIsPlaying(index); -// }} -// className="px-4" -// > -// {isPlaying === index && !isPaused ? ( -// -// ) : ( -// -// )} -//
-//
-// -//
-//
-// ); -// })} -//
-//
-//
-//
-// ); -// }; - -// export default NewReleases; diff --git a/components/modules/NewReleases/index.tsx b/components/modules/NewReleases/index.tsx new file mode 100644 index 0000000..12e5465 --- /dev/null +++ b/components/modules/NewReleases/index.tsx @@ -0,0 +1,109 @@ +/* eslint-disable @next/next/no-img-element */ +import React, { useState } from "react"; +import { songs } from "../utils/dummy"; +import { VDots, VPause, VPlay, VStar, VWave } from "../__modules__/_Vectors"; +import AudioPlayer from "../utils/config/audioPlayer"; +import liveBg from "../static/images/livebg.jpg"; +import equalizer from "../static/images/equalizer.gif"; +import { ISong } from "../../../types"; + +const newRealeaseBg = { + backgroundImage: `url(${liveBg.src})`, + backgroundPosition: "center", + backgroundSize: "cover", + backgroundRepeat: "no-repeat", + borderRadius: "20px", +}; + +const NewReleases = () => { + const [isPlaying, setIsPlaying] = useState(-1); + const [isPaused, setIsPaused] = useState(false); + const [tracks, setTracks] = useState(songs); + + function playerControler(index:number){ + return( +
{ + if (isPlaying === index && !isPaused) { + setIsPaused(true); + setIsPlaying(index); + } else { + setIsPaused(false); + } + setIsPlaying(index); + }} + className="px-4" + > + {isPlaying === index && !isPaused ? ( + + ) : ( + + )} +
+ ) + } + return ( +
+

+ New Release +

+
+ live background +
+
+
+ +
+
+
+ +
+
+
+
+ {songs.map((item, index) => { + return ( +
+
+ {item.title} +
+
+

{item.title}

+

{item.artist}

+
+
+ +
+ {playerControler(index)} +
+ +
+
+ ); + })} +
+
+
+
+ ); +}; + +export default NewReleases; diff --git a/components/modules/utils/config/audioControls.jsx b/components/modules/utils/config/audioControls.jsx deleted file mode 100644 index 1365301..0000000 --- a/components/modules/utils/config/audioControls.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// import React from "react"; -// import { VPrev, VNext, VPlay, VPause } from "../../__modules__/_Vectors" -// const AudioControls = ({ -// isPlaying, -// onPlayPauseClick, -// onPrevClick, -// onNextClick -// }) => ( -//
-// -// {isPlaying ? ( -// -// ) : ( -// -// )} -// -//
-// ); - -// export default AudioControls; diff --git a/components/modules/utils/config/audioControls.tsx b/components/modules/utils/config/audioControls.tsx new file mode 100644 index 0000000..7a510ae --- /dev/null +++ b/components/modules/utils/config/audioControls.tsx @@ -0,0 +1,54 @@ +import React, { FC } from "react"; +import { VPrev, VNext, VPlay, VPause } from "../../__modules__/_Vectors" +interface AudioControlsProps{ + isPlaying:boolean; + onPlayPauseClick:Function; + onPrevClick: Function; + onNextClick:Function; +} + +const AudioControls: FC = ({ + isPlaying, + onPlayPauseClick, + onPrevClick, + onNextClick +}) => ( +
+ + {isPlaying ? ( + + ) : ( + + )} + +
+); + +export default AudioControls; diff --git a/components/modules/utils/config/audioPlayer.jsx b/components/modules/utils/config/audioPlayer.jsx deleted file mode 100644 index 90d7e36..0000000 --- a/components/modules/utils/config/audioPlayer.jsx +++ /dev/null @@ -1,143 +0,0 @@ -// import React, { useState, useEffect, useRef } from "react"; -// import AudioControls from "./audioControls"; - -// const AudioPlayer = ({ tracks }) => { -// // State -// const [trackIndex, setTrackIndex] = useState(0); -// const [trackProgress, setTrackProgress] = useState(0); -// const [isPlaying, setIsPlaying] = useState(false); -// const [duration, setDuration] = useState(0); -// // Destructure for conciseness -// const { title, artist, color, image, audioSrc } = tracks[trackIndex]; - -// // Refs -// const audioRef = useRef(null); -// const intervalRef = useRef(); -// const isReady = useRef(false); - -// useEffect(() => { -// audioRef.current = new Audio(audioSrc); -// const { duration } = audioRef.current; -// setDuration(duration); -// }, []); - -// const startTimer = () => { -// // Clear any timers already running -// clearInterval(intervalRef.current); - -// intervalRef.current = setInterval(() => { -// if (audioRef.current.ended) { -// toNextTrack(); -// } else { -// setTrackProgress(audioRef.current.currentTime); -// } -// }, [1000]); -// }; - -// const onScrub = (value) => { -// // Clear any timers already running -// clearInterval(intervalRef.current); -// audioRef.current.currentTime = value; -// setTrackProgress(audioRef.current.currentTime); -// }; - -// const onScrubEnd = () => { -// // If not already playing, start -// if (!isPlaying) { -// setIsPlaying(true); -// } -// startTimer(); -// }; - -// const toPrevTrack = () => { -// if (trackIndex - 1 < 0) { -// setTrackIndex(tracks.length - 1); -// } else { -// setTrackIndex(trackIndex - 1); -// } -// }; - -// const toNextTrack = () => { -// if (trackIndex < tracks.length - 1) { -// setTrackIndex(trackIndex + 1); -// } else { -// setTrackIndex(0); -// } -// }; - -// useEffect(() => { -// if (isPlaying) { -// audioRef.current.play(); -// startTimer(); -// } else { -// audioRef.current.pause(); -// } -// }, [isPlaying]); - -// // Handles cleanup and setup when changing tracks -// useEffect(() => { -// audioRef.current.pause(); - -// audioRef.current = new Audio(audioSrc); -// setTrackProgress(audioRef.current.currentTime); - -// if (isReady.current) { -// audioRef.current.play(); -// setIsPlaying(true); -// startTimer(); -// } else { -// // Set the isReady ref as true for the next pass -// isReady.current = true; -// } -// }, [trackIndex]); - -// useEffect(() => { -// // Pause and clean up on unmount -// return () => { -// audioRef.current.pause(); -// clearInterval(intervalRef.current); -// }; -// }, []); - -// return ( -//
-//
-//
-//
-// {title} -//
-//
-//

{title}

-//

{artist}

-//
-//
- -//
-// -//
-//
-// {/*
-//

{trackProgress}

-//

-{duration}

-//
*/} -// {/* onScrub(e.target.value)} -// onMouseUp={onScrubEnd} -// onKeyUp={onScrubEnd} -// /> */} -//
-// ); -// }; - -// export default AudioPlayer; diff --git a/components/modules/utils/config/audioPlayer.tsx b/components/modules/utils/config/audioPlayer.tsx new file mode 100644 index 0000000..0896290 --- /dev/null +++ b/components/modules/utils/config/audioPlayer.tsx @@ -0,0 +1,105 @@ +import React, { useState, useEffect, useRef, FC } from "react"; +import { ISong } from "../../../../types"; +import AudioControls from "./audioControls"; +interface NewReleasesSongsProps { + tracks: ISong[]; +} + +const AudioPlayer:FC = ({ tracks }) => { + + // State + const [trackIndex, setTrackIndex] = useState(0); + const [trackProgress, setTrackProgress] = useState(0); + const [isPlaying, setIsPlaying] = useState(false); + const [duration, setDuration] = useState(0); + // Destructure for conciseness + const { title, artist, img, audioSrc } = tracks[trackIndex]; + + // Refs + const audioRef = useRef(null); + const intervalRef = useRef(0); + const isReady = useRef(false); + + useEffect(() => { + audioRef.current = new Audio(audioSrc); + const { duration } = audioRef.current; + setDuration(duration); + }, []); + + const startTimer = () => {}; + + const toPrevTrack = () => { + if (trackIndex - 1 < 0) { + setTrackIndex(tracks.length - 1); + } else { + setTrackIndex(trackIndex - 1); + } + }; + + const toNextTrack = () => { + if (trackIndex < tracks.length - 1) { + setTrackIndex(trackIndex + 1); + } else { + setTrackIndex(0); + } + }; + + useEffect(() => { + if (isPlaying) { + audioRef.current?.play(); + startTimer(); + } else { + audioRef.current?.pause(); + } + }, [isPlaying]); + + // Handles cleanup and setup when changing tracks + useEffect(() => { + audioRef.current?.pause(); + + audioRef.current = new Audio(audioSrc); + setTrackProgress(audioRef.current.currentTime); + + if (isReady.current) { + audioRef.current.play(); + setIsPlaying(true); + startTimer(); + } else { + // Set the isReady ref as true for the next pass + isReady.current = true; + } + }, [trackIndex]); + + useEffect(() => { + // Pause and clean up on unmount + return () => { + audioRef.current?.pause(); + }; + }, []); + + return ( +
+
+
+
+ {title} +
+
+

{title}

+

{artist}

+
+
+
+ +
+
+
+ ); +}; + +export default AudioPlayer; diff --git a/components/modules/utils/dummy/index.ts b/components/modules/utils/dummy/index.ts index e299eb3..3b90df5 100644 --- a/components/modules/utils/dummy/index.ts +++ b/components/modules/utils/dummy/index.ts @@ -3,40 +3,45 @@ const URL = export const songs = [ { + id:1, title: "DJ Khaled Featuring", artist: "Dj Khaled", audioSrc: URL, - - image: "https://api.lorem.space/image/album?hash=3173", + img: "https://api.lorem.space/image/album?hash=3173", }, { + id:2, title: "DJ Khaled Featuring", artist: "Cigarette after Sex", audioSrc: URL, - image: "https://api.lorem.space/image/album?hash=3172", + img: "https://api.lorem.space/image/album?hash=3172", }, { + id:3, title: "DJ Khaled Featuring", artist: "Edtyta Gomiak", audioSrc: URL, - image: "https://api.lorem.space/image/album?hash=3175", + img: "https://api.lorem.space/image/album?hash=3175", }, { + id:4, title: "DJ Khaled Featuring", artist: "Tintin Mihigo", audioSrc: URL, - image: "https://api.lorem.space/image/album?hash=3154", + img: "https://api.lorem.space/image/album?hash=3154", }, { + id:5, title: "DJ Khaled Featuring", artist: "Samurai Thung", audioSrc: URL, - image: "https://api.lorem.space/image/album?hash=3154", + img: "https://api.lorem.space/image/album?hash=3154", }, { + id:6, title: "DJ Khaled Featuring", artist: "Albatros Country", audioSrc: URL, - image: "https://api.lorem.space/image/album?hash=3154", + img: "https://api.lorem.space/image/album?hash=3154", }, ]; diff --git a/pages/index.tsx b/pages/index.tsx index 9b0178f..9b82689 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,5 @@ import Head from "next/head"; +import React from "react"; import LandingPage from "../components/LandingPage/LandingPage"; export default function Home() { diff --git a/public/livebg.jpg b/public/livebg.jpg new file mode 100644 index 0000000..d708471 Binary files /dev/null and b/public/livebg.jpg differ diff --git a/public/static/images/404.png b/public/static/images/404.png new file mode 100644 index 0000000..61c5cd4 Binary files /dev/null and b/public/static/images/404.png differ diff --git a/public/static/images/500.png b/public/static/images/500.png new file mode 100644 index 0000000..763eebb Binary files /dev/null and b/public/static/images/500.png differ diff --git a/public/static/images/MaintenanceGuy.png b/public/static/images/MaintenanceGuy.png new file mode 100644 index 0000000..9111ec6 Binary files /dev/null and b/public/static/images/MaintenanceGuy.png differ diff --git a/public/static/images/equalizer.gif b/public/static/images/equalizer.gif new file mode 100644 index 0000000..3ec00bd Binary files /dev/null and b/public/static/images/equalizer.gif differ diff --git a/public/static/images/livebg.jpg b/public/static/images/livebg.jpg new file mode 100644 index 0000000..d708471 Binary files /dev/null and b/public/static/images/livebg.jpg differ diff --git a/tsconfig.json b/tsconfig.json index 421d2ae..217cf20 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,8 +21,8 @@ "**/*.tsx", "components/modules/__modules__/_Vectors/wavePlayVector.jsx", "components/modules/AddNewSinger/index.tsx", - "components/modules/utils/config/audioPlayer.jsx", - "components/modules/utils/config/audioControls.jsx" + "components/modules/utils/config/audioPlayer.tsx", + "components/modules/utils/config/audioControls.tsx" ], "exclude": ["node_modules"] } diff --git a/types/index.ts b/types/index.ts index 2449728..6193045 100644 --- a/types/index.ts +++ b/types/index.ts @@ -3,4 +3,7 @@ export interface ISong { img: string; artist: string; title: string; + audioSrc?:string } + +