2022-12-09 15:28:30 -06:00
|
|
|
|
// 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 && e.target === document.body) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 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);
|
2022-12-09 16:35:46 -06:00
|
|
|
|
hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente y ecológico te recomendamos descargar la película.';
|
2022-12-09 15:28:30 -06:00
|
|
|
|
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() },
|
|
|
|
|
});
|