transcript-table: show transcript as contiguous text by default
This commit is contained in:
parent
57978485ee
commit
0be0a59a2a
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user