0.3 Alpha

frontend/src/components/Card.js

@@ -6,17 +6,17 @@ import { useMusicPlayer } from "@/context/MusicPlayerContext";
 import { formatTitle } from "@/lib/utils";
 
 const Card = ({ src }) => {
-  const { initializePlayer, nowPlaying, addToPlaylist } = useMusicPlayer();
+  const { initializePlayer, nowPlaying, addToPlayqueue  } = useMusicPlayer();
   const title = formatTitle(src);
 
   const handlePlayButtonClick = () => {
     initializePlayer(src, title);
   };
 
-  const handleAddToPlaylistClick = (e) => {
+  const handleAddToPlayqueueClick = (e) => {
     e.stopPropagation(); // Prevent the button click from triggering the card play
-    addToPlaylist({ source: src, title });
-    console.log(`${title} added to playlist`)
+    addToPlayqueue({ source: src, title });
+    console.log(`${title} added to play queue`)
   };
 
   return (
@@ -27,7 +27,7 @@ const Card = ({ src }) => {
         <label className="card-title">{title}</label>
       </div>
     </button>
-      <button className="add-to-playlist" onClick={handleAddToPlaylistClick}>
+      <button className="add-to-playlist" onClick={handleAddToPlayqueueClick}>
         <TbPlaylistAdd className="add-icon" />
       </button>
     </>

frontend/src/components/Header.js

@@ -8,7 +8,7 @@ const Header = () => {
     <header className="header">
       <div className="header-container">
         <h1 className="logo">
-          Nexora<sup className="header-music"> Music</sup>
+          Nexora<sup className="header-music">Music</sup>
         </h1>
         <nav className="nav">
           <Link href="/" className="nav-link">

frontend/src/components/Playlist.css

@@ -78,6 +78,7 @@
 .clear-button {
   margin-left: 10px; /* Add some spacing */
   display: flex;
+  align-items: center;
 }
 
 .modal {

frontend/src/components/Playlist.js

@@ -7,7 +7,7 @@ import { TbPlaylistX } from "react-icons/tb";
 import "./Playlist.css";
 
 const Playlist = () => {
-  const { playlist, initializePlayer, removeFromPlaylist, currentIndex, setPlaylist } = useMusicPlayer();
+  const { playqueue, initializePlayer, removeFromPlayqueue, currentIndex, setPlayqueue } = useMusicPlayer();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [playlistName, setPlaylistName] = useState("");
 
@@ -16,8 +16,8 @@ const Playlist = () => {
   };
 
   const handleClearPlaylist = () => {
-    if (window.confirm("Are you sure you want to clear the playlist?")) {
-      setPlaylist([]); // Clear the playlist and trigger a re-render
+    if (window.confirm("Are you sure you want to clear the play queue?")) {
+      setPlayqueue([]); // Clear the play queue and trigger a re-render
     }
   };
 
@@ -32,13 +32,13 @@ const Playlist = () => {
 
   return (
     <div className="playlist-container">
-      <h2>Your Playlist</h2>
+      <h2>Play Queue</h2>
       <div className="playlist-action-container">
         <button onClick={() => setIsModalOpen(true)} className="save-button">
-          Save Playlist
+          Save to Playlist
         </button>
         <button onClick={handleClearPlaylist} className="clear-button">
-          <TbPlaylistX /> Clear Playlist
+          <TbPlaylistX /> Clear Queue
         </button>
       </div>
       {isModalOpen && (
@@ -62,11 +62,11 @@ const Playlist = () => {
         </div>
       )}
 
-      {playlist.length === 0 ? (
-        <p>No tracks in the playlist</p>
+      {playqueue.length === 0 ? (
+        <p>Empty</p>
       ) : (
         <ul className="playlist">
-          {playlist.map((track, index) => (
+          {playqueue.map((track, index) => (
             <li
               key={index}
               className={`playlist-item ${currentIndex === index ? "playing" : ""}`}
@@ -79,7 +79,7 @@ const Playlist = () => {
                   {formatTitle(track.source)}
                 </span>
               </div>
-              <button className="remove-button" onClick={() => removeFromPlaylist(track.source)}>
+              <button className="remove-button" onClick={() => removeFromPlayqueue(track.source)}>
                 <FaTrash />
               </button>
             </li>

frontend/src/components/SavedPlaylists.css

@@ -5,23 +5,21 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
-.saved-playlists {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.saved-playlists-table {
+  width: 100%; /* Make table width 100% */
+  border-collapse: collapse; /* Collapse borders for better appearance */
 }
 
-.saved-playlist-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.saved-playlists-table th,
+.saved-playlists-table td {
   padding: 10px;
+  text-align: left; /* Align text to the left */
   border-bottom: 1px solid var(--border-color);
 }
 
-.playlist-name {
-  font-size: 1rem;
-  color: var(--text-color);
+.saved-playlists-table th {
+  background-color: var(--background-secondary); /* Optional: Add background to header */
+  color: var(--text-color); /* Set text color for header */
 }
 
 .playlist-controls {

frontend/src/components/SavedPlaylists.js

@@ -2,23 +2,17 @@
 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
+import { FaTrash, FaEdit } from "react-icons/fa";
+import "./SavedPlaylists.css";
 
 const SavedPlaylists = () => {
-  const { initializePlayer, addToPlaylist } = useMusicPlayer();
+  const { initializePlayer, addToPlayqueue } = 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 });
-      });
+      initializePlayer(tracks[0].source, tracks[0].title);
+      tracks.slice(1).forEach(track => addToPlayqueue({ source: track.source, title: track.title }));
     }
   };
 
@@ -45,18 +39,26 @@ const SavedPlaylists = () => {
       {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>
+        <table className="saved-playlists-table">
+          <thead>
+            <tr>
+              <th>Playlist Name</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(playlists).map(([name, tracks]) => (
+              <tr key={name}>
+                <td>{name}</td>
+                <td 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>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       )}
     </div>
   );

frontend/src/context/MusicPlayerContext.js

@@ -13,24 +13,24 @@ export const MusicPlayerProvider = ({ children }) => {
   const [abortController, setAbortController] = useState(null);
   const [didDestroy, setDidDestroy] = useState(false);
 
-  // Playlist and index
-  const [playlist, setPlaylist] = useState([]);
+  // Playqueue and index
+  const [playqueue, setPlayqueue] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const canPlayPrevious = currentIndex > 0;
-  const canPlayNext = currentIndex < playlist.length - 1;
+  const canPlayNext = currentIndex < playqueue.length - 1;
 
   const initializePlayer = async (source, title) => {
-    // Check if song already exists in playlist
-    const songIndex = playlist.findIndex(song => song.source === source);
+    // Check if song already exists in playqueue
+    const songIndex = playqueue.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)
+      setPlayqueue((prev) => [...prev, newSong]);
+      setCurrentIndex(playqueue.length);  // Set index to the end (new song position)
     }
 
     if (abortController) {
@@ -126,17 +126,17 @@ export const MusicPlayerProvider = ({ children }) => {
 
   const togglePlayerSize = () => setIsPlayerMaximized(!isPlayerMaximized);
 
-  const addToPlaylist = (song) => {
-    const songIndex = playlist.findIndex(track => track.source === song.source);
+  const addToPlayqueue = (song) => {
+    const songIndex = playqueue.findIndex(track => track.source === song.source);
     if (songIndex === -1) {
-      setPlaylist((prev) => [...prev, song]);
+      setPlayqueue((prev) => [...prev, song]);
     }
   };
 
-  const removeFromPlaylist = (source) => {
-    setPlaylist((prev) => prev.filter(track => track.source !== source));
-    if (currentIndex >= playlist.length) {
-      setCurrentIndex(playlist.length - 1);
+  const removeFromPlayqueue = (source) => {
+    setPlayqueue((prev) => prev.filter(track => track.source !== source));
+    if (currentIndex >= playqueue.length) {
+      setCurrentIndex(playqueue.length - 1);
     }
   };
 
@@ -144,7 +144,7 @@ export const MusicPlayerProvider = ({ children }) => {
     if (canPlayNext) {
       const nextIndex = currentIndex + 1;
       setCurrentIndex(nextIndex);
-      const { source, title } = playlist[nextIndex];
+      const { source, title } = playqueue[nextIndex];
       initializePlayer(source, title);
     }
   };
@@ -153,15 +153,15 @@ export const MusicPlayerProvider = ({ children }) => {
     if (canPlayPrevious) {
       const prevIndex = currentIndex - 1;
       setCurrentIndex(prevIndex);
-      const { source, title } = playlist[prevIndex];
+      const { source, title } = playqueue[prevIndex];
       initializePlayer(source, title);
     }
   };
 
   const playAtIndex = (index) => {
-    if (index >= 0 && index < playlist.length) {
+    if (index >= 0 && index < playqueue.length) {
       setCurrentIndex(index);
-      const { source, title } = playlist[index];
+      const { source, title } = playqueue[index];
       initializePlayer(source, title);
     }
   };
@@ -176,7 +176,7 @@ export const MusicPlayerProvider = ({ children }) => {
         videoRef.current.removeEventListener("ended", handleEnded);
       }
     };
-  }, [currentIndex, playlist]);
+  }, [currentIndex, playqueue]);
 
   return (
     <MusicPlayerContext.Provider
@@ -194,10 +194,10 @@ export const MusicPlayerProvider = ({ children }) => {
         setNowPlaying,
         didDestroy, 
         setDidDestroy,
-        playlist,
-        setPlaylist,
-        addToPlaylist,
-        removeFromPlaylist,
+        playqueue,
+        setPlayqueue,
+        addToPlayqueue,
+        removeFromPlayqueue,
         playNext,
         playPrevious,
         playAtIndex,

frontend/src/lib/config.js

@@ -1 +1,2 @@
-export const BASE_URL = "https://hans-r-d-load-balancer.hf.space";
+export const BASE_URL = "https://hans-r-d-load-balancer.hf.space";
+export const WEB_VERSION = "0.3 Alpha";