From 654f5fd45e08e5019dd851f8b5d224ca5c47a81c Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Wed, 12 Jun 2024 10:00:16 -0700
Subject: [PATCH] Add btn in video desc to show transcript

---
 assets/css/default.css        | 17 +++++++++++++++++
 locales/en-US.json            |  4 +++-
 src/invidious/views/watch.ecr |  9 ++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 2cedcf0c..3544282a 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -816,3 +816,20 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+.description-widget {
+  display: flex;
+  white-space: normal;
+  gap: 15px;
+
+  border-top: 1px solid black;
+}
+
+.description-show-transcript-widget {
+  padding: 10px;
+  flex-direction: column
+}
+
+.description-show-transcript-widget > * {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/locales/en-US.json b/locales/en-US.json
index 4f2c2770..f5df304f 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -501,5 +501,7 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "video_description_show_transcript_section_label": "Transcripts",
+    "video_description_show_transcript_section_button": "Show transcript"
 }
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 6f9ced6f..61ce62cf 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -256,7 +256,14 @@ we're going to need to do it here in order to allow for translations.
                     <div id="descriptionWrapper"><%= video.description_html %></div>
                 <% else %>
                     <input id="descexpansionbutton" type="checkbox"/>
-                    <div id="descriptionWrapper"><%= video.description_html %></div>
+                    <div id="descriptionWrapper"><%-= video.description_html %>
+                        <% if captions %>
+                            <div class="description-widget description-show-transcript-widget">
+                                <h4><%=HTML.escape(translate(locale, "video_description_show_transcript_section_label"))%></h4>
+                                <a class="pure-button pure-button-secondary"><%=HTML.escape(translate(locale, "video_description_show_transcript_section_button"))%></a>
+                            </div>
+                        <% end %>
+                    </div>
                     <label for="descexpansionbutton">
                         <a></a>
                     </label>