group annotations by layers and add layer title

app/static/css/partials/_pandora_scroll.scss

@@ -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 {

app/static/js/ascroll.js

@@ -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 => {
+    config.layers.forEach(layer => {
-        var values = []
+        var text_layer = document.createElement('div')
-        clip.annotations.forEach(a => {
+        text_layer.classList.add('layer')
-            values.push(a.value.replace(/src="\//g, `src="${streamPrefix}/`).replace(/href="\//g, `href="${pandoraURL}/`))
+        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>')
+        if (text_layer.querySelector('.annotation')) {
-        var annot = document.createElement('div')
+            text.appendChild(text_layer)
-        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 (frame) {
         updatePlayer(config.video, frame, config['in'], config['out'], src, config)