feat(play-added-song)

README.md

@@ -6,7 +6,7 @@
 
 <div align="center">
 <img src="https://img.shields.io/npm/dt/react-simplified-player.svg">
-<img src="https://img.shields.io/static/v1?label=version&message=v1.0.78&color=yellow">
+<img src="https://img.shields.io/static/v1?label=version&message=v1.0.9&color=yellow">
 <img src="https://img.shields.io/static/v1?label=license&message=MIT&color=black">
 <img src="https://img.shields.io/static/v1?label=minzipped file&message=45.1 KB&color=success">
 <img src="https://visitor-badge.glitch.me/badge?page_id=callmenikk.react-simplified-player">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplified-player",
-  "version": "1.0.77",
+  "version": "1.0.9",
   "description": "Simple Easy Customizable React Audio Player 🎶",
   "main": "index.js",
   "publishConfig": {

src/ReactSimplifiedPlayer.tsx

@@ -38,19 +38,20 @@ export const ReactSimplifiedPlayer: FC<PlayerProps> = (props) => {
 
     if (!props.song!.url.trim()) return;
 
+    // when first song loads it adds 2 song togethers
     if (
       songData[0]?.song_title?.trim() === songData[1]?.song_title?.trim() &&
       songData[0]?.song_artist?.trim() === songData[1]?.song_artist?.trim()
     )
+      //this code removes second extra added song from queue
       setSongData((prev) => {
         return prev.slice(1, 0);
       });
 
+    //if last added song and clicked song urls are same do not add it in queue
     if (
-      props.song!.song_title?.trim() ===
-        songData[lastIndex]?.song_title?.trim() &&
-      props.song!.song_artist?.trim() ===
-        songData[lastIndex]?.song_artist?.trim()
+      props.song!.url.trim() ===
+        songData[lastIndex]?.url.trim() 
     )
       return;
 
@@ -63,6 +64,13 @@ export const ReactSimplifiedPlayer: FC<PlayerProps> = (props) => {
         },
       ];
     });
+    setCurrentIndex(songData.length)
+    setControl((prev) => {
+      return {
+        ...prev,
+        playing: true
+      }
+    })
   }, [props.song]);
 
   const [timeLapse, setTimeLapse] = useState({

src/style/queue.css

@@ -14,7 +14,7 @@
   border-radius: 10px 10px 0 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: 99;
   transform: translateY(-80px);
 }
 @media screen and (max-width: 768px) {

src/style/queue.scss

@@ -16,7 +16,7 @@
   border-radius: 10px 10px 0 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: 99;
   transform: translateY(-80px);
   @media screen and (max-width: 768px){
     transform: translateY(0px);