Feat: Autoplay next song in search list

frontend/src/components/MusicPlayer.jsx

@@ -7,7 +7,7 @@ import "./styles.scss";
 import "../App.css";
 import { CirclePlay, CirclePause, Rewind, VolumeX, Volume2, FastForward, Repeat2 } from "lucide-react";
 
-function MusicPlayer({ currSong, shouldAutoPlay }) {
+function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
  const [isLiked, setIsLiked] = useState(false);
  const songName = currSong.name || "Reminder";
  const songImage =
@@ -77,6 +77,9 @@ function MusicPlayer({ currSong, shouldAutoPlay }) {
  className="rounded-lg bg-[#83ce89] text-black h-full"
  src={audioUrl}
  customIcons={customIcons}
+ onEnded={() => {
+ setSongHasEnded(true)
+ }}
  />
  </div>
  </div>

frontend/src/components/Search/Search.jsx

@@ -13,7 +13,6 @@ import {
  fetchArtistsbySongName,
 } from "../../Utils";
 import Footer from "../Footer";
-import { PiLayout } from "react-icons/pi";
 import { storeAlbum, storeSong } from "../Auth/StoreSong";
 import { Link, NavLink, Outlet, useOutletContext } from "react-router-dom";
 
@@ -50,8 +49,7 @@ function SearchDefault() {
 }
 
 function AlbumElement({ album }) {
- const imageUrl =
- album.images && album.images[2] ? album.images[2].url : "defaultImageUrl";
+ const imageUrl = album.images && album.images[2] ? album.images[2].url : "defaultImageUrl";
  const artistName =
  album.primaryArtists && album.primaryArtists[0]
  ? album.primaryArtists[0].name
@@ -133,17 +131,19 @@ function Artists({ artists }) {
  );
 }
 
-function SongElement({ song, setCurrSong, number, setShouldAutoPlay }) {
+function SongElement({ song, setCurrSong, number, setShouldAutoPlay, currSongIdx }) {
  const duration = secIntoMinSec(song.duration);
 
  return (
  <div
  className="flex h-[18%] justify-between cursor-pointer p-4 rounded-lg hover:bg-gray-700 hover:shadow-lg"
  onClick={() => {
+ currSongIdx.current = number;
  setCurrSong(song);
  setShouldAutoPlay(true);
  storeSong(song);
- console.log("song", song); }}
+ console.log("song", song);
+ }}
  >
  <div className="flex gap-4">
  <div className="flex items-center">{number}</div>
@@ -171,7 +171,7 @@ function SongElement({ song, setCurrSong, number, setShouldAutoPlay }) {
  );
 }
 
-function Songs({ topSongs, setCurrSong, setShouldAutoPlay }) {
+function Songs({ topSongs, setCurrSong, setShouldAutoPlay, currSongIdx }) {
  return (
  <div className="bg-[#18181D] w-full h-full rounded-lg">
  <div className="w-full h-full flex flex-col gap-1 pr-8 pb-3">
@@ -183,12 +183,13 @@ function Songs({ topSongs, setCurrSong, setShouldAutoPlay }) {
  if (index > 0) {
  return (
  <SongElement
- key={index}
- number={index}
- song={song}
- setCurrSong={setCurrSong}
- setShouldAutoPlay={setShouldAutoPlay}
- onClick={() => storeSong(song)}
+ currSongIdx={currSongIdx}
+ key={index}
+ number={index}
+ song={song}
+ setCurrSong={setCurrSong}
+ setShouldAutoPlay={setShouldAutoPlay}
+ onClick={() => storeSong(song)}
  />
  );
  }
@@ -206,6 +207,21 @@ export function SearchResultAll() {
  const setShouldAutoPlay = context.setShouldAutoPlay;
  const albums = context.albums;
  const artists = context.artists;
+ const songHasEnded = context.songHasEnded;
+ const setSongHasEnded = context.setSongHasEnded;
+
+ let currSongIdx = useRef(0); // TODO: maybe this should be a state variable as well
+
+ // auto play next song when song ends
+ useEffect(() => {
+ if (songHasEnded) {
+ if (currSongIdx.current < topSongs.length - 1) {
+ currSongIdx.current++;
+ setCurrSong(topSongs[currSongIdx.current]); // next song it not playing as current index is not updating
+ setSongHasEnded(false);
+ }
+ }
+ }, [songHasEnded]);
 
  return (
  <div className="w-full h-full rounded-xl flex flex-col gap-4">
@@ -242,7 +258,7 @@ export function SearchResultAll() {
  const newSong = { ...topSongs[0] };
  setCurrSong(newSong);
  setShouldAutoPlay(true);
- storeAlbum(topSongs)
+ storeAlbum(topSongs);
  }}
  >
  <FaPlay className="w-[50%] h-[50%]" />
@@ -254,6 +270,7 @@ export function SearchResultAll() {
  <div className="w-[70%] h-full ">
  <div className="w-full h-full ">
  <Songs
+ currSongIdx={currSongIdx}
  topSongs={topSongs}
  setCurrSong={setCurrSong}
  setShouldAutoPlay={setShouldAutoPlay}
@@ -285,6 +302,7 @@ function Search({ setCurrPage }) {
  const [albums, setAlbums] = useState([]);
  const [artists, setArtist] = useState([]);
  let [shouldAutoPlay, setShouldAutoPlay] = useState(false);
+ const [songHasEnded, setSongHasEnded] = useState(false);
 
  const searchAllNavLinkElement = useRef(null);
 
@@ -384,6 +402,8 @@ function Search({ setCurrPage }) {
  setShouldAutoPlay,
  albums,
  artists,
+ songHasEnded,
+ setSongHasEnded,
  }}
  />
  </div>
@@ -394,6 +414,7 @@ function Search({ setCurrPage }) {
  <MusicPlayer
  currSong={currSong}
  shouldAutoPlay={shouldAutoPlay}
+ setSongHasEnded={setSongHasEnded}
  />
  </div>
  </div>