diff --git a/templates/player.html b/templates/player.html index 6f02c8c..0d022e8 100644 --- a/templates/player.html +++ b/templates/player.html @@ -24,7 +24,7 @@ padding-left: 15px; } #captions-box { - height: 1em; + min-height: 4.5em; } .artist-song-filter { padding-left: 15px; @@ -39,7 +39,7 @@ padding-left: 2px; } .q-item-button { - margin-left: 5px; + margin-right: 5px; } label:hover > .add-to-queue-btns { display: inline-block; @@ -128,6 +128,7 @@ let queue = []; let queue_id_counter = 0; let show_title = false; + let get_next_lyric = true; let in_queue_ele = document.getElementById("in-queue"); let empty_ele = document.getElementById("empty-queue"); let audio_ele = document.getElementById("audio"); @@ -172,6 +173,18 @@ if (active_cue) { captions_box.appendChild(active_cue.getCueAsHTML()); } + if (get_next_lyric) { + //00:00:03.500 --> 00:00:08.200 + const ct = audio_ele.currentTime; + const fi = Array.from(captions_ele.track.cues).findIndex((cue) => ct < cue.startTime); + if (fi !== -1) { + let next_lyric = document.createElement("DIV"); + next_lyric.classList.add("next-lyric"); + next_lyric.innerText = "Next: "; + next_lyric.appendChild(captions_ele.track.cues[fi].getCueAsHTML()); + captions_box.appendChild(next_lyric); + } + } }); function add_to_queue(name) { @@ -181,9 +194,14 @@ //