single mode

app/static/js/ascroll.js

@@ -19,7 +19,7 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
     //console.log('update player', currentTime, out, src)
     var top, rect = frame.getBoundingClientRect();
     video.style.opacity = 0
-    if (config.root) {
+    if (config.root && config.mode != "single") {
         var root_rect = config.root.getBoundingClientRect();
         //console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top)
         top = rect.top - root_rect.top
@@ -40,6 +40,11 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
     video.dataset.out = out
     video._root = config.root
     video._frame = frame
+    if (config.mode == "single") {
+        video._text = frame.parentElement.querySelector('.text')
+    } else {
+        video._text = null
+    }
     const show = event => {
         video.style.opacity = 1
         video.muted = muted
@@ -54,6 +59,19 @@ function timeupdate(event) {
     if (event.target.dataset.out && event.target.dataset.in) {
         var in_= parseFloat(event.target.dataset.in)
         var out_= parseFloat(event.target.dataset.out)
+        var currentTime = event.target.currentTime
+        if (event.target._text) {
+            event.target._text.querySelectorAll('.annotation').forEach(annot => {
+                var ain = parseFloat(annot.dataset.in)
+                var aout = parseFloat(annot.dataset.out)
+                if (ain <= currentTime && aout > currentTime) {
+                    annot.style.display = ''
+                } else {
+                    annot.style.display = 'none'
+                }
+            })
+
+        }
         if (event.target.currentTime >= out_) {
             /*
             var next
@@ -330,6 +348,56 @@ async function loadAnnotations(config) {
     }
 }
 
+
+function renderSingleMode(config) {
+    var src
+    config.annotations.forEach(annotation => {
+        src = annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
+    })
+    var div = document.createElement('div')
+    var annotation = config.annotations[0].annotations[0]
+    var figcaption = ''
+    div.classList.add('single-node')
+    div.classList.add('annotation')
+    div.innerHTML = `
+        <div class="frame">
+            <figure>
+                <img src="${streamPrefix}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
+                ${figcaption}
+            </figure>
+        </div>
+        <div class="text"></div>
+    `
+    config.root.appendChild(div)
+    var frame = div.querySelector('.frame')
+    var text = div.querySelector('.text')
+    document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
+        console.log('scroll', config.loaded, visible)
+        if (config.loaded && visible) {
+            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}/`))
+        })
+        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 (frame) {
+        updatePlayer(config.video, frame, config['in'], config['out'], src, config)
+    }
+}
+
+
 config.layer = config.layer || layer
 
 if (false && config.annotations) {

app/static/js/pandora-scroll.js

@@ -84,10 +84,15 @@ class PandoraScroll extends HTMLElement {
           config.root = this.shadowRoot.querySelector('.pandora-scroll')
           config.video = document.querySelector('video')
           loadAnnotations(config).then(config => {
+            config.loaded = true
+            if (config.mode == "single") {
+                renderSingleMode(config)
+            } else {
                 config.annotations.forEach(annotation => {
                     annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
                     renderAnnotation(window.config, config.video, config.root, annotation)
                 })
+            }
           })
     }