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

Improved accent colors

Browse Source
This commit is contained in:
nutty
2026-06-28 03:05:29 +10:00
parent 9b97cc593c
commit a52b07fccc
11 changed files with 329 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/standard/script.js
+14 -10
View File
@@ -59,7 +59,7 @@ if (!showProgressBar)
////////////////////
// Each theme must implement the following
function UpdatePlayerState(data) {
async function UpdatePlayerState(data) {
// Check if the user has provided a target application in the settings
const isFiltering = targetApplication && targetApplication.trim() !== "";
@@ -80,6 +80,9 @@ function UpdatePlayerState(data) {
const playbackInfo = targetSession.playback_info;
const mediaProps = targetSession.media_properties;
const timelineProps = targetSession.timeline_properties;
// Calcualte an accent color
const accentColorPalette = await GetAccentPalette(mediaProps.Base64Image);
// 1. Check if playback status has changed and update visibility accordingly
if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) {
@@ -93,8 +96,8 @@ function UpdatePlayerState(data) {
// 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
if (newTrackKey !== CurrentSong) {
ChangeTrack(mediaProps); // Now trigger your cross-fade logic here!
CurrentSong = newTrackKey; // Update the tracker with the string key
ChangeTrack(mediaProps, accentColorPalette.LightVibrant); // Now trigger your cross-fade logic here!
CurrentSong = newTrackKey; // Update the tracker with the string key
}
// 3. Update the progress info
@@ -124,7 +127,7 @@ function UpdatePlayerState(data) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', mediaProps.AccentColor);
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
}
}
else
@@ -160,7 +163,7 @@ function SetVisibility(visible) {
}
}
async function ChangeTrack(mediaProps) {
async function ChangeTrack(mediaProps, tintColor) {
// Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0";
artistLabel.style.opacity = "0";
@@ -168,13 +171,12 @@ async function ChangeTrack(mediaProps) {
albumArtLayer.style.opacity = "0";
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => {
setTimeout(async () => {
trackLabel.innerText = mediaProps.Title;
artistLabel.innerText = mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Base64Image;
const accent = mediaProps.AccentColor || "#ffffff";
// Set the image
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
@@ -182,7 +184,7 @@ async function ChangeTrack(mediaProps) {
// 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
backgroundLayer.style.backgroundColor = tintColor + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = "";
artistLabel.style.opacity = "";
@@ -196,7 +198,7 @@ async function ChangeTrack(mediaProps) {
// 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
backgroundTransitionLayer.style.backgroundColor = tintColor + "80"; // 80 is 50% opacity in hex
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250);
@@ -209,4 +211,6 @@ function SetAlbumArtSize() {
albumArtContainer.style.width = `${height}px`;
}
SetAlbumArtSize();
requestAnimationFrame(() => {
SetAlbumArtSize();
});
now-playing/themes/standard/style.css
+1 -127
View File
@@ -63,7 +63,7 @@
background-repeat: no-repeat;
background-blend-mode: overlay; /* Or 'soft-light' for a subtler effect */
filter: blur(0px) brightness(0.3);
filter: blur(0px) brightness(0.3) saturate(1.2);
transform: scale(1.1); /* Slightly zoom in to cover edges when blurred */
}
@@ -161,130 +161,4 @@
justify-content: space-between;
font-size: 0.7em;
opacity: 0.5;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}@keyframes slide-in-from-top {
0% {
transform: translateY(-1em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-from-top {
0% {
transform: translateY(-1em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-out-top {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-1em);
opacity: 0;
}
}
@keyframes slide-in-from-bottom {
0% {
transform: translateY(1em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-out-bottom {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(1em);
opacity: 0;
}
}
@keyframes slide-in-from-left {
0% {
transform: translateX(-1em);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-left {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-1em);
opacity: 0;
}
}
@keyframes slide-in-from-right {
0% {
transform: translateX(1em);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-right {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(1em);
opacity: 0;
}
}