Fix colors and data-url in download widget

assets/css/default.css

@@ -22,11 +22,13 @@ div {
   padding-right: 10px;
 }
 
+button.pure-button-primary,
 a.pure-button-primary {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
 
+button.pure-button-primary:hover,
 a.pure-button-primary:hover {
   background-color: rgba(0, 182, 240, 1);
   color: #fff;
@@ -271,14 +273,16 @@ img.thumbnail {
 #progress-container {
   width: 100%;
   border-radius: 2px;
-  background: #aaa;
+  background-color: #a0a0a0;
+  color: rgba(35, 35, 35, 1);
 }
 
 #download-progress {
   width: 0%;
   border-radius: 2px;
   height: 10px;
-  background-color: #0078e7;
+  background-color: rgba(0, 182, 240, 1);
+  color: #fff;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }

assets/js/watch.js

@@ -65,8 +65,6 @@ function download_video(target) {
     }
   }
 
-  url = "/videoplayback" + url.split("/videoplayback")[1];
-
   var xhr = new XMLHttpRequest();
   xhr.open("GET", url);
   xhr.responseType = "arraybuffer";

src/invidious.cr

@@ -3658,6 +3658,10 @@ get "/latest_version" do |env|
   id = env.params.query["id"]?
   itag = env.params.query["itag"]?
 
+  local = env.params.query["local"]?
+  local ||= "false"
+  local = local == "true"
+
   if !id || !itag
     halt env, status_code: 400
   end
@@ -3674,7 +3678,12 @@ get "/latest_version" do |env|
     halt env, status_code: 409
   end
 
-  env.redirect urls[0]["url"]
+  url = urls[0]["url"]
+  if local
+    url = URI.parse(url).full_path.not_nil!
+  end
+
+  env.redirect url
 end
 
 options "/videoplayback" do |env|

src/invidious/views/watch.ecr

@@ -59,13 +59,13 @@
                     <label for="download_widget"><%= translate(locale, "Download as: ") %></label>
                     <select style="width:100%" name="download_widget" id="download_widget">
                     <% video_streams.each do |option| %>
-                        <option data-url="<%= option["url"] %>"><%= option["quality_label"] %> - <%= option["type"].split(";")[0] %> @ <%= option["fps"] %>fps - video only</option>
+                        <option data-url="/latest_version?id=<%= video.id %>&itag=<%= option["itag"] %>&local=true"><%= option["quality_label"] %> - <%= option["type"].split(";")[0] %> @ <%= option["fps"] %>fps - video only</option>
                     <% end %>
                     <% audio_streams.each do |option| %>
-                        <option data-url="<%= option["url"] %>"><%= option["type"].split(";")[0] %> @ <%= option["bitrate"] %>k - audio only</option>
+                        <option data-url="/latest_version?id=<%= video.id %>&itag=<%= option["itag"] %>&local=true"><%= option["type"].split(";")[0] %> @ <%= option["bitrate"] %>k - audio only</option>
                     <% end %>
                     <% fmt_stream.each do |option| %>
-                        <option data-url="<%= option["url"] %>"><%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["type"].split(";")[0] %></option>
+                        <option data-url="/latest_version?id=<%= video.id %>&itag=<%= option["itag"] %>&local=true"><%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["type"].split(";")[0] %></option>
                     <% end %>
                     </select>
                 </div>
@@ -77,7 +77,7 @@
 
                 <button type="button" data-title="<%= video.title.dump_unquoted %>-<%= video.id %>.mp4" onclick="download_video(this)"
                     class="pure-button pure-button-primary">
-                    <%= translate(locale, "Download") %>
+                    <b><%= translate(locale, "Download") %></b>
                 </button>
             </form>