MusicControls.js

import React, { useState, useEffect } from 'react';



const songData = {
  "we used to talk every night": {
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song1.mp3",
    songName: "we used to talk every night",
    artist: "elijah who",
  },
  "Be Mine": {
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song2.mp3",
    songName: "Be Mine",
    artist: "Jazzinuf",
  },
  "feelin' fine": {
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song3.mp3",
    songName: "feelin' fine",
    artist: "elijah who",
  },
  "Thunderbolt 404": {
    songName: "Thunderbolt 404",
    artist: "letsruntrack",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song4.mp3",
  },
  blue: {
    songName: "blue",
    artist: "jinsang x l o k a",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song5.mp3",
  },
  "Silent Thoughts": {
    songName: "Silent Thoughts",
    artist: "GentleBeatz ",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song6.mp3",
  },
  Return: {
    songName: "Return",
    artist: "Mingu5",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song7.mp3",
  },
  "put me back in my dream": {
    songName: "put me back in my dream",
    artist: "DOMINANT",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song8.mp3",
  },
  "Moonlit Metro": {
    songName: "Moonlit Metro",
    artist: "Cantrip",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song9.mp3",
  },
  "venice venture": {
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song10.mp3",
    songName: "venice venture",
    artist: "big wild",
  },
  // 11 12 13 unnamed
  "penthouse suite": {
    songName: "penthouse suite",
    artist: "bonus points",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song14.mp3",
  },
  "dejitaru glow": {
    songName: "dejitaru glow",
    artist: "a.l.i.s.o.n, crystal cola",
    url:
      "https://token-metadata.s3-us-west-1.amazonaws.com/SS2/audio/song15.mp3",
  },
}



//////////// ^song info  ////////////



const songArr = Object.values(songData);

const MusicControls = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [songPlayingIndex, setSongPlayingIndex] = useState(0);
  const song = songArr[songPlayingIndex];
  const [audio, setAudio] = useState(new window.Audio(song.url));

  const onClickPrevSong = () => {
    let newSongIndex = songPlayingIndex - 1;
    if (newSongIndex < 0) {
      newSongIndex = songArr.length - 1;
    }
    setSongPlayingIndex(newSongIndex);
  };

  const onClickNextSong = () => {
    let newSongIndex = songPlayingIndex + 1;
    if (newSongIndex >= songArr.length) {
      newSongIndex = 0;
    }
    setSongPlayingIndex(newSongIndex);
  };

/////// onEndAudio Func ///////
  const onEndAudio = () => {
    console.log('function log');
    onTogglePlaySong()
  };
///////////////////////////////

  const onTogglePlaySong = () => {
    setIsPlaying(!isPlaying);
  };

  useEffect(() => {
    if (isPlaying) {
      audio.play();
    }
    if (!isPlaying) {
      audio.pause();
    }
  }, [isPlaying]);
  useEffect(() => {
    if (isPlaying) {
      audio.src = songArr[songPlayingIndex].url;
      audio.play();
    }
  }, [songPlayingIndex]);



  return (
          <MusicControls
            isPlaying={isPlaying}
            onClickPrev={onClickPrevSong}
            onClickNext={onClickNextSong}
            onTogglePlay={onTogglePlaySong}
            song={songArr[songPlayingIndex]}
            onEndAudio={()=> console.log('MusicControl log')}
          />
)}



export default MusicControls;