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. A radiant and beautiful lyrics view for TIDAL with dynamic visual effects.
**Features:** **Features:**
- Dynamic album art backgrounds with blur and rotation effects - Dynamic CoverArt backgrounds with blur and rotation effects
- Glowing Animated Lyrics with clean scrolling - Glowing Animated Lyrics with clean scrolling
### 📋 Copy Lyrics ### 📋 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, playerBarVisible: true,
lyricsGlowEnabled: true, lyricsGlowEnabled: true,
spinningCoverEverywhere: false, spinningCoverEverywhere: false,
performanceMode: false,
backgroundContrast: 120, backgroundContrast: 120,
backgroundBlur: 80, backgroundBlur: 80,
backgroundBrightness: 40, backgroundBrightness: 40,
@@ -17,6 +18,7 @@ export const Settings = () => {
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible); const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled); const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere); const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast); const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur); const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness); const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
@@ -60,7 +62,7 @@ export const Settings = () => {
/> />
<LunaSwitchSetting <LunaSwitchSetting
title="Cover Everywhere | Experimental" 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} checked={spinningCoverEverywhere}
onChange={(_, checked: boolean) => { onChange={(_, checked: boolean) => {
console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled"); 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 <LunaNumberSetting
title="Background Contrast" title="Background Contrast"
desc="Adjust the contrast of the spinning background (0-200, default: 120)" 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); } 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 */ /* Make background visible through all containers */
body, body,
#wimp, #wimp,
plugins/radiant-lyrics-luna/src/index.ts
+100 -69
View File
@@ -29,8 +29,8 @@ if (settings.lyricsGlowEnabled) {
} }
var isHidden = false; var isHidden = false;
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates var currentCoverArtSrc: string | null = null; // Track current CoverArt to prevent unnecessary updates
var currentGlobalTrackSrc: string | null = null; // Track current global background to prevent unnecessary updates var currentGlobalBackgroundSrc: string | null = null; // Track current global background to prevent unnecessary updates
const updateButtonStates = function(): void { const updateButtonStates = function(): void {
const hideButton = document.querySelector('.hide-ui-button') as HTMLElement; 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 // 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; const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
if (!settings.spinningCoverEverywhere) { if (!settings.spinningCoverEverywhere) {
// Remove StyleTag and all background elements // Remove StyleTag and all background elements
@@ -102,12 +102,21 @@ const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
blackBg.className = 'global-spinning-black-bg'; blackBg.className = 'global-spinning-black-bg';
appContainer.appendChild(blackBg); 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'); const img = document.createElement('img');
img.src = albumImageSrc; img.src = coverArtImageSrc;
img.className = 'global-spinning-image'; img.className = 'global-spinning-image';
img.style.animationDelay = '0s'; img.style.animationDelay = '0s';
img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; 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); appContainer.appendChild(img);
}; };
@@ -127,21 +136,51 @@ const cleanUpGlobalSpinningBackground = function(): void {
if (blackBg && blackBg.parentNode) { if (blackBg && blackBg.parentNode) {
blackBg.parentNode.removeChild(blackBg); 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 // Function to update global background when settings change
const updateRadiantLyricsGlobalBackground = function(): void { const updateRadiantLyricsGlobalBackground = function(): void {
if (settings.spinningCoverEverywhere && currentTrackSrc) { if (settings.spinningCoverEverywhere && currentCoverArtSrc) {
applyGlobalSpinningBackground(currentTrackSrc); applyGlobalSpinningBackground(currentCoverArtSrc);
} else { } else {
cleanUpGlobalSpinningBackground(); 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 // Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles; (window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground; (window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsPerformanceMode = updateRadiantLyricsPerformanceMode;
const toggleRadiantLyrics = function(): void { const toggleRadiantLyrics = function(): void {
// Toggle the state first // Toggle the state first
@@ -289,7 +328,7 @@ function observeTrackTitle(): void {
if (trackTitleElement) { if (trackTitleElement) {
const titleObserver = new MutationObserver(() => { const titleObserver = new MutationObserver(() => {
setTimeout(() => { setTimeout(() => {
onTrackChanged(); updateCoverArtBackground();
}, 300); }, 300);
}); });
@@ -301,16 +340,16 @@ function observeTrackTitle(): void {
unloads.add(() => titleObserver.disconnect()); unloads.add(() => titleObserver.disconnect());
} }
// Also observe the album image container for changes // Also observe the CoverArt image container for changes
const albumImageContainer = document.querySelector('figure[class*="_albumImage"]'); const coverArtImageContainer = document.querySelector('figure[class*="_albumImage"]');
if (albumImageContainer) { if (coverArtImageContainer) {
const imageObserver = new MutationObserver(() => { const imageObserver = new MutationObserver(() => {
setTimeout(() => { setTimeout(() => {
onTrackChanged(); updateCoverArtBackground();
}, 100); // Slightly longer delay for image loading }, 100); // Slightly longer delay for image loading
}); });
imageObserver.observe(albumImageContainer, { imageObserver.observe(coverArtImageContainer, {
childList: true, childList: true,
subtree: true, subtree: true,
attributes: true, attributes: true,
@@ -322,7 +361,7 @@ function observeTrackTitle(): void {
// Set up a periodic check as fallback // Set up a periodic check as fallback
const periodicCheck = setInterval(() => { const periodicCheck = setInterval(() => {
onTrackChanged(); updateCoverArtBackground();
}, 100); // Check every 100ms }, 100); // Check every 100ms
unloads.add(() => clearInterval(periodicCheck)); unloads.add(() => clearInterval(periodicCheck));
@@ -374,29 +413,29 @@ function observeLyricsContainer(): void {
unloads.add(() => observer.disconnect()); unloads.add(() => observer.disconnect());
} }
const onTrackChanged = function (method: number = 0): void { const updateCoverArtBackground = function (method: number = 0): void {
if (method === 1) { if (method === 1) {
setTimeout(() => { setTimeout(() => {
onTrackChanged(); updateCoverArtBackground();
return; return;
}, 2000); }, 2000);
} }
let albumImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement; let coverArtImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement;
let albumImageSrc: string | null = null; let coverArtImageSrc: string | null = null;
if (albumImageElement) { if (coverArtImageElement) {
albumImageSrc = albumImageElement.src; coverArtImageSrc = coverArtImageElement.src;
// Set res to 1280x1280 // Set res to 1280x1280
albumImageSrc = albumImageSrc.replace(/\d+x\d+/, '1280x1280'); coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
albumImageElement.src = albumImageSrc; coverArtImageElement.src = coverArtImageSrc;
} else { } else {
const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement; const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement;
if (videoElement) { if (videoElement) {
albumImageSrc = videoElement.getAttribute("poster"); coverArtImageSrc = videoElement.getAttribute("poster");
if (albumImageSrc) { if (coverArtImageSrc) {
// Set res to 1280x1280 // Set res to 1280x1280
albumImageSrc = albumImageSrc.replace(/\d+x\d+/, '1280x1280'); coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
} }
} else { } else {
cleanUpDynamicArt(); cleanUpDynamicArt();
@@ -405,53 +444,45 @@ const onTrackChanged = function (method: number = 0): void {
} }
// Only update if the image source has actually changed // Only update if the image source has actually changed
if (albumImageSrc && albumImageSrc !== currentTrackSrc) { if (coverArtImageSrc && coverArtImageSrc !== currentCoverArtSrc) {
currentTrackSrc = albumImageSrc; currentCoverArtSrc = coverArtImageSrc;
// Apply global spinning background if enabled // Apply global spinning background if enabled
if (settings.spinningCoverEverywhere && albumImageSrc !== currentGlobalTrackSrc) { if (settings.spinningCoverEverywhere && coverArtImageSrc !== currentGlobalBackgroundSrc) {
currentGlobalTrackSrc = albumImageSrc; currentGlobalBackgroundSrc = coverArtImageSrc;
applyGlobalSpinningBackground(albumImageSrc); 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; const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
if (nowPlayingContainerElement) { if (nowPlayingContainerElement) {
// Remove existing corner images if they exist // Remove existing background images if they exist
const existingImages = nowPlayingContainerElement.querySelectorAll('.corner-image'); const existingBackgroundImages = nowPlayingContainerElement.querySelectorAll('.now-playing-background-image');
existingImages.forEach(img => img.remove()); existingBackgroundImages.forEach(img => img.remove());
// Create and append center image // Create and append single background layer
const centerImg = document.createElement('img'); const backgroundImage = document.createElement('img');
centerImg.src = albumImageSrc; backgroundImage.src = coverArtImageSrc;
centerImg.className = 'corner-image'; backgroundImage.className = 'now-playing-background-image';
centerImg.style.position = 'absolute'; backgroundImage.style.position = 'absolute';
centerImg.style.left = '50%'; backgroundImage.style.left = '50%';
centerImg.style.top = '50%'; backgroundImage.style.top = '50%';
centerImg.style.transform = 'translate(-50%, -50%)'; backgroundImage.style.transform = 'translate(-50%, -50%)';
centerImg.style.width = '75vw'; backgroundImage.style.width = '75vw';
centerImg.style.height = '150vh'; backgroundImage.style.height = '150vh';
centerImg.style.objectFit = 'cover'; backgroundImage.style.objectFit = 'cover';
centerImg.style.zIndex = '-1'; backgroundImage.style.zIndex = '-1';
centerImg.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; backgroundImage.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);
const centerImg2 = document.createElement('img'); // Apply animation based on performance mode
centerImg2.src = albumImageSrc; if (settings.performanceMode) {
centerImg2.className = 'corner-image'; backgroundImage.style.animation = 'none';
centerImg2.style.position = 'absolute'; backgroundImage.classList.add('performance-mode-static');
centerImg2.style.left = '50%'; } else {
centerImg2.style.top = '50%'; backgroundImage.style.animation = 'spin 35s linear infinite';
centerImg2.style.transform = 'translate(-50%, -50%)'; backgroundImage.classList.remove('performance-mode-static');
centerImg2.style.width = '75vw'; }
centerImg2.style.height = '150vh'; nowPlayingContainerElement.appendChild(backgroundImage);
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);
// Add keyframe animation if it doesn't exist // Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) { if (!document.querySelector('#spinAnimation')) {
@@ -470,11 +501,11 @@ const onTrackChanged = function (method: number = 0): void {
}; };
const cleanUpDynamicArt = function (): void { const cleanUpDynamicArt = function (): void {
const cornerImages = document.getElementsByClassName("corner-image"); const nowPlayingBackgroundImages = document.getElementsByClassName("now-playing-background-image");
Array.from(cornerImages).forEach((element) => { Array.from(nowPlayingBackgroundImages).forEach((element) => {
element.remove(); element.remove();
}); });
currentTrackSrc = null; // Reset current track source currentCoverArtSrc = null; // Reset current CoverArt source
// Also clean up global spinning backgrounds // Also clean up global spinning backgrounds
cleanUpGlobalSpinningBackground(); cleanUpGlobalSpinningBackground();
@@ -484,7 +515,7 @@ const cleanUpDynamicArt = function (): void {
observeForButtons(); observeForButtons();
observeTrackTitle(); observeTrackTitle();
observeLyricsContainer(); observeLyricsContainer();
onTrackChanged(1); updateCoverArtBackground(1);
// Add cleanup to unloads // Add cleanup to unloads
unloads.add(() => { unloads.add(() => {
plugins/radiant-lyrics-luna/src/styles.css
+1 -1
View File
@@ -37,7 +37,7 @@
margin-top: -20px !important; margin-top: -20px !important;
} }
/* Move album art and lyrics content up */ /* Move CoverArt and lyrics content up */
[class*="_lyricsContainer"], [class*="_lyricsContainer"],
[class*="_mediaContainer"] { [class*="_mediaContainer"] {
margin-top: -30px !important; margin-top: -30px !important;