diff --git a/now-playing/index.html b/now-playing/index.html index 8dce8ef..4d55e80 100644 --- a/now-playing/index.html +++ b/now-playing/index.html @@ -4,39 +4,12 @@ Now Playing - + +
-
diff --git a/now-playing/script.js b/now-playing/script.js index c7a811f..13951ea 100644 --- a/now-playing/script.js +++ b/now-playing/script.js @@ -29,6 +29,14 @@ const displayDuration = GetIntParam("displayDuration", 5); const showAnimation = urlParams.get('showAnimation') || 'fade'; const hideAnimation = urlParams.get('hideAnimation') || 'fade'; +//////////////// +// PAGE SETUP // +//////////////// + +// Set fonts for the widget +document.body.style.fontFamily = font; +document.body.style.fontSize = `${fontSize}px`; + //////////////// diff --git a/now-playing/style.css b/now-playing/style.css index e69de29..0433f92 100644 --- a/now-playing/style.css +++ b/now-playing/style.css @@ -0,0 +1,13 @@ +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 20px; + color: white; + margin: 0; +} + +#main-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; /* Full viewport height */ +} \ No newline at end of file diff --git a/now-playing/themes/standard/index.html b/now-playing/themes/standard/index.html index 0e26862..9d89656 100644 --- a/now-playing/themes/standard/index.html +++ b/now-playing/themes/standard/index.html @@ -1,8 +1,4 @@ - - - - -
+
diff --git a/now-playing/themes/standard/script.js b/now-playing/themes/standard/script.js index c2738ad..e129b71 100644 --- a/now-playing/themes/standard/script.js +++ b/now-playing/themes/standard/script.js @@ -10,7 +10,7 @@ let hideTimeout = null; // PAGE ELEMENTS // /////////////////// -const standardLayout = document.getElementById('standard-layout'); +const mainWrapper = document.getElementById('main-wrapper'); const albumArtContainer = document.getElementById('album-art-container'); const songInfoContainer = document.getElementById('song-info-container'); const albumArtLayer = document.getElementById('album-art-layer'); @@ -30,10 +30,7 @@ const durationLabel = document.getElementById('duration'); // PAGE SETUP // //////////////// -// Set fonts for the widget -document.body.style.fontFamily = font; -document.body.style.fontSize = `${fontSize}px`; -standardLayout.style.width = `${width}px`; +mainWrapper.style.width = `${width}px`; // Set album art style switch (albumArt) @@ -121,7 +118,7 @@ function UpdatePlayerState(data) { // Set progressbar // Ensure we don't divide by zero or exceed 100% const durationMs = timelineProps.EndTime; - const progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; + 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', mediaProps.AccentColor); @@ -147,7 +144,7 @@ function SetVisibility(visible) { } if (visible) { - standardLayout.style.animation = `${showAnimation} 0.5s ease-out forwards`; + mainWrapper.style.animation = `${showAnimation} 0.5s ease-out forwards`; // Only set a new timer if autoHide is enabled if (autoHide) { @@ -156,7 +153,7 @@ function SetVisibility(visible) { }, displayDuration * 1000); } } else { - standardLayout.style.animation = `${hideAnimation} 0.5s ease-out forwards`; + mainWrapper.style.animation = `${hideAnimation} 0.5s ease-out forwards`; } } diff --git a/now-playing/themes/standard/style.css b/now-playing/themes/standard/style.css index 891080b..cdf4a74 100644 --- a/now-playing/themes/standard/style.css +++ b/now-playing/themes/standard/style.css @@ -1,18 +1,4 @@ -body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; - font-size: 20px; - color: white; - margin: 0; -} - -#main-container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; /* Full viewport height */ -} - -#standard-layout { +#main-wrapper { width: 500px; display: flex; flex-direction: row;