Merge pull request #704 from surfbryce/Development

4.1.5 Update

Source/LyricViews/Page/Fullscreen.ts

@@ -964,6 +964,11 @@ export default class PageView implements Giveable {
 						"click",
 						() => SetAddToPlaylistCoverOpenState(true)
 					)
+
+					// Hide our button when we go into DJ
+					const CheckForDJ = () => addToPlaylistButton.style.display = (Song?.Type === "DJ" ? "none" : "")
+					CheckForDJ()
+					this.Maid.Give(SongChanged.Connect(CheckForDJ))
 				}
 
 				// Handle our view changing
@@ -1436,10 +1441,15 @@ export default class PageView implements Giveable {
 			// Handle our timeline
 			const timelineSlider = this.Maid.Give(new Slider(timelineBar, undefined, 1))
 			{
+				// Handle hiding our timeline when we're in DJ mode
+				const CheckForDJ = () => timelineBar.style.display = (Song?.Type === "DJ" ? "none" : "")
+				CheckForDJ()
+				this.Maid.Give(SongChanged.Connect(CheckForDJ))
+
 				// Handle updating our slider timestamp to its active position
 				timelineSlider.ProgressChanged.Connect(
 					(progress, changedByUser) => {
-						if (changedByUser) {
+						if (changedByUser && (Song!.Type !== "DJ")) {
 							const minutes = Math.floor(progress / 60)
 							const seconds = Math.floor(progress % 60)
 							timelineTimestamp.textContent = `${
@@ -1469,7 +1479,7 @@ export default class PageView implements Giveable {
 					this.Maid.Clean("TimelineUpdater")
 
 					// Determine our new functionality
-					if (Song !== undefined) {
+					if ((Song !== undefined) && (Song.Type !== "DJ")) {
 						// Reset our seek-point
 						newSeekTimestamp = undefined
 						seekApprovedDeltaDirection = undefined
@@ -1541,9 +1551,25 @@ export default class PageView implements Giveable {
 					trackReleaseDate.classList.toggle("Loading", false)
 
 					// Determine if we need to show a custom message or just show the details
-					if (SongDetails !== undefined) {
+					if (Song?.Type === "DJ") {
+						const [coverArtUrl, placeholderHueShift] = GetCoverArtForSong()
+						coverArt.style.backgroundColor = ((placeholderHueShift === undefined) ? "" : "white")
+						coverArt.style.setProperty("--CoverArtHueShift", `${placeholderHueShift ?? 0}deg`)
+						coverArt.src = coverArtUrl
+
+						const trackTitleLink = detailsMaid.Give(document.createElement("span"))
+						trackTitleLink.textContent = Song.Action
+						trackTitle.appendChild(trackTitleLink)
+
+						const artistElement = detailsMaid.Give(document.createElement("span"))
+						artistElement.textContent = "DJ"
+						trackArtists.appendChild(artistElement)
+
+						trackReleaseDate.textContent = ""
+						trackReleaseDetailsSeparator.style.display = "none"
+					} else if (SongDetails !== undefined) {
 						const [coverArtUrl, placeholderHueShift] = GetCoverArtForSong()
-						coverArt.style.backgroundColor = (placeholderHueShift === undefined) ? "" : "white"
+						coverArt.style.backgroundColor = ((placeholderHueShift === undefined) ? "" : "white")
 						coverArt.style.setProperty("--CoverArtHueShift", `${placeholderHueShift ?? 0}deg`)
 						coverArt.src = coverArtUrl
 

Source/LyricViews/Shared.ts

@@ -230,8 +230,13 @@ const BackgroundClassName = "BeautifulLyricsBackground"
 const BackgroundElements = ["Front", "Back", "BackCenter"]
 
 export const GetCoverArtForSong = (): [string, (number | undefined)] => {
+	// DJ is ALWAYS guaranteed to have a cover-art
+	if (Song?.Type === "DJ") {
+		return [Song.CoverArt.Big, undefined]
+	}
+
 	const coverArt = (
-		Song?.IsLocal
+		(Song?.Type === "Local")
 		? (
 			Song?.CoverArt
 			?? (

Source/LyricViews/mod.ts

@@ -43,7 +43,7 @@ const CurrentMainPage = ".Root__main-view .main-view-container div[data-overlays
 const LegacyMainPage = ".Root__main-view .main-view-container .os-host"
 const RightSidebar = ".Root__right-sidebar"
 const ContentsContainer = "aside, section.main-buddyFeed-container"
-const CardInsertAnchor = ".main-nowPlayingView-nowPlayingWidget"
+const CardInsertAnchor = ".main-nowPlayingView-nowPlayingWidget, canvas"
 const SpotifyCardViewQuery = ".main-nowPlayingView-section:not(:is(#BeautifulLyrics-CardView)):has(.main-nowPlayingView-lyricsTitle)"
 
 // Store our internal utilities

Source/Stylings/main.scss

@@ -2,7 +2,7 @@ body:has(.SliderBar.Active) {
 	cursor: pointer;
 }
 
-.Root__right-sidebar:has(.main-nowPlayingView-section) {
+.Root__right-sidebar:has(.main-nowPlayingView-section, canvas) {
 	--background-tint: color-mix(
 		in srgb,
 		rgb(var(--spice-rgb-selected-row)) 7%,

build.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.socalifornian.live/Spices/Build/Schema.json",
 	"Name": "beautiful-lyrics",
-	"Version": "4.1.4",
+	"Version": "4.1.5",
 
 	"ReleaseLocation": {
 		"Type": "Hosted",

deno.json

@@ -12,9 +12,9 @@
 	},
 
 	"imports": {
-		"@socali/Spices/Player": "jsr:@socali/spices@3.1.0/Spicetify/Services/Player",
+		"@socali/Spices/Player": "jsr:@socali/spices@4.0.0/Spicetify/Services/Player",
 		"@socali/Spices/Player_TESTING": "../../Spices/Spicetify/Services/Player/mod.ts",
-		"@socali/Spices/Session": "jsr:@socali/spices@3.1.0/Spicetify/Services/Session",
+		"@socali/Spices/Session": "jsr:@socali/spices@4.0.0/Spicetify/Services/Session",
 		"@socali/Spices/Session_TESTING": "../../Spices/Spicetify/Services/Session.ts"
 	}
 }