move long text out of intro, fix resize, fix position

app/static/js/ascroll.js

@@ -15,21 +15,27 @@ function resize() {
     }
 }
 
-function updatePlayer(video, frame, currentTime, out, src, config) {
+function updatePlayerRect(video, frame, config) {
-    //console.log('update player', currentTime, out, src)
     var top, rect = frame.getBoundingClientRect();
-    video.style.opacity = 0
     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
+        video.style.left = ''
     } else {
         top = rect.top + window.scrollY
+        video.style.left = rect.x + 'px'
     }
     video.style.top = top + 'px'
     video.style.display = 'block';
     video.style.maxWidth = rect.width + 'px'
-    if (src) {
+}
+
+function updatePlayer(video, frame, currentTime, out, src, config) {
+    video.style.opacity = 0
+    //console.log('update player', currentTime, out, src)
+    updatePlayerRect(video, frame, config)
+    if (src && config.loaded) {
         setVideoSrc(video, src)
     }
     //video.poster = frame.querySelector('img').src
@@ -108,13 +114,18 @@ function formatInfo(config, ascroll) {
         h2.innerHTML = config.byline
         info.appendChild(h2)
     }
-    if (config.body) {
+    if (config.annotations.length && config.body) {
         var div = document.createElement('div')
         div.classList.add('intro')
         div.innerHTML = config.body
         info.appendChild(div)
     }
     ascroll.appendChild(info)
+    if (!config.annotations.length && config.body) {
+        var div = document.createElement('div')
+        div.innerHTML = config.body
+        ascroll.appendChild(div)
+    }
     return info
 }
 
@@ -162,6 +173,12 @@ function renderAnnotation(config, video, root, clip) {
             updatePlayer(video, frame, annotation['in'], annotation['out'], src, config)
         }
     }))
+    window.addEventListener('resize', () => {
+        var visible = isElementInViewport(frame);
+        if (config.loaded && visible) {
+            updatePlayerRect(video, frame, config)
+        }
+    }, false);
 }
 
 function renderAnnotations(config) {
@@ -373,7 +390,6 @@ function renderSingleMode(config) {
     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)
         }
@@ -387,7 +403,7 @@ function renderSingleMode(config) {
         var annot = document.createElement('div')
         annot.classList.add('annotation')
         annot.innerHTML = values
-        console.log(clip)
+        //console.log(clip)
         annot.dataset['in'] = clip.annotations[0]['in']
         annot.dataset['out'] = clip.annotations[0]['out']
         annot.style.display = 'none'

app/static/js/pandora-scroll.js

@@ -89,7 +89,6 @@ 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 {
@@ -98,6 +97,7 @@ class PandoraScroll extends HTMLElement {
                     renderAnnotation(window.config, config.video, config.root, annotation)
                 })
             }
+            config.loaded = true
           })
     }
 

app/static/js/utils.js

@@ -16,6 +16,7 @@ function setVideoSrc(video, src) {
     }
     src = src.replace('.webm', videoExtension)
     if (src != video.src) {
+        //console.log(video.src, '->', src)
         video.src = src
     }
 }