228 lines
7.0 KiB
HTML
228 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Manage Queue</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
background-color: #0f0f0f;
|
|
}
|
|
.column {
|
|
flex: 1;
|
|
padding: 10px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
#musicQueue, #allMusic {
|
|
height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
.queueItem {
|
|
padding: 5px;
|
|
margin: 5px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.queueItem button {
|
|
margin-left: 10px;
|
|
}
|
|
input[type="text"] {
|
|
width: calc(100% - 22px); /* Full width minus padding and border */
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.loader {
|
|
border: 5px solid #f3f3f3; /* Light grey */
|
|
border-top: 5px solid #3498db; /* Blue */
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
.musicItem {
|
|
padding: 5px;
|
|
margin: 5px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.musicItem button {
|
|
margin-right: 10px; /* Adds space between the button and the title */
|
|
}
|
|
|
|
.musicItem span {
|
|
flex-grow: 1; /* Allows the title span to take up the remaining space */
|
|
text-align: left; /* Ensures text is left-aligned */
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Hide loader by default */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
h2 {
|
|
color: #999;
|
|
font-size: 3vh;
|
|
}
|
|
|
|
.progress-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
height: 5vh;
|
|
width: 30vw;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
background-color: #eee;
|
|
height: 2vh;
|
|
border-radius: 1vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 2vh;
|
|
background-color: #007BFF;
|
|
width: 0%;
|
|
border-radius: 1vh;
|
|
transition: width 0.5s ease;
|
|
}
|
|
#album-art {
|
|
/*width: 200px; /* Adjust width as needed */
|
|
height: 20vh; /* Maintain aspect ratio */
|
|
width: auto;
|
|
border-radius: 1vh; /* Rounded corners */
|
|
margin-bottom: 1vh; /* Space between the image and text */
|
|
}
|
|
span{
|
|
color:#999;
|
|
font-size: 1vw;
|
|
margin: 1vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="column">
|
|
<h2>Download New Song</h2>
|
|
<input type="text" id="youtubeUrl" placeholder="Enter YouTube URL here" required>
|
|
<button id="downloadButton" onclick="submitDownload()">Download</button>
|
|
<div id="loader" class="loader hidden"></div>
|
|
</div>
|
|
|
|
<div class="column" id="queueControls">
|
|
<h2>Music Queue</h2>
|
|
<div id="musicQueue"></div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<h2>All Music</h2>
|
|
<input type="text" id="searchMusic" placeholder="Search music..." onkeyup="filterMusic()">
|
|
<div id="allMusic"></div>
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
|
<script>
|
|
const socket = io(); // Connect to WebSocket server
|
|
|
|
socket.on('connect', function() {
|
|
console.log('Connected to WebSocket server!');
|
|
loadMusic(); // Load music when connected
|
|
loadQueue(); // Load queue when connected
|
|
});
|
|
|
|
socket.on('music_list', function(data) {
|
|
//console.log(data)
|
|
//console.log(data.music_files)
|
|
populateMusicList(data.music_files);
|
|
});
|
|
|
|
socket.on('queue', function(data) {
|
|
//console.log(data)
|
|
//populateQueue(data.queue);
|
|
populateQueue(data);
|
|
});
|
|
|
|
function submitDownload() {
|
|
const youtubeUrl = document.getElementById('youtubeUrl').value;
|
|
socket.emit('download', { youtube_url: youtubeUrl });
|
|
}
|
|
|
|
function playSong(songId, songTitle) {
|
|
socket.emit('play', { songId: songId, songTitle: songTitle });
|
|
}
|
|
|
|
function removeFromQueue(songId) {
|
|
socket.emit('remove_from_queue', { songId: songId });
|
|
}
|
|
|
|
function loadMusic() {
|
|
socket.emit('list_music');
|
|
}
|
|
|
|
function loadQueue() {
|
|
socket.emit('get_queue');
|
|
}
|
|
|
|
function populateMusicList(musicFiles) {
|
|
console.log(musicFiles);
|
|
const musicList = document.getElementById('allMusic');
|
|
musicList.innerHTML = ''; // Clear the list before populating
|
|
musicFiles.forEach(song => {
|
|
const div = document.createElement('div');
|
|
div.className = 'musicItem';
|
|
const addButton = document.createElement('button');
|
|
addButton.textContent = 'Add to Queue';
|
|
addButton.onclick = () => playSong(song.id, song.title);
|
|
const titleSpan = document.createElement('span');
|
|
titleSpan.textContent = song.title;
|
|
div.appendChild(addButton);
|
|
div.appendChild(titleSpan);
|
|
musicList.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function populateQueue(queue) {
|
|
const queueElement = document.getElementById('musicQueue');
|
|
queueElement.innerHTML = ''; // Clear the queue before loading new items
|
|
queue.forEach(song => {
|
|
const div = document.createElement('div');
|
|
div.className = 'queueItem';
|
|
const removeButton = document.createElement('button');
|
|
removeButton.textContent = 'Remove';
|
|
removeButton.onclick = () => removeFromQueue(song.id);
|
|
const titleSpan = document.createElement('span');
|
|
titleSpan.textContent = song.title;
|
|
div.appendChild(removeButton);
|
|
div.appendChild(titleSpan);
|
|
queueElement.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function filterMusic() {
|
|
const search = document.getElementById('searchMusic').value.toLowerCase();
|
|
const musicItems = document.querySelectorAll('.musicItem');
|
|
musicItems.forEach(item => {
|
|
const isVisible = item.textContent.toLowerCase().includes(search);
|
|
item.style.display = isVisible ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|