transcript-table: show transcript as contiguous text by default

This commit is contained in:
zrose584 2020-09-12 13:22:46 +02:00
parent 57978485ee
commit 0be0a59a2a
2 changed files with 52 additions and 24 deletions

View File

@ -3,11 +3,10 @@ var details_tt, select_tt, table_tt;
function renderCues() { function renderCues() {
var tt = Q("video").textTracks[select_tt.selectedIndex]; var tt = Q("video").textTracks[select_tt.selectedIndex];
let cuesL = [...tt.cues]; let cuesL = [...tt.cues];
clearNode(table_tt);
console.log("render cues..", tt.cues.length);
var tt_type = cuesL[0].text.startsWith(" \n"); var tt_type = cuesL[0].text.startsWith(" \n");
let rows;
function forEachCue(cb) {
for (let i=0; i < cuesL.length; i++) { for (let i=0; i < cuesL.length; i++) {
let txt, startTime = tt.cues[i].startTime; let txt, startTime = tt.cues[i].startTime;
if (tt_type) { if (tt_type) {
@ -16,26 +15,52 @@ function renderCues() {
} else { } else {
txt = tt.cues[i].text; txt = tt.cues[i].text;
} }
cb(startTime, txt);
}
}
function createA(startTime, txt, title=null) {
a = document.createElement("a");
a.appendChild(text(txt));
a.href = "javascript:;"; // TODO: replace this with ?t parameter
if (title) a.title = title;
a.addEventListener("click", (e) => {
Q("video").currentTime = startTime;
})
return a;
}
clearNode(table_tt);
console.log("render cues..", tt.cues.length);
if (Q("input#transcript-use-table").checked) {
forEachCue((startTime, txt) => {
let tr, td, a; let tr, td, a;
tr = document.createElement("tr"); tr = document.createElement("tr");
td = document.createElement("td") td = document.createElement("td")
a = document.createElement("a"); td.appendChild(createA(startTime, toMS(startTime)));
a.appendChild(text(toMS(startTime)));
a.href = "javascript:;"; // TODO: replace this with ?t parameter
a.addEventListener("click", (e) => {
Q("video").currentTime = startTime;
})
td.appendChild(a);
tr.appendChild(td); tr.appendChild(td);
td = document.createElement("td") td = document.createElement("td")
td.appendChild(text(txt)); td.appendChild(text(txt));
tr.appendChild(td); tr.appendChild(td);
table_tt.appendChild(tr);; table_tt.appendChild(tr);
}; });
rows = table_tt.rows;
}
else {
forEachCue((startTime, txt) => {
span = document.createElement("span");
var idx = txt.indexOf(" ");
var [firstWord, rest] = [txt.slice(0, idx), txt.slice(idx)];
span.appendChild(createA(startTime, firstWord, toMS(startTime)));
if (rest) span.appendChild(text(rest + " "));
table_tt.appendChild(span);
});
rows = table_tt.childNodes;
}
var lastActiveRow = null; var lastActiveRow = null;
function colorCurRow(e) { function colorCurRow(e) {
@ -45,7 +70,7 @@ function renderCues() {
if (lastActiveRow) lastActiveRow.style.backgroundColor = ""; if (lastActiveRow) lastActiveRow.style.backgroundColor = "";
if (idxT < 0) return; if (idxT < 0) return;
var row = table_tt.rows[idxT]; var row = rows[idxT];
row.style.backgroundColor = "#0cc12e42"; row.style.backgroundColor = "#0cc12e42";
lastActiveRow = row; lastActiveRow = row;
} }
@ -99,5 +124,7 @@ window.addEventListener('DOMContentLoaded', function() {
} }
}) })
Q("input#transcript-use-table").addEventListener("change", renderCues);
Q(".side-videos").prepend(details_tt); Q(".side-videos").prepend(details_tt);
}); });

View File

@ -599,6 +599,7 @@ Reload without invidious (for usage of new identity button).</a>
<option>{{ source['label'] }}</option> <option>{{ source['label'] }}</option>
{% endfor %} {% endfor %}
</select> </select>
<input type="checkbox" id="transcript-use-table">
<table id="transcript-table"></table> <table id="transcript-table"></table>
</div> </div>
</details> </details>