document.addEventListener('DOMContentLoaded', function() { // Initialize Feather Icons if (window.feather) { feather.replace(); } // Audio upload handling const audioUpload = document.getElementById('audio-upload'); const audioInfo = document.getElementById('audio-info'); const filename = document.getElementById('filename'); const duration = document.getElementById('duration'); audioUpload.addEventListener('change', function(e) { if (e.target.files.length > 0) { const file = e.target.files[0]; filename.textContent = file.name; // Create audio element to get duration const audio = new Audio(); audio.src = URL.createObjectURL(file); audio.onloadedmetadata = function() { const mins = Math.floor(audio.duration / 60); const secs = Math.floor(audio.duration % 60); duration.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`; audioInfo.classList.remove('hidden'); }; } // Refresh Feather Icons after dynamic content loads if (window.feather) { feather.replace(); } }); // Drag and drop functionality const dropArea = document.querySelector('.border-dashed'); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } ['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); ['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight() { dropArea.classList.add('border-purple-400'); } function unhighlight() { dropArea.classList.remove('border-purple-400'); } dropArea.addEventListener('drop', handleDrop, false); function handleDrop(e) { const dt = e.dataTransfer; const files = dt.files; audioUpload.files = files; const event = new Event('change'); audioUpload.dispatchEvent(event); } });