diff --git a/.common/core/settings-core/script.js b/.common/core/settings-core/script.js
index e00232d..7cce186 100644
--- a/.common/core/settings-core/script.js
+++ b/.common/core/settings-core/script.js
@@ -4,6 +4,7 @@ const urlParams = new URLSearchParams(queryString);
const settingsJson = urlParams.get("settingsJson") || "";
const widgetURL = urlParams.get("widgetURL") || "";
const showUnmuteIndicator = GetBooleanParam("showUnmuteIndicator", false);
+const useStreamerBot = GetBooleanParam("usesStreamerBot", false);
// Page elements
const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper');
@@ -318,6 +319,9 @@ function RefreshWidgetPreview() {
}
function UpdateStreamerBotConnection() {
+ if (!useStreamerBot)
+ return;
+
let addressElement = document.getElementById('address');
let portElement = document.getElementById('port');
diff --git a/now-playing/script.js b/now-playing/script.js
index 10ab3f9..0f41617 100644
--- a/now-playing/script.js
+++ b/now-playing/script.js
@@ -75,18 +75,6 @@ else
// Set text alignment
document.documentElement.style.setProperty('--text-alignment', `${textAlignment}`);
-switch (textAlignment)
-{
- case 'left':
- document.documentElement.style.setProperty('--justify-content', `flex-start`);
- break;
- case 'center':
- document.documentElement.style.setProperty('--justify-content', `center`);
- break;
- case 'right':
- document.documentElement.style.setProperty('--justify-content', `flex-end`);
- break;
-}
// Set vertical alignment
switch (verticalAlignment) {
@@ -199,11 +187,13 @@ async function FetchMedia() {
}
window.addEventListener('DOMContentLoaded', () => {
- // Start polling every 1000 milliseconds
- setInterval(FetchMedia, 1000);
+ setTimeout(() => {
+ // Start polling every 1000 milliseconds
+ setInterval(FetchMedia, 1000);
- // Run once immediately on script load
- FetchMedia();
+ // Run once immediately on script load
+ FetchMedia();
+ }, 100);
});
diff --git a/now-playing/settings/script.js b/now-playing/settings/script.js
index 33cab02..f067f52 100644
--- a/now-playing/settings/script.js
+++ b/now-playing/settings/script.js
@@ -15,9 +15,12 @@ settingsJSON = "?settingsJson=" + baseURL + "settings.json";
const lastSlashIndex = baseURL.lastIndexOf("/");
let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
+const usesStreamerBot = "&usesStreamerBot=false";
+
console.debug("Window Ref: " + window.location.href);
console.debug("Base URL: " + baseURL);
console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL);
+console.debug("Uses Streamer Bot: " + usesStreamerBot);
-widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
\ No newline at end of file
+widgetContainer.src = settingsPageURL + settingsJSON + widgetURL + usesStreamerBot;
\ No newline at end of file
diff --git a/now-playing/themes/compact/index.html b/now-playing/themes/compact/index.html
index c691cde..3da3f5f 100644
--- a/now-playing/themes/compact/index.html
+++ b/now-playing/themes/compact/index.html
@@ -1,17 +1,11 @@
\ No newline at end of file
diff --git a/now-playing/themes/compact/script.js b/now-playing/themes/compact/script.js
index bdc23b5..75001a5 100644
--- a/now-playing/themes/compact/script.js
+++ b/now-playing/themes/compact/script.js
@@ -7,10 +7,6 @@ const albumArtContainer = document.getElementById('album-art-container');
const songInfoContainer = document.getElementById('song-info-container');
const progressBar = document.getElementById('progress-bar');
const progressBarTrack = document.getElementById('progress-bar-track');
-const trackLabel = document.getElementById('track-label');
-const artistLabel = document.getElementById('artist-label');
-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');
@@ -24,10 +20,10 @@ const songLabelBackground = document.getElementById('song-label-background');
const themeVariant = window.ThemeVariant ? window.ThemeVariant : '';
// Set property visibility
-trackLabel.style.display = showPrimary ? '' : 'none';
-artistLabel.style.display = showSecondary ? '' : 'none';
-trackLabelBackground.style.display = showPrimary ? '' : 'none';
-artistLabelBackground.style.display = showSecondary ? '' : 'none';
+if (!showPrimary)
+ document.documentElement.style.setProperty('--show-primary', `none`);
+if (!showSecondary)
+ document.documentElement.style.setProperty('--show-secondary', `none`);
// Set container width
if (maxWidth > 0)
@@ -48,10 +44,6 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// 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;
- // trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
- // artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
if (swapArtistTrack) {
SetSongInfo(mediaProps.Artist, mediaProps.Title);
} else {
@@ -131,38 +123,50 @@ function UpdateSingleSongLabel(containerId, trackName, artistName) {
const container = document.getElementById(containerId);
if (!container) return;
- // 1. Structure the inner HTML with a wrapper so we can measure exact inline width
- container.classList.remove('is-overflowing');
- container.innerHTML = `
-
- ${trackName}
- ${artistName}
-
- `;
+ let scrollContent = container.querySelector('.scroll-content');
- const scrollContent = container.querySelector('.scroll-content');
+ // Only rebuild the HTML structure if the text content actually changed or doesn't exist yet
+ const currentTrackEl = container.querySelector('.track-label');
+ const currentArtistEl = container.querySelector('.artist-label');
- // 2. Measure total width of (Track + Artist) against parent width
- const textWidth = scrollContent.scrollWidth;
- const containerWidth = container.clientWidth;
- const overflowDistance = textWidth - containerWidth;
-
- // 3. If the combined row overflows, set the CSS variables and add class
- if (overflowDistance > 0) {
- const distancePercent = (overflowDistance / textWidth) * 100;
- const travelTime = overflowDistance / SCROLL_SPEED_PX_PER_SEC;
- const totalDuration = (travelTime * 2) + 3; // 3 seconds total for start/end pauses
-
- scrollContent.style.setProperty('--scroll-distance', `-${distancePercent}%`);
- container.style.setProperty('--marquee-duration', `${totalDuration}s`);
-
- container.classList.add('is-overflowing');
+ if (!scrollContent || !currentTrackEl || currentTrackEl.textContent !== trackName || currentArtistEl.textContent !== artistName) {
+ container.classList.remove('is-overflowing');
+ container.innerHTML = `
+
+ ${trackName}
+ ${artistName}
+
+ `;
+ scrollContent = container.querySelector('.scroll-content');
}
- // 4. Attach ResizeObserver once to handle responsive window resizes
+ // Encapsulate measurement logic so it can be called safely by the observer
+ const updateMetrics = () => {
+ scrollContent = container.querySelector('.scroll-content');
+
+ const textWidth = scrollContent.scrollWidth;
+ const containerWidth = container.clientWidth;
+ const overflowDistance = textWidth - containerWidth;
+
+ if (overflowDistance > 0) {
+ const distancePercent = (overflowDistance / textWidth) * 100;
+ const travelTime = overflowDistance / SCROLL_SPEED_PX_PER_SEC;
+ const totalDuration = (travelTime * 2) + 3;
+
+ container.style.setProperty('--scroll-distance', `-${distancePercent}%`);
+ container.style.setProperty('--marquee-duration', `${totalDuration}s`);
+ container.classList.add('is-overflowing');
+ } else {
+ container.classList.remove('is-overflowing');
+ }
+ };
+
+ updateMetrics();
+
+ // Attach ResizeObserver once to update metrics only (No recursive function resets!)
if (!container._resizeObserver) {
container._resizeObserver = new ResizeObserver(() => {
- UpdateSingleSongLabel(containerId, trackName, artistName);
+ updateMetrics();
});
container._resizeObserver.observe(container);
}
diff --git a/now-playing/themes/compact/style.css b/now-playing/themes/compact/style.css
index 5c20623..15f08ed 100644
--- a/now-playing/themes/compact/style.css
+++ b/now-playing/themes/compact/style.css
@@ -26,13 +26,10 @@
/* The content sits on top */
#progress-bar {
- grid-area: stack;
position: relative;
z-index: 2; /* Sits above the progress bar */
transition: all 1s ease-in-out;
width: 100%;
- /* mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%);
- -webkit-mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%); */
}
#progress-bar-track {
@@ -44,20 +41,13 @@
padding: 0.25em 0.75em;
grid-area: stack;
display: flex;
- /* justify-content: center; */
min-width: 0;
}
#song-label,
#song-label-background {
- font-size: 1em;
- display: flex;
- flex-direction: row;
- align-items: baseline;
- gap: 0.5em;
- min-width: 100%;
- justify-content: var(--justify-content);
- overflow: hidden;
+ width: 100%;
+ text-align: var(--text-alignment);
}
#artist-label,
@@ -67,8 +57,7 @@
opacity: 0.7;
}
-#track-label,
-#track-label-background {
+#track-label {
font-weight: 700;
}
@@ -81,7 +70,7 @@
#song-label-background .scroll-content {
display: inline-flex;
flex-direction: row;
- align-items: baseline;
+ align-items: center;
gap: 0.5em; /* Spacing between Track and Artist */
white-space: nowrap;
will-change: transform;
@@ -90,12 +79,14 @@
/* Preserve original font weights */
.track-label {
font-weight: 700;
+ display: var(--show-primary);
}
.artist-label {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
+ display: var(--show-secondary);
}
/* Marquee scroll animation */