Make timing more robust

Base progressing to next subtitle based on a timestamp instead of diffs
of previous and current timestamps. This should make "playing subtitles"
timing more robust.

diff --git a/index.html b/index.html
index 02b0dfaec4d09895aae0c852cbecebe867101d56..d5817212bfcefd892911402768e215d78ea5d5d4 100644 (file)
--- a/index.html
+++ b/index.html
@@ -89,11 +89,25 @@
       }
     }
 
+    class TimeInfo {
+      constructor(timestamp) {
+        this.timestamp = timestamp;
+      }
+
+      set_time_offset(offset_millis) {
+        this.timestamp = document.timeline.currentTime - offset_millis;
+      }
+
+      is_after_ts_end(ts_end_millis) {
+        return (document.timeline.currentTime - this.timestamp) > ts_end_millis;
+      }
+    }
+
     const subtitles_array = [];
     var current_subtitle = 0;
-    var current_time = 0.0;
+    var time_info = new TimeInfo(document.timeline.currentTime);
     var current_end = 1.0;
-    var prev_timestamp = 0.0;
+    var current_duration = 1.0;
     var is_playing = false;
 
     function display_subtitle() {
@@ -101,13 +115,15 @@
         document.getElementById("subtitle_text").textContent = subtitles_array[current_subtitle].text;
         document.getElementById("subtitle_time").textContent = subtitles_array[current_subtitle].timestamp_start + " --> " + subtitles_array[current_subtitle].timestamp_end;
         document.getElementById("s_idx").value = current_subtitle;
-        current_time = subtitles_array[current_subtitle].time_start;
+        var current_start = subtitles_array[current_subtitle].time_start;
+        current_end = current_start + 1.0;
         if (current_subtitle + 1 < subtitles_array.length
             && subtitles_array[current_subtitle + 1].time_start > subtitles_array[current_subtitle].time_end) {
           current_end = subtitles_array[current_subtitle + 1].time_start;
         } else {
           current_end = subtitles_array[current_subtitle].time_end;
         }
+        current_duration = current_end - current_start;
       } else if (current_subtitle === subtitles_array.length) {
         document.getElementById("subtitle_text").textContent = "End of subtitles.";
       } else {
@@ -218,8 +234,7 @@
           playpause_button.style["background-position"] = "left";
           requestAnimationFrame((time) => {
             let playpause_button = document.getElementById("playpause_button");
-            let duration = current_end - current_time;
-            playpause_button.style["transition"] = "all " + duration + "s linear";
+            playpause_button.style["transition"] = "all " + current_duration + "s linear";
             playpause_button.style["background-position"] = "right";
           });
         });
@@ -228,9 +243,7 @@
 
     function on_animation_frame(anim_timestamp) {
       if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
-        current_time += (anim_timestamp - prev_timestamp) / 1000.0;
-        prev_timestamp = anim_timestamp;
-        if (current_time > current_end) {
+        if (time_info.is_after_ts_end(current_end * 1000.0)) {
           ++current_subtitle;
           display_subtitle();
           set_up_play_anim();
@@ -271,6 +284,9 @@
           value = subtitles_array.length - 1;
         }
         current_subtitle = value;
+        time_info.set_time_offset(
+          subtitles_array[current_subtitle].time_start * 1000.0
+        );
         display_subtitle();
         set_up_play_anim();
       });
@@ -280,6 +296,9 @@
         () => {
           if (current_subtitle > 0) {
             current_subtitle -= 1;
+            time_info.set_time_offset(
+              subtitles_array[current_subtitle].time_start * 1000.0
+            );
             display_subtitle();
             set_up_play_anim();
           }
@@ -290,6 +309,9 @@
         () => {
           if (current_subtitle + 1 < subtitles_array.length) {
             current_subtitle += 1;
+            time_info.set_time_offset(
+              subtitles_array[current_subtitle].time_start * 1000.0
+            );
             display_subtitle();
             set_up_play_anim();
           }
@@ -300,9 +322,10 @@
         () => {
           is_playing = !is_playing;
           if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
-            current_time = subtitles_array[current_subtitle].time_start;
+            time_info.set_time_offset(
+              subtitles_array[current_subtitle].time_start * 1000.0
+            );
             requestAnimationFrame(on_animation_frame);
-            prev_timestamp = document.timeline.currentTime;
             document.getElementById("playpause_button").textContent = "⏸";
             set_up_play_anim();
           } else {