njpma/app/static/js/utils.js

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)
}