Spaces:
Sleeping
Sleeping
File size: 3,655 Bytes
b615593 b50f5bd b615593 b50f5bd b615593 b50f5bd b615593 |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
"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, TbX } from "react-icons/tb";
import "./PlayQueue.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 handleIsPlayQueueOpen = () =>{
setIsPlayEueOpen(!isPlayEueOpen);
};
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">
<div className="flex justify-between"><h2>Play Queue</h2> <button onClick={handleIsPlayQueueOpen}><TbX className="size-6"/> </button> </div>
<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;
|