njpma/app/static/js/ascroll.js

var cache = cache || {}
var layer = 'descriptions'
var baseURL = 'https://pad.ma'
var imageResolution = 480

let lastKnownScrollPosition = 0
let ticking = false;


async function pandoraAPI(action, data) {
    var url = baseURL + '/api/'
    //var url = '/pandoraAPI/'
    var key = JSON.stringify([action, data])
    if (!cache[key]) {
        var response = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                action: action,
                data: data
            })
        })
        cache[key] = await response.json()
    }
    return cache[key]
}

function updatePlayerPosition(video, lastKnownScrollPosition) {
    console.log('update', lastKnownScrollPosition)
    video.style.top = lastKnownScrollPosition + 'px'
    video.style.display = 'block';
}

function updatePlayer(video, frame, currentTime, 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
    video.currentTime = currentTime
    video.controls = true
    video.play()
    video.style.opacity = 1
}

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
        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 (typeof callback == 'function') {
                callback(visible);
            }
        }
    }
}

function loadItem(config) {
    pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
        var ascroll = document.querySelector('#ascroll')
        var loaded = false

        var video = document.createElement('video')
        video.classList.add('player')
        video.muted = true
        video.src = `${baseURL}/${config.item}/480p.webm`
        ascroll.appendChild(video)

        var h1 = document.createElement('h1')
        h1.innerHTML = response.data.title
        ascroll.appendChild(h1)

        response.data.layers[layer].forEach(annotation => {
            if (config.user && annotation.user != config.user) {
                return
            }
            var div = document.createElement('div')
            div.classList.add('annotation')
            div.innerHTML = `
                <div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
                <div class="text">${annotation.value}</div>

            `
            ascroll.appendChild(div)
            var frame = div.querySelector('.frame')
            document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
                if (loaded && visible)
                    updatePlayer(video, frame, annotation['in'])

            }))
        })
        loaded = true
        let frame = ascroll.querySelector('.annotation .frame')
        if (frame) {
            updatePlayer(video, frame, 0)
        }

        /*
        document.addEventListener('scroll', function(e) {
          lastKnownScrollPosition = window.scrollY;

          if (!ticking) {
            window.requestAnimationFrame(function() {
              updatePlayerPosition(video, lastKnownScrollPosition);
              ticking = false;
            });

            ticking = true;
          }
        })
        */
    })
}
function loadEdit(config) {
    pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
        console.log(response)
        var ascroll = document.querySelector('#ascroll')
        var loaded = false

        var video = document.createElement('video')
        video.classList.add('player')
        video.muted = true
        /*
        video.src = `${baseURL}/${config.item}/480p.webm`
        */
        ascroll.appendChild(video)

        var h1 = document.createElement('h1')
        var first
        h1.innerHTML = response.data.name
        ascroll.appendChild(h1)

        response.data.clips.forEach(clip => {
            clip.layers[layer].forEach(annotation => {
                if (config.user && annotation.user != config.user) {
                    return
                }
                if (!first) {
                    first = annotation
                }
                var div = document.createElement('div')
                div.classList.add('annotation')
                div.innerHTML = `
                    <div class="frame">
                        <figure>
                            <img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
                            <figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${clip.title}</a></figcaption>
                        </figure>

                    </div>
                    <div class="text">${annotation.value}</div>

                `
                ascroll.appendChild(div)
                var frame = div.querySelector('.frame')
                document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
                    var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
                    if (loaded && visible)
                        updatePlayer(video, frame, annotation['in'], src)

                }))
            })
        })
        loaded = true
        let frame = ascroll.querySelector('.annotation .frame')
        if (frame) {
            var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
            updatePlayer(video, frame, first['in'], src)
        }

        /*
        document.addEventListener('scroll', function(e) {
          lastKnownScrollPosition = window.scrollY;

          if (!ticking) {
            window.requestAnimationFrame(function() {
              updatePlayerPosition(video, lastKnownScrollPosition);
              ticking = false;
            });

            ticking = true;
          }
        })
        */
    })
}

if (config.item) {
    loadItem(config)
} else if (config.edit) {
    loadEdit(config)
}