Add support for multiple songs

assets/css/default.css

@@ -490,26 +490,31 @@ hr {
 }
 
 /* Description Expansion Styling*/
-#descexpansionbutton {
+#descexpansionbutton,
+#musicdescexpansionbutton {
   display: none
 }
 
-#descexpansionbutton ~ div {
+#descexpansionbutton ~ div,
+#musicdescexpansionbutton ~ div {
   overflow: hidden;
   height: 8.3em;
 }
 
-#descexpansionbutton:checked ~ div {
+#descexpansionbutton:checked ~ div,
+#musicdescexpansionbutton:checked ~ div {
   overflow: unset;
   height: 100%;
 }
 
-#descexpansionbutton ~ label {
+#descexpansionbutton ~ label,
+#musicdescexpansionbutton ~ label {
   order: 1;
   margin-top: 20px;
 }
 
-label[for="descexpansionbutton"]:hover {
+label[for="descexpansionbutton"]:hover,
+label[for="musicdescexpansionbutton"]:hover {
   cursor: pointer;
 }
 
@@ -521,14 +526,24 @@ h4,
 h5,
 p,
 #descriptionWrapper,
-#description-box {
+#description-box,
-	unicode-bidi: plaintext;
+#music-description-box,
-	text-align: start;
+#musicDescriptionWrapper {
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 #descriptionWrapper {
-	max-width: 600px;
+  max-width: 600px;
-	white-space: pre-wrap;
+  white-space: pre-wrap;
+}
+
+#musicDescriptionWrapper {
+  max-width: 600px;
+}
+
+#music-description-title {
+  margin-bottom: 0px;
 }
 
 /* Center the "invidious" logo on the search page */

locales/en-US.json

@@ -188,9 +188,8 @@
     "Engagement: ": "Engagement: ",
     "Whitelisted regions: ": "Whitelisted regions: ",
     "Blacklisted regions: ": "Blacklisted regions: ",
-    "Music artist: ": "Music artist: ",
+    "Artist: ": "Artist: ",
-    "Music album: ": "Music album: ",
+    "Album: ": "Album: ",
-    "Music licenses: ": "Music licenses: ",
     "Shared `x`": "Shared `x`",
     "Premieres in `x`": "Premieres in `x`",
     "Premieres `x`": "Premieres `x`",

src/invidious/videos.cr

@@ -247,6 +247,15 @@ struct Video
     info["reason"]?.try &.as_s
   end
 
+  def music : Array(VideoMusic)
+    music_list = Array(VideoMusic).new
+
+    info["music"].as_a.each do |music_json|
+      music_list << VideoMusic.new(music_json["album"].as_s, music_json["artist"].as_s, music_json["license"].as_s)
+    end
+    return music_list
+  end
+
   # Macros defining getters/setters for various types of data
 
   private macro getset_string(name)
@@ -314,9 +323,6 @@ struct Video
   getset_string genre
   getset_string genreUcid
   getset_string license
-  getset_string music_artist
-  getset_string music_album
-  getset_string music_licenses
   getset_string shortDescription
   getset_string subCountText
   getset_string title

src/invidious/videos/music.cr

@@ -0,0 +1,12 @@
+require "json"
+
+struct VideoMusic
+  include JSON::Serializable
+
+  property album : String
+  property artist : String
+  property license : String
+
+  def initialize(@album : String, @artist : String, @license : String)
+  end
+end

src/invidious/videos/parser.cr

@@ -311,20 +311,25 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
 
   # Music section
 
-  music_desc = player_response.dig?("engagementPanels", 1, "engagementPanelSectionListRenderer", "content", "structuredDescriptionContentRenderer", "items", 2, "videoDescriptionMusicSectionRenderer", "carouselLockups", 0, "carouselLockupRenderer", "infoRows").try &.as_a
+  music_list = [] of VideoMusic
-  artist = nil
+  music_desclist = player_response.dig?("engagementPanels", 1, "engagementPanelSectionListRenderer", "content", "structuredDescriptionContentRenderer", "items", 2, "videoDescriptionMusicSectionRenderer", "carouselLockups").try &.as_a
-  album = nil
+  music_desclist.try &.each do |music_desc|
-  music_licenses = nil
+    artist = nil
+    album = nil
+    music_license = nil
 
