group annotations by layers and add layer title
This commit is contained in:
parent
5dabdd8eec
commit
3e6e6077d2
2 changed files with 53 additions and 14 deletions
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue