Add logic to show/hide transcripts without JS

locales/en-US.json

@@ -503,5 +503,7 @@
     "carousel_skip": "Skip the Carousel",
     "carousel_go_to": "Go to slide `x`",
     "video_description_show_transcript_section_label": "Transcripts",
-    "video_description_show_transcript_section_button": "Show transcript"
+    "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"
 }

src/invidious/routes/watch.cr

@@ -38,6 +38,11 @@ module Invidious::Routes::Watch
     nojs ||= "0"
     nojs = nojs == "1"
 
+    show_transcripts = env.params.query["show_transcripts"]?
+
+    show_transcripts ||= "0"
+    show_transcripts = show_transcripts == "1"
+
     preferences = env.get("preferences").as(Preferences)
 
     user = env.get?("user").try &.as(User)
@@ -156,6 +161,13 @@ module Invidious::Routes::Watch
     }
     captions = captions - preferred_captions
 
+    if show_transcripts
+      # Placeholder
+      transcript = true
+    else
+      transcript = nil
+    end
+
     aspect_ratio = "16:9"
 
     thumbnail = "/vi/#{video.id}/maxres.jpg"

src/invidious/views/watch.ecr

@@ -260,7 +260,14 @@ we're going to need to do it here in order to allow for translations.
                         <% 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>
+                                <% if transcript %>
+                                    <% hide_transcripts_param = env.params.query.dup %>
+                                    <% hide_transcripts_param.delete_all("show_transcripts") %>
+
+                                    <a class="pure-button pure-button-secondary" href="/watch?<%= hide_transcripts_param %>"><%=HTML.escape(translate(locale, "video_description_show_transcript_section_button_hide"))%></a>
+                                <% else %>
+                                    <a class="pure-button pure-button-secondary" href="/watch?<%= env.params.query %>&show_transcripts=1"><%=HTML.escape(translate(locale, "video_description_show_transcript_section_button"))%></a>
+                                <% end %>
                             </div>
                         <% end %>
                     </div>