self-adjusting timer attempt

js/main.js

@@ -25,12 +25,35 @@ var searchStr; //url parameters
 var timeA, timeB, dtAB; // s
 var isTimeASet=false;
 var isTimeBSet=false;
-var scrubTimer=[];
+//var scrubTimer=[];
+var scrubTimer;
 var knownIDs=[];
 var knownMedia=[];
 const timePattern='(?:\\d+:[0-5]\\d|[0-5]?\\d):[0-5]\\d(?:\\.\\d{1,3})?';
 var URL=window.URL;
 
+//self-adjusting timer
+function Timer(callback, dt){
+  this.timeInterval=dt;
+  this.started=false;
+  this.start= () => {
+    this.expected=performance.now()+this.timeInterval;
+    this.timeout=setTimeout(round, this.timeInterval, this);
+    this.started=true;
+  }
+  this.stop= () => {
+    clearTimeout(this.timeout);
+    this.started=false;
+  }
+  let round= (ths) => {
+    //let drift=Math.max(0,performance.now()-ths.expected);
+    ths.drift=Math.max(0,performance.now()-ths.expected);
+    callback();
+    ths.expected+=ths.timeInterval;
+    ths.timeout=setTimeout(round, ths.timeInterval-ths.drift, ths);
+  }
+}
+
 var crossmark='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" version="1.1">'
   +'<path stroke="red" stroke-width="2" stroke-linecap="butt" d="M1 1L9 9M1 9L9 1"/></svg>';
 var crossMarkUrl="url('data:image/svg+xml;base64,"+window.btoa(crossmark)+"')";
@@ -78,10 +101,10 @@ var storageWriteKeyVal=function(k,v){
 }
 
 //HTML elements
-var YTids, inputYT, inputVT, ytPlayer, help, aonly, intro, myTimeA,
+var YTids, introTextBr, inputYT, inputVT, ytPlayer, help, searchButtonYT, aonly, intro, myTimeA,
   myTimeB, myBookmarks, loopButton, bmkAddButton, loopBackwardsButton,
   loopHalveButton, loopDoubleButton, loopForwardsButton, annotButton,
-  trashButton, tapButton;
+  trashButton, tapButton, importButton, exportButton, shareButton, quant;
 
 $(document).ready(function(){
   $("#introText").width($("#widthA").width()+1);
@@ -184,6 +207,7 @@ $(document).ready(function(){
   });
   bmkAddButton.addEventListener("mouseup", function(e){bmkAdd();});
   $("#mainDiv").show();
+  scrubTimer=new Timer(onScrubTimerUpdate, 5);  
   playSelectedFile("");
 });
 
@@ -845,7 +869,8 @@ var resetUI=function(){
   lstId=undefined;
   $("#timeInputs").hide();
   cancelABLoop();
-  while(scrubTimer.length) clearInterval(scrubTimer.pop());
+  //while(scrubTimer.length) clearInterval(scrubTimer.pop());
+  scrubTimer.stop();
   $("#scrub").slider("option", "value", 0).hide();
   loopButton.disabled=true;
   $("#speed").slider("option", "disabled", true);
@@ -1015,9 +1040,9 @@ var mergeData=function(data){
   if(data["ab.version"]) storageWriteKeyVal("ab.version", data["ab.version"]);
 }
 
-var restartLoopControl=function(t){
+var resumeLoopControl=function(t){
   if(t==toNearest5ms(getCurrentTime())) isTimeASet=isTimeBSet=true;
-  else setTimeout(restartLoopControl,0,t);
+  else setTimeout(resumeLoopControl,0,t);
 }
 
 var onBmkSelect=function(i){
@@ -1032,12 +1057,12 @@ var onBmkSelect=function(i){
   loopButton.innerHTML="&emsp;";
   loopButton.style.backgroundImage=crossMarkUrl;
   annotButton.disabled=false;
-  //for correct measurement of rewind latency, briefly suspend loop control and restart it
+  //for correct measurement of rewind latency, briefly suspend loop control and resume it
   //only after seek operation has reached starting time `a' of the selected bookmark
   isTimeASet=isTimeBSet=!isPlaying();
   loopMeas.splice(0);
   setCurrentTime(a);
-  if(isPlaying()) restartLoopControl(a);
+  if(isPlaying()) resumeLoopControl(a);
 }
 
 var toggleIntro=function(t,h){
@@ -1194,10 +1219,12 @@ var onPlayerStateChange=function(e, id, ta, tb, s){ //event object, video id loo
       }
       vidId=id;
     }
-    if (!scrubTimer.length) scrubTimer.push(setInterval(onScrubTimerUpdate, 5));
+    //if (!scrubTimer.length) scrubTimer.push(setInterval(onScrubTimerUpdate, 5));
+    if (!scrubTimer.started) scrubTimer.start();
   }
   else if(e.data==YT.PlayerState.PAUSED||e.data==YT.PlayerState.ENDED){
-    while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    //while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    scrubTimer.stop();
     loopMeas.splice(0);
   }
   else if (e.data==YT.PlayerState.UNSTARTED) {
@@ -1355,7 +1382,8 @@ var playSelectedFile=function(f){
   myVideo.controls=true;
   myVideo.width=$("#myResizable").width();
   myVideo.addEventListener("durationchange", function(e){
-    while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    //while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    scrubTimer.stop();
     loopMeas.splice(0);
     if (isFinite(e.target.duration)){
       $("#slider").slider("option", "max", getDuration());
@@ -1377,11 +1405,13 @@ var playSelectedFile=function(f){
     loopMeas.splice(0);
     setPlaybackRate(Number($("#speed").slider("value")));
     this.removeEventListener("timeupdate", onTimeUpdateVT);
-    if (!scrubTimer.length) scrubTimer.push(setInterval(onScrubTimerUpdate, 5));
+    //if (!scrubTimer.length) scrubTimer.push(setInterval(onScrubTimerUpdate, 5));
+    if (!scrubTimer.started) scrubTimer.start();
   });
   myVideo.addEventListener("pause", function(e){
     this.addEventListener("timeupdate", onTimeUpdateVT);
-    while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    //while(scrubTimer.length) clearInterval(scrubTimer.pop());
+    scrubTimer.stop();
     loopMeas.splice(0);
   });
   myVideo.addEventListener("error", function(e){