Make a function that builds the download widget's HTML

src/invidious.cr

@@ -29,6 +29,8 @@ require "protodec/utils"
 require "./invidious/database/*"
 require "./invidious/helpers/*"
 require "./invidious/yt_backend/*"
+require "./invidious/frontend/*"
+
 require "./invidious/*"
 require "./invidious/channels/*"
 require "./invidious/user/*"

src/invidious/frontend/watch_page.cr

@@ -0,0 +1,108 @@
+module Invidious::Frontend::WatchPage
+  extend self
+
+  # A handy structure to pass many elements at
+  # once to the download widget function
+  struct VideoAssets
+    getter full_videos : Array(Hash(String, JSON::Any))
+    getter video_streams : Array(Hash(String, JSON::Any))
+    getter audio_streams : Array(Hash(String, JSON::Any))
+    getter captions : Array(Caption)
+
+    def initialize(
+      @full_videos,
+      @video_streams,
+      @audio_streams,
+      @captions
+    )
+    end
+  end
+
+  def download_widget(locale : String, video : Video, video_assets : VideoAssets) : String
+    if CONFIG.disabled?("downloads")
+      return "<p id=\"download\">#{translate(locale, "Download is disabled.")}</p>"
+    end
+
+    return String.build(4000) do |str|
+      str << "<form"
+      str << " class=\"pure-form pure-form-stacked\""
+      str << " action='/latest_version'"
+      str << " method='get'"
+      str << " rel='noopener'"
+      str << " target='_blank'>"
+      str << '\n'
+
+      str << "\t<div class=\"pure-control-group\">\n"
+
+      str << "\t\t<label for='download_widget'>"
+      str << translate(locale, "Download as: ")
+      str << "</label>\n"
+
+      # TODO: remove inline style
+      str << "\t\t<select style=\"width:100%\" name='download_widget' id='download_widget'>\n"
+
+      # Non-DASH videos (audio+video)
+
+      video_assets.full_videos.each do |option|
+        mimetype = option["mimeType"].as_s.split(";")[0]
+
+        height = itag_to_metadata?(option["itag"]).try &.["height"]?
+
+        title = URI.encode_www_form("#{video.title}-#{video.id}.#{mimetype.split("/")[1]}")
+        value = {"id": video.id, "itag": option["itag"], "title": title}.to_json
+
+        str << "\t\t\t<option value='" << value << "'>"
+        str << (height || "~240") << "p - " << mimetype
+        str << "</option>\n"
+      end
+
+      # DASH video streams
+
+      video_assets.video_streams.each do |option|
+        mimetype = option["mimeType"].as_s.split(";")[0]
+
+        title = URI.encode_www_form("#{video.title}-#{video.id}.#{mimetype.split("/")[1]}")
+        value = {"id": video.id, "itag": option["itag"], "title": title}.to_json
+
+        str << "\t\t\t<option value='" << value << "'>"
+        str << option["qualityLabel"] << " - " << mimetype << " @ " << option["fps"] << "fps - video only"
+        str << "</option>\n"
+      end
+
+      # DASH audio streams
+
+      video_assets.audio_streams.each do |option|
+        mimetype = option["mimeType"].as_s.split(";")[0]
+
+        title = URI.encode_www_form("#{video.title}-#{video.id}.#{mimetype.split("/")[1]}")
+        value = {"id": video.id, "itag": option["itag"], "title": title}.to_json
+
+        str << "\t\t\t<option value='" << value << "'>"
+        str << mimetype << " @ " << (option["bitrate"]?.try &.as_i./ 1000) << "k - audio only"
+        str << "</option>\n"
+      end
+
+      # Subtitles (a.k.a "closed captions")
+
+      video_assets.captions.each do |caption|
+        title = URI.encode_www_form("#{video.title}-#{video.id}.#{caption.language_code}.vtt")
+        value = {"id": video.id, "label": caption.name, "title": title}.to_json
+
+        str << "\t\t\t<option value='" << value << "'>"
+        str << translate(locale, "download_subtitles", translate(locale, caption.name))
+        str << "</option>\n"
+      end
+
+      # End of form
+
+      str << "\t\t</select>\n"
+      str << "\t</div>\n"
+
+      str << "\t<button type=\"submit\" class=\"pure-button pure-button-primary\">\n"
+      str << "\t\t<b>" << translate(locale, "Download") << "</b>\n"
+      str << "\t</button>\n"
+
+      str << "</form>\n"
+    end
+  end
+end

src/invidious/routes/watch.cr

@@ -189,6 +189,14 @@ module Invidious::Routes::Watch
       return env.redirect url
     end
 
+    # Structure used for the download widget
+    video_assets = Invidious::Frontend::WatchPage::VideoAssets.new(
+      full_videos: fmt_stream,
+      video_streams: video_streams,
+      audio_streams: audio_streams,
+      captions: video.captions
+    )
+
     templated "watch"
   end
 

src/invidious/views/watch.ecr

@@ -168,41 +168,7 @@ we're going to need to do it here in order to allow for translations.
                 <% end %>
             <% end %>
 
-            <% if CONFIG.dmca_content.includes?(video.id) || CONFIG.disabled?("downloads") %>
-                <p id="download"><%= translate(locale, "Download is disabled.") %></p>
-            <% else %>
-                <form class="pure-form pure-form-stacked" action="/latest_version" method="get" rel="noopener" target="_blank">
-                    <div class="pure-control-group">
-                        <label for="download_widget"><%= translate(locale, "Download as: ") %></label>
-                        <select style="width:100%" name="download_widget" id="download_widget">
-                            <% fmt_stream.each do |option| %>
-                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
-                                    <%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["mimeType"].as_s.split(";")[0] %>
-                                </option>
-                            <% end %>
-                            <% video_streams.each do |option| %>
-                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
-                                    <%= option["qualityLabel"] %> - <%= option["mimeType"].as_s.split(";")[0] %> @ <%= option["fps"] %>fps - video only
-                                </option>
-                            <% end %>
-                            <% audio_streams.each do |option| %>
-                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
-                                    <%= option["mimeType"].as_s.split(";")[0] %> @ <%= option["bitrate"]?.try &.as_i./ 1000 %>k - audio only
-                                </option>
-                            <% end %>
-                            <% captions.each do |caption| %>
-                                <option value='{"id":"<%= video.id %>","label":"<%= caption.name %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= caption.language_code %>.vtt"}'>
-                                    <%= translate(locale, "download_subtitles", translate(locale, caption.name)) %>
-                                </option>
-                            <% end %>
-                        </select>
-                    </div>
-
-                    <button type="submit" class="pure-button pure-button-primary">
-                        <b><%= translate(locale, "Download") %></b>
-                    </button>
-                </form>
-            <% end %>
+            <%= Invidious::Frontend::WatchPage.download_widget(locale, video, video_assets) %>
 
             <p id="views"><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
             <p id="likes"><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>