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

Merge pull request #21 from meowarex/dev

Browse Source 
Added Performance Mode Setting & Improved Performance
This commit is contained in:
Meow Meow
2025-06-05 01:18:14 +10:00
committed by GitHub
parent 12604080ba 7953519773
commit 9b287a9988
5 changed files with 129 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -21,7 +21,7 @@ A dark OLED-friendly theme plugin that transforms Tidal Luna's appearance.
A radiant and beautiful lyrics view for TIDAL with dynamic visual effects.
**Features:**
- Dynamic album art backgrounds with blur and rotation effects
- Dynamic CoverArt backgrounds with blur and rotation effects
- Glowing Animated Lyrics with clean scrolling
### 📋 Copy Lyrics
plugins/radiant-lyrics-luna/src/Settings.tsx
+19 -1
View File
@@ -7,6 +7,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
playerBarVisible: true,
lyricsGlowEnabled: true,
spinningCoverEverywhere: false,
performanceMode: false,
backgroundContrast: 120,
backgroundBlur: 80,
backgroundBrightness: 40,
@@ -17,6 +18,7 @@ export const Settings = () => {
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
@@ -60,7 +62,7 @@ export const Settings = () => {
/>
<LunaSwitchSetting
title="Cover Everywhere | Experimental"
desc="Apply the spinning album cover background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
desc="Apply the spinning CoverArt background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
checked={spinningCoverEverywhere}
onChange={(_, checked: boolean) => {
console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
@@ -71,6 +73,22 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
title="Performance Mode"
desc="Disable spinning animations to reduce performance impact on your computer (backgrounds become static)"
checked={performanceMode}
onChange={(_, checked: boolean) => {
console.log("Performance Mode:", checked ? "enabled" : "disabled");
setPerformanceMode((settings.performanceMode = checked));
// Update background animations immediately when setting changes
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if ((window as any).updateRadiantLyricsPerformanceMode) {
(window as any).updateRadiantLyricsPerformanceMode();
}
}}
/>
<LunaNumberSetting
title="Background Contrast"
desc="Adjust the contrast of the spinning background (0-200, default: 120)"
plugins/radiant-lyrics-luna/src/cover-everywhere.css
+7
View File
@@ -31,6 +31,13 @@
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Performance mode - static backgrounds */
.global-spinning-image.performance-mode-static,
.now-playing-background-image.performance-mode-static {
animation: none !important;
transform: translate(-50%, -50%) !important;
}
/* Make background visible through all containers */
body,
#wimp,
plugins/radiant-lyrics-luna/src/index.ts
+100 -69
View File
@@ -29,8 +29,8 @@ if (settings.lyricsGlowEnabled) {
}
var isHidden = false;
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
var currentGlobalTrackSrc: string | null = null; // Track current global background to prevent unnecessary updates
var currentCoverArtSrc: string | null = null; // Track current CoverArt to prevent unnecessary updates
var currentGlobalBackgroundSrc: string | null = null; // Track current global background to prevent unnecessary updates
const updateButtonStates = function(): void {
const hideButton = document.querySelector('.hide-ui-button') as HTMLElement;
@@ -73,7 +73,7 @@ const updateRadiantLyricsStyles = function(): void {
};
// Function to apply spinning background to the entire app
const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
if (!settings.spinningCoverEverywhere) {
// Remove StyleTag and all background elements
@@ -102,12 +102,21 @@ const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
blackBg.className = 'global-spinning-black-bg';
appContainer.appendChild(blackBg);
// Add one spinning image for performance
// Add one image for background (spinning or static based on performance mode)
const img = document.createElement('img');
img.src = albumImageSrc;
img.src = coverArtImageSrc;
img.className = 'global-spinning-image';
img.style.animationDelay = '0s';
img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
// Apply or remove animation based on performance mode
if (settings.performanceMode) {
img.style.animation = 'none';
img.classList.add('performance-mode-static');
} else {
img.classList.remove('performance-mode-static');
}
appContainer.appendChild(img);
};
@@ -127,21 +136,51 @@ const cleanUpGlobalSpinningBackground = function(): void {
if (blackBg && blackBg.parentNode) {
blackBg.parentNode.removeChild(blackBg);
}
currentGlobalTrackSrc = null; // Reset current global track source
currentGlobalBackgroundSrc = null; // Reset current global background source
};
// Function to update global background when settings change
const updateRadiantLyricsGlobalBackground = function(): void {
if (settings.spinningCoverEverywhere && currentTrackSrc) {
applyGlobalSpinningBackground(currentTrackSrc);
if (settings.spinningCoverEverywhere && currentCoverArtSrc) {
applyGlobalSpinningBackground(currentCoverArtSrc);
} else {
cleanUpGlobalSpinningBackground();
}
};
// Function to update performance mode for existing backgrounds
const updateRadiantLyricsPerformanceMode = function(): void {
// Update global spinning background images
const globalImages = document.querySelectorAll('.global-spinning-image');
globalImages.forEach((img: Element) => {
const imgElement = img as HTMLElement;
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
} else {
imgElement.style.animation = '';
imgElement.classList.remove('performance-mode-static');
}
});
// Update Now Playing background images
const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image');
nowPlayingBackgroundImages.forEach((img: Element) => {
const imgElement = img as HTMLElement;
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
} else {
imgElement.style.animation = 'spin 35s linear infinite';
imgElement.classList.remove('performance-mode-static');
}
});
};
// Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsPerformanceMode = updateRadiantLyricsPerformanceMode;
const toggleRadiantLyrics = function(): void {
// Toggle the state first
@@ -289,7 +328,7 @@ function observeTrackTitle(): void {
if (trackTitleElement) {
const titleObserver = new MutationObserver(() => {
setTimeout(() => {
onTrackChanged();
updateCoverArtBackground();
}, 300);
});
@@ -301,16 +340,16 @@ function observeTrackTitle(): void {
unloads.add(() => titleObserver.disconnect());
}
// Also observe the album image container for changes
const albumImageContainer = document.querySelector('figure[class*="_albumImage"]');
if (albumImageContainer) {
// Also observe the CoverArt image container for changes
const coverArtImageContainer = document.querySelector('figure[class*="_albumImage"]');
if (coverArtImageContainer) {
const imageObserver = new MutationObserver(() => {
setTimeout(() => {
onTrackChanged();
updateCoverArtBackground();
}, 100); // Slightly longer delay for image loading
});
imageObserver.observe(albumImageContainer, {
imageObserver.observe(coverArtImageContainer, {
childList: true,
subtree: true,
attributes: true,
@@ -322,7 +361,7 @@ function observeTrackTitle(): void {
// Set up a periodic check as fallback
const periodicCheck = setInterval(() => {
onTrackChanged();
updateCoverArtBackground();
}, 100); // Check every 100ms
unloads.add(() => clearInterval(periodicCheck));
@@ -374,29 +413,29 @@ function observeLyricsContainer(): void {
unloads.add(() => observer.disconnect());
}
const onTrackChanged = function (method: number = 0): void {
const updateCoverArtBackground = function (method: number = 0): void {
if (method === 1) {
setTimeout(() => {
onTrackChanged();
updateCoverArtBackground();
return;
}, 2000);
}
let albumImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement;
let albumImageSrc: string | null = null;
let coverArtImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement;
let coverArtImageSrc: string | null = null;
if (albumImageElement) {
albumImageSrc = albumImageElement.src;
if (coverArtImageElement) {
coverArtImageSrc = coverArtImageElement.src;
// Set res to 1280x1280
albumImageSrc = albumImageSrc.replace(/\d+x\d+/, '1280x1280');
albumImageElement.src = albumImageSrc;
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
coverArtImageElement.src = coverArtImageSrc;
} else {
const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement;
if (videoElement) {
albumImageSrc = videoElement.getAttribute("poster");
if (albumImageSrc) {
coverArtImageSrc = videoElement.getAttribute("poster");
if (coverArtImageSrc) {
// Set res to 1280x1280
albumImageSrc = albumImageSrc.replace(/\d+x\d+/, '1280x1280');
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
}
} else {
cleanUpDynamicArt();
@@ -405,53 +444,45 @@ const onTrackChanged = function (method: number = 0): void {
}
// Only update if the image source has actually changed
if (albumImageSrc && albumImageSrc !== currentTrackSrc) {
currentTrackSrc = albumImageSrc;
if (coverArtImageSrc && coverArtImageSrc !== currentCoverArtSrc) {
currentCoverArtSrc = coverArtImageSrc;
// Apply global spinning background if enabled
if (settings.spinningCoverEverywhere && albumImageSrc !== currentGlobalTrackSrc) {
currentGlobalTrackSrc = albumImageSrc;
applyGlobalSpinningBackground(albumImageSrc);
if (settings.spinningCoverEverywhere && coverArtImageSrc !== currentGlobalBackgroundSrc) {
currentGlobalBackgroundSrc = coverArtImageSrc;
applyGlobalSpinningBackground(coverArtImageSrc);
}
// Setting background to the *="nowPlayingContainer" element
// Setting spinning CoverArt background to the Now Playing container
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());
// Remove existing background images if they exist
const existingBackgroundImages = nowPlayingContainerElement.querySelectorAll('.now-playing-background-image');
existingBackgroundImages.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(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
centerImg.style.animation = 'spin 35s linear infinite';
centerImg.style.animationDelay = '5s'; // Add a 5-second delay
nowPlayingContainerElement.appendChild(centerImg);
// Create and append single background layer
const backgroundImage = document.createElement('img');
backgroundImage.src = coverArtImageSrc;
backgroundImage.className = 'now-playing-background-image';
backgroundImage.style.position = 'absolute';
backgroundImage.style.left = '50%';
backgroundImage.style.top = '50%';
backgroundImage.style.transform = 'translate(-50%, -50%)';
backgroundImage.style.width = '75vw';
backgroundImage.style.height = '150vh';
backgroundImage.style.objectFit = 'cover';
backgroundImage.style.zIndex = '-1';
backgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
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(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
centerImg2.style.animation = 'spin 35s linear infinite';
nowPlayingContainerElement.appendChild(centerImg2);
// Apply animation based on performance mode
if (settings.performanceMode) {
backgroundImage.style.animation = 'none';
backgroundImage.classList.add('performance-mode-static');
} else {
backgroundImage.style.animation = 'spin 35s linear infinite';
backgroundImage.classList.remove('performance-mode-static');
}
nowPlayingContainerElement.appendChild(backgroundImage);
// Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) {
@@ -470,11 +501,11 @@ const onTrackChanged = function (method: number = 0): void {
};
const cleanUpDynamicArt = function (): void {
const cornerImages = document.getElementsByClassName("corner-image");
Array.from(cornerImages).forEach((element) => {
const nowPlayingBackgroundImages = document.getElementsByClassName("now-playing-background-image");
Array.from(nowPlayingBackgroundImages).forEach((element) => {
element.remove();
});
currentTrackSrc = null; // Reset current track source
currentCoverArtSrc = null; // Reset current CoverArt source
// Also clean up global spinning backgrounds
cleanUpGlobalSpinningBackground();
@@ -484,7 +515,7 @@ const cleanUpDynamicArt = function (): void {
observeForButtons();
observeTrackTitle();
observeLyricsContainer();
onTrackChanged(1);
updateCoverArtBackground(1);
// Add cleanup to unloads
unloads.add(() => {
plugins/radiant-lyrics-luna/src/styles.css
+1 -1
View File
@@ -37,7 +37,7 @@
margin-top: -20px !important;
}
/* Move album art and lyrics content up */
/* Move CoverArt and lyrics content up */
[class*="_lyricsContainer"],
[class*="_mediaContainer"] {
margin-top: -30px !important;