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

group annotations by layers and add layer title

Browse source
This commit is contained in:
j 2023-05-15 15:17:07 +01:00
parent 5dabdd8eec
commit 3e6e6077d2
2 changed files with 53 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/static/css/partials/_pandora_scroll.scss
View file

@ -49,6 +49,24 @@
//transition: opacity 0.4s;
}
.text {
.layer {
.title {
display: none;
}
&.active {
.title {
display: block
}
padding-bottom: 4px;
}
.annotation {
&.active {
padding-bottom: 4px;
}
}
}
}
.annotation {
//min-height: 100vh;
.frame {

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

@ -72,11 +72,16 @@ function timeupdate(event) {
var aout = parseFloat(annot.dataset.out)
if (ain <= currentTime && aout > currentTime) {
annot.style.display = ''
annot.classList.add('active')
annot.parentElement.classList.add('active')
} else {
annot.style.display = 'none'
annot.classList.remove('active')
if (!annot.parentElement.querySelector('.active')) {
annot.parentElement.classList.remove('active')
}
}
})
}
if (event.target.currentTime >= out_) {
/*
@ -445,20 +450,36 @@ function renderSingleMode(config) {
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}/`))
config.layers.forEach(layer => {
var text_layer = document.createElement('div')
text_layer.classList.add('layer')
text_layer.classList.add(layer)
var title = document.createElement('div')
title.classList.add('title')
title.innerText = layer.charAt(0).toUpperCase() + layer.slice(1);
text_layer.appendChild(title)
config.annotations.forEach(clip => {
var values = []
clip.annotations.forEach(a => {
if (a.layer == layer) {
values.push(a.value.replace(/src="\//g, `src="${streamPrefix}/`).replace(/href="\//g, `href="${pandoraURL}/`))
}
})
if (values.length) {
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_layer.appendChild(annot)
}
})
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 (text_layer.querySelector('.annotation')) {
text.appendChild(text_layer)
}
})
if (frame) {
updatePlayer(config.video, frame, config['in'], config['out'], src, config)