Added more settings

now-playing/script.js

@@ -20,14 +20,18 @@ const theme = urlParams.get('theme') || 'standard';
 const font = urlParams.get("font") || "";
 const fontSize = GetIntParam("fontSize", 20);
 const maxWidth = GetIntParam("maxWidth", 500);
-const albumArt = urlParams.get('albumArt') || 'show';
+const textAlignment = urlParams.get('textAlignment') || 'left';
-const showProgressBar = GetBooleanParam("showProgressBar", true);
 
 const targetApplication = urlParams.get('targetApplication') || '';
+const showAlbumArt = GetBooleanParam("showAlbumArt", true);
+const showProgressBar = GetBooleanParam("showProgressBar", true);
+const swapArtistTrack = GetBooleanParam("swapArtistTrack", false);
+const showPrimary = GetBooleanParam("showPrimary", true);
+const showSecondary = GetBooleanParam("showSecondary", true);
 const autoHide = GetBooleanParam("autoHide", false);
 const displayDuration = GetIntParam("displayDuration", 5);
-const showAnimation = urlParams.get('showAnimation') || 'fade';
+const showAnimation = urlParams.get('showAnimation') || 'slide-in-from-bottom';
-const hideAnimation = urlParams.get('hideAnimation') || 'fade';
+const hideAnimation = urlParams.get('hideAnimation') || 'slide-out-bottom';
 
 ////////////////
 // PAGE SETUP //
@@ -37,6 +41,30 @@ const hideAnimation = urlParams.get('hideAnimation') || 'fade';
 document.body.style.fontFamily = font;
 document.body.style.fontSize = `${fontSize}px`;
 
+// Set album art visibility
+if (showAlbumArt)
+    document.documentElement.style.setProperty('--show-album-art', ``);
+else
+    document.documentElement.style.setProperty('--show-album-art', `none`);
+
+// Set text alignment
+document.documentElement.style.setProperty('--text-alignment', `${textAlignment}`);
+switch (textAlignment)
+{
+    case 'left':
+        document.documentElement.style.setProperty('--justify-content', `flex-start`);
+        document.documentElement.style.setProperty('--trailing-fade', `linear-gradient(to right, black calc(100% - 1em), transparent 100%)`);
+        break;
+    case 'center':
+        document.documentElement.style.setProperty('--justify-content', `center`);
+        document.documentElement.style.setProperty('--trailing-fade', `linear-gradient(to right, black calc(100% - 1em), transparent 100%)`);
+        break;
+    case 'right':
+        document.documentElement.style.setProperty('--justify-content', `flex-end`);
+        document.documentElement.style.setProperty('--trailing-fade', ``);
+        break;
+}
+
 
 
 ////////////////
@@ -104,8 +132,18 @@ function ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) {
     if (isNaN(time) || time <= 0) return "0:00";
 
     const totalSeconds = Math.floor(time / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
     const seconds = totalSeconds % 60;
 
-    return `${minutes}:${('0' + seconds).slice(-2)}`;
+    // Format seconds with a leading zero
+    const paddedSeconds = ('0' + seconds).slice(-2);
+
+    if (hours > 0) {
+        // Format minutes with a leading zero if hours are present
+        const paddedMinutes = ('0' + minutes).slice(-2);
+        return `${hours}:${paddedMinutes}:${paddedSeconds}`;
+    }
+
+    return `${minutes}:${paddedSeconds}`;
 }

now-playing/settings/settings.json

@@ -51,23 +51,44 @@
 			"group": "Appearance"
 		},
 		{
-			"id": "albumArt",
+			"id": "textAlignment",
-			"label": "Album Art",
+			"label": "Text Alignment",
 			"description": "",
 			"type": "select",
 			"options": [
 				{
-					"value": "none",
+					"value": "left",
-					"label": "Don't display"
+					"label": "Left"
 				},
 				{
-					"value": "show",
+					"value": "center",
-					"label": "Show"
+					"label": "Center"
+				},
+				{
+					"value": "right",
+					"label": "Right"
 				}
 			],
-			"defaultValue": "show",
+			"defaultValue": "left",
 			"group": "Appearance"
 		},
