Merge 17e98d398797aca9c1b18e4b6416852720be8fa9 into 749791cdf1316bc89415d27d503042d3f6b3f398

assets/css/default.css

@@ -75,12 +75,11 @@ body {
   height: auto;
 }
 
-.channel-profile > .channel-name-pronouns {
+.channel-profile > .channel-info {
     display: inline-block;
 }
 
-.channel-profile > .channel-name-pronouns > .channel-pronouns {
-  font-style: italic;
+.channel-profile > .channel-info > .channel-metadata > .channel-metadata-item {
   font-size: .8em;
   font-weight: lighter;
 }
@@ -417,8 +416,8 @@ input[type="search"]::-webkit-search-cancel-button {
 p.channel-name { margin: 0; overflow-wrap: anywhere;}
 p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
 
-.channel-profile > .channel-name,
-.channel-profile > .channel-name-pronouns >  .channel-name 
+.channel-profile > .channel-info > .channel-name,
+.channel-profile > .channel-info > .channel-metadata > .channel-metadata-item
 {
   overflow-wrap: anywhere;
 }
@@ -902,4 +901,4 @@ h1, h2, h3, h4, h5, p,
 .error-issue-template {
   padding: 20px;
   background: rgba(0, 0, 0, 0.12345);
-}
+}

src/invidious/channels/about.cr

@@ -2,6 +2,7 @@
 record AboutChannel,
   ucid : String,
   author : String,
+  channel_handle : String?,
   auto_generated : Bool,
   author_url : String,
   author_thumbnail : String,
@@ -162,26 +163,37 @@ def get_about_info(ucid, locale) : AboutChannel
 
   sub_count = 0
   pronouns = nil
+  channel_handle = nil
 
   if (metadata_rows = initdata.dig?("header", "pageHeaderRenderer", "content", "pageHeaderViewModel", "metadata", "contentMetadataViewModel", "metadataRows").try &.as_a)
     metadata_rows.each do |row|
-      subscribe_metadata_part = row.dig?("metadataParts").try &.as_a.find { |i| i.dig?("text", "content").try &.as_s.includes?("subscribers") }
+      metadata_parts = row.dig?("metadataParts")
+
+      subscribe_metadata_part = metadata_parts.try &.as_a.find { |i| i.dig?("text", "content").try &.as_s.includes?("subscribers") }
       if !subscribe_metadata_part.nil?
         sub_count = short_text_to_number(subscribe_metadata_part.dig("text", "content").as_s.split(" ")[0]).to_i32
       end
 
-      pronoun_metadata_part = row.dig?("metadataParts").try &.as_a.find { |i| i.dig?("tooltip").try &.as_s.includes?("Pronouns") }
+      channel_handle_part = metadata_parts.try &.as_a.find { |i| i.dig?("text", "content").try &.as_s.includes?("@") }
+      if !channel_handle_part.nil?
+        channel_handle = channel_handle_part.dig("text", "content").as_s
+      end
+
+      pronoun_metadata_part = metadata_parts.try &.as_a.find { |i| i.dig?("tooltip").try &.as_s.includes?("Pronouns") }
       if !pronoun_metadata_part.nil?
         pronouns = pronoun_metadata_part.dig("text", "content").as_s
       end
 
-      break if sub_count != 0 && !pronouns.nil?
+      # This is to prevent processing more metadata parts if we already have
+      # all the parts we care about, which are the ones below
+      break if sub_count != 0 && !pronouns.nil? && !channel_handle.nil?
     end
   end
 
   AboutChannel.new(
     ucid: ucid,
     author: author,
+    channel_handle: channel_handle,
     auto_generated: auto_generated,
     author_url: author_url,
     author_thumbnail: author_thumbnail,

src/invidious/routes/api/v1/channels.cr

@@ -48,6 +48,7 @@ module Invidious::Routes::API::V1::Channels
       # TODO: Refactor into `to_json` for InvidiousChannel
       json.object do
         json.field "author", channel.author
+        json.field "channelHandle", channel.channel_handle
         json.field "authorId", channel.ucid
         json.field "authorUrl", channel.author_url
 

src/invidious/views/components/channel_info.ecr

@@ -12,10 +12,19 @@
     <div class="pure-u-1-2 flex-left flexible">
         <div class="channel-profile">
             <img src="/ggpht<%= channel_profile_pic %>" alt="" />
-            <div class="channel-name-pronouns">
+            <span class="channel-info">
                 <span class="channel-name"><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
-                <% if !channel.pronouns.nil? %><br /><span class="channel-pronouns"><%= channel.pronouns %></span><% end %>
-            </div>
+                <span class="channel-metadata">
+                    <br/>
+                    <% if !channel.channel_handle.nil? %>
+                    <span class="channel-metadata-item"><b><%= channel.channel_handle %></b></span>
+                    <% end %>
+                    <% if !channel.pronouns.nil? %>
+                    <span>•</span>
+                    <span class="channel-metadata-item"><%= channel.pronouns %></span>
+                    <% end %>
+                </span>
+            </span>
         </div>
     </div>