Major improvements

5 files changed, 55 insertions, 49 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 4ec6f720..9788e9f7 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -491,30 +491,27 @@ hr {
 
 /* Description Expansion Styling*/
 #descexpansionbutton,
-#musicdescexpansionbutton {
-  display: none
+#music-desc-expansion {
+  display: none;
 }
 
-#descexpansionbutton ~ div,
-#musicdescexpansionbutton ~ div {
+#descexpansionbutton ~ div {
   overflow: hidden;
   height: 8.3em;
 }
 
-#descexpansionbutton:checked ~ div,
-#musicdescexpansionbutton:checked ~ div {
+#descexpansionbutton:checked ~ div {
   overflow: unset;
   height: 100%;
 }
 
-#descexpansionbutton ~ label,
-#musicdescexpansionbutton ~ label {
+#descexpansionbutton ~ label {
   order: 1;
   margin-top: 20px;
 }
 
 label[for="descexpansionbutton"]:hover,
-label[for="musicdescexpansionbutton"]:hover {
+label[for="music-desc-expansion"]:hover {
   cursor: pointer;
 }
 
@@ -527,8 +524,7 @@ h5,
 p,
 #descriptionWrapper,
 #description-box,
-#music-description-box,
-#musicDescriptionWrapper {
+#music-description-box {
   unicode-bidi: plaintext;
   text-align: start;
 }
@@ -538,12 +534,27 @@ p,
   white-space: pre-wrap;
 }
 
-#musicDescriptionWrapper {
-  max-width: 600px;
+#music-description-box {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ #music-description-box {
+  display: block;
+}
+
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down {
+  display: inline;
 }
 
-#music-description-title {
-  margin-bottom: 0px;
+/* Select all the music items except the first one */
+.music-item + .music-item {
+  border-top: 1px solid #ffffff;
 }
 
 /* Center the "invidious" logo on the search page */
diff --git a/locales/en-US.json b/locales/en-US.json
index 20f1a46d..a5c16fd7 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -188,6 +188,7 @@
     "Engagement: ": "Engagement: ",
     "Whitelisted regions: ": "Whitelisted regions: ",
     "Blacklisted regions: ": "Blacklisted regions: ",
+    "Music in this video": "Music in this video",
     "Artist: ": "Artist: ",
     "Album: ": "Album: ",
     "Shared `x`": "Shared `x`",
diff --git a/src/invidious/videos.cr b/src/invidious/videos.cr
index aa3ef1a8..436ac82d 100644
--- a/src/invidious/videos.cr
+++ b/src/invidious/videos.cr
@@ -248,12 +248,9 @@ struct Video
   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
+    info["music"].as_a.map { |music_json|
+      VideoMusic.new(music_json["album"].as_s, music_json["artist"].as_s, music_json["license"].as_s)
+    }
   end
 
   # Macros defining getters/setters for various types of data
diff --git a/src/invidious/videos/parser.cr b/src/invidious/videos/parser.cr
index 69b04cb6..0abac32f 100644
--- a/src/invidious/videos/parser.cr
+++ b/src/invidious/videos/parser.cr
@@ -312,13 +312,18 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
   # Music section
 
   music_list = [] of VideoMusic
-  music_desclist = player_response.dig?("engagementPanels", 1, "engagementPanelSectionListRenderer", "content", "structuredDescriptionContentRenderer", "items", 2, "videoDescriptionMusicSectionRenderer", "carouselLockups").try &.as_a
-  music_desclist.try &.each do |music_desc|
+  music_desclist = player_response.dig?(
+    "engagementPanels", 1, "engagementPanelSectionListRenderer",
+    "content", "structuredDescriptionContentRenderer", "items", 2,
+    "videoDescriptionMusicSectionRenderer", "carouselLockups"
+  )
+
+  music_desclist.try &.as_a.each do |music_desc|
     artist = nil
     album = nil
     music_license = nil
 
-    music_desc.dig?("carouselLockupRenderer", "infoRows").try &.as_a.try &.each do |desc|
+    music_desc.dig?("carouselLockupRenderer", "infoRows").try &.as_a.each do |desc|
       desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
       if desc_title == "ARTIST"
         artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
@@ -328,8 +333,7 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
         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
+    music_list << VideoMusic.new(album.to_s, artist.to_s, music_license.to_s)
   end
 
   # Author infos
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 207dae18..666eb3b0 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -34,13 +34,11 @@
 we're going to need to do it here in order to allow for translations.
  -->
 <style>
-#descexpansionbutton ~ label > a::after,
-#musicdescexpansionbutton ~ label > a::after {
+#descexpansionbutton ~ label > a::after {
     content: "<%= translate(locale, "Show more") %>"
 }
 
-#descexpansionbutton:checked ~ label > a::after,
-#musicdescexpansionbutton:checked ~ label > a::after {
+#descexpansionbutton:checked ~ label > a::after {
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
@@ -238,27 +236,22 @@ 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>
+                <input id="music-desc-expansion" type="checkbox"/>
+                <label for="music-desc-expansion">
+                    <h3 id="music-description-title">
+                        <%= translate(locale, "Music in this video") %>
+                        <span class="icon ion-ios-arrow-up"></span>
+                        <span class="icon ion-ios-arrow-down"></span>
+                    </h3>
+                </label>
+
                 <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 %>
+                    <% video.music.each do |music| %>
+                        <div class="music-item">
+                            <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>
                         </div>
-                        <label for="musicdescexpansionbutton">
-                            <a></a>
-                        </label>
                     <% end %>
                 </div>
             <hr>