Big refactor

This commit is contained in:
nutty
2026-07-01 04:14:21 +10:00
parent 3fe4ee5051
commit a39e05147c
13 changed files with 206 additions and 725 deletions
+20 -112
View File
@@ -42,116 +42,7 @@ if (!showProgressBar)
// CORE FUNCTIONS //
////////////////////
// Each theme must implement the following
async function UpdatePlayerState(data) {
// Check if the user has provided a target application in the settings
const isFiltering = targetApplication && targetApplication.trim() !== "";
// Search for the session that matches the target application
const sessionToFind = isFiltering ? targetApplication : data.current_session_id;
let targetSession = data.sessions.find(s => {
// If filtering, check if the source_app_id matches the user's string
if (isFiltering) {
return s.source_app_id.toLowerCase() === targetApplication.toLowerCase();
}
// Otherwise, match the system's current active session ID
return s.source_app_id === sessionToFind;
});
// If a target session was found, update the state of the widget
if (targetSession) {
// Extract the relevant properties from the session
const playbackInfo = targetSession.playback_info;
const mediaProps = targetSession.media_properties;
const timelineProps = targetSession.timeline_properties;
// Calcualte an accent color
const accentColorPalette = await GetAccentPalette(mediaProps.Thumbnail);
// 1. Check if playback status has changed and update visibility accordingly
if (playbackInfo.PlaybackStatus !== CurrentPlaybackStatus) {
if (playbackInfo.PlaybackStatus === PlaybackStatus.PLAYING)
SetVisibility(true);
else
SetVisibility(false);
CurrentPlaybackStatus = playbackInfo.PlaybackStatus;
}
// 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
// Only proceed if the player state is actively playing audio
if (CurrentPlaybackStatus == PlaybackStatus.PLAYING)
{
const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
if (newTrackKey !== CurrentSong) {
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
if (timelineProps)
{
// Parse the Windows timestamp into a JavaScript time object
const lastUpdateAnchor = Date.parse(timelineProps.LastUpdatedTime.replace(' ', 'T'));
// Calculate the drift (i.e. how many milliseconds have passed since Windows last updated)
const driftMs = Date.now() - lastUpdateAnchor;
// Add that drift to the reported Position
// Only add drift if the status is PLAYING
const isPlaying = (targetSession.playback_info.PlaybackStatus === PlaybackStatus.PLAYING);
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
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
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', accentColorPalette.LightVibrant);
}
}
else
{
SetVisibility(false);
}
}
//////////////////////
// HELPER FUNCTIONS //
//////////////////////
function SetVisibility(visible) {
// Always clear any pending hide timers whenever we change visibility
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
if (visible) {
mainWrapper.style.animation = `${showAnimation} 0.5s ease-out forwards`;
// Only set a new timer if autoHide is enabled
if (autoHide) {
hideTimeout = setTimeout(() => {
SetVisibility(false);
}, displayDuration * 1000);
}
} else {
mainWrapper.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
}
}
async function ChangeTrack(mediaProps, tintColor) {
async function ChangeTrack(mediaProps, accentColorPalette) {
// Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0";
artistLabel.style.opacity = "0";
@@ -172,7 +63,7 @@ async function ChangeTrack(mediaProps, tintColor) {
// 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 = tintColor + "80"; // 80 is 50% opacity in hex
// backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = "";
artistLabel.style.opacity = "";
@@ -186,13 +77,30 @@ async function ChangeTrack(mediaProps, tintColor) {
// 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 = tintColor + "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);
}, 250);
}
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
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', accentColorPalette.LightVibrant);
}
function SetAlbumArtSize() {
// const height = songInfoContainer.offsetHeight;
albumArtContainer.style.height = `100%`;