toggle mute overlay

This commit is contained in:
j 2021-10-11 19:43:44 +01:00
parent 2abeacccb6
commit c6e0d20e77

View file

@ -24,20 +24,26 @@ async function pandoraAPI(action, data) {
function updatePlayer(video, frame, currentTime, out, src) {
var rect = frame.getBoundingClientRect();
video.style.opacity = 0
console.log('update player', rect)
video.style.top = (rect.top + window.scrollY) + 'px'
video.style.display = 'block';
if (src) {
video.src = src
}
//video.poster = frame.querySelector('img').src
var muted = video.muted
video.muted = true
video.currentTime = currentTime
video.dataset.in = currentTime
video.dataset.out = out
video.controls = true
video._frame = frame
video.play()
const show = event => {
video.style.opacity = 1
video.muted = muted
video.removeEventListener('seeked', show)
}
video.addEventListener('seeked', show)
video.play()
}
function isElementInViewport (el) {
@ -118,6 +124,43 @@ function formatInfo(config, ascroll) {
ascroll.appendChild(div)
}
function showOverlay(event) {
document.querySelectorAll('#video-overlay').forEach(element => element.remove())
console.log('showOverlay')
var video = event.target
var rect = video.getBoundingClientRect();
console.log(rect)
var overlay = document.createElement('div')
overlay.id = 'video-overlay'
overlay.style.top = video.style.top
overlay.style.width = rect.width + 'px'
overlay.style.height = (rect.height - 40) + 'px'
overlay.style.position = 'absolute'
overlay.style.display = 'flex'
overlay.style.alignItems = 'center'
overlay.style.justifyContent = 'center'
overlay.style.fontSize = '45px'
if (video.muted) {
overlay.innerHTML = `🔇`
} else {
overlay.innerHTML = `🔊`
}
overlay.addEventListener('click', event=> {
video.muted = !video.muted
if (video.muted) {
overlay.innerHTML = `🔇`
} else {
overlay.innerHTML = `🔊`
}
})
overlay.addEventListener('mouseleave', event=> {
overlay.remove()
})
video.parentElement.appendChild(overlay)
console.log(overlay)
}
function loadItem(config) {
pandoraAPI('get', {id: config.item, keys: [
'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
@ -133,6 +176,8 @@ function loadItem(config) {
video.muted = true
video.src = `${baseURL}/${config.item}/480p.webm`
video.addEventListener('timeupdate', timeupdate)
video.addEventListener('touchstart', showOverlay)
video.addEventListener('mouseover', showOverlay)
ascroll.appendChild(video)
var first