From a82e90499b84a7481240fe5d78217e1af74826d9 Mon Sep 17 00:00:00 2001
From: Zhi Wang <zwang@cs.fsu.edu>
Date: Wed, 19 Jan 2022 18:31:44 -0500
Subject: [PATCH] update slider to use oninput, instead of onchange, but
 rate-limit it to twice per second

---
 assets/template/replay.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/assets/template/replay.html b/assets/template/replay.html
index c36e5dc..ca8768f 100644
--- a/assets/template/replay.html
+++ b/assets/template/replay.html
@@ -40,7 +40,8 @@
             <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="seek(this.value)">
+            <input type="range" class="form-range" min="0" max="100" id="replay-control" step="1"
+                oninput="seek(this.value)">
         </div>
     </div>
 
@@ -84,7 +85,20 @@
             }
         }
 
+        // limit the rate of refresh to twice per second. Otherwise
+        // the screen flicks like crazy
+        var lastFired = new Date().getTime()
+
         function seek(end) {
+            var now = new Date().getTime()
+            var elapsed = now - lastFired
+
+            if (elapsed <= 500) {
+                return
+            }
+
+            lastFired = now
+
             // pause the play if it is currently playing
             if (!icon.src.includes("play")) {
                 playbtn()