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,11 +450,22 @@ function renderSingleMode(config) {
             updatePlayer(config.video, frame, config['in'], config['out'], src, config)
         }
     }))
+    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')
@@ -458,7 +474,12 @@ function renderSingleMode(config) {
                 annot.dataset['in'] = clip.annotations[0]['in']
                 annot.dataset['out'] = clip.annotations[0]['out']
                 annot.style.display = 'none'
-        text.appendChild(annot)
+                text_layer.appendChild(annot)
+            }
+        })
+        if (text_layer.querySelector('.annotation')) {
+            text.appendChild(text_layer)
+        }
     })
     if (frame) {
         updatePlayer(config.video, frame, config['in'], config['out'], src, config)