Fix time duration when "playing"
All checks were successful
Publish to burnedkirby.com/subtitle / publish-site (push) Successful in 0s
All checks were successful
Publish to burnedkirby.com/subtitle / publish-site (push) Successful in 0s
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.
This commit is contained in:
parent
99172c7007
commit
846416b9f7
1 changed files with 9 additions and 3 deletions
12
index.html
12
index.html
|
@ -92,6 +92,7 @@
|
||||||
const subtitles_array = [];
|
const subtitles_array = [];
|
||||||
var current_subtitle = 0;
|
var current_subtitle = 0;
|
||||||
var current_time = 0.0;
|
var current_time = 0.0;
|
||||||
|
var current_end = 1.0;
|
||||||
var prev_timestamp = 0.0;
|
var prev_timestamp = 0.0;
|
||||||
var is_playing = false;
|
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("subtitle_time").textContent = subtitles_array[current_subtitle].timestamp_start + " --> " + subtitles_array[current_subtitle].timestamp_end;
|
||||||
document.getElementById("s_idx").value = current_subtitle;
|
document.getElementById("s_idx").value = current_subtitle;
|
||||||
current_time = subtitles_array[current_subtitle].time_start;
|
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) {
|
} else if (current_subtitle === subtitles_array.length) {
|
||||||
document.getElementById("subtitle_text").textContent = "End of subtitles.";
|
document.getElementById("subtitle_text").textContent = "End of subtitles.";
|
||||||
} else {
|
} else {
|
||||||
|
@ -211,8 +218,7 @@
|
||||||
playpause_button.style["background-position"] = "left";
|
playpause_button.style["background-position"] = "left";
|
||||||
requestAnimationFrame((time) => {
|
requestAnimationFrame((time) => {
|
||||||
let playpause_button = document.getElementById("playpause_button");
|
let playpause_button = document.getElementById("playpause_button");
|
||||||
let duration = subtitles_array[current_subtitle].time_end
|
let duration = current_end - current_time;
|
||||||
- current_time;
|
|
||||||
playpause_button.style["transition"] = "all " + duration + "s linear";
|
playpause_button.style["transition"] = "all " + duration + "s linear";
|
||||||
playpause_button.style["background-position"] = "right";
|
playpause_button.style["background-position"] = "right";
|
||||||
});
|
});
|
||||||
|
@ -224,7 +230,7 @@
|
||||||
if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
|
if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
|
||||||
current_time += (anim_timestamp - prev_timestamp) / 1000.0;
|
current_time += (anim_timestamp - prev_timestamp) / 1000.0;
|
||||||
prev_timestamp = anim_timestamp;
|
prev_timestamp = anim_timestamp;
|
||||||
if (current_time > subtitles_array[current_subtitle].time_end) {
|
if (current_time > current_end) {
|
||||||
++current_subtitle;
|
++current_subtitle;
|
||||||
display_subtitle();
|
display_subtitle();
|
||||||
set_up_play_anim();
|
set_up_play_anim();
|
||||||
|
|
Loading…
Reference in a new issue