Spaces:
Sleeping
Sleeping
File size: 2,422 Bytes
ba6c831 a34fbc5 ba6c831 eb2c7d1 ba6c831 eb2c7d1 a34fbc5 ba6c831 eb2c7d1 ba6c831 eb2c7d1 ba6c831 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
"use client";
import React, { useState, useEffect } from "react";
import { useMusicPlayer } from "@/context/MusicPlayerContext";
import { formatTitle } from "@/lib/utils";
import { FaTrash, FaEdit } from "react-icons/fa";
import "./SavedPlaylists.css";
const SavedPlaylists = () => {
const { initializePlayer, addToPlayqueue } = useMusicPlayer();
const [playlists, setPlaylists] = useState({});
useEffect(() => {
const storedPlaylists = JSON.parse(localStorage.getItem("playlists")) || {};
setPlaylists(storedPlaylists);
}, []);
const handlePlayPlaylist = (tracks) => {
if (tracks.length > 0) {
initializePlayer(tracks[0].source, tracks[0].title);
tracks.slice(1).forEach(track => addToPlayqueue({ 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>
) : (
<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>
);
};
export default SavedPlaylists;
|