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 'Show While Paused' option to all themes

Browse Source
This commit is contained in:
nutty
2026-08-27 14:23:21 +10:00
parent e355275cc2
commit 41a66d8c63
23 changed files with 364 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/standard/index.html
+5
View File
@@ -6,6 +6,11 @@
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
<div id="pause-overlay">
<svg viewBox="0 0 24 24" style="fill: var(--accent-color, #ffffff);">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
</div>
</div>
<div id="song-info-wrapper">
now-playing/themes/standard/script.js
+12 -4
View File
@@ -147,7 +147,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
}, 250);
}
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
@@ -155,6 +155,12 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
// Set the pause overlay visibility based on playback status
if (playbackStatus === PlaybackStatus.PAUSED)
albumArtContainer.classList.add('is-paused');
else
albumArtContainer.classList.remove('is-paused');
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
@@ -165,9 +171,11 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
if (!useCustomColors) {
switch (themeVariant) {
case "matte":
progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
document.body.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
break;
case "matte-dark":
document.body.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break;
default:
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break;
@@ -177,11 +185,11 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
{
switch (themeVariant) {
case "matte":
progressBarFill.style.setProperty('--accent-color', color2);
document.body.style.setProperty('--accent-color', color2);
break;
// case "matte-dark":
default:
progressBarFill.style.setProperty('--accent-color', color1);
document.body.style.setProperty('--accent-color', color1);
break;
}
}
now-playing/themes/standard/style.css
+30
View File
@@ -25,6 +25,36 @@
flex-shrink: 0;
}
#album-art-container.is-paused #album-art-layer,
#album-art-container.is-paused #album-art-transition-layer {
opacity: 0.2;
}
#pause-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 10;
border-radius: inherit;
}
#pause-overlay svg {
height: 50%;
width: auto;
}
#album-art-container.is-paused #pause-overlay {
opacity: 1;
}
#album-art-layer,
#album-art-transition-layer {
position: absolute;