added shuffle mode

Satyam1923 · May 12, 2024 · 1295178 · 1295178
1 parent befc6a5
commit 1295178
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 17 deletions.
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -50,7 +50,6 @@ body {
 
 .imgBx img {
   width:360px;
-  height: 360px;
   border: none;
   border-radius: 10px;
   align-items: center;
@@ -119,7 +118,6 @@ li {
 
 .controls {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: space-between;
   margin-top: 10px;

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -8,6 +8,7 @@ const App = () => {
     const [data, setData] = useState(null);
     const [searchQuery, setSearchQuery] = useState("");
     const [currplaying, setCurrplaying] = useState(0);
+    const [shuffle, setShuffle] = useState(false); // State for shuffle play
     const audioElement = useRef(null);
 
     const fetchSongData = async () => {
@@ -24,6 +25,22 @@ const App = () => {
         }
     };
 
+    // Function to shuffle the playlist
+    const shufflePlaylist = () => {
+        if (data) {
+            const shuffledData = [...data];
+            for (let i = shuffledData.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [shuffledData[i], shuffledData[j]] = [
+                    shuffledData[j],
+                    shuffledData[i],
+                ];
+            }
+            setData(shuffledData);
+            setCurrplaying(0);
+        }
+    };
+
     const nextPlay = () => {
         setCurrplaying(currplaying + 1 >= data.length ? 0 : currplaying + 1);
     };
@@ -55,25 +72,49 @@ const App = () => {
                         {data && data.length > 0 && data[currplaying].name}
                     </li>
                     <li className="author">
-                        {data && data[currplaying].artist}{" "}
-                        {data && data[currplaying].year}
+                        {data && data.length > 0 && data[currplaying].artist}{" "}
+                        {data && data.length > 0 && data[currplaying].year}
                     </li>
                 </ul>
                 {data && (
-                    <AudioPlayer
-                        autoPlay
-                        src={data[currplaying].url}
-                        preload="metadata"
-                        id="audio"
-                        ref={audioElement}
-                        onEnded={nextPlay}
-                    />
+                    <>
+                        <AudioPlayer
+                            autoPlay
+                            src={data[currplaying].url}
+                            preload="metadata"
+                            id="audio"
+                            ref={audioElement}
+                            onEnded={nextPlay}
+                        />
+                        <div className="flex justify-between p-3 items-center">
+                            <button
+                                className="bg-gray-400 p-2 rounded-lg"
+                                onClick={previousPlay}
+                            >
+                                Previous
+                            </button>
+                            <button
+                                className="bg-gray-400 p-2 rounded-lg"
+                                onClick={() => {
+                                    shufflePlaylist();
+                                }}
+                            >
+                                Shuffle
+                            </button>
+                            <button
+                                className="bg-gray-400 p-2 rounded-lg"
+                                onClick={nextPlay}
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </>
                 )}
             </div>
 
             <div className="search-box">
                 <div className="search">
-                    <form className="box">
+                    <form className="flex ">
                         <input
                             type="text"
                             name="song"
@@ -87,16 +128,14 @@ const App = () => {
                         />
                         <button
                             id="get"
-                            type="image"
-                            src="search.svg"
                             alt="search"
-                            className="button"
+                            className="flex items-center justify-center p-3 px-6 rounded-xl"
                             onClick={(e) => {
                                 e.preventDefault();
                                 if (searchQuery !== "") fetchSongData();
                             }}
                         >
-                            <img src="/seach.svg" className="w-4 h-4" alt="" />
+                            <img src="/search.svg" className="w-4 h-4" alt="" />
                         </button>
                     </form>
                 </div>