WIP

assets/replay.js

@@ -80,20 +80,21 @@ function base64ToUint8array(base64) {
   return array;
 }
 
-async function play_ctrl(term, session, start, total_dur, paused, shifted, prog) {
+// replay session
+// term: xterm, path: session file to replay,
+// start: start position to replay in percentile, range 0-100
+// paused: callback whether to stop play
+// prog: callback to update the progress bar
+// shift: callback whether we should change position
+// end: callback when playback is finished
+
+async function replay_session(term, records, total_dur, start, paused, prog, end) {
   var cur = 0
-  var new_pos = -1
 
   start = parseInt(total_dur * start / 100)
   term.reset()
 
-  for (const item of session) {
-    new_pos = shifted()
-
-    if (new_pos != -1) {
-      return new_pos
-    }
-
+  for (const item of records) {
     // we will blast through the beginning of the session
     if (cur >= start) {
       // we are cheating a little bit here, we do not want to wait for too long
@@ -112,50 +113,50 @@ async function play_ctrl(term, session, start, total_dur, paused, shifted, prog)
     }
   }
 
-  return -1
+  end()
 }
-// replay session
-// term: xterm, path: session file to replay,
-// start: start position to replay in percentile, range 0-100
-// paused: callback whether to stop play
-// prog: callback to update the progress bar
-// shift: callback whether we should change position
-// end: callback when playback is finished
-async function replay_session(term, path, start, paused, shifted, prog, end) {
-  var session
-  var total_dur = 0
-  var cur = 0
-  var new_pos = 0
-  var ret = 0
 
-  // read file from server
-  await fetch(path)
-    .then(res => res.json())
-    .then(out => {
-      session = out
-    })
+function forwardScreen(term, records, end) {
+  var cur = 0
+  end = parseInt(total_dur * end / 100)
+  term.reset()
+
+  for (const item of records) {
+    // we will blast through the beginning of the session
+    if (cur >= end) {
+      return
+    }
+
+    term.write(base64ToUint8array(item.Data))
+    cur += item.Duration
+  }
+}
+
+
+async function fetchAndParse(path, update) {
+  var records
+  var total_dur = 0
+
+  // read file from server, we need to await twice.
+  var res = await fetch(path)
+
+  if (!res.ok) {
+    return
+  }
+
+  records = await res.json()
 
   //calculate the total duration
-  for (const item of session) {
+  for (const item of records) {
     item.Duration = parseInt(item.Duration / 1000000)
     total_dur += item.Duration
   }
 
-  console.log("Total duration:", total_dur, "start replay on position", start)
-
-  while (true) {
-    ret = await play_ctrl(term, session, start, total_dur, paused, shifted, prog)
-    if (ret == -1) {
-      break
-    }
-
-    start = ret
-  }
-
-  term.reset()
-  end()
+  console.log("total_dur", total_dur)
+  update(records, total_dur)
 }
 
+
 function Init() {
   let term = createReplayTerminal();
   var str = [

assets/template/replay.html

@@ -40,8 +40,7 @@
             <button type="button" class="btn btn-primary btn-sm" style="margin-right: 3px;" onclick="playbtn()">
                 <img src="/assets/img/play.svg" id="play-btn" height="18px">
             </button>
-            <input type="range" class="form-range" min="0" max="100" id="replay-control"
-                onchange="clicked = this.value">
+            <input type="range" class="form-range" min="0" max="100" id="replay-control" onchange="seek(this.value)">
         </div>
     </div>
 
@@ -52,23 +51,26 @@
         rc.value = 0
 
         var icon = document.getElementById("play-btn")
-        var path = "/records/{{.fname}}"
         var pause = false
-        var clicked = -1
+
+        var records
+        var total_dur
+
+        // return values are not reliable with async functions
+        fetchAndParse("/records/{{.fname}}",
+            function (v1, v2) {
+                records = v1
+                total_dur = v2
+            })
 
         function playbtn() {
             if (icon.src.includes("play")) {
                 icon.src = "/assets/img/pause.svg"
                 pause = false
-                replay_session(term, path, rc.value,
+                replay_session(term, records, total_dur, rc.value,
                     function () {
                         return pause
                     },
-                    function(){
-                        var tmp = clicked
-                        clicked = -1
-                        return tmp
-                    },
                     function (percent) {
                         rc.value = percent
                     },
@@ -81,6 +83,15 @@
                 pause = true
             }
         }
+
+        function seek(end) {
+            // pause the play if it is currently playing
+            if (!icon.src.includes("play")) {
+                playbtn()
+            }
+
+            forwardScreen(term, records, end)
+        }
     </script>
 
 </body>