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

• Removed all references to 'SetAlbumArtSize()'

Browse Source 
• Added progress info to Simple theme
This commit is contained in:
nutty
2026-07-01 05:04:28 +10:00
parent a39e05147c
commit 1e423ee2fe
7 changed files with 96 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/card/script.js
+1 -9
View File
@@ -99,12 +99,4 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
}
function SetAlbumArtSize() {
// const height = songInfoContainer.offsetHeight;
albumArtContainer.style.height = `100%`;
// albumArtContainer.style.width = `100%`;
}
SetAlbumArtSize();
}
now-playing/themes/classic/index.html
+20 -18
View File
@@ -1,26 +1,28 @@
<div id="main-wrapper">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="yet-another-wrapper-yup">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="song-info-container">
<div id="background-layer"></div>
<div id="background-transition-layer"></div>
<div id="song-info-container">
<div id="background-layer"></div>
<div id="background-transition-layer"></div>
<div id="song-info-wrapper">
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="song-info-wrapper">
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="progress-container">
<div id="progress-bar-track">
<div id="progress-bar-fill"></div>
<div></div>
</div>
<div id="progress-container">
<div id="progress-bar-track">
<div id="progress-bar-fill"></div>
<div></div>
</div>
<div id="time-container">
<div id="current-time">0:00</div>
<div id="duration">0:00</div>
<div id="time-container">
<div id="current-time">0:00</div>
<div id="duration">0:00</div>
</div>
</div>
</div>
</div>
now-playing/themes/classic/script.js
+2 -12
View File
@@ -77,7 +77,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
// 'rgba(0,0,0,0.6)' ensures the text stays readable
backgroundTransitionLayer.style.backgroundColor = aaccentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
backgroundTransitionLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250);
@@ -99,14 +99,4 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
}
function SetAlbumArtSize() {
const height = songInfoContainer.offsetHeight;
albumArtContainer.style.height = `${height}px`;
albumArtContainer.style.width = `${height}px`;
}
requestAnimationFrame(() => {
SetAlbumArtSize();
});
}
now-playing/themes/classic/style.css
+15 -1
View File
@@ -13,6 +13,7 @@
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
height: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--border-radius);
@@ -20,6 +21,7 @@
background-size: cover;
background-position: center;
display: var(--show-album-art);
flex-shrink: 0;
}
#album-art-layer,
@@ -45,7 +47,8 @@
#song-info-container {
position: relative;
flex: 1;
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
@@ -54,6 +57,17 @@
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#yet-another-wrapper-yup {
position: relative;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
gap: 0.5em;
transition: all 0.25s ease-in-out;
}
/* The background now fills the frame */
#background-layer,
#background-transition-layer {
now-playing/themes/simple/index.html
+16 -7
View File
@@ -1,11 +1,20 @@
<div id="main-wrapper">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="yet-another-wrapper-yup">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="song-info-container">
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="song-info-container">
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="progress-container">
<label>
<span id="current-time" class="progress-text">0:00</span>
<span>/</span>
<span id="duration" class="progress-text">0:00</span>
</label>
</div>
</div>
</div>
</div>
now-playing/themes/simple/script.js
+18 -32
View File
@@ -7,14 +7,11 @@ const albumArtContainer = document.getElementById('album-art-container');
const songInfoContainer = document.getElementById('song-info-container');
const albumArtLayer = document.getElementById('album-art-layer');
const albumArtTransition = document.getElementById('album-art-transition-layer');
// const backgroundLayer = document.getElementById('background-layer');
// const backgroundTransitionLayer = document.getElementById('background-transition-layer');
const trackLabel = document.getElementById('track-label');
const artistLabel = document.getElementById('artist-label');
// const progressContainer = document.getElementById('progress-container');
// const progressBarFill = document.getElementById('progress-bar-fill');
// const currentTimeLabel = document.getElementById('current-time');
// const durationLabel = document.getElementById('duration');
const progressContainer = document.getElementById('progress-container');
const currentTimeLabel = document.getElementById('current-time');
const durationLabel = document.getElementById('duration');
@@ -32,9 +29,13 @@ if (maxWidth > 0)
else
mainWrapper.style.width = `100%`;
// // Set progress bar visibility
// if (!showProgressBar)
// progressContainer.style.display = 'none';
// Set progress bar visibility
if (!showProgressBar)
progressContainer.style.display = 'none';
// If text alignment is 'right', swap the album art to the right hand side too
if (textAlignment == 'right')
document.getElementById('yet-another-wrapper-yup').appendChild(document.getElementById('album-art-container'));
@@ -43,10 +44,8 @@ else
////////////////////
async function ChangeTrack(mediaProps) {
// Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0";
artistLabel.style.opacity = "0";
// backgroundLayer.style.opacity = "0";
albumArtLayer.style.opacity = "0";
// Wait for fade (0.5s), then swap the real text and hide overlay
@@ -58,39 +57,26 @@ async function ChangeTrack(mediaProps) {
const newArtUrl = mediaProps.Thumbnail;
// Set the image
// backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
// // Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
// // 'rgba(0,0,0,0.6)' ensures the text stays readable
// backgroundLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = "";
artistLabel.style.opacity = "";
// backgroundLayer.style.opacity = "";
albumArtLayer.style.opacity = "";
setTimeout(() => {
// // Set the image
// backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
// Set the image
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
// // Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
// // 'rgba(0,0,0,0.6)' ensures the text stays readable
// backgroundTransitionLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250);
}, 250);
}
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
}
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
function SetAlbumArtSize() {
const height = songInfoContainer.offsetHeight;
albumArtContainer.style.height = `${1.5 * height}px`;
albumArtContainer.style.width = `${1.5 * height}px`;
}
SetAlbumArtSize();
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
}
now-playing/themes/simple/style.css
+24 -4
View File
@@ -6,14 +6,23 @@
width: 500px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1em;
align-items: stretch;
opacity: 0;
align-items: center;
}
#yet-another-wrapper-yup {
position: relative;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75em;
transition: all 0.25s ease-in-out;
}
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
height: 150%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--border-radius);
@@ -21,6 +30,7 @@
background-size: cover;
background-position: center;
display: var(--show-album-art);
flex-shrink: 0;
}
#album-art-layer,
@@ -50,6 +60,8 @@
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
min-width: 0;
}
#background-transition-layer {
@@ -75,11 +87,19 @@
#artist-label {
font-size: 0.8em;
font-weight: 300;
font-weight: 400;
opacity: 0.6;
text-align: var(--text-alignment);
}
#progress-container {
font-size: 0.6em;
font-weight: 400;
opacity: 0.6;
text-align: var(--text-alignment);
margin-top: 0.5em;
}
.text-label {
white-space: nowrap;
overflow: hidden;