ui.js

// UI interaction functions

// Upload file
function setupUploadZone() {
    uploadZone.onclick = function() {
        fileInput.click();
    };

    fileInput.onchange = function(e) {
        var file = e.target.files[0];
        if (file) loadFile(file);
    };

    uploadZone.ondragover = function(e) {
        e.preventDefault();
        uploadZone.classList.add('drag-over');
    };
    

    uploadZone.ondragleave = function(e) {
        e.preventDefault();
        uploadZone.classList.remove('drag-over');
    };

    uploadZone.ondrop = function(e) {
        e.preventDefault();
        uploadZone.classList.remove('drag-over');
        var file = e.dataTransfer.files[0];
        if (file) loadFile(file);
    };
}

// Slider
function setupSlider() {
    slider.oninput = function() {
        currentIndex = parseInt(slider.value);
        currentTime.textContent = formatTime(currentIndex);
    };
}

// Speed buttons
function setupSpeedButtons() {
    window.onload = function() {
        var speedBtns = document.querySelectorAll('.speed-btn');
        for (var i = 0; i < speedBtns.length; i++) {
            speedBtns[i].onclick = function() {
                for (var j = 0; j < speedBtns.length; j++) {
                    speedBtns[j].classList.remove('active');
                }
                this.classList.add('active');
                speed = parseFloat(this.dataset.speed);
            };
        }
    };
}