diff --git a/app/static/js/about.js b/app/static/js/about.js old mode 100755 new mode 100644 diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js old mode 100755 new mode 100644 index d52bbdb..1f83c88 --- a/app/static/js/ascroll.js +++ b/app/static/js/ascroll.js @@ -15,21 +15,27 @@ function resize() { } } -function updatePlayer(video, frame, currentTime, out, src, config) { - //console.log('update player', currentTime, out, src) +function updatePlayerRect(video, frame, config) { var top, rect = frame.getBoundingClientRect(); - video.style.opacity = 0 if (config.root && config.mode != "single") { var root_rect = config.root.getBoundingClientRect(); //console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top) top = rect.top - root_rect.top + video.style.left = '' } else { top = rect.top + window.scrollY + video.style.left = rect.x + 'px' } video.style.top = top + 'px' video.style.display = 'block'; video.style.maxWidth = rect.width + 'px' - if (src) { +} + +function updatePlayer(video, frame, currentTime, out, src, config) { + video.style.opacity = 0 + //console.log('update player', currentTime, out, src) + updatePlayerRect(video, frame, config) + if (src && config.loaded) { setVideoSrc(video, src) } //video.poster = frame.querySelector('img').src @@ -108,13 +114,18 @@ function formatInfo(config, ascroll) { h2.innerHTML = config.byline info.appendChild(h2) } - if (config.body) { + if (config.annotations.length && config.body) { var div = document.createElement('div') div.classList.add('intro') div.innerHTML = config.body info.appendChild(div) } ascroll.appendChild(info) + if (!config.annotations.length && config.body) { + var div = document.createElement('div') + div.innerHTML = config.body + ascroll.appendChild(div) + } return info } @@ -162,6 +173,12 @@ function renderAnnotation(config, video, root, clip) { updatePlayer(video, frame, annotation['in'], annotation['out'], src, config) } })) + window.addEventListener('resize', () => { + var visible = isElementInViewport(frame); + if (config.loaded && visible) { + updatePlayerRect(video, frame, config) + } + }, false); } function renderAnnotations(config) { @@ -373,7 +390,6 @@ function renderSingleMode(config) { var frame = div.querySelector('.frame') var text = div.querySelector('.text') document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) { - console.log('scroll', config.loaded, visible) if (config.loaded && visible) { updatePlayer(config.video, frame, config['in'], config['out'], src, config) } @@ -387,7 +403,7 @@ function renderSingleMode(config) { var annot = document.createElement('div') annot.classList.add('annotation') annot.innerHTML = values - console.log(clip) + //console.log(clip) annot.dataset['in'] = clip.annotations[0]['in'] annot.dataset['out'] = clip.annotations[0]['out'] annot.style.display = 'none' diff --git a/app/static/js/pandora-scroll.js b/app/static/js/pandora-scroll.js index ad1e209..3892b98 100644 --- a/app/static/js/pandora-scroll.js +++ b/app/static/js/pandora-scroll.js @@ -89,7 +89,6 @@ class PandoraScroll extends HTMLElement { config.root = this.shadowRoot.querySelector('.pandora-scroll') config.video = document.querySelector('video') loadAnnotations(config).then(config => { - config.loaded = true if (config.mode == "single") { renderSingleMode(config) } else { @@ -98,6 +97,7 @@ class PandoraScroll extends HTMLElement { renderAnnotation(window.config, config.video, config.root, annotation) }) } + config.loaded = true }) } diff --git a/app/static/js/utils.js b/app/static/js/utils.js index 5114731..dcec429 100644 --- a/app/static/js/utils.js +++ b/app/static/js/utils.js @@ -16,6 +16,7 @@ function setVideoSrc(video, src) { } src = src.replace('.webm', videoExtension) if (src != video.src) { + //console.log(video.src, '->', src) video.src = src } }