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.

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 %>