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