playqueue button controll

frontend/src/app/layout.js

@@ -6,7 +6,7 @@ import MusicPlayer from "@/components/MusicPlayer";
 import { MusicPlayerProvider } from "@/context/MusicPlayerContext";
 import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
 import Header from "@/components/Header";
-import Playlist from "@/components/Playlist";
+import PlayQueue from "@/components/PlaylQueue";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -35,7 +35,7 @@ export default function RootLayout({ children }) {
           <Header />
           <div className="app-container">{children} </div>
           <footer className="bottom-0 flex items-center w-full">
-            <Playlist />
+            <PlayQueue isPlayQueueOpen={false}/>
             <MusicPlayer />
           </footer>
         </body>

frontend/src/components/MusicPlayer.js

@@ -35,6 +35,8 @@ export default function MusicPlayer() {
     playPrevious,
     canPlayPrevious,
     canPlayNext,
+    isPlayEueOpen,
+    setIsPlayEueOpen,
   } = useMusicPlayer();
 
   const [currentSrc, setCurrentSrc] = useState(src);
@@ -316,6 +318,10 @@ export default function MusicPlayer() {
     setShowControls(true);
   };
 
+  const handleIsPlayQueueOpen = () =>{
+    setIsPlayEueOpen(!isPlayEueOpen);
+  };
+
   if (!isPlayerVisible || !currentSrc) return null;
 
   return (
@@ -401,14 +407,14 @@ export default function MusicPlayer() {
                 <button className="player-min-button" onClick={destroyPlayer}>
                   <TbPlayerStop />
                 </button>
-                {isPlaying ? (
-                  <button className="playlist-btn player-min-button">
+                {isPlayEueOpen ? (
+                  <button className="playlist-btn player-min-button" onClick={handleIsPlayQueueOpen}>
                     <TbPlaylist />
                   </button>
                 ) : (
                   <button
                     className="playlist-btn player-min-button"
-                    disabled={true}
+                    onClick={handleIsPlayQueueOpen}
                   >
                     <TbPlaylistOff />
                   </button>
@@ -494,6 +500,18 @@ export default function MusicPlayer() {
                 value={volume}
                 onChange={handleVolumeChange}
               />
+                              {isPlayEueOpen ? (
+                  <button className="playlist-btn player-min-button" onClick={handleIsPlayQueueOpen}>
+                    <TbPlaylist />
+                  </button>
+                ) : (
+                  <button
+                    className="playlist-btn player-min-button"
+                    onClick={handleIsPlayQueueOpen}
+                  >
+                    <TbPlaylistOff />
+                  </button>
+                )}
             </div>
           </div>
         )}

frontend/src/components/PlaylQueue.js

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useState } from "react";
+import { useMusicPlayer } from "@/context/MusicPlayerContext";
+import { formatTitle } from "@/lib/utils";
+import { FaTrash } from "react-icons/fa";
+import { TbPlaylistX } from "react-icons/tb";
+import "./Playlist.css";
+
+const PlayQueue = () => {
+  const {
+    playqueue,
+    initializePlayer,
+    removeFromPlayqueue,
+    currentIndex,
+    setPlayqueue,
+    isPlayEueOpen,
+    setIsPlayEueOpen,
+  } = useMusicPlayer();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [playlistName, setPlaylistName] = useState("");
+
+  const handlePlayTrack = (src, title) => {
+    initializePlayer(src, title);
+  };
+
+  const handleClearPlaylist = () => {
+    if (window.confirm("Are you sure you want to clear the play queue?")) {
+      setPlayqueue([]); // Clear the play queue and trigger a re-render
+    }
+  };
+
+  const handleSavePlaylist = () => {
+    if (!playlistName.trim()) return;
+    const existingPlaylists =
+      JSON.parse(localStorage.getItem("playlists")) || {};
+    existingPlaylists[playlistName] = playqueue;
+    localStorage.setItem("playlists", JSON.stringify(existingPlaylists));
+    setIsModalOpen(false);
+    setPlaylistName("");
+  };
+
+  return (
+    isPlayEueOpen && (
+      <div className="playlist-container">
+        <h2>Play Queue</h2>
+        <div className="playlist-action-container">
+          <button onClick={() => setIsModalOpen(true)} className="save-button">
+            Save to Playlist
+          </button>
+          <button onClick={handleClearPlaylist} className="clear-button">
+            <TbPlaylistX /> Clear Queue
+          </button>
+        </div>
+        {isModalOpen && (
+          <div className="modal">
+            <div className="modal-content">
+              <h3>Save Playlist</h3>
+              <input
+                className="playlist-name-input"
+                type="text"
+                placeholder="Enter playlist name"
+                value={playlistName}
+                onChange={(e) => setPlaylistName(e.target.value)}
+              />
+              <button
+                onClick={handleSavePlaylist}
+                className="save-confirm-button"
+              >
+                Save
+              </button>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="modal-close-button"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {playqueue.length === 0 ? (
+          <p>Empty</p>
+        ) : (
+          <ul className="playlist">
+            {playqueue.map((track, index) => (
+              <li
+                key={index}
+                className={`playlist-item ${
+                  currentIndex === index ? "playing" : ""
+                }`}
+              >
+                <div className="track-info">
+                  <span
+                    className="track-title"
+                    onClick={() => handlePlayTrack(track.source, track.title)}
+                  >
+                    {formatTitle(track.source)}
+                  </span>
+                </div>
+                <button
+                  className="remove-button"
+                  onClick={() => removeFromPlayqueue(track.source)}
+                >
+                  <FaTrash />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    )
+  );
+};
+
+export default PlayQueue;

frontend/src/components/Playlist.js

@@ -1,93 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { useMusicPlayer } from "@/context/MusicPlayerContext";
-import { formatTitle } from "@/lib/utils";
-import { FaTrash } from "react-icons/fa";
-import { TbPlaylistX } from "react-icons/tb";
-import "./Playlist.css";
-
-const Playlist = () => {
-  const { playqueue, initializePlayer, removeFromPlayqueue, currentIndex, setPlayqueue } = useMusicPlayer();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [playlistName, setPlaylistName] = useState("");
-
-  const handlePlayTrack = (src, title) => {
-    initializePlayer(src, title);
-  };
-
-  const handleClearPlaylist = () => {
-    if (window.confirm("Are you sure you want to clear the play queue?")) {
-      setPlayqueue([]); // Clear the play queue and trigger a re-render
-    }
-  };
-
-  const handleSavePlaylist = () => {
-    if (!playlistName.trim()) return;
-    const existingPlaylists = JSON.parse(localStorage.getItem("playlists")) || {};
-    existingPlaylists[playlistName] = playlist;
-    localStorage.setItem("playlists", JSON.stringify(existingPlaylists));
-    setIsModalOpen(false);
-    setPlaylistName("");
-  };
-
-  return (
-    <div className="playlist-container">
-      <h2>Play Queue</h2>
-      <div className="playlist-action-container">
-        <button onClick={() => setIsModalOpen(true)} className="save-button">
-          Save to Playlist
-        </button>
-        <button onClick={handleClearPlaylist} className="clear-button">
-          <TbPlaylistX /> Clear Queue
-        </button>
-      </div>
-      {isModalOpen && (
-        <div className="modal">
-          <div className="modal-content">
-            <h3>Save Playlist</h3>
-            <input
-              className="playlist-name-input"
-              type="text"
-              placeholder="Enter playlist name"
-              value={playlistName}
-              onChange={(e) => setPlaylistName(e.target.value)}
-            />
-            <button onClick={handleSavePlaylist} className="save-confirm-button">
-              Save
-            </button>
-            <button onClick={() => setIsModalOpen(false)} className="modal-close-button">
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
-      {playqueue.length === 0 ? (
-        <p>Empty</p>
-      ) : (
-        <ul className="playlist">
-          {playqueue.map((track, index) => (
-            <li
-              key={index}
-              className={`playlist-item ${currentIndex === index ? "playing" : ""}`}
-            >
-              <div className="track-info">
-                <span
-                  className="track-title"
-                  onClick={() => handlePlayTrack(track.source, track.title)}
-                >
-                  {formatTitle(track.source)}
-                </span>
-              </div>
-              <button className="remove-button" onClick={() => removeFromPlayqueue(track.source)}>
-                <FaTrash />
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default Playlist;

frontend/src/context/MusicPlayerContext.js

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useRef, useState, useEffect } from "react";
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+} from "react";
 
 const MusicPlayerContext = createContext();
 
@@ -15,6 +21,7 @@ export const MusicPlayerProvider = ({ children }) => {
 
   // Playqueue and index
   const [playqueue, setPlayqueue] = useState([]);
+  const [isPlayEueOpen, setIsPlayEueOpen] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const canPlayPrevious = currentIndex > 0;
@@ -22,15 +29,15 @@ export const MusicPlayerProvider = ({ children }) => {
 
   const initializePlayer = async (source, title) => {
     // Check if song already exists in playqueue
-    const songIndex = playqueue.findIndex(song => song.source === source);
-    
+    const songIndex = playqueue.findIndex((song) => song.source === source);
+
     if (songIndex !== -1) {
-      setCurrentIndex(songIndex);  // Set to existing song index
+      setCurrentIndex(songIndex); // Set to existing song index
     } else {
       // Add new song and set to that new index
       const newSong = { source, title };
       setPlayqueue((prev) => [...prev, newSong]);
-      setCurrentIndex(playqueue.length);  // Set index to the end (new song position)
+      setCurrentIndex(playqueue.length); // Set index to the end (new song position)
     }
 
     if (abortController) {
@@ -40,16 +47,19 @@ export const MusicPlayerProvider = ({ children }) => {
     const newAbortController = new AbortController();
     setAbortController(newAbortController);
 
-    const extractedFileName = source.split('/').pop();
+    const extractedFileName = source.split("/").pop();
     setTitle(title);
     if (videoRef.current) {
       videoRef.current.pause();
     }
 
     try {
-      const response = await fetch(`/api/get/music/${encodeURIComponent(extractedFileName)}`, {
-        signal: newAbortController.signal,
-      });
+      const response = await fetch(
+        `/api/get/music/${encodeURIComponent(extractedFileName)}`,
+        {
+          signal: newAbortController.signal,
+        }
+      );
       const data = await response.json();
 
       if (data.status === "Download started") {
@@ -59,7 +69,7 @@ export const MusicPlayerProvider = ({ children }) => {
         startPlayer(data.url);
       }
     } catch (error) {
-      if (error.name !== 'AbortError') {
+      if (error.name !== "AbortError") {
         console.error("Error initializing player:", error);
       }
     }
@@ -68,7 +78,9 @@ export const MusicPlayerProvider = ({ children }) => {
   const checkProgress = (progressUrl, fileName, abortController) => {
     const intervalId = setInterval(async () => {
       try {
-        const response = await fetch(progressUrl, { signal: abortController.signal });
+        const response = await fetch(progressUrl, {
+          signal: abortController.signal,
+        });
         const progressData = await response.json();
         setLoadingProgress(progressData.progress);
 
@@ -77,7 +89,7 @@ export const MusicPlayerProvider = ({ children }) => {
           fetchFinalUrl(fileName, abortController);
         }
       } catch (error) {
-        if (error.name === 'AbortError') {
+        if (error.name === "AbortError") {
           clearInterval(intervalId);
         } else {
           console.error("Error fetching progress:", error);
@@ -88,9 +100,12 @@ export const MusicPlayerProvider = ({ children }) => {
 
   const fetchFinalUrl = async (fileName, abortController, attempt = 1) => {
     try {
-      const response = await fetch(`/api/get/music/${encodeURIComponent(fileName)}`, {
-        signal: abortController.signal,
-      });
+      const response = await fetch(
+        `/api/get/music/${encodeURIComponent(fileName)}`,
+        {
+          signal: abortController.signal,
+        }
+      );
       const data = await response.json();
 
       if (data.url) {
@@ -99,7 +114,7 @@ export const MusicPlayerProvider = ({ children }) => {
         retryFetchFinalUrl(fileName, abortController, attempt);
       }
     } catch (error) {
-      if (error.name !== 'AbortError') {
+      if (error.name !== "AbortError") {
         console.error("Error fetching final URL:", error);
         retryFetchFinalUrl(fileName, abortController, attempt);
       }
@@ -127,14 +142,16 @@ export const MusicPlayerProvider = ({ children }) => {
   const togglePlayerSize = () => setIsPlayerMaximized(!isPlayerMaximized);
 
   const addToPlayqueue = (song) => {
-    const songIndex = playqueue.findIndex(track => track.source === song.source);
+    const songIndex = playqueue.findIndex(
+      (track) => track.source === song.source
+    );
     if (songIndex === -1) {
       setPlayqueue((prev) => [...prev, song]);
     }
   };
 
   const removeFromPlayqueue = (source) => {
-    setPlayqueue((prev) => prev.filter(track => track.source !== source));
+    setPlayqueue((prev) => prev.filter((track) => track.source !== source));
     if (currentIndex >= playqueue.length) {
       setCurrentIndex(playqueue.length - 1);
     }
@@ -192,7 +209,7 @@ export const MusicPlayerProvider = ({ children }) => {
         loadingProgress,
         nowPlaying,
         setNowPlaying,
-        didDestroy, 
+        didDestroy,
         setDidDestroy,
         playqueue,
         setPlayqueue,
@@ -204,6 +221,8 @@ export const MusicPlayerProvider = ({ children }) => {
         currentIndex,
         canPlayPrevious,
         canPlayNext,
+        isPlayEueOpen,
+        setIsPlayEueOpen,
       }}
     >
       {children}