[Projeto] evoluindo cada vez mais

const timerView = document.querySelector('#timer');
const duracaoFoco = 1500;
const duracaoDescansoCurto = 300;
const duracaoDescansoLongo = 900;

musicaFoco.addEventListener('change', () => {
        if (musica.paused) {
                musica.play();
        } else {
                musica.pause();
        }
})

focoBt.addEventListener('click', () => {
        tempoSegundos = 1500;
        alterarContexto('foco');
        focoBt.classList.add('active');
})

curtoBt.addEventListener('click', () => {
        tempoSegundos = 300;
        alterarContexto('descanso-curto');
        curtoBt.classList.add('active');
})

longBt.addEventListener('click', () => {
        tempoSegundos = 900;
        alterarContexto('descanso-longo');
        longBt.classList.add('active');
})

function alterarContexto(contexto) {
        verTempo();
        botoes.forEach(function (contexto) {
                contexto.classList.remove('active')
        })
        html.setAttribute('data-contexto', contexto)
        imagem.setAttribute('src', `/imagens/${contexto}.png`)
        switch (contexto) {
                case "foco":
                        frase.innerHTML = `
                Otimize sua produtividade,<br>
                    <strong class="app__title-strong">mergulhe no que importa.</strong>
                `
                        break;
                case "descanso-curto":
                        frase.innerHTML = `
                Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>
                `
                        break;
                case "descanso-longo":
                        frase.innerHTML = `
                Hora de voltar à superfície.<strong class="app__title-strong"> Faça uma pausa longa.</strong>
                `
                default:
                        break;
        }
}

const contagemRegressiva = () => {
        if (tempoSegundos <= 0) {
                audioTempoFinalizado.play();
                alert('tempo finalizado');
                pausar();
                return;
        }
        tempoSegundos -= 1;
        verTempo();

}

botaoTimer.addEventListener('click', iniciarOuPausar);

function iniciarOuPausar() {
        if (intervaloId) {
                audioPausa.play();
                pausar();
                return;
        }
        audioPlay.play();
        intervaloId = setInterval(contagemRegressiva, 1000);
        iniciarOuPausarBt.textContent = "Pausar";
        imagemPausePlay.setAttribute('src', './imagens/pause.png');
}

function pausar() {
        clearInterval(intervaloId);
        iniciarOuPausarBt.textContent = "Começar";
        imagemPausePlay.setAttribute('src', './imagens/play_arrow.png');
        intervaloId = null;

}

function verTempo() {
        const tempo = new Date(tempoSegundos * 1000);
        const tempoFormatado = tempo.toLocaleTimeString('pt-br', {
                minute: '2-digit',
                second: '2-digit'
        });
        timerView.innerHTML = `${tempoFormatado} `;
}

verTempo();