diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index 0e30230..203e420 100644
--- a/app/static/js/ascroll.js
+++ b/app/static/js/ascroll.js
@@ -71,9 +71,17 @@ function timeupdate(event) {
var ain = parseFloat(annot.dataset.in)
var aout = parseFloat(annot.dataset.out)
if (ain <= currentTime && aout > currentTime) {
- annot.style.display = ''
+ if (annot.classList.contains('single')) {
+ annot.style.opacity = '1'
+ } else {
+ annot.style.display = ''
+ }
} else {
- annot.style.display = 'none'
+ if (annot.classList.contains('single')) {
+ annot.style.opacity = '0'
+ } else {
+ annot.style.display = 'none'
+ }
}
})
@@ -409,6 +417,7 @@ function renderSingleMode(config) {
config.root.appendChild(div)
var frame = div.querySelector('.frame')
var text = div.querySelector('.text')
+ text.style.position = 'relative'
var first = config.annotations[0]
if (text && first) {
var color1 = `hsl(${first.color1.hue}, 60%, 15%)`
@@ -427,13 +436,23 @@ function renderSingleMode(config) {
values = values.join('
')
var annot = document.createElement('div')
annot.classList.add('annotation')
+ annot.classList.add('single')
annot.innerHTML = values
//console.log(clip)
annot.dataset['in'] = clip.annotations[0]['in']
annot.dataset['out'] = clip.annotations[0]['out']
- annot.style.display = 'none'
+ annot.style.opacity = '0'
+ annot.style.position = 'absolute'
text.appendChild(annot)
})
+ var height = 0
+ text.querySelectorAll('.annotation.single').forEach(annotation => {
+ var rect = annotation.getBoundingClientRect()
+ if (rect.height > height) {
+ height = rect.height
+ }
+ })
+ text.style.height = height + 'px';
if (frame) {
updatePlayer(config.video, frame, config['in'], config['out'], src, config)
}