From 27562973e7e3b21222d789dfbabd3f4ad16aa2d6 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Mon, 26 Sep 2022 18:49:20 +0100
Subject: [PATCH] max height in single mode

---
 app/static/js/ascroll.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

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('<br><br>')
         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)
     }