Initial migration
This commit is contained in:
Wesley Neuhaus
+227
@@ -0,0 +1,227 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user