move long text out of intro, fix resize, fix position

This commit is contained in:
j 2022-09-26 13:00:31 +01:00
parent eb7152bde6
commit f9b30f1fd8
4 changed files with 25 additions and 8 deletions

0
app/static/js/about.js Executable file → Normal file
View file

30
app/static/js/ascroll.js Executable file → Normal file
View file

@ -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'

View file

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

View file

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