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
-8
View File
@@ -100,11 +100,3 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); 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="main-wrapper">
<div id="album-art-container"> <div id="yet-another-wrapper-yup">
<div id="album-art-layer"></div> <div id="album-art-container">
<div id="album-art-transition-layer"></div> <div id="album-art-layer"></div>
</div> <div id="album-art-transition-layer"></div>
</div>
<div id="song-info-container"> <div id="song-info-container">
<div id="background-layer"></div> <div id="background-layer"></div>
<div id="background-transition-layer"></div> <div id="background-transition-layer"></div>
<div id="song-info-wrapper"> <div id="song-info-wrapper">
<div id="track-label" class="text-label">&nbsp;</div> <div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div> <div id="artist-label" class="text-label">&nbsp;</div>
<div id="progress-container"> <div id="progress-container">
<div id="progress-bar-track"> <div id="progress-bar-track">
<div id="progress-bar-fill"></div> <div id="progress-bar-fill"></div>
<div></div> <div></div>
</div> </div>
<div id="time-container"> <div id="time-container">
<div id="current-time">0:00</div> <div id="current-time">0:00</div>
<div id="duration">0:00</div> <div id="duration">0:00</div>
</div>
</div> </div>
</div> </div>
</div> </div>
now-playing/themes/classic/script.js
+1 -11
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 // 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 // '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 SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250); }, 250);
@@ -100,13 +100,3 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); 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 { #album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */ /* 1. Tell it to maintain a 1:1 square ratio */
height: 100%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -20,6 +21,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: var(--show-album-art); display: var(--show-album-art);
flex-shrink: 0;
} }
#album-art-layer, #album-art-layer,
@@ -45,7 +47,8 @@
#song-info-container { #song-info-container {
position: relative; position: relative;
flex: 1; flex-grow: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -54,6 +57,17 @@
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 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 */ /* The background now fills the frame */
#background-layer, #background-layer,
#background-transition-layer { #background-transition-layer {
now-playing/themes/simple/index.html
+16 -7
View File
@@ -1,11 +1,20 @@
<div id="main-wrapper"> <div id="main-wrapper">
<div id="album-art-container"> <div id="yet-another-wrapper-yup">
<div id="album-art-layer"></div> <div id="album-art-container">
<div id="album-art-transition-layer"></div> <div id="album-art-layer"></div>
</div> <div id="album-art-transition-layer"></div>
</div>
<div id="song-info-container"> <div id="song-info-container">
<div id="track-label" class="text-label">&nbsp;</div> <div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-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>
</div> </div>
now-playing/themes/simple/script.js
+16 -30
View File
@@ -7,14 +7,11 @@ const albumArtContainer = document.getElementById('album-art-container');
const songInfoContainer = document.getElementById('song-info-container'); const songInfoContainer = document.getElementById('song-info-container');
const albumArtLayer = document.getElementById('album-art-layer'); const albumArtLayer = document.getElementById('album-art-layer');
const albumArtTransition = document.getElementById('album-art-transition-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 trackLabel = document.getElementById('track-label');
const artistLabel = document.getElementById('artist-label'); const artistLabel = document.getElementById('artist-label');
// const progressContainer = document.getElementById('progress-container'); const progressContainer = document.getElementById('progress-container');
// const progressBarFill = document.getElementById('progress-bar-fill'); const currentTimeLabel = document.getElementById('current-time');
// const currentTimeLabel = document.getElementById('current-time'); const durationLabel = document.getElementById('duration');
// const durationLabel = document.getElementById('duration');
@@ -32,9 +29,13 @@ if (maxWidth > 0)
else else
mainWrapper.style.width = `100%`; mainWrapper.style.width = `100%`;
// // Set progress bar visibility // Set progress bar visibility
// if (!showProgressBar) if (!showProgressBar)
// progressContainer.style.display = 'none'; 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) { async function ChangeTrack(mediaProps) {
// Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
artistLabel.style.opacity = "0"; artistLabel.style.opacity = "0";
// backgroundLayer.style.opacity = "0";
albumArtLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0";
// Wait for fade (0.5s), then swap the real text and hide overlay // 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; const newArtUrl = mediaProps.Thumbnail;
// Set the image // Set the image
// backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.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 = ""; trackLabel.style.opacity = "";
artistLabel.style.opacity = ""; artistLabel.style.opacity = "";
// backgroundLayer.style.opacity = "";
albumArtLayer.style.opacity = ""; albumArtLayer.style.opacity = "";
setTimeout(() => { setTimeout(() => {
// // Set the image // Set the image
// backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`; 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 SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250); }, 250);
}, 250); }, 250);
} }
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
} // Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
function SetAlbumArtSize() { durationLabel.innerText =
const height = songInfoContainer.offsetHeight; ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
albumArtContainer.style.height = `${1.5 * height}px`;
albumArtContainer.style.width = `${1.5 * height}px`;
} }
SetAlbumArtSize();
now-playing/themes/simple/style.css
+23 -3
View File
@@ -7,13 +7,22 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
gap: 1em;
opacity: 0; 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 { #album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */ /* 1. Tell it to maintain a 1:1 square ratio */
height: 150%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -21,6 +30,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: var(--show-album-art); display: var(--show-album-art);
flex-shrink: 0;
} }
#album-art-layer, #album-art-layer,
@@ -50,6 +60,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
flex-grow: 1;
min-width: 0;
} }
#background-transition-layer { #background-transition-layer {
@@ -75,11 +87,19 @@
#artist-label { #artist-label {
font-size: 0.8em; font-size: 0.8em;
font-weight: 300; font-weight: 400;
opacity: 0.6; opacity: 0.6;
text-align: var(--text-alignment); 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 { .text-label {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;