Add channel watermark to player

assets/css/player.css

@@ -262,3 +262,23 @@ video.video-js {
     overflow-x: hidden;
   }
 }
+
+
+.video-js div.channel-watermark-container {
+  background-color: transparent !important;
+}
+
+.channel-watermark-container {
+  margin: 5px;
+  opacity: 0.7;
+  transition: opacity .25s cubic-bezier(0,0,.2,1);
+}
+
+.channel-watermark-container:hover {
+  opacity: 1
+}
+
+.channel-watermark {
+  width: 40px;
+  height: 40px;
+}

assets/js/player.js

@@ -764,6 +764,24 @@ if (location.pathname.startsWith('/embed/')) {
     cb.addChild(watch_on_invidious_button);
 }
 
+// Channel watermark
+if (video_data.watermark) {
+    const watermark_html = `<a href="/channel/${video_data.ucid}"><img class="channel-watermark" src="${video_data.watermark.thumbnailURL}"/></a>`;
+    
+    player.overlay({
+        overlays: [
+            { 
+                start: Math.round(parseInt(video_data.watermark.startTimeMs) / 1000), 
+                content: watermark_html, 
+                end: Math.round(parseInt(video_data.watermark.endTimeMs) / 1000), 
+                align: 'bottom-right',
+                showBackground: false,
+                class: "channel-watermark-container"
+            },
+        ]
+    });
+};
+
 addEventListener('DOMContentLoaded', function () {
     // Save time during redirection on another instance
     const changeInstanceLink = document.querySelector('#watch-on-another-invidious-instance > a');

src/invidious/routes/images.cr

@@ -206,4 +206,44 @@ module Invidious::Routes::Images
     rescue ex
     end
   end
+
+  # i.ytimg.com/an/* used for the thumbnail of channel watermarks
+  def self.yt_an_image(env)
+    id = env.params.url["id"]
+    name = env.params.url["name"]
+
+    url = "https://i.ytimg.com/an/#{id}/#{name}"
+    url += "?#{env.params.query}" if !env.params.query.empty?
+
+    headers = HTTP::Headers.new
+
+    REQUEST_HEADERS_WHITELIST.each do |header|
+      if env.request.headers[header]?
+        headers[header] = env.request.headers[header]
+      end
+    end
+
+    begin
+      # TODO deduplicate repeated image proxy logic
+      HTTP::Client.get(url) do |response|
+        env.response.status_code = response.status_code
+
+        response.headers.each do |key, value|
+          if !RESPONSE_HEADERS_BLACKLIST.includes?(key.downcase)
+            env.response.headers[key] = value
+          end
+        end
+
+        env.response.headers["Access-Control-Allow-Origin"] = "*"
+
+        if response.status_code >= 300
+          env.response.headers.delete("Transfer-Encoding")
+          return
+        end
+
+        return proxy_file(response, env)
+      end
+    rescue ex
+    end
+  end
 end

src/invidious/routing.cr

@@ -219,6 +219,7 @@ module Invidious::Routing
     get "/s_p/:id/:name", Routes::Images, :s_p_image
     get "/yts/img/:name", Routes::Images, :yts_image
     get "/vi/:id/:name", Routes::Images, :thumbnails
+    get "/an/:id/:name", Routes::Images, :yt_an_image
   end
 
   # -------------------

src/invidious/videos/parser.cr

@@ -383,8 +383,8 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
   if watermark = player_response.dig?("annotations", 0, "playerAnnotationsExpandedRenderer", "featuredChannel")
     watermark_data = {
       "startTimeMs"  => watermark["startTimeMs"],
-      "endTimeMS"    => watermark["endTimeMs"],
-      "thumbnailURL" => watermark["watermark"]["thumbnails"][0]["url"],
+      "endTimeMs"    => watermark["endTimeMs"],
+      "thumbnailURL" => JSON::Any.new(URI.parse(watermark["watermark"]["thumbnails"][0]["url"].as_s).request_target),
     }
   else
     watermark_data = {} of String => JSON::Any

src/invidious/views/components/player.ecr

@@ -15,7 +15,7 @@
                  if (fmt["mimeType"].as_s.starts_with?("audio/mp4") && bandwidth > best_m4a_stream_bitrate)
                    best_m4a_stream_bitrate = bandwidth
                    best_m4a_stream_index = i
-                 end
+                end
                end
 
                audio_streams.each_with_index do |fmt, i|

src/invidious/views/watch.ecr

@@ -28,6 +28,12 @@
 <meta name="twitter:player:height" content="720">
 <link rel="alternate" href="https://www.youtube.com/watch?v=<%= video.id %>">
 <%= rendered "components/player_sources" %>
+
+<% if video.watermark? %>
+    <link rel="stylesheet" href="/videojs/videojs-overlay/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
+    <script src="/videojs/videojs-overlay/videojs-overlay.js?v=<%= ASSET_COMMIT %>"></script>
+<% end %>
+
 <title><%= title %> - Invidious</title>
 
 <!-- Description expansion also updates the 'Show more' button to 'Show less' so
@@ -48,6 +54,7 @@ we're going to need to do it here in order to allow for translations.
 <%=
 {
     "id" => video.id,
+    "ucid" => video.ucid,
     "index" => continuation,
     "plid" => plid,
     "length_seconds" => video.length_seconds.to_f,
@@ -63,6 +70,7 @@ we're going to need to do it here in order to allow for translations.
     "preferences" => preferences,
     "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
     "vr" => video.is_vr,
+    "watermark" => video.watermark?,
     "projection_type" => video.projection_type,
     "local_disabled" => CONFIG.disabled?("local"),
     "support_reddit" => true