From 196fa0d7c62743a7ff1956bfcdaf144b7496058e Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 00:53:23 -0400 Subject: [PATCH 1/6] new styling to lyrics page --- src/controllers/lyrics.html | 15 ++++-- src/controllers/lyrics.js | 14 ++++++ src/styles/lyrics.scss | 91 ++++++++++++++++++++++++++++++++++++- 3 files changed, 116 insertions(+), 4 deletions(-) diff --git a/src/controllers/lyrics.html b/src/controllers/lyrics.html index d1e7b662cf..999fd2cd5c 100644 --- a/src/controllers/lyrics.html +++ b/src/controllers/lyrics.html @@ -1,6 +1,15 @@
-
-
+
+
+ Album Art +
+

+

+

+
+
+
+
-
+
\ No newline at end of file diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index f2af5c32ad..8cf13f622e 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -236,6 +236,20 @@ export default function (view) { const state = playbackManager.getPlayerState(player); currentItem = state.NowPlayingItem; + // set the song title, artist name, album name, and album primary image + document.getElementById('songTitle').textContent = currentItem.Name || "Unknown Title"; + document.getElementById('artistName').textContent = currentItem.Artists?.join(", ") || "Unknown Artist"; + document.getElementById('albumName').textContent = currentItem.Album || "Unknown Album"; + const albumArtUrl = currentItem.ImageTags?.Primary + ? ServerConnections.getApiClient(currentItem.ServerId).getImageUrl(currentItem.Id, { + type: 'Primary', + maxWidth: 300, + maxHeight: 300, + }) + : "assets/img/avatar.png"; + + document.getElementById('albumArt').src = albumArtUrl; + const serverId = state.NowPlayingItem.ServerId; const itemId = state.NowPlayingItem.Id; diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index 8642dd05b1..a8f53d0a3c 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -2,17 +2,28 @@ padding-top: 4.2em !important; display: flex; justify-content: center; + margin: 2%; +} + +.lyricWrapper { + display: flex; + flex-direction: row; + justify-content: center; + margin-right: 5em; } .dynamicLyricsContainer { + flex: 2; display: flex; flex-direction: column; + align-items: center; + text-align: center; } .lyricsLine { display: inline-block; width: fit-content; - margin: 0.1em; + margin: 0.3em; font-size: 30px; color: inherit; min-height: 2em; @@ -29,3 +40,81 @@ .dynamicLyric { cursor: pointer; } + +.songDetails { + position: fixed; + right: 1%; + top: 40%; + transform: translateY(-50%); + max-width: 20%; + text-align: center; +} + +#albumArt { + width: 100%; + border-radius: 10px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); +} + +.songInfo { + margin-top: 10px; + color: #ffffff; +} + +.songInfo h2 { + font-size: 22px; + font-weight: bold; +} + +.songInfo h3 { + font-size: 18px; +} + +.songInfo p { + font-size: 16px; + color: #bbbbbb; + margin-top: -5px; + +} + +/* move info to the top and allow lyrics to overlap */ +@media screen and (max-width: 1380px) { + .lyricWrapper { + flex-direction: column; + align-items: center; + text-align: center; + margin-right: 0; + width: 100%; + } + + .songDetails { + right: auto; + max-width: 80%; + opacity: 20%; + margin-top: -20px; + } + + #albumArt { + width: 70%; + } + + .songInfo h2 { + font-size: 25px; + } + + .songInfo h3 { + font-size: 16px; + } + + .songInfo p { + font-size: 14px; + color: #bbbbbb; + margin-top: -5px; + } + + .dynamicLyricsContainer { + position: absolute; + top: 40px; + width: 100%; + } +} \ No newline at end of file From 4f6dea432d285d2fc3f74afae94c21972e884dfc Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 01:28:37 -0400 Subject: [PATCH 2/6] ESLint fixes --- src/controllers/lyrics.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index 8cf13f622e..41105411d6 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -237,17 +237,15 @@ export default function (view) { currentItem = state.NowPlayingItem; // set the song title, artist name, album name, and album primary image - document.getElementById('songTitle').textContent = currentItem.Name || "Unknown Title"; - document.getElementById('artistName').textContent = currentItem.Artists?.join(", ") || "Unknown Artist"; - document.getElementById('albumName').textContent = currentItem.Album || "Unknown Album"; - const albumArtUrl = currentItem.ImageTags?.Primary - ? ServerConnections.getApiClient(currentItem.ServerId).getImageUrl(currentItem.Id, { - type: 'Primary', - maxWidth: 300, - maxHeight: 300, - }) - : "assets/img/avatar.png"; - + document.getElementById('songTitle').textContent = currentItem.Name || 'Unknown Title'; + document.getElementById('artistName').textContent = currentItem.Artists?.join(', ') || 'Unknown Artist'; + document.getElementById('albumName').textContent = currentItem.Album || 'Unknown Album'; + const albumArtUrl = currentItem.ImageTags?.Primary ? ServerConnections.getApiClient(currentItem.ServerId).getImageUrl(currentItem.Id, { + type: 'Primary', + maxWidth: 300, + maxHeight: 300 + }) : 'assets/img/avatar.png'; + document.getElementById('albumArt').src = albumArtUrl; const serverId = state.NowPlayingItem.ServerId; From dbeef9c5542376abc1c0b7322aee4e625d75690f Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 01:35:34 -0400 Subject: [PATCH 3/6] stylelint fixes --- src/styles/lyrics.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index a8f53d0a3c..3ff52f0627 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -58,7 +58,7 @@ .songInfo { margin-top: 10px; - color: #ffffff; + color: #fff; } .songInfo h2 { @@ -72,7 +72,7 @@ .songInfo p { font-size: 16px; - color: #bbbbbb; + color: #bbb; margin-top: -5px; } @@ -108,7 +108,7 @@ .songInfo p { font-size: 14px; - color: #bbbbbb; + color: #bbb; margin-top: -5px; } From d89eac82c8ee59bcb96ed79eeb9ad062bc6d82d0 Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 09:12:26 -0400 Subject: [PATCH 4/6] last stylelint fixes for lyrics looks --- src/styles/lyrics.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index 3ff52f0627..611f493ca0 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -74,7 +74,6 @@ font-size: 16px; color: #bbb; margin-top: -5px; - } /* move info to the top and allow lyrics to overlap */ @@ -83,7 +82,7 @@ flex-direction: column; align-items: center; text-align: center; - margin-right: 0; + margin-right: 0px; width: 100%; } @@ -117,4 +116,4 @@ top: 40px; width: 100%; } -} \ No newline at end of file +} From 2635a91e40cfdc4c4b680cf288e77ba4f3d334b8 Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 09:33:24 -0400 Subject: [PATCH 5/6] i hate lint --- src/styles/lyrics.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index 611f493ca0..422ec05f74 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -53,7 +53,7 @@ #albumArt { width: 100%; border-radius: 10px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .songInfo { From 3e944ae4f56455d24d9f462f7eeac64e60dac74d Mon Sep 17 00:00:00 2001 From: gm852 Date: Mon, 24 Mar 2025 09:48:00 -0400 Subject: [PATCH 6/6] i hate lint --- src/styles/lyrics.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index 422ec05f74..009bfbdd53 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -82,7 +82,7 @@ flex-direction: column; align-items: center; text-align: center; - margin-right: 0px; + margin-right: 0; width: 100%; }