+		{
+			"id": "targetApplication",
+			"label": "Target Application",
+			"description": "Specific app to track. Leave empty to automatically follow the active player.<br><a href='http://127.0.0.1:5000/sessions' target='_blank' style='color: #4da6ff; text-decoration: underline;'>View active sources</a>",
+			"type": "text",
+			"placeholder": "e.g., Spotify.exe",
+			"defaultValue": "",
+			"group": "General"
+		},
+		{
+			"id": "showAlbumArt",
+			"label": "Show AlbumArt",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "General"
+		},
 		{
 			"id": "showProgressBar",
 			"label": "Show Progress Bar",
@@ -77,12 +98,27 @@
 			"group": "General"
 		},
 		{
-			"id": "targetApplication",
+			"id": "swapArtistTrack",
-			"label": "Target Application",
+			"label": "Swap Artist and Track",
-			"description": "Specific app to track. Leave empty to automatically follow the active player.<br><a href='http://127.0.0.1:5000/sessions' target='_blank' style='color: #4da6ff; text-decoration: underline;'>View active sources</a>",
+			"description": "Displays Artist above Track instead of Track above Artist.",
-			"type": "text",
+			"type": "checkbox",
-			"placeholder": "e.g., Spotify.exe",
+			"defaultValue": false,
-			"defaultValue": "",
+			"group": "General"
+		},
+		{
+			"id": "showPrimary",
+			"label": "Show Primary Text",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "General"
+		},
+		{
+			"id": "showSecondary",
+			"label": "Show Secondary Text",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
 			"group": "General"
 		},
 		{

now-playing/themes/card/script.js

@@ -30,24 +30,16 @@ const durationLabel = document.getElementById('duration');
 // 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%`;
 
-// Set album art style
-switch (albumArt)
-{
-    case 'none':
-        albumArtContainer.style.display = 'none';
-        break;
-    case 'show':
-        albumArtContainer.style.display = '';
-        break;
-    case 'spinny':
-        break;
-}
-
 // Set progress bar visibility
 if (!showProgressBar)
     progressContainer.style.display = 'none';
@@ -169,8 +161,8 @@ async function ChangeTrack(mediaProps) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(() => {
-        trackLabel.innerText = mediaProps.Title;
+        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = mediaProps.Artist;        
+        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;     
 
         // Extract the image source string (use fallback if Windows has no art)
         const newArtUrl = mediaProps.Base64Image;

now-playing/themes/card/style.css

@@ -17,6 +17,7 @@
     background-size: cover;
     background-position: center;
 	margin: 0em 0em 1em 0em;
+    display: var(--show-album-art);
 }
 
 #album-art-layer,
@@ -90,19 +91,21 @@
 #track-label {
 	font-size: 1em;
 	font-weight: 600;
+    text-align: var(--text-alignment);
 }
 
 #artist-label {
 	font-size: 0.8em;
 	font-weight: 300;
 	opacity: 0.6;
+    text-align: var(--text-alignment);
 }
 
 .text-label {
 	white-space: nowrap;
     /* overflow: hidden; */
-    mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    mask-image: var(--trailing-fade);
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    -webkit-mask-image: var(--trailing-fade);
     transition: opacity 0.25s ease-in-out;
 }
 
@@ -110,7 +113,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 0.2em;
-	margin-top: 0.2em;
+	margin-top: 1em;
 }
 
 #progress-bar-track {

now-playing/themes/compact/script.js

@@ -16,8 +16,8 @@ const songInfoContainer = document.getElementById('song-info-container');
 const progressBar = document.getElementById('progress-bar');
 const trackLabel = document.getElementById('track-label');
 const artistLabel = document.getElementById('artist-label');
-const trackLabelBase = document.getElementById('track-label-background');
+const trackLabelBackground = document.getElementById('track-label-background');
-const artistLabelBase = document.getElementById('artist-label-background');
+const artistLabelBackground = document.getElementById('artist-label-background');
 const songLabel = document.getElementById('song-label');
 const songLabelBackground = document.getElementById('song-label-background');
 
@@ -27,6 +27,13 @@ const songLabelBackground = document.getElementById('song-label-background');
 // PAGE SETUP //
 ////////////////
 
