major update: add playlist

frontend/src/app/globals.css

@@ -13,6 +13,9 @@
   --foreground-2: #0b5da9;
   --foreground-3: #25253c;
   --foreground-4: #878787;
+  --foreground-5: #403f4f;
+  --highlight-color: #00aaff53;
+  --text-highlight: rgb(31, 242, 179);
 }
 
 html,
@@ -40,7 +43,6 @@ footer {
   margin-right: 10px;
   flex-grow: 1;
   overflow-y: auto;
-
   /* Styled scrollbar */
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: #888 #222;
@@ -64,3 +66,11 @@ footer {
 .app-container::-webkit-scrollbar-thumb:hover {
   background-color: #555; /* Thumb color on hover */
 }
+
+@media screen and (orientation: portrait) {
+  footer{
+    display: flex;
+    flex-direction: column;
+  }
+  
+}

frontend/src/app/layout.js

@@ -1,12 +1,12 @@
-// RootLayout.js
 "use client";
 
 import localFont from "next/font/local";
 import "./globals.css";
 import MusicPlayer from "@/components/MusicPlayer";
 import { MusicPlayerProvider } from "@/context/MusicPlayerContext";
-import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
 import Header from "@/components/Header";
+import Playlist from "@/components/Playlist";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -32,9 +32,10 @@ export default function RootLayout({ children }) {
             options={{ showSpinner: false }}
             shallowRouting
           />
-          <Header/>
-          <div className="app-container">{children}</div>
+          <Header />
+          <div className="app-container">{children} </div>
           <footer className="bottom-0 flex items-center w-full">
+            <Playlist />
             <MusicPlayer />
           </footer>
         </body>

frontend/src/app/playlists/page.js

@@ -0,0 +1,9 @@
+import SavedPlaylists from "@/components/SavedPlaylists";
+
+export default function PlaylistsPage() {
+  return (
+    <div className="playlists-page font-[family-name:var(--font-geist-sans)]">
+      <SavedPlaylists/>
+    </div>
+  );
+}

frontend/src/components/Card.css

@@ -1,6 +1,6 @@
 .music-card {
   width: 250px;
-  height: 40;
+  height: 50px; /* Increased height to accommodate the button */
   background-image: linear-gradient(var(--background-4), var(--foreground-3));
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
@@ -8,9 +8,10 @@
   border-bottom-right-radius: 20px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: space-between; /* Space between elements */
+  padding: 0 5px; /* Added padding for better spacing */
   overflow: hidden;
-  transition: scale .3s ease;
+  transition: scale 0.3s ease;
 }
 
 .card-title {
@@ -22,6 +23,7 @@
   white-space: normal;
   font-size: 0.8rem;
   cursor: pointer;
+  flex-grow: 1; /* Allow the title to take available space */
 }
 
 .card-icon {
@@ -29,11 +31,22 @@
   overflow: visible;
 }
 
-.music-card:hover{
+.add-to-playlist {
+  background: none; /* Remove default button background */
+  border: none; /* Remove default button border */
+  cursor: pointer; /* Change cursor to pointer */
+}
+
+.add-icon {
+  font-size: 20px; /* Adjust the icon size as needed */
+  color: var(--foreground-secondary); /* Use a theme color */
+}
+
+.music-card:hover {
   scale: 1.03;
 }
 
-.music-card.music-card.now-playing{
+.music-card.now-playing {
   background-image: linear-gradient(var(--background-2), var(--foreground-2));
   border: 2px solid var(--foreground-secondary);
   border-right: none;
@@ -43,7 +56,7 @@
   scale: 1.03;
 }
 
-.music-card.now-playing .card-icon{
+.music-card.now-playing .card-icon {
   animation: rotateInfinite 1.5s linear infinite;
 }
 

frontend/src/components/Card.js

@@ -1,24 +1,36 @@
 "use client";
 import "./Card.css";
-import { FaCompactDisc } from "react-icons/fa";
+import { FaCompactDisc } from "react-icons/fa"; // Importing the add icon
+import { TbPlaylistAdd } from "react-icons/tb";
 import { useMusicPlayer } from "@/context/MusicPlayerContext";
 import { formatTitle } from "@/lib/utils";
 
 const Card = ({ src }) => {
-  const { initializePlayer, nowPlaying } = useMusicPlayer();
+  const { initializePlayer, nowPlaying, addToPlaylist } = useMusicPlayer();
   const title = formatTitle(src);
 
-  const handleButtonClick = () => {
+  const handlePlayButtonClick = () => {
     initializePlayer(src, title);
   };
 
+  const handleAddToPlaylistClick = (e) => {
+    e.stopPropagation(); // Prevent the button click from triggering the card play
+    addToPlaylist({ source: src, title });
+    console.log(`${title} added to playlist`)
+  };
+
   return (
-    <button onClick={handleButtonClick}>
+    <>
+    <button onClick={handlePlayButtonClick}>
       <div className={`music-card ${nowPlaying === title ? "now-playing" : ""}`}>
         <FaCompactDisc className="card-icon" />
         <label className="card-title">{title}</label>
       </div>
     </button>
+      <button className="add-to-playlist" onClick={handleAddToPlaylistClick}>
+        <TbPlaylistAdd className="add-icon" />
+      </button>
+    </>
   );
 };
 

frontend/src/components/Header.js

@@ -14,6 +14,9 @@ const Header = () => {
           <Link href="/" className="nav-link">
             Home
           </Link>
+          <Link href="/playlists" className="nav-link">
+            Playlists
+          </Link>
         </nav>
       </div>
     </header>

frontend/src/components/MusicPlayer.css

@@ -257,7 +257,7 @@ input[type="range"]::-webkit-slider-thumb {
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
-  background-color: #403f4f;
+  background-color: var(--foreground-5);
   border-radius: 0.5rem;
   height: 0.5rem;
 }
@@ -278,3 +278,7 @@ input[type="range"]::-moz-range-thumb {
   font-size: 1.3em;
   line-height: 1.2; /* Adjust line height for spacing */
 }
+
+button:disabled{
+  color: var(--foreground-5);
+}

frontend/src/components/MusicPlayer.js

@@ -29,10 +29,14 @@ export default function MusicPlayer() {
     title,
     setNowPlaying,
     nowPlaying,
-    didDestroy, 
+    didDestroy,
     setDidDestroy,
+    playNext,
+    playPrevious,
+    canPlayPrevious,
+    canPlayNext,
   } = useMusicPlayer();
-  
+
   const [currentSrc, setCurrentSrc] = useState(src);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -46,7 +50,8 @@ export default function MusicPlayer() {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const overlayTimeout = useRef(null);
   const seekTime = 5;
-  
+  const poster = "https://dlcdnwebimgs.asus.com/gain/4BB18AEF-347E-4DB6-B78C-C0FFE1F20385/w750/h470"
+
   // Event Handlers
   const handleTimeUpdate = (videoElement) => {
     if (videoElement) {
@@ -54,7 +59,7 @@ export default function MusicPlayer() {
       setProgress((videoElement.currentTime / videoElement.duration) * 100);
     }
   };
-  
+
   const handleLoadedMetadata = (videoElement) => {
     if (videoElement) {
       setDuration(videoElement.duration);
@@ -63,63 +68,132 @@ export default function MusicPlayer() {
       videoElement.play();
     }
   };
-  
+
   const handleProgress = (videoElement) => {
     if (videoElement && videoElement.buffered.length > 0) {
-      const bufferEnd = videoElement.buffered.end(videoElement.buffered.length - 1);
+      const bufferEnd = videoElement.buffered.end(
+        videoElement.buffered.length - 1
+      );
       const bufferValue = (bufferEnd / videoElement.duration) * 100;
       setBufferProgress(bufferValue);
     }
   };
-  
+
   const handlePlay = () => {
     setIsPlaying(true);
     setNowPlaying(title);
   };
-  
+
   const handlePause = () => {
     setIsPlaying(false);
     setNowPlaying("");
   };
-  
+
   const attachEventListeners = (videoElement) => {
     if (videoElement) {
-      videoElement.addEventListener("timeupdate", () => handleTimeUpdate(videoElement));
-      videoElement.addEventListener("loadedmetadata", () => handleLoadedMetadata(videoElement));
-      videoElement.addEventListener("progress", () => handleProgress(videoElement));
+      videoElement.addEventListener("timeupdate", () =>
+        handleTimeUpdate(videoElement)
+      );
+      videoElement.addEventListener("loadedmetadata", () =>
+        handleLoadedMetadata(videoElement)
+      );
+      videoElement.addEventListener("progress", () =>
+        handleProgress(videoElement)
+      );
       videoElement.addEventListener("play", handlePlay);
       videoElement.addEventListener("pause", handlePause);
     }
   };
-  
+
   const detachEventListeners = (videoElement) => {
     if (videoElement) {
-      videoElement.removeEventListener("timeupdate", () => handleTimeUpdate(videoElement));
-      videoElement.removeEventListener("loadedmetadata", () => handleLoadedMetadata(videoElement));
-      videoElement.removeEventListener("progress", () => handleProgress(videoElement));
+      videoElement.removeEventListener("timeupdate", () =>
+        handleTimeUpdate(videoElement)
+      );
+      videoElement.removeEventListener("loadedmetadata", () =>
+        handleLoadedMetadata(videoElement)
+      );
+      videoElement.removeEventListener("progress", () =>
+        handleProgress(videoElement)
+      );
       videoElement.removeEventListener("play", handlePlay);
       videoElement.removeEventListener("pause", handlePause);
     }
   };
-  
+
   useEffect(() => {
     const videoElement = videoRef.current;
-  
+
     // Attach event listeners
     attachEventListeners(videoElement);
-  
+
     return () => {
       // Detach event listeners
       detachEventListeners(videoElement);
     };
   }, [videoRef, currentSrc, nowPlaying, didDestroy]);
-  
+
   useEffect(() => {
     if (src !== currentSrc) {
       setCurrentSrc(src);
     }
   }, [src, currentSrc]);
+
+  useEffect(() => {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: title,
+        artwork: [
+          { src: poster } // Ensure 'poster' is defined in your component
+        ]
+      });
+  
+      navigator.mediaSession.setActionHandler('play', () => {
+        videoRef.current.play();
+      });
+  
+      navigator.mediaSession.setActionHandler('pause', () => {
+        videoRef.current.pause();
+      });
+  
+      navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+        videoRef.current.currentTime = Math.max(videoRef.current.currentTime - (details.seekOffset || 10), 0);
+      });
+  
+      navigator.mediaSession.setActionHandler('seekforward', (details) => {
+        videoRef.current.currentTime = Math.min(videoRef.current.currentTime + (details.seekOffset || 10), videoRef.current.duration);
+      });
+  
+      navigator.mediaSession.setActionHandler('stop', () => {
+        destroyPlayer();
+      });
+  
+      // New action handlers for previous and next
+      navigator.mediaSession.setActionHandler('previoustrack', () => {
+        playPrevious(); // Assuming playPrevious is a function that plays the previous track
+      });
+  
+      navigator.mediaSession.setActionHandler('nexttrack', () => {
+        playNext(); // Assuming playNext is a function that plays the next track
+      });
+    }
+  
+    // Cleanup function to reset media session when component unmounts
+    return () => {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.metadata = null;
+        navigator.mediaSession.setActionHandler('play', null);
+        navigator.mediaSession.setActionHandler('pause', null);
+        navigator.mediaSession.setActionHandler('seekbackward', null);
+        navigator.mediaSession.setActionHandler('seekforward', null);
+        navigator.mediaSession.setActionHandler('stop', null);
+        navigator.mediaSession.setActionHandler('previoustrack', null);
+        navigator.mediaSession.setActionHandler('nexttrack', null);
+      }
+    };
+  }, [title, poster, playPrevious, playNext]);
   
+
   useEffect(() => {
     if (showControls) {
       if (overlayTimeout.current) {
@@ -127,10 +201,10 @@ export default function MusicPlayer() {
       }
       overlayTimeout.current = setTimeout(() => setShowControls(false), 3000);
     }
-  
+
     return () => clearTimeout(overlayTimeout.current);
   }, [showControls]);
-  
+
   const togglePlayPause = () => {
     if (videoRef.current) {
       if (isPlaying) {
@@ -141,20 +215,20 @@ export default function MusicPlayer() {
       setIsPlaying(!isPlaying);
     }
   };
-  
+
   const handleVolumeChange = (event) => {
     let volumeValue = parseFloat(event.target.value);
-  
+
     // Ensure the volume is a finite number between 0 and 1
     volumeValue = Math.max(0, Math.min(1, volumeValue));
-  
+
     setVolume(volumeValue);
     if (videoRef.current) {
       videoRef.current.volume = volumeValue;
     }
     setIsMuted(volumeValue === 0);
   };
-  
+
   const toggleMute = () => {
     if (isMuted) {
       videoRef.current.volume = volume;
@@ -164,35 +238,36 @@ export default function MusicPlayer() {
       setIsMuted(true);
     }
   };
-  
+
   const toggleFullscreen = () => {
     const doc = window.document;
     const docEl = doc.documentElement;
-  
+
     const requestFullscreen =
       docEl.requestFullscreen ||
       docEl.mozRequestFullScreen ||
       docEl.webkitRequestFullscreen ||
       docEl.msRequestFullscreen;
-  
+
     const exitFullscreen =
       doc.exitFullscreen ||
       doc.mozCancelFullScreen ||
       docEl.webkitExitFullscreen ||
       doc.msExitFullscreen;
-  
+
     if (!isFullscreen) {
       requestFullscreen.call(docEl);
     } else {
       exitFullscreen.call(doc);
     }
-  
+
     setIsFullscreen(!isFullscreen);
   };
-  
+
   const destroyPlayer = () => {
     if (videoRef.current) {
       videoRef.current.pause();
+      videoRef.current.currentTime = 0;
       videoRef.current.removeAttribute("src"); // Clear the source
       videoRef.current.load(); // Reload to reset duration/currentTime
       setNowPlaying("");
@@ -207,7 +282,7 @@ export default function MusicPlayer() {
       console.log("setting didDestroy to true");
     }
   };
-  
+
   const handleProgressClick = (e) => {
     const progressBar = e.currentTarget;
     const rect = progressBar.getBoundingClientRect();
@@ -218,7 +293,7 @@ export default function MusicPlayer() {
       setCurrentTime(newTime);
     }
   };
-  
+
   const handleFastForward = () => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.min(
@@ -227,7 +302,7 @@ export default function MusicPlayer() {
       );
     }
   };
-  
+
   const handleRewind = () => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.max(
@@ -236,13 +311,13 @@ export default function MusicPlayer() {
       );
     }
   };
-  
+
   const handleMouseMove = () => {
     setShowControls(true);
   };
-  
+
   if (!isPlayerVisible || !currentSrc) return null;
-  
+
   return (
     <div
       className={
@@ -309,15 +384,17 @@ export default function MusicPlayer() {
                   onChange={handleVolumeChange}
                 />
                 <button
-                  onClick={handleRewind}
+                  onClick={playPrevious}
                   className="previous-btn player-min-button"
+                  disabled={!canPlayPrevious}
                 >
                   <TbPlayerSkipBack />
                 </button>
 
                 <button
-                  onClick={handleFastForward}
+                  onClick={playNext}
                   className="next-btn player-min-button"
+                  disabled={!canPlayNext}
                 >
                   <TbPlayerSkipForward />
                 </button>
@@ -357,7 +434,7 @@ export default function MusicPlayer() {
         <video
           ref={videoRef}
           src={currentSrc}
-          poster="https://dlcdnwebimgs.asus.com/gain/4BB18AEF-347E-4DB6-B78C-C0FFE1F20385/w750/h470"
+          poster={poster}
           preload="metadata"
           className="video-element"
           autoPlay
@@ -372,6 +449,14 @@ export default function MusicPlayer() {
               </button>
             </div>
             <div className="player-mini-control-center">
+            <button
+                  onClick={playPrevious}
+                  className="previous-btn player-min-button"
+                  disabled={!canPlayPrevious}
+                >
+                  <TbPlayerSkipBack />
+                </button>
+
               <button className="player-min-button" onClick={handleRewind}>
                 <TbRewindBackward5 />
               </button>
@@ -381,6 +466,14 @@ export default function MusicPlayer() {
               <button className="player-min-button" onClick={handleFastForward}>
                 <TbRewindForward5 />
               </button>
+
+                <button
+                  onClick={playNext}
+                  className="next-btn player-min-button"
+                  disabled={!canPlayNext}
+                >
+                  <TbPlayerSkipForward />
+                </button>
               <button className="player-min-button" onClick={destroyPlayer}>
                 <TbPlayerStop />
               </button>

frontend/src/components/Playlist.css

@@ -0,0 +1,126 @@
+.playlist-container {
+  padding: 20px;
+  background-color: var(--foreground-1);
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
+}
+
+.playlist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 30vh;
+  overflow-y: auto;
+}
+
+/* For WebKit browsers (Chrome, Edge, Safari) */
+.playlist::-webkit-scrollbar {
+  width: 8px; /* Width of the scrollbar */
+}
+
+.playlist::-webkit-scrollbar-track {
+  background: #222; /* Track color */
+  border-radius: 4px;
+}
+
+.playlist::-webkit-scrollbar-thumb {
+  background-color: #888; /* Scrollbar thumb color */
+  border-radius: 4px;
+}
+
+.playlist::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Thumb color on hover */
+}
+
+.playlist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.3s; /* Smooth transition for background change */
+}
+
+.playlist-item.playing {
+  background-color: var(--highlight-color);
+  color: var(--text-highlight);
+}
+
+.track-title {
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.remove-button,
+.save-button,
+.clear-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--foreground-secondary);
+}
+
+.remove-button:hover,
+.clear-button:hover {
+  color: red; /* Change color on hover */
+}
+
+.playlist-action-container{
+    display: flex;
+}
+
+.save-button {
+  margin-left: 10px; /* Add some spacing */
+}
+
+.clear-button {
+  margin-left: 10px; /* Add some spacing */
+  display: flex;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000; /* Ensure modal is on top */
+}
+
+.modal-content {
+  background: var(--foreground-5);
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  color: var(--foreground-secondary);
+  cursor: pointer;
+}
+
+.save-confirm-button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.save-confirm-button:hover {
+  background-color: var(--primary-color-dark); /* Darker shade on hover */
+}
+
+.playlist-name-input {
+  background: var(--foreground-3);
+  padding: 5px;
+  border-radius: 5px;
+}

frontend/src/components/Playlist.js

@@ -0,0 +1,93 @@
+"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 { playlist, initializePlayer, removeFromPlaylist, currentIndex, setPlaylist } = 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 playlist?")) {
+      setPlaylist([]); // Clear the playlist 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>Your Playlist</h2>
+      <div className="playlist-action-container">
+        <button onClick={() => setIsModalOpen(true)} className="save-button">
+          Save Playlist
+        </button>
+        <button onClick={handleClearPlaylist} className="clear-button">
+          <TbPlaylistX /> Clear Playlist
+        </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>
+      )}
+
+      {playlist.length === 0 ? (
+        <p>No tracks in the playlist</p>
+      ) : (
+        <ul className="playlist">
+          {playlist.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={() => removeFromPlaylist(track.source)}>
+                <FaTrash />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Playlist;

frontend/src/components/SavedPlaylists.css

@@ -0,0 +1,65 @@
+.saved-playlists-container {
+  padding: 20px;
+  background-color: var(--foreground-1);
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.saved-playlists {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.saved-playlist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.playlist-name {
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.playlist-controls {
+  display: flex;
+  gap: 5px;
+}
+
+.play-button,
+.edit-button,
+.remove-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--foreground-secondary);
+}
+
+.play-button:hover {
+  color: green; /* Change color on hover */
+}
+
+.edit-button:hover {
+  color: blue; /* Change color on hover */
+}
+
+.remove-button:hover {
+  color: red; /* Change color on hover */
+}
+
+.delete-all-button {
+  margin-bottom: 10px;
+  background-color: red;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.delete-all-button:hover {
+  background-color: darkred; /* Darker shade on hover */
+}

frontend/src/components/SavedPlaylists.js

@@ -0,0 +1,65 @@
+"use client";
+import React, { useState } from "react";
+import { useMusicPlayer } from "@/context/MusicPlayerContext";
+import { formatTitle } from "@/lib/utils";
+import { FaTrash, FaEdit } from "react-icons/fa"; // Import icons for edit and delete
+import "./SavedPlaylists.css"; // Import a CSS file for styling
+
+const SavedPlaylists = () => {
+  const { initializePlayer, addToPlaylist } = useMusicPlayer();
+  const [playlists, setPlaylists] = useState(() => JSON.parse(localStorage.getItem("playlists")) || {});
+
+  const handlePlayPlaylist = (tracks) => {
+    // Check if there's at least one track to play
+    if (tracks.length > 0) {
+      // Initialize the player with the first track
+      initializePlayer(tracks[0].source, tracks[0].title); // Start playing the first track
+  
+      // Add the rest of the tracks to the playlist
+      tracks.slice(1).forEach(track => {
+        addToPlaylist({ source: track.source, title: track.title });
+      });
+    }
+  };
+
+  const handleDeletePlaylist = (name) => {
+    const updatedPlaylists = { ...playlists };
+    delete updatedPlaylists[name];
+    setPlaylists(updatedPlaylists);
+    localStorage.setItem("playlists", JSON.stringify(updatedPlaylists));
+  };
+
+  const handleDeleteAllPlaylists = () => {
+    setPlaylists({});
+    localStorage.removeItem("playlists");
+  };
+
+  const handleEditPlaylist = (name) => {
+    // Logic to edit the playlist can be implemented as needed
+  };
+
+  return (
+    <div className="saved-playlists-container">
+      <h2>Saved Playlists</h2>
+      <button onClick={handleDeleteAllPlaylists} className="delete-all-button">Delete All Playlists</button>
+      {Object.keys(playlists).length === 0 ? (
+        <p>No saved playlists</p>
+      ) : (
+        <ul className="saved-playlists">
+          {Object.entries(playlists).map(([name, tracks]) => (
+            <li key={name} className="saved-playlist-item">
+              <span className="playlist-name">{name}</span>
+              <div className="playlist-controls">
+                <button onClick={() => handlePlayPlaylist(tracks)} className="play-button">Play</button>
+                <button onClick={() => handleEditPlaylist(name)} className="edit-button"><FaEdit /></button>
+                <button onClick={() => handleDeletePlaylist(name)} className="remove-button"><FaTrash /></button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SavedPlaylists;

frontend/src/context/MusicPlayerContext.js

@@ -10,14 +10,33 @@ export const MusicPlayerProvider = ({ children }) => {
   const [isPlayerVisible, setIsPlayerVisible] = useState(false);
   const [isPlayerMaximized, setIsPlayerMaximized] = useState(false);
   const [loadingProgress, setLoadingProgress] = useState(null);
-  const [abortController, setAbortController] = useState(null); // AbortController for stopping
+  const [abortController, setAbortController] = useState(null);
   const [didDestroy, setDidDestroy] = useState(false);
 
+  // Playlist and index
+  const [playlist, setPlaylist] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const canPlayPrevious = currentIndex > 0;
+  const canPlayNext = currentIndex < playlist.length - 1;
+
   const initializePlayer = async (source, title) => {
+    // Check if song already exists in playlist
+    const songIndex = playlist.findIndex(song => song.source === source);
+    
+    if (songIndex !== -1) {
+      setCurrentIndex(songIndex);  // Set to existing song index
+    } else {
+      // Add new song and set to that new index
+      const newSong = { source, title };
+      setPlaylist((prev) => [...prev, newSong]);
+      setCurrentIndex(playlist.length);  // Set index to the end (new song position)
+    }
+
     if (abortController) {
       abortController.abort();
     }
-    
+
     const newAbortController = new AbortController();
     setAbortController(newAbortController);
 
@@ -26,7 +45,7 @@ export const MusicPlayerProvider = ({ children }) => {
     if (videoRef.current) {
       videoRef.current.pause();
     }
-    
+
     try {
       const response = await fetch(`/api/get/music/${encodeURIComponent(extractedFileName)}`, {
         signal: newAbortController.signal,
@@ -97,7 +116,6 @@ export const MusicPlayerProvider = ({ children }) => {
 
   const startPlayer = (source) => {
     setDidDestroy(false);
-    console.log("setting didDestroy to false");
     setSrc(source);
     setIsPlayerVisible(true);
     if (videoRef.current) {
@@ -108,6 +126,58 @@ export const MusicPlayerProvider = ({ children }) => {
 
   const togglePlayerSize = () => setIsPlayerMaximized(!isPlayerMaximized);
 
+  const addToPlaylist = (song) => {
+    const songIndex = playlist.findIndex(track => track.source === song.source);
+    if (songIndex === -1) {
+      setPlaylist((prev) => [...prev, song]);
+    }
+  };
+
+  const removeFromPlaylist = (source) => {
+    setPlaylist((prev) => prev.filter(track => track.source !== source));
+    if (currentIndex >= playlist.length) {
+      setCurrentIndex(playlist.length - 1);
+    }
+  };
+
+  const playNext = () => {
+    if (canPlayNext) {
+      const nextIndex = currentIndex + 1;
+      setCurrentIndex(nextIndex);
+      const { source, title } = playlist[nextIndex];
+      initializePlayer(source, title);
+    }
+  };
+
+  const playPrevious = () => {
+    if (canPlayPrevious) {
+      const prevIndex = currentIndex - 1;
+      setCurrentIndex(prevIndex);
+      const { source, title } = playlist[prevIndex];
+      initializePlayer(source, title);
+    }
+  };
+
+  const playAtIndex = (index) => {
+    if (index >= 0 && index < playlist.length) {
+      setCurrentIndex(index);
+      const { source, title } = playlist[index];
+      initializePlayer(source, title);
+    }
+  };
+
+  useEffect(() => {
+    const handleEnded = () => playNext();
+    if (videoRef.current) {
+      videoRef.current.addEventListener("ended", handleEnded);
+    }
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.removeEventListener("ended", handleEnded);
+      }
+    };
+  }, [currentIndex, playlist]);
+
   return (
     <MusicPlayerContext.Provider
       value={{
@@ -124,6 +194,16 @@ export const MusicPlayerProvider = ({ children }) => {
         setNowPlaying,
         didDestroy, 
         setDidDestroy,
+        playlist,
+        setPlaylist,
+        addToPlaylist,
+        removeFromPlaylist,
+        playNext,
+        playPrevious,
+        playAtIndex,
+        currentIndex,
+        canPlayPrevious,
+        canPlayNext,
       }}
     >
       {children}