From 846416b9f7eb4994e276bdd7c9c7b04a7612fb5a Mon Sep 17 00:00:00 2001
From: Stephen Seo <seo.disparate@gmail.com>
Date: Tue, 9 Jul 2024 19:07:54 +0900
Subject: [PATCH] Fix time duration when "playing"

Previous implementation changed to next subtitle when current subtitle
ended. This means that times between subtitles were ignored.

This implementation now checks if the next subtitle's start is later
than the current subtitle's end, and will wait for the duration that is
longer.
---
 index.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index e410568..02b0dfa 100644
--- a/index.html
+++ b/index.html
@@ -92,6 +92,7 @@
     const subtitles_array = [];
     var current_subtitle = 0;
     var current_time = 0.0;
+    var current_end = 1.0;
     var prev_timestamp = 0.0;
     var is_playing = false;
 
@@ -101,6 +102,12 @@
         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;
+        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;
+        }
       } else if (current_subtitle === subtitles_array.length) {
         document.getElementById("subtitle_text").textContent = "End of subtitles.";
       } else {
@@ -211,8 +218,7 @@
           playpause_button.style["background-position"] = "left";
           requestAnimationFrame((time) => {
             let playpause_button = document.getElementById("playpause_button");
-            let duration = subtitles_array[current_subtitle].time_end
-                         - current_time;
+            let duration = current_end - current_time;
             playpause_button.style["transition"] = "all " + duration + "s linear";
             playpause_button.style["background-position"] = "right";
           });
@@ -224,7 +230,7 @@
       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 > subtitles_array[current_subtitle].time_end) {
+        if (current_time > current_end) {
           ++current_subtitle;
           display_subtitle();
           set_up_play_anim();