split utils, fix pandora-scroll element

app/static/js/pandora-scroll.js

@@ -20,6 +20,10 @@ class PandoraScroll extends HTMLElement {
     shadow.appendChild(link)
     shadow.appendChild(style)
     shadow.appendChild(body)
+    window.addEventListener('resize', () => {
+        this._resize()
+    }, false)
+
     this.mute = function() {
         shadow.querySelectorAll('video').forEach(video => {
             video.muted = true
@@ -28,80 +32,92 @@ class PandoraScroll extends HTMLElement {
   }
 
 
-  static get observedAttributes() { return ['muted']; }
+    static get observedAttributes() { return ['muted']; }
 
-  connectedCallback() {
-    console.log('scroll connected')
-    this._loadAnnotations()
-    this._updateStyle()
-  }
-  disconnectedCallback() {
-    console.log('scroll disconnected')
-  }
-  adoptedCallback() {
-    console.log('Custom square element moved to new page.');
-  }
+    connectedCallback() {
+      this._loadAnnotations()
+      this._updateStyle()
+    }
+    disconnectedCallback() {
+      //console.log('scroll disconnected')
+    }
+    adoptedCallback() {
+      //console.log('element moved to new page.');
+    }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    console.log('value changed', name, oldValue, newValue);
-    this._updateStyle()
-  }
-  _updateStyle() {
-      const shadow = this.shadowRoot;
-      const childNodes = shadow.childNodes;
-      for (const node of childNodes) {
-        if (node.nodeName === 'STYLE') {
-          node.textContent = `
-            .pandora-scroll {
-                position: relative;
-                display: block;
-            }
-          `
-        }
-      }
-  }
-
-  _config() {
-    var config = {}
-    for (var i=0; i<this.attributes.length; i++) {
-        var a = this.attributes[i]
-        config[a.name] = a.value
-        if (a.name == 'layers') {
-            config[a.name] = a.value.split(' ')
-        } else if (['in', 'out'].indexOf(a.name) > -1) {
-            config[a.name] = parseTime(a.value)
-        } else {
-            config[a.name] = a.value
+    attributeChangedCallback(name, oldValue, newValue) {
+      //console.log('value changed', name, oldValue, newValue);
+      this._updateStyle()
+    }
+    _updateStyle() {
+        const shadow = this.shadowRoot;
+        const childNodes = shadow.childNodes;
+        for (const node of childNodes) {
+          if (node.nodeName === 'STYLE') {
+            node.textContent = `
+              .pandora-scroll {
+                  position: relative;
+                  display: block;
+              }
+            `
+          }
         }
     }
-    return config
-  }
-  _loadAnnotations() {
-        var config = this._config()
-        config.root = this.shadowRoot.querySelector('.pandora-scroll')
-        console.log(config)
-        loadAnnotations(config)
+
+    _config() {
+      var config = {}
+      for (var i=0; i<this.attributes.length; i++) {
+          var a = this.attributes[i]
+          config[a.name] = a.value
+          if (a.name == 'layers') {
+              config[a.name] = a.value.split(' ')
+          } else if (['in', 'out'].indexOf(a.name) > -1) {
+              config[a.name] = parseTime(a.value)
+          } else {
+              config[a.name] = a.value
+          }
+      }
+      return config
+    }
+    _loadAnnotations() {
+          var config = this._config()
+          config.root = this.shadowRoot.querySelector('.pandora-scroll')
+          config.video = document.querySelector('video')
+          loadAnnotations(config).then(config => {
+            config.annotations.forEach(annotation => {
+                annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
+                renderAnnotation(window.config, config.video, config.root, annotation)
+            })
+          })
+    }
+
+    _resize() {
+        var video = this.shadowRoot.querySelector('video')
+        if (video && video._frame) {
+            var rect = video._frame.getBoundingClientRect(),
+                root_rect = video._root.getBoundingClientRect(),
+                top = rect.top - root_rect.top;
+            video.style.top = top + 'px'
+        }
+    }
+}
+
+class PandoraItem extends HTMLElement {
+  constructor() {
+    super()
+    }
+}
+class PandoraEdit extends HTMLElement {
+  constructor() {
+    super()
     }
 }
 
 customElements.define("pandora-scroll", PandoraScroll);
+customElements.define("pandora-item", PandoraItem);
+customElements.define("pandora-edit", PandoraEdit);
 
 
-
-function parseTime(value) {
-    return value.split(":").map(p => parseFloat(p)).reduce((c, p) => { return c*60 + p}, 0)
-}
-
-function isInside(config, annotation) {
-    if (!config['in'] && !config['out']) {
-        return true
-    }
-    if (annotation['in'] < config['out'] && annotation['out'] > config['in']) {
-        return true
-    }
-    return false
-}
-
 function parseIframeURL(value) {
     var config = {}
     value = value.replace('/player/', '/')
@@ -114,7 +130,7 @@ function parseIframeURL(value) {
     }
     var args = data[1].replace('&amp;', '&').split('&').map(kv => {
         kv = kv.split('=')
-        console.log(kv, decodeValue(kv[1]))
+        //console.log(kv, decodeValue(kv[1]))
         return [kv[0], JSON.parse(decodeValue(kv[1]))]
     }).reduce((k, v) =>  {
         k[v[0]]  = v[1]