handle firefox' VTT parsing bug

from #15:
"[..] Firefox's VTT parsing [ignores] newlines. So if the cue starts
with a newline, that cue will have blank text (a corollary is that
the first sentence uttered will fail to display in the automatic
captions [..])."
This commit is contained in:
zrose584 2020-09-15 20:32:12 +02:00
parent 0be0a59a2a
commit b3de26606d

View File

@ -4,6 +4,8 @@ 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];
var tt_type = cuesL[0].text.startsWith(" \n"); var tt_type = cuesL[0].text.startsWith(" \n");
let ff_bug = false;
if (!cuesL[0].text.length) { ff_bug = true; tt_type = true };
let rows; let rows;
function forEachCue(cb) { function forEachCue(cb) {
@ -11,7 +13,8 @@ function renderCues() {
let txt, startTime = tt.cues[i].startTime; let txt, startTime = tt.cues[i].startTime;
if (tt_type) { if (tt_type) {
if (i % 2) continue; if (i % 2) continue;
txt = tt.cues[i].text.split('\n')[1].replace(/<[\d:.]*?><c>(.*?)<\/c>/g, "$1"); if (ff_bug && !tt.cues[i].text.length) txt = tt.cues[i+1].text;
else txt = tt.cues[i].text.split('\n')[1].replace(/<[\d:.]*?><c>(.*?)<\/c>/g, "$1");
} else { } else {
txt = tt.cues[i].text; txt = tt.cues[i].text;
} }
@ -52,7 +55,7 @@ function renderCues() {
else { else {
forEachCue((startTime, txt) => { forEachCue((startTime, txt) => {
span = document.createElement("span"); span = document.createElement("span");
var idx = txt.indexOf(" "); var idx = txt.indexOf(" ", 1);
var [firstWord, rest] = [txt.slice(0, idx), txt.slice(idx)]; var [firstWord, rest] = [txt.slice(0, idx), txt.slice(idx)];
span.appendChild(createA(startTime, firstWord, toMS(startTime))); span.appendChild(createA(startTime, firstWord, toMS(startTime)));
@ -90,8 +93,8 @@ function loadCues() {
var iC = setInterval(() => { var iC = setInterval(() => {
if (tt.cues && tt.cues.length) { if (tt.cues && tt.cues.length) {
renderCues();
clearInterval(iC); clearInterval(iC);
renderCues();
} }
}, 100); }, 100);
} }