-
-
-
-
+
+
+
+
-
-
-
-
-
+
\ No newline at end of file
diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js
index 0549f9f..ad6e24d 100644
--- a/now-playing/themes/simple/script.js
+++ b/now-playing/themes/simple/script.js
@@ -10,6 +10,7 @@ const albumArtTransition = document.getElementById('album-art-transition-layer')
const trackLabel = document.getElementById('track-label');
const artistLabel = document.getElementById('artist-label');
const progressContainer = document.getElementById('progress-container');
+const progressBarFill = document.getElementById('progress-bar-fill');
const currentTimeLabel = document.getElementById('current-time');
const durationLabel = document.getElementById('duration');
@@ -34,8 +35,9 @@ if (!showProgressBar)
progressContainer.style.display = 'none';
// If text alignment is 'right', swap the album art to the right hand side too
-if (textAlignment == 'right')
- document.getElementById('yet-another-wrapper-yup').appendChild(document.getElementById('album-art-container'));
+if (textAlignment == 'right') {
+ mainWrapper.style.flexDirection = 'row-reverse';
+}
@@ -52,8 +54,10 @@ async function ChangeTrack(mediaProps) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => {
- trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
- artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
+ // trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
+ // artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
+ 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';
@@ -81,4 +85,42 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
-}
\ No newline at end of file
+
+ // 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));
+ progressBarFill.style.width = `${progressPercent}%`;
+ progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+ switch (themeVariant) {
+ case "matte":
+ progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
+ break;
+ case "matte-dark":
+ default:
+ progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+ break;
+ }
+}
+
+
+// Helper function to calculate height of album art
+const observer = new ResizeObserver(entries => {
+ for (let entry of entries) {
+ // Get the accurate rendered height of song-info-container
+ const infoHeight = entry.contentRect.height;
+
+ // Calculate 125% of that height
+ const targetSize = infoHeight * 1.5;
+
+ console.log(targetSize);
+
+ // Apply to album art (setting both width & height ensures it stays square)
+ albumArtContainer.style.height = `${targetSize}px`;
+ albumArtContainer.style.width = `${targetSize}px`;
+ }
+});
+
+// Start watching the song info container for size changes
+observer.observe(songInfoContainer);
\ No newline at end of file
diff --git a/now-playing/themes/simple/style.css b/now-playing/themes/simple/style.css
index d65e88d..5e0ae26 100644
--- a/now-playing/themes/simple/style.css
+++ b/now-playing/themes/simple/style.css
@@ -6,23 +6,13 @@
width: 500px;
display: flex;
flex-direction: row;
- align-items: stretch;
- opacity: 0;
-}
-
-#yet-another-wrapper-yup {
- position: relative;
- flex: 1;
- display: flex;
- flex-direction: row;
align-items: center;
- gap: 0.75em;
- transition: all 0.25s ease-in-out;
+ gap: 1em;
+ opacity: 0;
}
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
- height: 150%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--border-radius);
@@ -62,23 +52,13 @@
overflow: hidden;
flex-grow: 1;
min-width: 0;
+ gap: 0.25em;
}
#background-transition-layer {
z-index: 0;
}
-/* The content sits on top */
-#song-info-wrapper {
- position: relative; /* Keeps it in the document flow */
- z-index: 2; /* Sits above the background-layer */
-
- padding: 1em 1.75em;
- display: flex;
- flex-direction: column;
- gap: 0.3em;
-}
-
#track-label {
font-size: 1em;
font-weight: 600;
@@ -93,11 +73,36 @@
}
#progress-container {
- font-size: 0.6em;
- font-weight: 400;
- opacity: 0.6;
- text-align: var(--text-alignment);
- margin-top: 0.5em;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.2em;
+ margin-top: 0.2em;
+ gap: 0.5em;
+}
+
+#progress-bar-track {
+ width: 100%;
+ height: 0.4em;
+ border-radius: 1em;
+ background-color: #ffffff3a;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
+}
+
+#progress-bar-fill {
+ height: 100%;
+ width: 0%; /* JS will control this */
+ border-radius: 1em;
+ background-color: var(--accent-color, #ffffff);
+ transition: width 1s ease-in-out, background-color 1s ease-in-out;
+
+ /* This makes the handle track the end of the bar */
+ position: relative;
+}
+
+.progress-text {
+ font-size: 0.7em;
+ opacity: 0.5;
}
.text-label {
diff --git a/now-playing/themes/standard/index.html b/now-playing/themes/standard/index.html
index 3ec4a50..bd9b89c 100644
--- a/now-playing/themes/standard/index.html
+++ b/now-playing/themes/standard/index.html
@@ -20,9 +20,6 @@
+
+
+
+
0:00
+
+
+
+ 0:00
0:00
-
-
-