Proxy thumbnails

assets/css/default.css

@@ -173,7 +173,7 @@ div {
 
 /* ProgressBar marker */
 .vjs-marker {
-    background-color: rgba(255, 255, 255, 1);
+  background-color: rgba(255, 255, 255, 1);
 }
 
 /* Big "Play" Button */
@@ -196,3 +196,13 @@ div {
   padding-left: 0px;
   padding-right: 0px;
 }
+
+video[poster] {
+  object-fit: cover;
+  background-color: transparent;
+}
+
+.vjs-poster {
+  background-size: cover !important;
+  object-fit: cover !important;
+}

src/invidious.cr

@@ -264,8 +264,7 @@ get "/watch" do |env|
     hlsvp = hlsvp.gsub("https://manifest.googlevideo.com", host_url)
   end
 
-  # TODO: Find highest resolution thumbnail automatically
-  thumbnail = "https://i.ytimg.com/vi/#{video.id}/mqdefault.jpg"
+  thumbnail = "/vi/#{video.id}/maxres.jpg"
 
   if params[:raw]
     url = fmt_stream[0]["url"]
@@ -364,8 +363,7 @@ get "/embed/:id" do |env|
     hlsvp = hlsvp.gsub("https://manifest.googlevideo.com", host_url)
   end
 
-  # TODO: Find highest resolution thumbnail automatically
-  thumbnail = "https://i.ytimg.com/vi/#{video.id}/mqdefault.jpg"
+  thumbnail = "/vi/#{video.id}/maxres.jpg"
 
   if params[:raw]
     url = fmt_stream[0]["url"]
@@ -1478,7 +1476,7 @@ get "/feed/channel/:ucid" do |env|
 
           xml.element("media:group") do
             xml.element("media:title") { xml.text video.title }
-            xml.element("media:thumbnail", url: "https://i.ytimg.com/vi/#{video.id}/mqdefault.jpg",
+            xml.element("media:thumbnail", url: "/vi/#{video.id}/mqdefault.jpg",
               width: "320", height: "180")
             xml.element("media:description") { xml.text video.description }
           end
@@ -1583,7 +1581,7 @@ get "/feed/private" do |env|
 
           xml.element("media:group") do
             xml.element("media:title") { xml.text video.title }
-            xml.element("media:thumbnail", url: "https://i.ytimg.com/vi/#{video.id}/mqdefault.jpg",
+            xml.element("media:thumbnail", url: "/vi/#{video.id}/mqdefault.jpg",
               width: "320", height: "180")
           end
         end
@@ -2969,6 +2967,46 @@ get "/videoplayback" do |env|
   end
 end
 
+get "/vi/:id/:name" do |env|
+  id = env.params.url["id"]
+  name = env.params.url["name"]
+
+  host = "https://i.ytimg.com"
+  client = make_client(URI.parse(host))
+
+  if name == "maxres.jpg"
+    VIDEO_THUMBNAILS.each do |thumb|
+      if client.head("/vi/#{id}/#{thumb[:url]}.jpg").status_code == 200
+        name = thumb[:url] + ".jpg"
+        break
+      end
+    end
+  end
+  url = "/vi/#{id}/#{name}"
+
+  client.get(url) do |response|
+    env.response.status_code = response.status_code
+
+    response.headers.each do |key, value|
+      env.response.headers[key] = value
+    end
+
+    env.response.headers["Access-Control-Allow-Origin"] = "*"
+
+    begin
+      chunk_size = 4096
+      size = 1
+      while size > 0
+        size = IO.copy(response.body_io, env.response.output, chunk_size)
+        env.response.flush
+        Fiber.yield
+      end
+    rescue ex
+      break
+    end
+  end
+end
+
 error 404 do |env|
   error_message = "404 Page not found"
   templated "error"

src/invidious/videos.cr

@@ -112,11 +112,11 @@ REGIONS        = {"AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ", "AR", "A
 BYPASS_REGIONS = {"CA", "DE", "FR", "JP", "RU", "UK"}
 
 VIDEO_THUMBNAILS = {
-  {name: "default", url: "default", height: 90, width: 120},
-  {name: "medium", url: "mqdefault", height: 180, width: 320},
-  {name: "high", url: "hqdefault", height: 360, width: 480},
+  {name: "maxresdefault", url: "maxresdefault", height: 720, width: 1280},
   {name: "sddefault", url: "sddefault", height: 480, width: 640},
-  {name: "maxresdefault", url: "maxresdefault", height: 1280, width: 720},
+  {name: "high", url: "hqdefault", height: 360, width: 480},
+  {name: "medium", url: "mqdefault", height: 180, width: 320},
+  {name: "default", url: "default", height: 90, width: 120},
   {name: "start", url: "1", height: 90, width: 120},
   {name: "middle", url: "2", height: 90, width: 120},
   {name: "end", url: "3", height: 90, width: 120},

src/invidious/views/components/video.ecr

@@ -8,7 +8,7 @@
         <a style="width:100%;" href="/watch?v=<%= video.id %><%= params %>">
             <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
             <% else %>
-            <img style="width:100%;" src="https://i.ytimg.com/vi/<%= video.id %>/mqdefault.jpg"/>
+            <img style="width:100%;" src="/vi/<%= video.id %>/mqdefault.jpg"/>
             <% end %>
             <p><%= video.title %></p>
         </a>

src/invidious/views/watch.ecr

@@ -5,7 +5,7 @@
 <meta property="og:site_name" content="Invidious">
 <meta property="og:url" content="<%= host_url %>/watch?v=<%= video.id %>">
 <meta property="og:title" content="<%= HTML.escape(video.title) %>">
-<meta property="og:image" content="https://i.ytimg.com/vi/<%= video.id %>/hqdefault.jpg">
+<meta property="og:image" content="/vi/<%= video.id %>/maxres.jpg">
 <meta property="og:description" content="<%= description %>">
 <meta property="og:type" content="video.other">
 <meta property="og:video:url" content="<%= host_url %>/embed/<%= video.id %>">