0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

single mode

Browse source
This commit is contained in:
j 2022-09-07 12:12:31 +02:00
parent 081bdfb690
commit a27e1d4686
2 changed files with 78 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
app/static/js/ascroll.js
View file

@ -19,7 +19,7 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
//console.log('update player', currentTime, out, src)
var top, rect = frame.getBoundingClientRect();
video.style.opacity = 0
if (config.root) {
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
@ -40,6 +40,11 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
video.dataset.out = out
video._root = config.root
video._frame = frame
if (config.mode == "single") {
video._text = frame.parentElement.querySelector('.text')
} else {
video._text = null
}
const show = event => {
video.style.opacity = 1
video.muted = muted
@ -54,6 +59,19 @@ function timeupdate(event) {
if (event.target.dataset.out && event.target.dataset.in) {
var in_= parseFloat(event.target.dataset.in)
var out_= parseFloat(event.target.dataset.out)
var currentTime = event.target.currentTime
if (event.target._text) {
event.target._text.querySelectorAll('.annotation').forEach(annot => {
var ain = parseFloat(annot.dataset.in)
var aout = parseFloat(annot.dataset.out)
if (ain <= currentTime && aout > currentTime) {
annot.style.display = ''
} else {
annot.style.display = 'none'
}
})
}
if (event.target.currentTime >= out_) {
/*
var next
@ -330,6 +348,56 @@ async function loadAnnotations(config) {
}
}
function renderSingleMode(config) {
var src
config.annotations.forEach(annotation => {
src = annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
})
var div = document.createElement('div')
var annotation = config.annotations[0].annotations[0]
var figcaption = ''
div.classList.add('single-node')
div.classList.add('annotation')
div.innerHTML = `
<div class="frame">
<figure>
<img src="${streamPrefix}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
${figcaption}
</figure>
</div>
<div class="text"></div>
`
config.root.appendChild(div)
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)
}
}))
config.annotations.forEach(clip => {
var values = []
clip.annotations.forEach(a => {
values.push(a.value.replace(/src="\//g, `src="${streamPrefix}/`).replace(/href="\//g, `href="${pandoraURL}/`))
})
values = values.join('<br><br>')
var annot = document.createElement('div')
annot.classList.add('annotation')
annot.innerHTML = values
console.log(clip)
annot.dataset['in'] = clip.annotations[0]['in']
annot.dataset['out'] = clip.annotations[0]['out']
annot.style.display = 'none'
text.appendChild(annot)
})
if (frame) {
updatePlayer(config.video, frame, config['in'], config['out'], src, config)
}
}
config.layer = config.layer || layer
if (false && config.annotations) {

13
app/static/js/pandora-scroll.js
View file

@ -84,10 +84,15 @@ class PandoraScroll extends HTMLElement {
config.root = this.shadowRoot.querySelector('.pandora-scroll')
config.video = document.querySelector('video')
loadAnnotations(config).then(config => {
config.annotations.forEach(annotation => {
annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
renderAnnotation(window.config, config.video, config.root, annotation)
})
config.loaded = true
if (config.mode == "single") {
renderSingleMode(config)
} else {
config.annotations.forEach(annotation => {
annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
renderAnnotation(window.config, config.video, config.root, annotation)
})
}
})
}