Remove var
and fix transcript button jumping above autoplay on page load
Obsolete code from #15 that was forgotten to be removed From ea34965be31dcf7e7e30c1edb9a9fa9d18fe6b30 Mon Sep 17 00:00:00 2001 From: James Taylor <user234683@users.noreply.github.com> Date: Sat, 3 Jul 2021 20:06:11 -0700
This commit is contained in:
parent
49d823e135
commit
7f67af1031
@ -1,9 +1,9 @@
|
|||||||
var details_tt, select_tt, table_tt;
|
let details_tt, select_tt, table_tt;
|
||||||
|
|
||||||
function renderCues() {
|
function renderCues() {
|
||||||
var selectedTrack = QId("js-video-player").textTracks[select_tt.selectedIndex];
|
const selectedTrack = QId("js-video-player").textTracks[select_tt.selectedIndex];
|
||||||
let cuesList = [...selectedTrack.cues];
|
const cuesList = [...selectedTrack.cues];
|
||||||
var is_automatic = cuesList[0].text.startsWith(" \n");
|
const is_automatic = cuesList[0].text.startsWith(" \n");
|
||||||
|
|
||||||
// Firefox ignores cues starting with a blank line containing a space
|
// Firefox ignores cues starting with a blank line containing a space
|
||||||
// Automatic captions contain such a blank line in the first cue
|
// Automatic captions contain such a blank line in the first cue
|
||||||
@ -65,8 +65,8 @@ function renderCues() {
|
|||||||
else {
|
else {
|
||||||
forEachCue((startTime, txt) => {
|
forEachCue((startTime, txt) => {
|
||||||
span = document.createElement("span");
|
span = document.createElement("span");
|
||||||
var idx = txt.indexOf(" ", 1);
|
let idx = txt.indexOf(" ", 1);
|
||||||
var [firstWord, rest] = [txt.slice(0, idx), txt.slice(idx)];
|
let [firstWord, rest] = [txt.slice(0, idx), txt.slice(idx)];
|
||||||
|
|
||||||
span.appendChild(createTimestampLink(startTime, firstWord, toTimestamp(startTime)));
|
span.appendChild(createTimestampLink(startTime, firstWord, toTimestamp(startTime)));
|
||||||
if (rest) span.appendChild(text(rest + " "));
|
if (rest) span.appendChild(text(rest + " "));
|
||||||
@ -75,25 +75,25 @@ function renderCues() {
|
|||||||
rows = table_tt.childNodes;
|
rows = table_tt.childNodes;
|
||||||
}
|
}
|
||||||
|
|
||||||
var lastActiveRow = null;
|
let lastActiveRow = null;
|
||||||
|
let row;
|
||||||
function colorCurRow(e) {
|
function colorCurRow(e) {
|
||||||
// console.log("cuechange:", e);
|
// console.log("cuechange:", e);
|
||||||
var activeCueIdx = cuesList.findIndex((c) => c == selectedTrack.activeCues[0]);
|
let activeCueIdx = cuesList.findIndex((c) => c == selectedTrack.activeCues[0]);
|
||||||
var activeRowIdx = is_automatic ? Math.floor(activeCueIdx / 2) : activeCueIdx;
|
let activeRowIdx = is_automatic ? Math.floor(activeCueIdx / 2) : activeCueIdx;
|
||||||
|
|
||||||
if (lastActiveRow) lastActiveRow.style.backgroundColor = "";
|
if (lastActiveRow) lastActiveRow.style.backgroundColor = "";
|
||||||
if (activeRowIdx < 0) return;
|
if (activeRowIdx < 0) return;
|
||||||
var row = rows[activeRowIdx];
|
row = rows[activeRowIdx];
|
||||||
row.style.backgroundColor = "#0cc12e42";
|
row.style.backgroundColor = "#0cc12e42";
|
||||||
lastActiveRow = row;
|
lastActiveRow = row;
|
||||||
}
|
}
|
||||||
colorCurRow();
|
|
||||||
selectedTrack.addEventListener("cuechange", colorCurRow);
|
selectedTrack.addEventListener("cuechange", colorCurRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadCues() {
|
function loadCues() {
|
||||||
let textTracks = QId("js-video-player").textTracks;
|
const textTracks = QId("js-video-player").textTracks;
|
||||||
let selectedTrack = textTracks[select_tt.selectedIndex];
|
const selectedTrack = textTracks[select_tt.selectedIndex];
|
||||||
|
|
||||||
// See https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/mode
|
// See https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/mode
|
||||||
// This code will (I think) make sure that the selected track's cues
|
// This code will (I think) make sure that the selected track's cues
|
||||||
@ -111,7 +111,7 @@ function loadCues() {
|
|||||||
selectedTrack.mode = selected_track_target_mode;
|
selectedTrack.mode = selected_track_target_mode;
|
||||||
}
|
}
|
||||||
|
|
||||||
var intervalID = setInterval(() => {
|
let intervalID = setInterval(() => {
|
||||||
if (selectedTrack.cues && selectedTrack.cues.length) {
|
if (selectedTrack.cues && selectedTrack.cues.length) {
|
||||||
clearInterval(intervalID);
|
clearInterval(intervalID);
|
||||||
renderCues();
|
renderCues();
|
||||||
@ -120,7 +120,7 @@ function loadCues() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', function() {
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
let textTracks = QId("js-video-player").textTracks;
|
const textTracks = QId("js-video-player").textTracks;
|
||||||
if (!textTracks.length) return;
|
if (!textTracks.length) return;
|
||||||
|
|
||||||
details_tt = Q("details#transcript-details");
|
details_tt = Q("details#transcript-details");
|
||||||
@ -133,11 +133,11 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||||||
select_tt.addEventListener("change", loadCues);
|
select_tt.addEventListener("change", loadCues);
|
||||||
|
|
||||||
table_tt = Q("table#transcript-table");
|
table_tt = Q("table#transcript-table");
|
||||||
table_tt.appendChild(text("loading.."));
|
table_tt.appendChild(text("loading..."));
|
||||||
|
|
||||||
textTracks.addEventListener("change", (e) => {
|
textTracks.addEventListener("change", (e) => {
|
||||||
// console.log(e);
|
// console.log(e);
|
||||||
var idx = getActiveTranscriptTrackIdx(); // sadly not provided by 'e'
|
let idx = getActiveTranscriptTrackIdx(); // sadly not provided by 'e'
|
||||||
if (textTracks[idx].mode == "showing") {
|
if (textTracks[idx].mode == "showing") {
|
||||||
select_tt.selectedIndex = idx;
|
select_tt.selectedIndex = idx;
|
||||||
loadCues();
|
loadCues();
|
||||||
@ -148,6 +148,4 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
Q("input#transcript-use-table").addEventListener("change", renderCues);
|
Q("input#transcript-use-table").addEventListener("change", renderCues);
|
||||||
|
|
||||||
Q(".side-videos").prepend(details_tt);
|
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user