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

Added auto scroll when text is too long

Browse Source
This commit is contained in:
nutty
2026-07-23 15:15:44 +10:00
parent 6795224fea
commit 1c3ddbd907
14 changed files with 389 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/compact/script.js
+67 -31
View File
@@ -48,23 +48,28 @@ 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;
// 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 {
SetSongInfo(mediaProps.Title, mediaProps.Artist);
}
// Extract the image source string (use fallback if Windows has no art)
// Set the pill color
switch (themeVariant) {
case "compact-inverted":
songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant;
progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant;
progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
songLabel.style.color = accentColorPalette.LightVibrant;
songLabelBackground.style.color = accentColorPalette.DarkVibrant;
break;
default:
songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
progressBar.style.background = accentColorPalette.LightVibrant;
songLabel.style.color = accentColorPalette.DarkVibrant;
songLabelBackground.style.color = accentColorPalette.LightVibrant;
@@ -74,30 +79,6 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
songLabel.style.opacity = "";
songLabelBackground.style.opacity = "";
// // If text is too long, add a marquee
// requestAnimationFrame(() => {
// const containerWidth = songInfoContainer.clientWidth;
// const textWidth = trackLabel.clientWidth + artistLabel.clientWidth;
// console.log(containerWidth);
// console.log(textWidth);
// if (textWidth > containerWidth) {
// songLabel.classList.add('scrolling-text');
// songLabelBackground.classList.add('scrolling-text');
// // Calculate speed: 50 pixels per second is a good standard
// const duration = (textWidth + containerWidth) / 50;
// console.log(duration);
// document.documentElement.style.setProperty('--scroll-duration', `${duration}s`);
// document.documentElement.style.setProperty('--container-width', `${textWidth}px`);
// document.documentElement.style.setProperty('--text-width', `-${textWidth}px`);
// } else {
// songLabel.classList.remove('scrolling-text');
// songLabelBackground.classList.remove('scrolling-text');
// }
// });
setTimeout(() => {
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250);
@@ -127,7 +108,62 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
// Update the clip-path
progressBar.style.clipPath = `inset(0 ${clipRight}% 0 0)`;
progressBarTrack.style.clipPath = `inset(0 0 0 ${progressPercent}%)`;
// // Set the progress bar but with a transition for smoothness
// const clipRight = progressPercent;
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - 4em), transparent ${clipRight}%)`
// const transitionWidth = '1em';
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - ${transitionWidth}), transparent ${clipRight}%)`
// progressBarTrack.style.maskImage = `linear-gradient(to right, transparent calc(${clipRight}% - ${transitionWidth}), black ${clipRight}%)`;
}
// MARQUEE LOGIC
// This is a more advanced marquee implementation that calculates the overflow distance and adjusts the scroll speed accordingly
// Call this function whenever the track changes
function SetSongInfo(trackName, artistName) {
// Update main text and background layer simultaneously
UpdateSingleSongLabel('song-label', trackName, artistName);
UpdateSingleSongLabel('song-label-background', trackName, artistName);
}
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>
`;
const scrollContent = container.querySelector('.scroll-content');
// 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');
}
// 4. Attach ResizeObserver once to handle responsive window resizes
if (!container._resizeObserver) {
container._resizeObserver = new ResizeObserver(() => {
UpdateSingleSongLabel(containerId, trackName, artistName);
});
container._resizeObserver.observe(container);
}
}
now-playing/themes/compact/style.css
+36 -16
View File
@@ -35,6 +35,10 @@
-webkit-mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%); */
}
#progress-bar-track {
transition: all 1s ease-in-out;
}
.progress {
box-sizing: border-box;
padding: 0.25em 0.75em;
@@ -53,7 +57,7 @@
gap: 0.5em;
min-width: 100%;
justify-content: var(--justify-content);
overflow: visible;
overflow: hidden;
}
#artist-label,
@@ -69,23 +73,39 @@
}
.text-label {
white-space: nowrap;
/* overflow: hidden; */
transition: opacity 0.25s ease-in-out;
}
/* TODO: Marquee doesn't work that well, disabling for now */
/* .scrolling-text {
animation: marquee var(--scroll-duration, 15s) linear infinite;
display: inline-block;
/* Inner wrapper holding track + artist inline */
#song-label .scroll-content,
#song-label-background .scroll-content {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 0.5em; /* Spacing between Track and Artist */
white-space: nowrap;
will-change: transform;
}
@keyframes marquee {
0% {
transform: translateX(var(--container-width));
}
100% {
transform: translateX(var(--text-width));
}
} */
/* Preserve original font weights */
.track-label {
font-weight: 700;
}
.artist-label {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
/* Marquee scroll animation */
#song-label.is-overflowing .scroll-content,
#song-label-background.is-overflowing .scroll-content {
animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite;
}
/* Mask animation applied to container */
#song-label.is-overflowing,
#song-label-background.is-overflowing {
animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite;
}