meoware.exe/TidaLuna-Plugins
1
0
Fork 0
mirror of https://github.com/meowarex/TidaLuna-Plugins.git synced 2026-06-18 03:43:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

Fix BG Cover Art being Stuck on First Render

Browse Source
This commit is contained in:
meowarex
2025-06-01 00:20:00 +10:00
parent 22f7c4eec7
commit 4bd9cf71b0
2 changed files with 92 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/clean-view-luna/src/index.ts
+86 -51
View File
@@ -60,6 +60,7 @@ async function HttpGet(url: string): Promise<string | null> {
var isCleanView = false;
var appliedStyle: HTMLStyleElement | null = null;
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
const toggleCleanButton = function(callback: () => void, icon: string, customIndex: number = 2): void {
setTimeout(() => {
@@ -89,21 +90,48 @@ const toggleCleanButton = function(callback: () => void, icon: string, customInd
};
function observeTrackTitle(): void {
// Observe track title changes
const trackTitleElement = document.querySelector('[class^="_trackTitleContainer"]');
if (trackTitleElement) {
const observer = new MutationObserver(() => {
const titleObserver = new MutationObserver(() => {
setTimeout(() => {
onTrackChanged();
}, 300);
});
observer.observe(trackTitleElement, {
titleObserver.observe(trackTitleElement, {
childList: true,
subtree: true
});
unloads.add(() => observer.disconnect());
unloads.add(() => titleObserver.disconnect());
}
// Also observe the album image container for changes
const albumImageContainer = document.querySelector('figure[class*="_albumImage"]');
if (albumImageContainer) {
const imageObserver = new MutationObserver(() => {
setTimeout(() => {
onTrackChanged();
}, 100); // Slightly longer delay for image loading
});
imageObserver.observe(albumImageContainer, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['src', 'poster']
});
unloads.add(() => imageObserver.disconnect());
}
// Set up a periodic check as fallback
const periodicCheck = setInterval(() => {
onTrackChanged();
}, 100); // Check every 3 seconds
unloads.add(() => clearInterval(periodicCheck));
}
const onTrackChanged = function (method: number = 0): void {
@@ -132,61 +160,67 @@ const onTrackChanged = function (method: number = 0): void {
}
} else {
cleanUpDynamicArt();
console.log("Couldn't get album art");
trace.msg.log("Couldn't get album art");
return;
}
}
// Setting background to the *="nowPlayingContainer" element
const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
if (nowPlayingContainerElement && albumImageSrc) {
// Remove existing corner images if they exist
const existingImages = nowPlayingContainerElement.querySelectorAll('.corner-image');
existingImages.forEach(img => img.remove());
// Only update if the image source has actually changed
if (albumImageSrc && albumImageSrc !== currentTrackSrc) {
currentTrackSrc = albumImageSrc;
trace.msg.log(`Track changed, updating background: ${albumImageSrc}`);
// Setting background to the *="nowPlayingContainer" element
const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
if (nowPlayingContainerElement) {
// Remove existing corner images if they exist
const existingImages = nowPlayingContainerElement.querySelectorAll('.corner-image');
existingImages.forEach(img => img.remove());
// Create and append center image
const centerImg = document.createElement('img');
centerImg.src = albumImageSrc;
centerImg.className = 'corner-image';
centerImg.style.position = 'absolute';
centerImg.style.left = '50%';
centerImg.style.top = '50%';
centerImg.style.transform = 'translate(-50%, -50%)';
centerImg.style.width = '75vw';
centerImg.style.height = '150vh';
centerImg.style.objectFit = 'cover';
centerImg.style.zIndex = '-1';
centerImg.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
centerImg.style.animation = 'spin 35s linear infinite';
centerImg.style.animationDelay = '5s'; // Add a 5-second delay
nowPlayingContainerElement.appendChild(centerImg);
// Create and append center image
const centerImg = document.createElement('img');
centerImg.src = albumImageSrc;
centerImg.className = 'corner-image';
centerImg.style.position = 'absolute';
centerImg.style.left = '50%';
centerImg.style.top = '50%';
centerImg.style.transform = 'translate(-50%, -50%)';
centerImg.style.width = '75vw';
centerImg.style.height = '150vh';
centerImg.style.objectFit = 'cover';
centerImg.style.zIndex = '-1';
centerImg.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
centerImg.style.animation = 'spin 35s linear infinite';
centerImg.style.animationDelay = '5s'; // Add a 5-second delay
nowPlayingContainerElement.appendChild(centerImg);
const centerImg2 = document.createElement('img');
centerImg2.src = albumImageSrc;
centerImg2.className = 'corner-image';
centerImg2.style.position = 'absolute';
centerImg2.style.left = '50%';
centerImg2.style.top = '50%';
centerImg2.style.transform = 'translate(-50%, -50%)';
centerImg2.style.width = '75vw';
centerImg2.style.height = '150vh';
centerImg2.style.objectFit = 'cover';
centerImg2.style.zIndex = '-1';
centerImg2.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
centerImg2.style.animation = 'spin 35s linear infinite';
nowPlayingContainerElement.appendChild(centerImg2);
const centerImg2 = document.createElement('img');
centerImg2.src = albumImageSrc;
centerImg2.className = 'corner-image';
centerImg2.style.position = 'absolute';
centerImg2.style.left = '50%';
centerImg2.style.top = '50%';
centerImg2.style.transform = 'translate(-50%, -50%)';
centerImg2.style.width = '75vw';
centerImg2.style.height = '150vh';
centerImg2.style.objectFit = 'cover';
centerImg2.style.zIndex = '-1';
centerImg2.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
centerImg2.style.animation = 'spin 35s linear infinite';
nowPlayingContainerElement.appendChild(centerImg2);
// Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'spinAnimation';
styleSheet.textContent = `
@keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
`;
document.head.appendChild(styleSheet);
// Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'spinAnimation';
styleSheet.textContent = `
@keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
`;
document.head.appendChild(styleSheet);
}
}
}
};
@@ -196,6 +230,7 @@ const cleanUpDynamicArt = function (): void {
Array.from(cornerImages).forEach((element) => {
element.remove();
});
currentTrackSrc = null; // Reset current track source
};
// STYLES FOR THE LYRICS - Added Top-level async since Luna plugins are modules <3