split utils, fix pandora-scroll element

app/static/js/utils.js

@@ -0,0 +1,138 @@
+
+var videoExtension
+
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    src = src.replace('.webm', videoExtension)
+    if (src != video.src) {
+        video.src = src
+    }
+}
+
+function scrollTo(element) {
+    var delta = element.offsetTop - document.scrollingElement.scrollTop,
+        duration = 1000, t = 40, n = duration / t,
+        step = delta / n;
+
+    function scroll() {
+        if (document.scrollingElement.scrollTop + step > element.offsetTop) {
+            document.scrollingElement.scrollTop = element.offsetTop
+            n = 0
+        } else {
+            document.scrollingElement.scrollTop += step
+        }
+        n--
+        if (n) setTimeout(scroll, t)
+    }
+    scroll()
+}
+
+function showOverlay(event) {
+    console.log('show overlay', event.target, event)
+    event.stopPropagation()
+    event.preventDefault()
+    document.querySelectorAll('#video-overlay').forEach(element => element.remove())
+    var video = event.target
+    var rect = video.getBoundingClientRect();
+    if (video._frame) {
+        rect = video._frame.getBoundingClientRect();
+    }
+    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 + 'px'
+    overlay.style.position = 'absolute'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    //overlay.style.fontSize = '45px'
+    video.controls = false
+
+    var off = `<span class="annotation-icon-wrapper animated"><span class="text f-icon-volume_off annotation-icon"></span>`
+    var on = `<span class="annotation-icon-wrapper"><span class="f-icon-volume_down annotation-icon"></span></span>`
+
+    if (video.muted) {
+            overlay.innerHTML = off
+    } else {
+            overlay.innerHTML = on
+    }
+    overlay.addEventListener('click', event=> {
+        const muted = video.muted
+        document.querySelectorAll('pandora-scroll').forEach(el => el.mute() )
+        video.muted = !muted
+        if (video.muted) {
+            overlay.innerHTML = off
+        } else {
+            overlay.innerHTML = on
+        }
+    })
+    var timeout = setTimeout(() => {
+        video.controls = false
+        overlay.remove()
+    }, 3000)
+    overlay.addEventListener('mousemove', event=> {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => {
+            video.controls = false
+            overlay.remove()
+        }, 500)
+    })
+    video.parentElement.appendChild(overlay)
+
+}
+
+function isInside(config, annotation) {
+    if (!config['in'] && !config['out']) {
+        return true
+    }
+    if (annotation['in'] < config['out'] && annotation['out'] > config['in']) {
+        annotation['in'] = Math.min(annotation['in'], config['in'])
+        annotation['out'] = Math.min(annotation['out'], config['out'])
+        return true
+    }
+    return false
+}
+
+function isElementInViewport (el) {
+    var rect = el.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
+        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
+    );
+}
+
+function onVisibilityChange(el, callback) {
+    var old_visible;
+    return function () {
+        var visible = isElementInViewport(el);
+        if (visible != old_visible) {
+            old_visible = visible;
+            if (visible) {
+                el.classList.add('visible')
+            } else {
+                el.classList.remove('visible')
+            }
+            if (typeof callback == 'function') {
+                callback(visible);
+            }
+        }
+    }
+}
+
+function parseTime(value) {
+    return value.split(":").map(p => parseFloat(p)).reduce((c, p) => { return c*60 + p}, 0)
+}