mauflix/source/static/js/player.js

57 lines
2.0 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 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() },
});