Merge pull request #15 from zrose584/transcript_table

Transcript table

youtube/static/js/common.js

@@ -0,0 +1,32 @@
+Q = document.querySelector.bind(document);
+function text(msg) { return document.createTextNode(msg); }
+function clearNode(node) { while (node.firstChild) node.removeChild(node.firstChild); }
+function toMS(s) {
+  var s = Math.floor(s);
+  var m = Math.floor(s/60); var s = s % 60;
+  return `0${m}:`.slice(-3) + `0${s}`.slice(-2);
+}
+
+
+var cur_tt_idx = 0;
+function getActiveTranscriptTrackIdx() {
+    let tts = Q("video").textTracks;
+    if (!tts.length) return;
+    for (let i=0; i < tts.length; i++) {
+        if (tts[i].mode == "showing") {
+            cur_tt_idx = i;
+            return cur_tt_idx;
+        }
+    }
+    return cur_tt_idx;
+}
+function getActiveTranscriptTrack() { return Q("video").textTracks[getActiveTranscriptTrackIdx()]; }
+
+function getDefaultTranscriptTrackIdx() {
+  let tts = Q("video").textTracks;
+  return tts.length - 1;
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+    cur_tt_idx = getDefaultTranscriptTrackIdx();
+});

youtube/static/js/hotkeys.js

@@ -1,12 +1,11 @@
-Q = document.querySelector.bind(document);
-
 function onKeyDown(e) {
     if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return false;
 
-    console.log(e);
+    // console.log(e);
     let v = Q("video");
     let c = e.key.toLowerCase();
-    if (c == "k") {
+    if (e.ctrlKey) return;
+    else if (c == "k") {
         v.paused ? v.play() : v.pause();
     }
     else if (c == "arrowleft") {
@@ -25,6 +24,18 @@ function onKeyDown(e) {
         e.preventDefault();
         v.currentTime = v.currentTime + 10;
     }
+    else if (c == "f") {
+        e.preventDefault();
+        if (document.fullscreen) document.exitFullscreen();
+        else v.requestFullscreen();
+    }
+    else if (c == "c") {
+        e.preventDefault();
+        let tt = getActiveTranscriptTrack();
+        if (tt == null) return;
+        if (tt.mode == "showing") tt.mode = "disabled";
+        else tt.mode = "showing";
+    }
 }
 
 window.addEventListener('DOMContentLoaded', function() {

youtube/static/js/transcript-table.js

@@ -0,0 +1,133 @@
+var details_tt, select_tt, table_tt;
+
+function renderCues() {
+  var tt = Q("video").textTracks[select_tt.selectedIndex];
+  let cuesL = [...tt.cues];
+  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;
+
+  function forEachCue(cb) {
+    for (let i=0; i < cuesL.length; i++) {
+      let txt, startTime = tt.cues[i].startTime;
+      if (tt_type) {
+        if (i % 2) continue;
+        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 {
+        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;
+      tr = document.createElement("tr");
+
+      td = document.createElement("td")
+      td.appendChild(createA(startTime, toMS(startTime)));
+      tr.appendChild(td);
+
+      td = document.createElement("td")
+      td.appendChild(text(txt));
+      tr.appendChild(td);
+
+      table_tt.appendChild(tr);
+    });
+    rows = table_tt.rows;
+  }
+  else {
+    forEachCue((startTime, txt) => {
+      span = document.createElement("span");
+      var idx = txt.indexOf(" ", 1);
+      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;
+  function colorCurRow(e) {
+    // console.log("cuechange:", e);
+    var idxC = cuesL.findIndex((c) => c == tt.activeCues[0]);
+    var idxT = tt_type ? Math.floor(idxC / 2) : idxC;
+
+    if (lastActiveRow) lastActiveRow.style.backgroundColor = "";
+    if (idxT < 0) return;
+    var row = rows[idxT];
+    row.style.backgroundColor = "#0cc12e42";
+    lastActiveRow = row;
+  }
+  colorCurRow();
+  tt.addEventListener("cuechange", colorCurRow);
+}
+
+function loadCues() {
+  let tts = Q("video").textTracks;
+  let tt = tts[select_tt.selectedIndex];
+  let dst_mode = "hidden";
+  for (let ttI of tts) {
+    if (ttI.mode === "showing") dst_mode = "showing";
+    if (ttI !== tt) ttI.mode = "disabled";
+  }
+  if (tt.mode == "disabled") tt.mode = dst_mode;
+
+  var iC = setInterval(() => {
+    if (tt.cues && tt.cues.length) {
+      clearInterval(iC);
+      renderCues();
+    }
+  }, 100);
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+  let tts = Q("video").textTracks;
+  if (!tts.length) return;
+
+  details_tt = Q("details#transcript-details");
+  details_tt.addEventListener("toggle", () => {
+    if (details_tt.open) loadCues();
+  });
+
+  select_tt = Q("select#select-tt");
+  select_tt.selectedIndex = getDefaultTranscriptTrackIdx();
+  select_tt.addEventListener("change", loadCues);
+
+  table_tt = Q("table#transcript-table");
+  table_tt.appendChild(text("loading.."));
+
+  tts.addEventListener("change", (e) => {
+    // console.log(e);
+    var idx = getActiveTranscriptTrackIdx();  // sadly not provided by 'e'
+    if (tts[idx].mode == "showing") {
+      select_tt.selectedIndex = idx;
+      loadCues();
+    }
+    else if (details_tt.open && tts[idx].mode == "disabled") {
+      tts[idx].mode = "hidden";  // so we still receive 'oncuechange'
+    }
+  })
+
+  Q("input#transcript-use-table").addEventListener("change", renderCues);
+
+  Q(".side-videos").prepend(details_tt);
+});

youtube/templates/watch.html

@@ -305,6 +305,18 @@
                 .format-codecs{
                     width: 120px;
                 }
+
+    table#transcript-table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+    table#transcript-table td, th {
+        border: 1px solid #dddddd;
+    }
+    div#transcript-div {
+        background-color: var(--interface-color);
+        padding: 5px;
+    }
 {% endblock style %}
 
 {% block main %}
@@ -582,6 +594,21 @@ Reload without invidious (for usage of new identity button).</a>
             </div>
         {% endif %}
 
+        {% if subtitle_sources %}
+            <details id="transcript-details">
+                <summary>Transcript</summary>
+                <div id="transcript-div">
+                    <select id="select-tt">
+                        {% for source in subtitle_sources %}
+                            <option>{{ source['label'] }}</option>
+                        {% endfor %}
+                    </select>
+                    <input type="checkbox" id="transcript-use-table">
+                    <table id="transcript-table"></table>
+                </div>
+            </details>
+        {% endif %}
+
         {% if settings.related_videos_mode != 0 %}
             <details class="related-videos-outer" {{'open' if settings.related_videos_mode == 1 else ''}}>
                 <summary>Related Videos</summary>
@@ -608,7 +635,10 @@ Reload without invidious (for usage of new identity button).</a>
             </details>
         {% endif %}
     {% endif %}
+
+    <script src="/youtube.com/static/js/common.js"></script>
     {% if settings.use_video_hotkeys %}
         <script src="/youtube.com/static/js/hotkeys.js"></script>
     {% endif %}
+    <script src="/youtube.com/static/js/transcript-table.js"></script>
 {% endblock main %}