From ffb7948fff33afd01a85bf82c05ca53517aacc35 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Sun, 10 Oct 2021 16:46:19 +0100
Subject: [PATCH] loop clips

---
 app/static/js/ascroll.js | 52 ++++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index 3ee9bd4..aa15574 100644
--- a/app/static/js/ascroll.js
+++ b/app/static/js/ascroll.js
@@ -25,13 +25,7 @@ async function pandoraAPI(action, data) {
     return cache[key]
 }
 
-function updatePlayerPosition(video, lastKnownScrollPosition) {
-    console.log('update', lastKnownScrollPosition)
-    video.style.top = lastKnownScrollPosition + 'px'
-    video.style.display = 'block';
-}
-
-function updatePlayer(video, frame, currentTime, src) {
+function updatePlayer(video, frame, currentTime, out, src) {
     var rect = frame.getBoundingClientRect();
     video.style.opacity = 0
     console.log('update player', rect)
@@ -42,6 +36,8 @@ function updatePlayer(video, frame, currentTime, src) {
     }
     //video.poster = frame.querySelector('img').src
     video.currentTime = currentTime
+    video.dataset.in = currentTime
+    video.dataset.out = out
     video.controls = true
     video.play()
     video.style.opacity = 1
@@ -70,6 +66,16 @@ function onVisibilityChange(el, callback) {
     }
 }
 
+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)
+        if (event.target.currentTime >= out_) {
+            event.target.currentTime = in_
+        }
+    }
+}
+
 function loadItem(config) {
     pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
         var ascroll = document.querySelector('#ascroll')
@@ -79,9 +85,11 @@ function loadItem(config) {
         video.classList.add('player')
         video.muted = true
         video.src = `${baseURL}/${config.item}/480p.webm`
+        video.addEventListener('timeupdate', timeupdate)
         ascroll.appendChild(video)
 
         var h1 = document.createElement('h1')
+        var first
         h1.innerHTML = response.data.title
         ascroll.appendChild(h1)
 
@@ -89,6 +97,9 @@ function loadItem(config) {
             if (config.user && annotation.user != config.user) {
                 return
             }
+            if (!first) {
+                first = annotation
+            }
             var div = document.createElement('div')
             div.classList.add('annotation')
             div.innerHTML = `
@@ -100,14 +111,14 @@ function loadItem(config) {
             var frame = div.querySelector('.frame')
             document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
                 if (loaded && visible)
-                    updatePlayer(video, frame, annotation['in'])
+                    updatePlayer(video, frame, annotation['in'], annotation['out'])
 
             }))
         })
         loaded = true
         let frame = ascroll.querySelector('.annotation .frame')
         if (frame) {
-            updatePlayer(video, frame, 0)
+            updatePlayer(video, frame, first['in'], first['out'])
         }
 
         /*
@@ -135,9 +146,7 @@ function loadEdit(config) {
         var video = document.createElement('video')
         video.classList.add('player')
         video.muted = true
-        /*
-        video.src = `${baseURL}/${config.item}/480p.webm`
-        */
+        video.addEventListener('timeupdate', timeupdate)
         ascroll.appendChild(video)
 
         var h1 = document.createElement('h1')
@@ -171,7 +180,7 @@ function loadEdit(config) {
                 document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
                     var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
                     if (loaded && visible)
-                        updatePlayer(video, frame, annotation['in'], src)
+                        updatePlayer(video, frame, annotation['in'], annotation['out'], src)
 
                 }))
             })
@@ -180,23 +189,8 @@ function loadEdit(config) {
         let frame = ascroll.querySelector('.annotation .frame')
         if (frame) {
             var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
-            updatePlayer(video, frame, first['in'], src)
+            updatePlayer(video, frame, first['in'], first['out'], src)
         }
-
-        /*
-        document.addEventListener('scroll', function(e) {
-          lastKnownScrollPosition = window.scrollY;
-
-          if (!ticking) {
-            window.requestAnimationFrame(function() {
-              updatePlayerPosition(video, lastKnownScrollPosition);
-              ticking = false;
-            });
-
-            ticking = true;
-          }
-        })
-        */
     })
 }