File size: 2,276 Bytes
c915ad1
26dda4e
c915ad1
 
 
 
 
26dda4e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c915ad1
26dda4e
c915ad1
 
 
 
 
 
26dda4e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

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);
    }
});