// Deshabilita scroll con la tecla de espacio
// Esto es para que en 'player' quede habilitado para reproducción
window.addEventListener('keydown', (e) => {  
  if (e.keyCode === 32) {
    if (e.target === document.body) {
      e.preventDefault();  
    }
    // Por alguna razón la tecla rápida 'espacio' no funciona en toggle como
    // la tecla rápida 'k', así que se fuerza para el mismo comportamiento
    window.dispatchEvent(new KeyboardEvent('keydown', {
      'key': 'k'
    }));
  }
});

// Añade un aviso
function add_notice () {
  const divs = document.querySelectorAll('.plyr');
  // Ejecuta de nuevo hasta que esté implementado el reproductor
  if (divs.length == 0) {
    setTimeout(add_notice, 500);
  } else {
    let hero_sec = document.createElement('section'),
        hero_div = document.createElement('div'),
        hero_tit = document.createElement('p'),
        hero_btn = document.createElement('a');
    hero_sec.id = 'notice';
    hero_sec.classList.add('hero', 'is-small', 'is-warning', 'has-text-centered');
    hero_div.classList.add('hero-body');
    hero_btn.classList.add('button', 'is-small', 'is-success');
    hero_btn.addEventListener('click', remove_notice);  
    hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente y ecológico te recomendamos descargar la película.';
    hero_btn.innerText = '¡Entendido!';
    hero_tit.appendChild(hero_btn);
    hero_div.appendChild(hero_tit);
    hero_sec.appendChild(hero_div);
    divs[0].appendChild(hero_sec);
  }
}

// Elimina aviso
function remove_notice () {
  let notice = document.querySelector('#notice');
  console.log('notice', notice)
  if (notice !== null) {
    notice.parentNode.removeChild(notice);
  }
}

// Implementa el reproductor
const player = new Plyr('#player', {
  keyboard: { focused: true, global: true },
  controls: ['play-large', 'play', 'progress', 'current-time', 'mute',
    'volume', 'pip', 'airplay', 'download', 'fullscreen'],
  listeners: { seek: add_notice() },
});