toggle mute overlay

app/static/js/ascroll.js

@@ -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
+    const show = event => {
+        video.style.opacity = 1
+        video.muted = muted
+        video.removeEventListener('seeked', show)
+    }
+    video.addEventListener('seeked', show)
     video.play()
-    video.style.opacity = 1
 }
 
 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