Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -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
.common/utils/helpers.js
+73
View File
@@ -411,4 +411,77 @@ async function LoadHTMLTemplate(name) {
if (!document.getElementById(template.id)) { if (!document.getElementById(template.id)) {
document.body.appendChild(template.cloneNode(true)); document.body.appendChild(template.cloneNode(true));
} }
}
// Calculate an accent color given an image
// async function GetAccentPalette(imageUrl, count = 20) {
// if (typeof ColorThief === 'undefined') {
// await new Promise((resolve, reject) => {
// const script = document.createElement('script');
// script.src = "https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.min.js";
// script.onload = resolve;
// script.onerror = reject;
// document.head.appendChild(script);
// });
// }
// return new Promise((resolve) => {
// const img = new Image();
// img.crossOrigin = "Anonymous";
// img.src = imageUrl;
// img.onload = () => {
// const colorThief = new ColorThief();
// // Clamp count between 2 and 20 to ensure algorithm stability
// const safeCount = Math.max(2, Math.min(20, count));
// const palette = colorThief.getPalette(img, safeCount);
// // Convert RGB array to Hex
// const hexPalette = palette.map(([r, g, b]) => {
// return "#" + ((1 << 24) + (r << 16) + (g << 8) + b)
// .toString(16)
// .slice(1);
// });
// resolve(hexPalette);
// };
// img.onerror = () => resolve(["#ffffff"]);
// });
// }
async function GetAccentPalette(imageUrl) {
// 1. Dynamic Loader: Load Vibrant.js
if (typeof Vibrant === 'undefined') {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/node-vibrant/3.1.6/vibrant.min.js";
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
return new Promise((resolve) => {
// Vibrant can take the URL directly!
Vibrant.from(imageUrl).getPalette((err, palette) => {
if (err) {
console.warn("Vibrant failed, using fallback.");
return resolve({
Vibrant: "#ffffff",
Muted: "#cccccc",
DarkVibrant: "#000000"
});
}
// Extract Hex from each swatch
const hexPalette = {};
for (let role in palette) {
if (palette[role]) {
hexPalette[role] = palette[role].getHex();
}
}
resolve(hexPalette);
});
});
} }
now-playing/index.html
+1
View File
@@ -13,6 +13,7 @@
</div> </div>
</body> </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.min.js"></script>
<script src="/.common/utils/helpers.js"></script> <script src="/.common/utils/helpers.js"></script>
<script src="/.common/enums/smtc-enums.js"></script> <script src="/.common/enums/smtc-enums.js"></script>
<script id="theme-script" src="./script.js"></script> <script id="theme-script" src="./script.js"></script>
now-playing/style.css
+130 -1
View File
@@ -9,6 +9,135 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; /* Full viewport height */ height: 100vh;
margin: 0.5em; margin: 0.5em;
}
@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;
}
} }
now-playing/themes/card/style.css
+2 -128
View File
@@ -16,7 +16,7 @@
position: relative; position: relative;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
margin: 0.5em 0em 1em 0em; margin: 0em 0em 1em 0em;
} }
#album-art-layer, #album-art-layer,
@@ -81,7 +81,7 @@
position: relative; /* Keeps it in the document flow */ position: relative; /* Keeps it in the document flow */
z-index: 2; /* Sits above the background-layer */ z-index: 2; /* Sits above the background-layer */
padding: 1em 1.75em; padding: 1.5em 1.25em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.3em; gap: 0.3em;
@@ -162,130 +162,4 @@
justify-content: space-between; justify-content: space-between;
font-size: 0.7em; font-size: 0.7em;
opacity: 0.5; 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;
}
} }
now-playing/themes/compact/index.html
+9 -4
View File
@@ -1,12 +1,17 @@
<div id="main-wrapper"> <div id="main-wrapper">
<div id="song-info-container"> <div id="song-info-container">
<div id="background-layer"></div> <div id="progress-bar-track" class="progress">
<label id="song-label-background" class="text-label">
<span id="track-label-background"></span>
<span id="artist-label-background"></span>
</label>
</div>
<div id="song-info-wrapper"> <div id="progress-bar" class="progress">
<div id="song-label" class="text-label"> <label id="song-label" class="text-label">
<span id="track-label"></span> <span id="track-label"></span>
<span id="artist-label"></span> <span id="artist-label"></span>
</div> </label>
</div> </div>
</div> </div>
</div> </div>
now-playing/themes/compact/script.js
+52 -74
View File
@@ -13,17 +13,13 @@ let hideTimeout = null;
const mainWrapper = document.getElementById('main-wrapper'); const mainWrapper = document.getElementById('main-wrapper');
const albumArtContainer = document.getElementById('album-art-container'); 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 progressBar = document.getElementById('progress-bar');
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 trackLabelBase = document.getElementById('track-label-background');
const artistLabelBase = document.getElementById('artist-label-background');
const songLabel = document.getElementById('song-label'); const songLabel = document.getElementById('song-label');
// const progressContainer = document.getElementById('progress-container'); const songLabelBackground = document.getElementById('song-label-background');
// const progressBarFill = document.getElementById('progress-bar-fill');
// const currentTimeLabel = document.getElementById('current-time');
// const durationLabel = document.getElementById('duration');
@@ -36,23 +32,6 @@ if (maxWidth > 0)
else else
mainWrapper.style.width = `100%`; mainWrapper.style.width = `100%`;
// // Set album art style
// switch (albumArt)
// {
// case 'none':
// albumArtContainer.style.display = 'none';
// break;
// case 'show':
// albumArtContainer.style.display = '';
// break;
// case 'spinny':
// break;
// }
// // Set progress bar visibility
// if (!showProgressBar)
// progressContainer.style.display = 'none';
//////////////////// ////////////////////
@@ -60,7 +39,7 @@ else
//////////////////// ////////////////////
// Each theme must implement the following // 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 // Check if the user has provided a target application in the settings
const isFiltering = targetApplication && targetApplication.trim() !== ""; const isFiltering = targetApplication && targetApplication.trim() !== "";
@@ -81,6 +60,9 @@ function UpdatePlayerState(data) {
const playbackInfo = targetSession.playback_info; const playbackInfo = targetSession.playback_info;
const mediaProps = targetSession.media_properties; const mediaProps = targetSession.media_properties;
const timelineProps = targetSession.timeline_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 // 1. Check if playback status has changed and update visibility accordingly
if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) { if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) {
@@ -94,7 +76,7 @@ function UpdatePlayerState(data) {
// 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded // 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}`; const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
if (newTrackKey !== CurrentSong) { if (newTrackKey !== CurrentSong) {
ChangeTrack(mediaProps); // Now trigger your cross-fade logic here! ChangeTrack(mediaProps, accentColorPalette); // Now trigger your cross-fade logic here!
CurrentSong = newTrackKey; // Update the tracker with the string key CurrentSong = newTrackKey; // Update the tracker with the string key
} }
@@ -112,20 +94,20 @@ function UpdatePlayerState(data) {
const isPlaying = (targetSession.playback_info.PlaybackStatus === PlaybackStatus.PLAYING); const isPlaying = (targetSession.playback_info.PlaybackStatus === PlaybackStatus.PLAYING);
const currentPositionMs = isPlaying && timelineProps.EndTime > 0 ? timelineProps.Position + driftMs : timelineProps.Position; const currentPositionMs = isPlaying && timelineProps.EndTime > 0 ? timelineProps.Position + driftMs : timelineProps.Position;
// // Update the label using your naming convention
// currentTimeLabel.innerText =
// ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(currentPositionMs);
// durationLabel.innerText =
// ConvertMillisecondsToMinutesSoThatItLooksBetterOnTheOverlay(timelineProps.EndTime);
// Set progressbar // Set progressbar
// Ensure we don't divide by zero or exceed 100% // Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime; const durationMs = timelineProps.EndTime;
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
backgroundLayer.style.width = `${progressPercent}%`;
// progressBarFill.style.setProperty('--accent-color', mediaProps.AccentColor); // Calculate how much needs to be hidden (the right-side offset)
const clipRight = 100 - progressPercent;
// Update the clip-path
progressBar.style.clipPath = `inset(0 ${clipRight}% 0 0)`;
// const clipRight = progressPercent;
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - 4em), transparent ${clipRight}%)`
} }
} }
else else
@@ -161,59 +143,55 @@ function SetVisibility(visible) {
} }
} }
async function ChangeTrack(mediaProps) { async function ChangeTrack(mediaProps, accentColor) {
// Fade in the overlay (shows the new text) // Fade in the overlay (shows the new text)
songLabel.style.opacity = "0"; songLabel.style.opacity = "0";
// trackLabel.style.opacity = "0"; songLabelBackground.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 // Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => { setTimeout(() => {
trackLabel.innerText = mediaProps.Title; trackLabel.innerText = mediaProps.Title;
artistLabel.innerText = mediaProps.Artist; artistLabel.innerText = mediaProps.Artist;
// songLabel.innerText = `${mediaProps.Artist}${mediaProps.Title}` trackLabelBase.innerText = mediaProps.Title;
artistLabelBase.innerText = mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art) // Extract the image source string (use fallback if Windows has no art)
// const newArtUrl = mediaProps.Base64Image;
const accent = mediaProps.AccentColor || "#ffffff";
// Set the pill color // Set the pill color
backgroundLayer.style.background = accent; songInfoContainer.style.background = accentColor.DarkMuted + "80";
progressBar.style.background = accentColor.LightVibrant;
songLabel.style.color = accentColor.DarkVibrant;
songLabelBackground.style.color = accentColor.LightVibrant;
// 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 = "";
songLabel.style.opacity = ""; songLabel.style.opacity = "";
// backgroundLayer.style.opacity = ""; songLabelBackground.style.opacity = "";
// albumArtLayer.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(() => { setTimeout(() => {
// // Set the image
// backgroundTransitionLayer.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 SetAlbumArtSize() {
// const height = songInfoContainer.offsetHeight;
// albumArtContainer.style.height = `${1.5 * height}px`;
// albumArtContainer.style.width = `${1.5 * height}px`;
// }
// SetAlbumArtSize();
now-playing/themes/compact/style.css
+46 -157
View File
@@ -2,7 +2,6 @@
width: 500px; width: 500px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
/* This forces both containers to be the same height */
align-items: stretch; align-items: stretch;
gap: 1em; gap: 1em;
opacity: 0; opacity: 0;
@@ -17,186 +16,76 @@
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
border-radius: 1em; border-radius: 1em;
padding: 0.25em 0.75em; transition: all 1s ease-in-out;
background-color: #00000080; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
display: grid;
/* This creates a single cell that both children will occupy */
grid-template-areas: "stack";
} }
/* The content sits on top */ /* The content sits on top */
#song-info-wrapper { #progress-bar {
position: relative; /* Keeps it in the document flow */ grid-area: stack;
z-index: 2; /* Sits above the background-layer */ position: relative;
width: 100%; z-index: 2; /* Sits above the progress bar */
/* padding: 1em 1.75em; transition: all 1s ease-in-out;
display: flex; width: 100%;
flex-direction: column; /* mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%);
gap: 0.3em; */ -webkit-mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%); */
} }
#song-label { .progress {
box-sizing: border-box;
padding: 0.25em 0.75em;
grid-area: stack;
display: flex;
/* justify-content: center; */
min-width: 0;
}
#song-label,
#song-label-background {
font-size: 1em; font-size: 1em;
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
gap: 0.5em; gap: 0.5em;
min-width: 100%;
/* justify-content: center; */
overflow: visible;
} }
#artist-label { #artist-label,
#artist-label-background {
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
opacity: 0.7; opacity: 0.7;
} }
#track-label { #track-label,
#track-label-background {
font-weight: 700; font-weight: 700;
} }
.text-label { .text-label {
white-space: nowrap; white-space: nowrap;
overflow: hidden; /* overflow: hidden; */
mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
} }
/* The background now fills the frame */
#background-layer { /* TODO: Marquee doesn't work that well, disabling for now */
position: absolute; /* .scrolling-text {
top: 0; animation: marquee var(--scroll-duration, 15s) linear infinite;
left: 0; display: inline-block;
width: 0%;
height: 100%;
z-index: 1;
transition: all 1s ease;
mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
transition: all 1s ease-in-out;
opacity: 0.7;
} }
@keyframes fade-in { @keyframes marquee {
0% { 0% {
opacity: 0; transform: translateX(var(--container-width));
} }
100% {
100% { transform: translateX(var(--text-width));
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;
}
}
now-playing/themes/simple/script.js
+1 -1
View File
@@ -174,7 +174,7 @@ async function ChangeTrack(mediaProps) {
// Extract the image source string (use fallback if Windows has no art) // Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Base64Image; const newArtUrl = mediaProps.Base64Image;
const accent = mediaProps.AccentColor || "#ffffff"; // const accent = mediaProps.AccentColor || "#ffffff";
// Set the image // Set the image
// backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; // backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
now-playing/themes/simple/style.css
-126
View File
@@ -80,130 +80,4 @@
mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%); -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
}
@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;
}
} }
now-playing/themes/standard/script.js
+14 -10
View File
@@ -59,7 +59,7 @@ if (!showProgressBar)
//////////////////// ////////////////////
// Each theme must implement the following // 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 // Check if the user has provided a target application in the settings
const isFiltering = targetApplication && targetApplication.trim() !== ""; const isFiltering = targetApplication && targetApplication.trim() !== "";
@@ -80,6 +80,9 @@ function UpdatePlayerState(data) {
const playbackInfo = targetSession.playback_info; const playbackInfo = targetSession.playback_info;
const mediaProps = targetSession.media_properties; const mediaProps = targetSession.media_properties;
const timelineProps = targetSession.timeline_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 // 1. Check if playback status has changed and update visibility accordingly
if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) { 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 // 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}`; const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
if (newTrackKey !== CurrentSong) { if (newTrackKey !== CurrentSong) {
ChangeTrack(mediaProps); // Now trigger your cross-fade logic here! ChangeTrack(mediaProps, accentColorPalette.LightVibrant); // Now trigger your cross-fade logic here!
CurrentSong = newTrackKey; // Update the tracker with the string key CurrentSong = newTrackKey; // Update the tracker with the string key
} }
// 3. Update the progress info // 3. Update the progress info
@@ -124,7 +127,7 @@ function UpdatePlayerState(data) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', mediaProps.AccentColor); progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
} }
} }
else 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) // Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
artistLabel.style.opacity = "0"; artistLabel.style.opacity = "0";
@@ -168,13 +171,12 @@ async function ChangeTrack(mediaProps) {
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
setTimeout(() => { setTimeout(async () => {
trackLabel.innerText = mediaProps.Title; trackLabel.innerText = mediaProps.Title;
artistLabel.innerText = mediaProps.Artist; artistLabel.innerText = mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art) // Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Base64Image; const newArtUrl = mediaProps.Base64Image;
const accent = mediaProps.AccentColor || "#ffffff";
// Set the image // Set the image
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; 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 // 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
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 = ""; trackLabel.style.opacity = "";
artistLabel.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 // 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 = 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 SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250); }, 250);
@@ -209,4 +211,6 @@ function SetAlbumArtSize() {
albumArtContainer.style.width = `${height}px`; 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-repeat: no-repeat;
background-blend-mode: overlay; /* Or 'soft-light' for a subtler effect */ 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 */ transform: scale(1.1); /* Slightly zoom in to cover edges when blurred */
} }
@@ -161,130 +161,4 @@
justify-content: space-between; justify-content: space-between;
font-size: 0.7em; font-size: 0.7em;
opacity: 0.5; 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;
}
} }