Channels: parse pronouns and display them on channel page (#5617)

assets/css/default.css

@@ -75,6 +75,16 @@ body {
   height: auto;
 }
 
+.channel-profile > .channel-name-pronouns {
+    display: inline-block;
+}
+
+.channel-profile > .channel-name-pronouns > .channel-pronouns {
+  font-style: italic;
+  font-size: .8em;
+  font-weight: lighter;
+}
+
 body a.channel-owner {
   background-color: #008bec;
   color: #fff;
@@ -406,7 +416,12 @@ 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 { overflow-wrap: anywhere;}
+
+.channel-profile > .channel-name,
+.channel-profile > .channel-name-pronouns >  .channel-name 
+{
+  overflow-wrap: anywhere;
+}
 
 
 /*

src/invidious/channels/about.cr

@@ -12,6 +12,7 @@ record AboutChannel,
   sub_count : Int32,
   joined : Time,
   is_family_friendly : Bool,
+  pronouns : String?,
   allowed_regions : Array(String),
   tabs : Array(String),
   tags : Array(String),
@@ -160,14 +161,21 @@ def get_about_info(ucid, locale) : AboutChannel
   end
 
   sub_count = 0
+  pronouns = nil
 
   if (metadata_rows = initdata.dig?("header", "pageHeaderRenderer", "content", "pageHeaderViewModel", "metadata", "contentMetadataViewModel", "metadataRows").try &.as_a)
     metadata_rows.each do |row|
-      metadata_part = row.dig?("metadataParts").try &.as_a.find { |i| i.dig?("text", "content").try &.as_s.includes?("subscribers") }
-      if !metadata_part.nil?
-        sub_count = short_text_to_number(metadata_part.dig("text", "content").as_s.split(" ")[0]).to_i32
+      subscribe_metadata_part = row.dig?("metadataParts").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
-      break if sub_count != 0
+
+      pronoun_metadata_part = row.dig?("metadataParts").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?
     end
   end
 
@@ -184,6 +192,7 @@ def get_about_info(ucid, locale) : AboutChannel
     sub_count: sub_count,
     joined: joined,
     is_family_friendly: is_family_friendly,
+    pronouns: pronouns,
     allowed_regions: allowed_regions,
     tabs: tab_names,
     tags: tags,

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

@@ -104,6 +104,7 @@ module Invidious::Routes::API::V1::Channels
         json.field "tabs", channel.tabs
         json.field "tags", channel.tags
         json.field "authorVerified", channel.verified
+        json.field "pronouns", channel.pronouns
 
         json.field "latestVideos" do
           json.array do

src/invidious/views/components/channel_info.ecr

@@ -12,7 +12,10 @@
     <div class="pure-u-1-2 flex-left flexible">
         <div class="channel-profile">
             <img src="/ggpht<%= channel_profile_pic %>" alt="" />
-            <span class="channel-name"><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
+            <div class="channel-name-pronouns">
+                <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>
         </div>
     </div>