From 5ba6baea193226826496936089457db368891967 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Wed, 12 Jun 2024 12:42:18 -0700
Subject: [PATCH] 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                        | 42 +++++++++++++++++++
 locales/en-US.json                            |  3 +-
 .../views/components/no-js-transcript-ui.ecr  | 23 ++++++++++
 src/invidious/views/watch.ecr                 |  4 ++
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/invidious/views/components/no-js-transcript-ui.ecr

diff --git a/assets/css/default.css b/assets/css/default.css
index 3544282a..7db5a74a 100644
--- a/assets/css/default.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/locales/en-US.json b/locales/en-US.json
index 5d078169..54ae6ab7 100644
--- a/locales/en-US.json
+++ b/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"
 }
diff --git a/src/invidious/views/components/no-js-transcript-ui.ecr b/src/invidious/views/components/no-js-transcript-ui.ecr
new file mode 100644
index 00000000..743ea570
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 0ca90a68..3e90c4f5 100644
--- a/src/invidious/views/watch.ecr
+++ b/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 %>