// PLAYER element -->
const streamPlayer = document.querySelector('#player')
const controlsDiv = document.querySelector('.audio-stream')
streamPlayer.load()

player.addEventListener('loadeddata', (evt) => {
  controlsDiv.classList.add('loaded') 
})

// PLAYER controls -->
const playButton = document.querySelector('button.streamPlay')
const stopButton = document.querySelector('button.streamStop')

playButton.addEventListener('click', playHandler)
stopButton.addEventListener('click', stopHandler)

function playHandler(evt) {
  streamPlayer.play()
  playButton.setAttribute('disabled', '')
  playButton.textContent = 'Playing'
  if (stopButton.hasAttribute('disabled')) {
    stopButton.removeAttribute('disabled')
  }
}

function stopHandler() {
  streamPlayer.pause()
  stopButton.setAttribute('disabled', '')
  if (playButton.hasAttribute('disabled'))
    playButton.textContent = 'Play'
  playButton.removeAttribute('disabled')
}