113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
|
|
// --- Add Song Modal Logic ---
|
|
const addSongFab = document.getElementById('add-song-fab');
|
|
const modalOverlay = document.getElementById('add-song-modal-overlay');
|
|
const modalContainer = document.getElementById('add-song-modal-container');
|
|
const closeModalBtn = document.getElementById('close-modal-btn');
|
|
const searchResultsContainer = document.getElementById('search-results');
|
|
const queueList = document.getElementById('queue-list');
|
|
const emptyQueueMessage = document.getElementById('empty-queue-message');
|
|
|
|
if (addSongFab) {
|
|
addSongFab.addEventListener('click', () => {
|
|
modalOverlay.classList.add('visible');
|
|
});
|
|
}
|
|
|
|
if (closeModalBtn) {
|
|
closeModalBtn.addEventListener('click', closeModal);
|
|
}
|
|
|
|
if (modalOverlay) {
|
|
modalOverlay.addEventListener('click', (e) => {
|
|
if (e.target === modalOverlay) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
function closeModal() {
|
|
modalContainer.style.transform = 'translateY(100%)';
|
|
modalOverlay.classList.remove('visible');
|
|
}
|
|
|
|
// --- Add Song to Queue Logic ---
|
|
searchResultsContainer.addEventListener('click', (e) => {
|
|
const resultItem = e.target.closest('.search-result-item');
|
|
if (!resultItem) return;
|
|
|
|
const song = {
|
|
title: resultItem.dataset.title,
|
|
artist: resultItem.dataset.artist,
|
|
albumArt: resultItem.dataset.albumArt,
|
|
source: resultItem.dataset.source,
|
|
sessionCode: window.currentSessionCode
|
|
};
|
|
|
|
addSongToQueue(song);
|
|
});
|
|
|
|
async function addSongToQueue(song) {
|
|
try {
|
|
const response = await fetch('add_song.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(song),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
addSongToDOM(result.data);
|
|
closeModal();
|
|
} else {
|
|
alert(result.message || 'Failed to add song.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding song:', error);
|
|
alert('An error occurred. Please try again.');
|
|
}
|
|
}
|
|
|
|
function addSongToDOM(song) {
|
|
if (emptyQueueMessage) {
|
|
emptyQueueMessage.remove();
|
|
}
|
|
|
|
const queueItem = document.createElement('div');
|
|
queueItem.className = 'queue-item new-item';
|
|
queueItem.innerHTML = `
|
|
<img src="${song.album_art_url}" alt="Album Art">
|
|
<div class="track-info">
|
|
<div class="track-title">${song.track_title}</div>
|
|
<div class="artist-name">${song.artist_name}</div>
|
|
</div>
|
|
<button class="vote-button">
|
|
<i class="bi bi-caret-up-fill"></i>
|
|
<span>${song.votes}</span>
|
|
</button>
|
|
`;
|
|
|
|
queueList.appendChild(queueItem);
|
|
|
|
// Trigger the animation
|
|
setTimeout(() => {
|
|
queueItem.classList.remove('new-item');
|
|
}, 10); // Small delay to ensure the transition is applied
|
|
}
|
|
});
|