Spaces:
Running
Running
File size: 4,473 Bytes
0df20ca 6ce77d4 0df20ca 5f4cbfa 0df20ca 5f4cbfa 0df20ca |
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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
document.addEventListener('DOMContentLoaded', () => {
// Initialize animations
const animatedElements = document.querySelectorAll('.fade-in, .slide-up');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1
});
animatedElements.forEach(el => observer.observe(el));
// Load playlist
fetch('/api/playlist')
.then(response => response.json())
.then(data => renderPlaylist(data));
// Search functionality
document.getElementById('search-btn').addEventListener('click', () => {
const query = document.getElementById('search-input').value.trim();
if (query) {
fetch('/api/search', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => renderSearchResults(data));
}
});
// Playlist item click handler
document.getElementById('playlist-grid').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-btn') || e.target.closest('.remove-btn')) {
const card = e.target.closest('.music-card');
const id = parseInt(card.dataset.id);
removeFromPlaylist(id);
}
});
// Search result click handler
document.getElementById('search-grid').addEventListener('click', (e) => {
const card = e.target.closest('.music-card');
if (!card) return;
if (e.target.classList.contains('remove-btn') || e.target.closest('.remove-btn')) {
card.remove();
} else {
const id = parseInt(card.dataset.id);
addToPlaylist(id);
card.classList.add('selected');
setTimeout(() => card.classList.remove('selected'), 1000);
}
});
});
function renderPlaylist(songs) {
const grid = document.getElementById('playlist-grid');
grid.innerHTML = '';
songs.forEach(song => {
const card = createMusicCard(song, true);
grid.appendChild(card);
});
}
function renderSearchResults(songs) {
const grid = document.getElementById('search-grid');
grid.innerHTML = '';
songs.forEach(song => {
const card = createMusicCard(song, false);
grid.appendChild(card);
});
}
function createMusicCard(song, isPlaylist) {
const card = document.createElement('div');
card.className = `music-card ${song.downloaded ? 'downloaded' : 'not-downloaded'}`;
card.dataset.id = song.id;
card.innerHTML = `
<img src="${song.thumbnail}" class="thumbnail">
<span class="duration">${song.duration}</span>
<div class="remove-btn"><i data-feather="x"></i></div>
<div class="info">
<div class="title">${song.title}</div>
<div class="artist">${song.artist}</div>
</div>
`;
if (!isPlaylist) {
card.addEventListener('click', () => {
document.querySelectorAll('#search-grid .music-card').forEach(c => {
c.classList.remove('selected');
});
card.classList.add('selected');
addToPlaylist(song.id);
});
}
return card;
}
function addToPlaylist(id) {
fetch('/api/add_to_playlist', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id })
})
.then(response => response.json())
.then(data => {
if (data.success) {
fetch('/api/playlist')
.then(response => response.json())
.then(data => renderPlaylist(data));
}
});
}
function removeFromPlaylist(id) {
fetch('/api/remove_from_playlist', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id })
})
.then(response => response.json())
.then(data => {
if (data.success) {
fetch('/api/playlist')
.then(response => response.json())
.then(data => renderPlaylist(data));
}
});
}
|