Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed text alignment for 'Compact' theme

Browse Source
This commit is contained in:
nutty
2026-07-23 21:14:12 +10:00
parent 191e0ab504
commit f4406bbd45
6 changed files with 64 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/compact/index.html
+2 -8
View File
@@ -1,17 +1,11 @@
<div id="main-wrapper">
<div id="song-info-container">
<div id="progress-bar-track" class="progress">
<label id="song-label-background" class="text-label">
<span id="track-label-background"></span>
<span id="artist-label-background"></span>
</label>
<label id="song-label-background" class="text-label"></label>
</div>
<div id="progress-bar" class="progress">
<label id="song-label" class="text-label">
<span id="track-label"></span>
<span id="artist-label"></span>
</label>
<label id="song-label" class="text-label"></label>
</div>
</div>
</div>
now-playing/themes/compact/script.js
+42 -38
View File
@@ -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 = `
<span class="scroll-content">
<span class="track-label">${trackName}</span>
<span class="artist-label">${artistName}</span>
</span>
`;
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 = `
<span class="scroll-content">
<span class="track-label">${trackName}</span>
<span class="artist-label">${artistName}</span>
</span>
`;
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);
}
now-playing/themes/compact/style.css
+6 -15
View File
@@ -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 */