let jinja create the transcript <details> element

youtube/static/js/transcript-table.js

@@ -75,30 +75,17 @@ window.addEventListener('DOMContentLoaded', function() {
   let tts = Q("video").textTracks;
   if (!tts.length) return;
 
-  details_tt = document.createElement("details");
+  details_tt = Q("details#transcript-box");
   details_tt.addEventListener("toggle", () => {
     if (details_tt.open) loadCues();
   });
 
-  var s = document.createElement("summary");
-  s.appendChild(text("Transcript"));
-  details_tt.appendChild(s);
-
-  var divR = document.createElement("div");
-  select_tt = document.createElement("select");
-  for (let tt of tts) {
-    let option = document.createElement("option");
-    option.appendChild(text(tt.label));
-    select_tt.appendChild(option);
-  }
+  select_tt = Q("select#select-tt");
   select_tt.selectedIndex = getDefaultTranscriptTrackIdx();
   select_tt.addEventListener("change", loadCues);
-  divR.appendChild(select_tt);
 
-  table_tt = document.createElement("table");
-  table_tt.id = "transcript-table";
+  table_tt = Q("table#transcript-table");
   table_tt.appendChild(text("loading.."));
-  divR.appendChild(table_tt);
 
   tts.addEventListener("change", (e) => {
     // console.log(e);
@@ -112,6 +99,5 @@ window.addEventListener('DOMContentLoaded', function() {
     }
   })
 
-  details_tt.appendChild(divR);
   Q(".side-videos").prepend(details_tt);
 });

youtube/templates/watch.html

@@ -590,6 +590,20 @@ Reload without invidious (for usage of new identity button).</a>
             </div>
         {% endif %}
 
+        {% if subtitle_sources %}
+            <details id="transcript-box">
+                <summary>Transcript</summary>
+                <div>
+                    <select id="select-tt">
+                        {% for source in subtitle_sources %}
+                            <option>{{ source['label'] }}</option>
+                        {% endfor %}
+                    </select>
+                    <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>