diff --git a/now-playing/script.js b/now-playing/script.js index 55a239d..db5d06a 100644 --- a/now-playing/script.js +++ b/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 showProgressBar = GetBooleanParam("showProgressBar", true); +const textAlignment = urlParams.get('textAlignment') || 'left'; 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 hideAnimation = urlParams.get('hideAnimation') || 'fade'; +const showAnimation = urlParams.get('showAnimation') || 'slide-in-from-bottom'; +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}`; } \ No newline at end of file diff --git a/now-playing/settings/settings.json b/now-playing/settings/settings.json index 3314956..2c47d5b 100644 --- a/now-playing/settings/settings.json +++ b/now-playing/settings/settings.json @@ -51,23 +51,44 @@ "group": "Appearance" }, { - "id": "albumArt", - "label": "Album Art", + "id": "textAlignment", + "label": "Text Alignment", "description": "", "type": "select", "options": [ { - "value": "none", - "label": "Don't display" + "value": "left", + "label": "Left" }, { - "value": "show", - "label": "Show" + "value": "center", + "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.
View active sources", + "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", - "label": "Target Application", - "description": "Specific app to track. Leave empty to automatically follow the active player.
View active sources", - "type": "text", - "placeholder": "e.g., Spotify.exe", - "defaultValue": "", + "id": "swapArtistTrack", + "label": "Swap Artist and Track", + "description": "Displays Artist above Track instead of Track above Artist.", + "type": "checkbox", + "defaultValue": false, + "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" }, { diff --git a/now-playing/themes/card/script.js b/now-playing/themes/card/script.js index 66b5672..56ffe9c 100644 --- a/now-playing/themes/card/script.js +++ b/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; - artistLabel.innerText = mediaProps.Artist; + trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title; + artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) const newArtUrl = mediaProps.Base64Image; diff --git a/now-playing/themes/card/style.css b/now-playing/themes/card/style.css index 0d44941..506c4f5 100644 --- a/now-playing/themes/card/style.css +++ b/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%); - -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%); + mask-image: var(--trailing-fade); + -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 { diff --git a/now-playing/themes/compact/script.js b/now-playing/themes/compact/script.js index acedc57..6efd239 100644 --- a/now-playing/themes/compact/script.js +++ b/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 artistLabelBase = document.getElementById('artist-label-background'); +const trackLabelBackground = document.getElementById('track-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; - artistLabel.innerText = mediaProps.Artist; - trackLabelBase.innerText = mediaProps.Title; - artistLabelBase.innerText = mediaProps.Artist; + trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title; + artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; + trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title; + artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) diff --git a/now-playing/themes/compact/style.css b/now-playing/themes/compact/style.css index d6e8a01..d1413ac 100644 --- a/now-playing/themes/compact/style.css +++ b/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; } diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js index f2a0d69..100a4c0 100644 --- a/now-playing/themes/simple/script.js +++ b/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; - artistLabel.innerText = mediaProps.Artist; + trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title; + artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) const newArtUrl = mediaProps.Base64Image; diff --git a/now-playing/themes/simple/style.css b/now-playing/themes/simple/style.css index ef70fe0..9f5dfbf 100644 --- a/now-playing/themes/simple/style.css +++ b/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%); - -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%); + mask-image: var(--trailing-fade); + -webkit-mask-image: var(--trailing-fade); transition: opacity 0.25s ease-in-out; } \ No newline at end of file diff --git a/now-playing/themes/standard/script.js b/now-playing/themes/standard/script.js index bf20bdb..b80f03c 100644 --- a/now-playing/themes/standard/script.js +++ b/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; - artistLabel.innerText = mediaProps.Artist; + trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title; + artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) const newArtUrl = mediaProps.Base64Image; diff --git a/now-playing/themes/standard/style.css b/now-playing/themes/standard/style.css index dd36c5b..5cce20e 100644 --- a/now-playing/themes/standard/style.css +++ b/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%); - -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%); + mask-image: var(--trailing-fade); + -webkit-mask-image: var(--trailing-fade); transition: opacity 0.25s ease-in-out; }