Add underlining of text that is being played

This commit is contained in:
ebolam
2022-12-06 12:53:02 -05:00
parent 773ccaafd5
commit 5aa62bd498
3 changed files with 24 additions and 1 deletions

View File

@@ -3238,4 +3238,8 @@ select {
transform: rotate(45deg);
transform-origin: left;
filter: brightness(100%);
}
.tts_playing {
text-decoration: underline dotted;
}

View File

@@ -3197,11 +3197,20 @@ function stop_tts() {
document.getElementById("reader").src="";
document.getElementById("reader").src="/audio";
document.getElementById("play_tts").textContent = "play_arrow";
for (item of document.getElementsByClassName("tts_playing")) {
item.classList.remove("tts_playing");
}
}
function finished_tts() {
next_action = parseInt(document.getElementById("reader").getAttribute("action_id"))+1;
action_count = parseInt(document.getElementById("action_count").textContent);
if (next_action-1 == "-1") {
action = document.getElementById("story_prompt");
} else {
action = document.getElementById("Selected Text Chunk "+(next_action-1));
}
action.classList.remove("tts_playing");
if (next_action <= action_count) {
document.getElementById("reader").src = "/audio?id="+next_action;
document.getElementById("reader").setAttribute("action_id", next_action);
@@ -3212,6 +3221,16 @@ function finished_tts() {
}
}
function tts_playing() {
action_id = document.getElementById("reader").getAttribute("action_id");
if (action_id == "-1") {
action = document.getElementById("story_prompt");
} else {
action = document.getElementById("Selected Text Chunk "+action_id);
}
action.classList.add("tts_playing");
}
function view_selection_probabilities() {
// Not quite sure how this should work yet. Probabilities are obviously on
// the token level, which we have no UI representation of. There are other

View File

@@ -84,7 +84,7 @@
<hr/>
</div>
<div id="tts" class="var_sync_alt_system_experimental_features">
<audio id="reader" preload=none src="/audio" onended="finished_tts()" />
<audio id="reader" preload=none src="/audio" onended="finished_tts()" onplay="tts_playing()" />
</div>
<div class="setting_tile_area">
{% with menu='Home' %}