From 3e6e6077d2604caab08093ab3c9df8de6b666ae3 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Mon, 15 May 2023 15:17:07 +0100
Subject: [PATCH] group annotations by layers and add layer title

---
 app/static/css/partials/_pandora_scroll.scss | 18 +++++++
 app/static/js/ascroll.js                     | 49 ++++++++++++++------
 2 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/app/static/css/partials/_pandora_scroll.scss b/app/static/css/partials/_pandora_scroll.scss
index 84023bc..89a513a 100644
--- a/app/static/css/partials/_pandora_scroll.scss
+++ b/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 {
diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index 5366d13..790d78c 100644
--- a/app/static/js/ascroll.js
+++ b/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 => {
-        var values = []
-        clip.annotations.forEach(a => {
-            values.push(a.value.replace(/src="\//g, `src="${streamPrefix}/`).replace(/href="\//g, `href="${pandoraURL}/`))
+    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')
+                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>')
-        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.appendChild(annot)
+        if (text_layer.querySelector('.annotation')) {
+            text.appendChild(text_layer)
+        }
     })
     if (frame) {
         updatePlayer(config.video, frame, config['in'], config['out'], src, config)