-  music_desc.try &.each do |desc|
+    music_desc.dig?("carouselLockupRenderer", "infoRows").try &.as_a.try &.each do |desc|
-    desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
+      desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
-    if desc_title == "ARTIST"
+      if desc_title == "ARTIST"
-      artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+        artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
-    elsif desc_title == "ALBUM"
+      elsif desc_title == "ALBUM"
-      album = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+        album = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
-    elsif desc_title == "LICENSES"
+      elsif desc_title == "LICENSES"
-      music_licenses = extract_text(desc.dig?("infoRowRenderer", "expandedMetadata"))
+        music_license = extract_text(desc.dig?("infoRowRenderer", "expandedMetadata"))
+      end
     end
+    music = VideoMusic.new(album.to_s, artist.to_s, music_license.to_s)
+    music_list << music
   end
 
   # Author infos
@@ -378,9 +383,7 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
     "genreUcid" => JSON::Any.new(genre_ucid.try &.as_s || ""),
     "license"   => JSON::Any.new(license.try &.as_s || ""),
     # Music section
-    "music_artist"   => JSON::Any.new(artist || ""),
+    "music" => JSON.parse(music_list.to_json),
-    "music_album"    => JSON::Any.new(album || ""),
-    "music_licenses" => JSON::Any.new(music_licenses || ""),
     # Author infos
     "author"          => JSON::Any.new(author || ""),
     "ucid"            => JSON::Any.new(ucid || ""),

src/invidious/views/watch.ecr

@@ -34,11 +34,13 @@
 we're going to need to do it here in order to allow for translations.
  -->
 <style>
-#descexpansionbutton ~ label > a::after {
+#descexpansionbutton ~ label > a::after,
+#musicdescexpansionbutton ~ label > a::after {
     content: "<%= translate(locale, "Show more") %>"
 }
 
-#descexpansionbutton:checked ~ label > a::after {
+#descexpansionbutton:checked ~ label > a::after,
+#musicdescexpansionbutton:checked ~ label > a::after {
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
@@ -196,15 +198,6 @@ we're going to need to do it here in order to allow for translations.
                     <% end %>
                 </p>
             <% end %>
-            <% if !video.music_artist.empty? %>
-                <p id="music_artist"><%= translate(locale, "Music artist: ") %><%= video.music_artist %></p>
-            <% end %>
-            <% if !video.music_album.empty? %>
-                <p id="music_album"><%= translate(locale, "Music album: ") %><%= video.music_album %></p>
-            <% end %>
-            <% if !video.music_licenses.empty? %>
-                <p id="music_licenses"><%= translate(locale, "Music licenses: ") %><%= video.music_licenses %></p>
-            <% end %>
         </div>
     </div>
 
@@ -244,6 +237,33 @@ we're going to need to do it here in order to allow for translations.
 
             <hr>
 
+            <% if !video.music.empty? %>
+                <h3 id="music-description-title"><%= translate(locale, "Music") %></h3>
+                <div id="music-description-box">
+                    <% if video.music.size == 1 %>
+                        <div id="musicDescriptionWrapper">
+                            <p id="music-artist"><%= translate(locale, "Artist: ") %><%= video.music[0].artist %></p>
+                            <p id="music-album"><%= translate(locale, "Album: ") %><%= video.music[0].album %></p>
+                            <p id="music-license"><%= translate(locale, "License: ") %><%= video.music[0].license %></p>
+                        </div>
+                    <% else %>
+                        <input id="musicdescexpansionbutton" type="checkbox"/>
+                        <div id="musicDescriptionWrapper">
+                            <% video.music.each do |music| %>
+                                <p id="music-artist"><%= translate(locale, "Artist: ") %><%= music.artist %></p>
+                                <p id="music-album"><%= translate(locale, "Album: ") %><%= music.album %></p>
+                                <p id="music-license"><%= translate(locale, "License: ") %><%= music.license %></p>
+                                <hr>
+                            <% end %>
+                        </div>
+                        <label for="musicdescexpansionbutton">
+                            <a></a>
+                        </label>
+                    <% end %>
+                </div>
+            <hr>
+
+            <% end %>
             <div id="comments">
                 <% if nojs %>
                     <%= comment_html %>