Add UI for transcripts for JS-disabled users

This commit adds a server-side UI template that renders a transcript
element. This is used to render transcripts for users without JS.

assets/css/default.css

@@ -832,4 +832,46 @@ h1, h2, h3, h4, h5, p,
 
 .description-show-transcript-widget > * {
   margin: 0;
+}
+
+.video-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  height: 30em;
+  padding: 10px;
+  border: 1px solid #a0a0a0;
+  border-radius: 10px;
+}
+
+.video-transcript header {
+  padding-bottom: 5px;
+  border-bottom: 1px solid #a0a0a0;
+} 
+
+.video-transcript > #lines {
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
+}
+
+.transcript-line, .transcript-title-line {
+  display: flex;
+  align-items: center;
+  padding: 20px 10px;
+  gap: 10px;
+  border-radius: 10px;
+}
+
+.transcript-line > .length {
+  padding: 0px 5px;
+  background: #363636 !important;
+}
+
+.transcript-line > p, .video-transcript > header > h3, .transcript-title-line > h4 {
+  margin: 0;
+}
+
+.transcript-line:hover, .selected.transcript-line, .transcript-title-line:hover, .selected.transcript-title-line {
+  background: #cacaca;
 }

locales/en-US.json

@@ -505,5 +505,6 @@
     "video_description_show_transcript_section_label": "Transcripts",
     "video_description_show_transcript_section_button": "Show transcript",
     "video_description_show_transcript_section_button_hide": "Hide transcript",
-    "error_transcripts_none_available": "No transcripts are available"
+    "error_transcripts_none_available": "No transcripts are available",
+    "transcript_widget_title": "Transcript"
 }

src/invidious/views/components/no-js-transcript-ui.ecr

@@ -0,0 +1,23 @@
+<section class="video-transcript">
+    <header><h3><%=translate(locale, "transcript_widget_title")%></h3></header>
+    <div id="lines">
+        <% transcript_time_url_param = env.params.query.dup %>
+        <% transcript_time_url_param.delete_all("t") %>
+
+        <% transcript.lines.each do | line | %>
+            <% if line.is_a? Invidious::Videos::Transcript::HeadingLine %>
+                <div class="transcript-title-line"> <h4> <%= line.line %> </h4> </div>
+            <% else %>
+                <% jump_time = line.start_ms.total_seconds.to_s %>
+                <% transcript_time_url_param["t"] = jump_time %>
+                <a href="/watch?<%= transcript_time_url_param %>" data-onclick="jump_to_time" data-jump-time="<%=jump_time%>">
+                    <div class="transcript-line">
+                        <p class="length"><%= recode_length_seconds(line.start_ms.total_seconds) %></p>
+                        <p><%= line.line %></p>
+                    </div>
+                </a>
+            <% end %> 
+        <% end %>
+    </div>
+    <footer></footer>
+</section>

src/invidious/views/watch.ecr

@@ -317,6 +317,10 @@ we're going to need to do it here in order to allow for translations.
 
     <% if params.related_videos || plid %>
         <div class="pure-u-1 pure-u-lg-1-5">
+            <% if transcript %>
+                <%= rendered "components/no-js-transcript-ui" %>
+            <% end %>
+
             <% if plid %>
                 <div id="playlist" class="h-box"></div>
             <% end %>