audio-vis/raw/javascript/eventHandler.js

async function initHandler() {
    let body = $('body');
    $('.playlist.menu-icon').addEventListener('click', e => {
        player.playlist.renderPagination(player.playlist.page);
        gui.modal.showModal();
    });

    body.addDelegatedEventListener('click', '.playlist-item', (e, el) => {
        let number = el.dataset.index;
        player.playByID(parseInt(number));
        togglePlayButton('pause');
    });

    body.addDelegatedEventListener('click', '.controls button', (e, el) => {
        switch (el.id) {
            case 'previous':
                player.prevSong();
                break;
            case 'next':
                player.nextSong()
                break;
            case 'play':
                player.playStop();
                break;
            case 'shuffle':
                player.playlist.isShuffle = !player.playlist.isShuffle;
                toggleShuffle();
                break;
        }
        togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause');
    });
    window.addEventListener('playSong', setActiveOnPlaylist);
    $('.upload-image').addEventListener('click', imageUploader.renderModal.bind(imageUploader));
}

function setActiveOnPlaylist(e) {
    let item = $('.playlist-item[data-index="' + player.playlist.index + '"]'),
        active = $('.playlist-item.active');
    if (active) {
        active.removeClass('active');
    }
    if (item) {
        item.addClass('active');
    }
}

function toggleShuffle() {
    let active = player.playlist.isShuffle;
    $('#shuffle').toggleCheck('active', active);
}

function togglePlayButton(status) {
    let icons = $$('#play .icon');
    icons.forEach(el => {
        if (el.dataset.name === status) {
            el.removeClass('hide');
        } else {
            el.addClass('hide');
        }
    })
}