Added 'Album Art' theme

now-playing/settings/settings.json

@@ -38,6 +38,10 @@
 					"value": "card",
 					"label": "Card"
 				},
+				{
+					"value": "album-art",
+					"label": "Album Art"
+				},
 				{
 					"value": "vinyl",
 					"label": "Vinyl"

now-playing/themes/album-art/index.html

@@ -0,0 +1,15 @@
+<div id="main-wrapper">
+    <div id="song-info-container">            
+        <div id="album-art-container">
+            <div id="album-art-layer"></div>
+            <div id="album-art-transition-layer"></div>
+        </div>
+
+        <div id="text-info-container">                
+            <div id="artist-label" class="text-label">&nbsp;</div>
+            <div id="track-label" class="text-label">&nbsp;</div>
+        </div>
+
+        <div id="progress-bar"></div>
+    </div>
+</div>

now-playing/themes/album-art/script.js

@@ -0,0 +1,93 @@
+///////////////////
+// PAGE ELEMENTS //
+///////////////////
+
+const mainWrapper = document.getElementById('main-wrapper');
+const songInfoContainer = document.getElementById('song-info-container');
+const albumArtContainer = document.getElementById('album-art-container');
+const albumArtLayer = document.getElementById('album-art-layer');
+const albumArtTransition = document.getElementById('album-art-transition-layer');
+const textInfoContainer = document.getElementById('text-info-container');
+const trackLabel = document.getElementById('track-label');
+const artistLabel = document.getElementById('artist-label');
+const progressBar = document.getElementById('progress-bar');
+
+
+
+////////////////
+// PAGE SETUP //
+////////////////
+
+// Set property visibility
+trackLabel.style.display = showPrimary ? '' : 'none';
+artistLabel.style.display = showSecondary ? '' : 'none';
+
+// Set container width
+if (maxWidth > 0)
+    mainWrapper.style.width = `${maxWidth}px`;
+else
+    mainWrapper.style.width = `100%`;
+
+mainWrapper.style.height = `${mainWrapper.style.clientWidth}px`;
+
+// Set progress bar visibility
+if (!showProgressBar)
+    progressBar.style.display = 'none';
+
+
+
+////////////////////
+// CORE FUNCTIONS //
+////////////////////
+
+async function ChangeTrack(mediaProps, accentColorPalette) {
+    // Fade in the overlay (shows the new text)
+    if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title))
+        trackLabel.style.opacity = "0";
+    if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist))
+        artistLabel.style.opacity = "0";
+    albumArtLayer.style.opacity = "0";
+    
+    // Wait for fade (0.5s), then swap the real text and hide overlay
+    setTimeout(() => {
+        SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
+        SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
+
+        // Extract the image source string (use fallback if Windows has no art)
+        const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
+
+        // Set the image
+        albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
+
+        // Apply a tint
+        const baseColor = accentColorPalette.DarkMuted;
+        // Solid from 0% to 30%, then fading to 0% opacity at 100%
+        textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`;
+        songInfoContainer.style.background = accentColorPalette.LightVibrant;
+
+        // Apply text color
+        document.body.style.color = accentColorPalette.LightVibrant;
+
+        trackLabel.style.opacity = "";
+        artistLabel.style.opacity = "";
+        albumArtLayer.style.opacity = "";
+
+        setTimeout(() => {
+            // Set the image
+            albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
+
+            SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
+        }, 250);
+    }, 250);
+}
+
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+
+    // Set progressbar
+    // Ensure we don't divide by zero or exceed 100%
+    const durationMs = timelineProps.EndTime;
+    let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
+    progressPercent = Math.min(100, Math.max(0, progressPercent));
+    progressBar.style.width = `${progressPercent}%`;
+    progressBar.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+}

now-playing/themes/album-art/style.css

@@ -0,0 +1,89 @@
+:root {
+    --border-radius: 30px;
+}
+
+#main-wrapper {
+    width: 500px;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0.5em;
+    opacity: 0;
+    aspect-ratio: 1 / 1;
+}
+
+#album-art-container {
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    display: var(--show-album-art);
+}
+
+#album-art-layer,
+#album-art-transition-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 0.5s ease;
+}
+
+#album-art-layer {
+    z-index: 1;
+	transition: all 0.5s ease;
+}
+
+#album-art-transition-layer {
+    z-index: 0;
+}
+
+#song-info-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+#text-info-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 6% 7%;
+    padding-top: 50%;
+    box-sizing: border-box;
+    z-index: 2;
+    text-align: var(--text-alignment);
+}
+
+#track-label {
+	font-size: 2em;
+	font-weight: 700;
+    text-align: var(--text-alignment);
+}
+
+#artist-label {
+	font-size: 1.5em;
+	font-weight: 500;
+	opacity: 0.8;
+    text-align: var(--text-alignment);
+}
+
+#progress-bar {
+    height: 1%;
+    width: 0%; /* JS will control this */
+    background-color: var(--accent-color, #ffffff);
+    transition: width 1s ease-in-out, background-color 1s ease-in-out;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+}