Parse channel handle and display it on channel page

It also fixes some inconsistencies with the CSS and HTML that was
introduced in https://github.com/iv-org/invidious/pull/5617 but I didn't
really noticed about because it looked fine in the Invidious frontend.

I also added a comment about the `break` statement in the metadata_rows
row iteration because I didn't get why that `break` was there.

Closes https://github.com/iv-org/invidious/issues/5638

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 {
+.channel-profile > .channel-info > .channel-metadata > .channel-metadata-item {
-  font-style: italic;
   font-size: .8em;
   font-weight: lighter;
 }
@@ -418,7 +417,7 @@ 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-metadata > .channel-metadata-item
 {
   overflow-wrap: anywhere;
 }

src/invidious/channels/about.cr

@@ -2,6 +2,7 @@
 record AboutChannel,
   ucid : String,
   author : String,
+  author_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
+  author_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") }
+      author_handle_part = metadata_parts.try &.as_a.find { |i| i.dig?("text", "content").try &.as_s.includes?("@") }
+      if !author_handle_part.nil?
+        author_handle = author_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 bellow
+      break if sub_count != 0 && !pronouns.nil? && !author_handle.nil?
     end
   end
 
   AboutChannel.new(
     ucid: ucid,
     author: author,
+    author_handle: author_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 "authorHandle", channel.author_handle
         json.field "authorId", channel.ucid
         json.field "authorUrl", channel.author_url
 

src/invidious/views/components/channel_info.ecr

@@ -12,10 +12,17 @@
     <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 %>
+                <span class="channel-metadata">
-            </div>
+                    <br/>
+                    <% if !channel.author_handle.nil? %>
+                    <span class="channel-metadata-item"><b><%= channel.author_handle %></b></span>
+                    <span>•</span>
+                    <% end %>
+                    <% if !channel.pronouns.nil? %><span class="channel-metadata-item"><%= channel.pronouns %></span><% end %>
+                </span>
+            </span>
         </div>
     </div>