Spaces:
Running
Running
File size: 2,311 Bytes
cc7a87b | 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 | ```javascript
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Upload functionality
const uploadBtn = document.getElementById('uploadBtn');
if (uploadBtn) {
uploadBtn.addEventListener('click', function() {
document.getElementById('musicUpload').click();
});
}
const musicUpload = document.getElementById('musicUpload');
if (musicUpload) {
musicUpload.addEventListener('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
console.log('Files selected for upload:', files);
simulateUpload(files);
}
});
}
});
function simulateUpload(files) {
const tracksList = document.getElementById('tracksList');
const uploadedCount = document.getElementById('uploadedCount');
Array.from(files).forEach((file, index) => {
const trackItem = document.createElement('div');
trackItem.className = 'grid grid-cols-12 p-4 items-center hover:bg-gray-700 track-item';
trackItem.innerHTML = `
<div class="col-span-6 flex items-center">
<div class="relative w-10 h-10 mr-4">
<img src="http://static.photos/music/80x80/${10 + index}" alt="Track cover" class="rounded-md w-full h-full object-cover">
<button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100">
<i data-feather="play" class="h-3 w-3 text-white"></i>
</button>
</div>
<div>
<h3 class="font-medium text-white">${file.name.replace(/\.[^/.]+$/, "")}</h3>
<p class="text-sm text-gray-400">Uploaded now</p>
</div>
</div>
<div class="col-span-2 text-gray-400 text-sm">Just now</div>
<div class="col-span-2 text-gray-400 text-sm">0</div>
<div class="col-span-2 text-gray-400 text-sm">--:--</div>
`;
tracksList.prepend(trackItem);
uploadedCount.textContent = parseInt(uploadedCount.textContent) + 1;
});
feather.replace();
}
``` |