From 1b5fbfc13efa9eace904d24dc89b7fdf72c1ce52 Mon Sep 17 00:00:00 2001
From: techmetx11 <techmetx11@disroot.org>
Date: Sat, 14 Jan 2023 09:38:55 +0100
Subject: [PATCH 1/3] Video: Add support for the music section

---
 locales/en-US.json             |  3 +++
 src/invidious/videos.cr        |  3 +++
 src/invidious/videos/parser.cr | 22 ++++++++++++++++++++++
 src/invidious/views/watch.ecr  |  9 +++++++++
 4 files changed, 37 insertions(+)

diff --git a/locales/en-US.json b/locales/en-US.json
index 12955665..bc6a3275 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -188,6 +188,9 @@
     "Engagement: ": "Engagement: ",
     "Whitelisted regions: ": "Whitelisted regions: ",
     "Blacklisted regions: ": "Blacklisted regions: ",
+    "Music artist: ": "Music artist: ",
+    "Music album: ": "Music album: ",
+    "Music licenses: ": "Music licenses: ",
     "Shared `x`": "Shared `x`",
     "Premieres in `x`": "Premieres in `x`",
     "Premieres `x`": "Premieres `x`",
diff --git a/src/invidious/videos.cr b/src/invidious/videos.cr
index d626c7d1..be4854fe 100644
--- a/src/invidious/videos.cr
+++ b/src/invidious/videos.cr
@@ -314,6 +314,9 @@ 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
diff --git a/src/invidious/videos/parser.cr b/src/invidious/videos/parser.cr
index 5df49286..4540dd13 100644
--- a/src/invidious/videos/parser.cr
+++ b/src/invidious/videos/parser.cr
@@ -309,6 +309,24 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
     end
   end
 
+  # Music section
+
+  music_desc = player_response.dig?("engagementPanels", 1, "engagementPanelSectionListRenderer", "content", "structuredDescriptionContentRenderer", "items", 2, "videoDescriptionMusicSectionRenderer", "carouselLockups", 0, "carouselLockupRenderer", "infoRows").try &.as_a
+  artist = nil
+  album = nil
+  music_licenses = nil
+
+  music_desc.try &.each do |desc|
+    desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
+    if desc_title == "ARTIST"
+      artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+    elsif desc_title == "ALBUM"
+      album = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+    elsif desc_title == "LICENSES"
+      music_licenses = extract_text(desc.dig?("infoRowRenderer", "expandedMetadata"))
+    end
+  end
+
   # Author infos
 
   author = video_details["author"]?.try &.as_s
@@ -359,6 +377,10 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
     "genre"     => JSON::Any.new(genre.try &.as_s || ""),
     "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_album"    => JSON::Any.new(album || ""),
+    "music_licenses" => JSON::Any.new(music_licenses || ""),
     # Author infos
     "author"          => JSON::Any.new(author || ""),
     "ucid"            => JSON::Any.new(ucid || ""),
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index a6f2e524..beab1bb2 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -196,6 +196,15 @@ 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>
 

From fe5b81f2c3caf37e10fd3284a49146e7aefb1530 Mon Sep 17 00:00:00 2001
From: techmetx11 <techmetx11@disroot.org>
Date: Mon, 16 Jan 2023 13:58:05 +0100
Subject: [PATCH 2/3] Add support for multiple songs

---
 assets/css/default.css         | 35 ++++++++++++++++++++--------
 locales/en-US.json             |  5 ++--
 src/invidious/videos.cr        | 12 +++++++---
 src/invidious/videos/music.cr  | 12 ++++++++++
 src/invidious/videos/parser.cr | 33 ++++++++++++++------------
 src/invidious/views/watch.ecr  | 42 +++++++++++++++++++++++++---------
 6 files changed, 97 insertions(+), 42 deletions(-)
 create mode 100644 src/invidious/videos/music.cr