+// Set property visibility
+trackLabel.style.display = showPrimary ? '' : 'none';
+artistLabel.style.display = showSecondary ? '' : 'none';
+trackLabelBackground.style.display = showPrimary ? '' : 'none';
+artistLabelBackground.style.display = showSecondary ? '' : 'none';
+
+// Set container width
 if (maxWidth > 0)
     mainWrapper.style.width = `${maxWidth}px`;
 else
@@ -150,10 +157,10 @@ async function ChangeTrack(mediaProps, accentColor) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(() => {
-        trackLabel.innerText = mediaProps.Title;
+        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = mediaProps.Artist;
+        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
-        trackLabelBase.innerText = mediaProps.Title;
+        trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabelBase.innerText = mediaProps.Artist;
+        artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
 
         // Extract the image source string (use fallback if Windows has no art)
         

now-playing/themes/compact/style.css

@@ -52,7 +52,7 @@
 	align-items: baseline;
 	gap: 0.5em;
 	min-width: 100%;
-	/* justify-content: center; */
+	justify-content: var(--justify-content);
 	overflow: visible;
 }
 

now-playing/themes/simple/script.js

@@ -30,24 +30,16 @@ const artistLabel = document.getElementById('artist-label');
 // 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%`;
 
-// Set album art style
-switch (albumArt)
-{
-    case 'none':
-        albumArtContainer.style.display = 'none';
-        break;
-    case 'show':
-        albumArtContainer.style.display = '';
-        break;
-    case 'spinny':
-        break;
-}
-
 // // Set progress bar visibility
 // if (!showProgressBar)
 //     progressContainer.style.display = 'none';
@@ -169,8 +161,8 @@ async function ChangeTrack(mediaProps) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(() => {
-        trackLabel.innerText = mediaProps.Title;
+        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = mediaProps.Artist;        
+        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; 
 
         // Extract the image source string (use fallback if Windows has no art)
         const newArtUrl = mediaProps.Base64Image;

now-playing/themes/simple/style.css

@@ -17,6 +17,7 @@
     position: relative;
     background-size: cover;
     background-position: center;
+    display: var(--show-album-art);
 }
 
 #album-art-layer,
@@ -66,18 +67,20 @@
 #track-label {
 	font-size: 1em;
 	font-weight: 600;
+    text-align: var(--text-alignment);
 }
 
 #artist-label {
 	font-size: 0.8em;
 	font-weight: 300;
 	opacity: 0.6;
+    text-align: var(--text-alignment);
 }
 
 .text-label {
 	white-space: nowrap;
     overflow: hidden;
-    mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    mask-image: var(--trailing-fade);
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    -webkit-mask-image: var(--trailing-fade);
     transition: opacity 0.25s ease-in-out;
 }

now-playing/themes/standard/script.js

@@ -30,24 +30,16 @@ const durationLabel = document.getElementById('duration');
 // 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%`;
 
-// Set album art style
-switch (albumArt)
-{
-    case 'none':
-        albumArtContainer.style.display = 'none';
-        break;
-    case 'show':
-        albumArtContainer.style.display = '';
-        break;
-    case 'spinny':
-        break;
-}
-
 // Set progress bar visibility
 if (!showProgressBar)
     progressContainer.style.display = 'none';
@@ -172,8 +164,8 @@ async function ChangeTrack(mediaProps, tintColor) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(async () => {
-        trackLabel.innerText = mediaProps.Title;
+        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = mediaProps.Artist;        
+        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; 
 
         // Extract the image source string (use fallback if Windows has no art)
         const newArtUrl = mediaProps.Base64Image;

now-playing/themes/standard/style.css

@@ -16,6 +16,7 @@
     position: relative;
     background-size: cover;
     background-position: center;
+    display: var(--show-album-art);
 }
 
 #album-art-layer,
@@ -89,19 +90,21 @@
 #track-label {
 	font-size: 1em;
 	font-weight: 600;
+    text-align: var(--text-alignment);
 }
 
 #artist-label {
 	font-size: 0.8em;
 	font-weight: 300;
 	opacity: 0.6;
+    text-align: var(--text-alignment);
 }
 
 .text-label {
 	white-space: nowrap;
     overflow: hidden;
-    mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    mask-image: var(--trailing-fade);
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    -webkit-mask-image: var(--trailing-fade);
     transition: opacity 0.25s ease-in-out;
 }