diff --git a/assets/css/default.css b/assets/css/default.css
index 80bf6a20..4ec6f720 100644
--- a/assets/css/default.css
+++ b/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 {
-	unicode-bidi: plaintext;
-	text-align: start;
+#description-box,
+#music-description-box,
+#musicDescriptionWrapper {
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 #descriptionWrapper {
-	max-width: 600px;
-	white-space: pre-wrap;
+  max-width: 600px;
+  white-space: pre-wrap;
+}
+
+#musicDescriptionWrapper {
+  max-width: 600px;
+}
+
+#music-description-title {
+  margin-bottom: 0px;
 }
 
 /* Center the "invidious" logo on the search page */
diff --git a/locales/en-US.json b/locales/en-US.json
index bc6a3275..20f1a46d 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -188,9 +188,8 @@
     "Engagement: ": "Engagement: ",
     "Whitelisted regions: ": "Whitelisted regions: ",
     "Blacklisted regions: ": "Blacklisted regions: ",
-    "Music artist: ": "Music artist: ",
-    "Music album: ": "Music album: ",
-    "Music licenses: ": "Music licenses: ",
+    "Artist: ": "Artist: ",
+    "Album: ": "Album: ",
     "Shared `x`": "Shared `x`",
     "Premieres in `x`": "Premieres in `x`",
     "Premieres `x`": "Premieres `x`",
diff --git a/src/invidious/videos.cr b/src/invidious/videos.cr
index be4854fe..aa3ef1a8 100644
--- a/src/invidious/videos.cr
+++ b/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
diff --git a/src/invidious/videos/music.cr b/src/invidious/videos/music.cr
new file mode 100644
index 00000000..402ae46f
--- /dev/null
+++ b/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
diff --git a/src/invidious/videos/parser.cr b/src/invidious/videos/parser.cr
index 4540dd13..69b04cb6 100644
--- a/src/invidious/videos/parser.cr
+++ b/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
-  artist = nil
-  album = nil
-  music_licenses = nil
+  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|
+    artist = nil
+    album = nil
+    music_license = nil
 
-  music_desc.try &.each do |desc|
-    desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
-    if desc_title == "ARTIST"
-      artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
-    elsif desc_title == "ALBUM"
-      album = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
-    elsif desc_title == "LICENSES"
-      music_licenses = extract_text(desc.dig?("infoRowRenderer", "expandedMetadata"))
+    music_desc.dig?("carouselLockupRenderer", "infoRows").try &.as_a.try &.each do |desc|
+      desc_title = extract_text(desc.dig?("infoRowRenderer", "title"))
+      if desc_title == "ARTIST"
+        artist = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+      elsif desc_title == "ALBUM"
+        album = extract_text(desc.dig?("infoRowRenderer", "defaultMetadata"))
+      elsif desc_title == "LICENSES"
+        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_album"    => JSON::Any.new(album || ""),
-    "music_licenses" => JSON::Any.new(music_licenses || ""),
+    "music" => JSON.parse(music_list.to_json),
     # Author infos
     "author"          => JSON::Any.new(author || ""),
     "ucid"            => JSON::Any.new(ucid || ""),
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index beab1bb2..207dae18 100644
--- a/src/invidious/views/watch.ecr
+++ b/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 %>

From caf9520c865133eb669025f9cd64607546e09a89 Mon Sep 17 00:00:00 2001
From: techmetx11 <techmetx11@disroot.org>
Date: Sun, 22 Jan 2023 00:12:04 +0100
Subject: [PATCH 3/3] Major improvements

---
 assets/css/default.css         | 41 +++++++++++++++++++++-------------
 locales/en-US.json             |  1 +
 src/invidious/videos.cr        |  9 +++-----
 src/invidious/videos/parser.cr | 14 +++++++-----
 src/invidious/views/watch.ecr  | 39 +++++++++++++-------------------
 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-description-title {
-  margin-bottom: 0px;
+#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;
+}
+
+/* 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>
+                    <% 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>
-                    <% 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>