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

Refactored Cover Everywhere Logic

Browse Source
This commit is contained in:
meowarex
2025-06-04 19:49:25 +10:00
parent 2d7c4dd2e6
commit eed5505464
2 changed files with 76 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/cover-everywhere.css
+61
View File
@@ -0,0 +1,61 @@
/* Global Spinning Background Styles */
.global-spinning-black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: -2;
pointer-events: none;
}
.global-spinning-image {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150vw;
height: 150vh;
object-fit: cover;
z-index: -1;
filter: blur(100px) brightness(0.4) contrast(1.2) saturate(1);
opacity: 1;
animation: spinGlobal 45s linear infinite;
}
@keyframes spinGlobal {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Make background visible through all containers */
body,
#wimp,
main,
[class^="_sidebarWrapper"],
[class^="_mainContainer"],
[class*="smallHeader"],
[data-test="main-layout-sidebar-wrapper"],
[data-test="main-layout-header"],
[data-test="feed-sidebar"],
[data-test="stream-metadata"],
[data-test="footer-player"] {
background: unset !important;
}
/* Make sidebar and player bar semi-transparent */
[data-test="footer-player"],
[data-test="main-layout-sidebar-wrapper"],
[class^="_bar"],
[class^="_sidebarItem"]:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
/* Remove bottom gradient */
[class^="_bottomGradient"] {
display: none !important;
}
plugins/radiant-lyrics-luna/src/index.ts
+15 -112
View File
@@ -7,6 +7,7 @@ import baseStyles from "file://styles.css?minify";
import separatedLyrics from "file://separated-lyrics.css?minify";
import playerBarHidden from "file://player-bar-hidden.css?minify";
import lyricsGlow from "file://lyrics-glow.css?minify";
import coverEverywhereCss from "file://cover-everywhere.css?minify";
export const { trace } = Tracer("[Radiant Lyrics]");
export { Settings };
@@ -20,6 +21,9 @@ const baseStyleTag = new StyleTag("RadiantLyrics-base", unloads);
const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);
// StyleTag for global spinning background CSS
const globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss);
// Apply lyrics glow styles if enabled
if (settings.lyricsGlowEnabled) {
lyricsGlowStyleTag.css = lyricsGlow;
@@ -70,123 +74,27 @@ const updateRadiantLyricsStyles = function(): void {
};
// Function to apply spinning background to the entire app
const applyGlobalSpinningBackground = function(albumImageSrc: string): void {
const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
if (!settings.spinningCoverEverywhere) return;
// Apply background to the main app container
const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
if (!appContainer) return;
// Remove existing global background images and black bg if they exist
const existingGlobalImages = appContainer.querySelectorAll('.global-spinning-image');
existingGlobalImages.forEach(img => img.remove());
const existingBlackBg = appContainer.querySelector('.global-spinning-black-bg');
if (existingBlackBg) existingBlackBg.remove();
// Remove overlay if it exists (for safety)
const existingOverlay = appContainer.querySelector('.global-spinning-overlay');
if (existingOverlay) existingOverlay.remove();
// Remove any existing background elements
appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove());
// Add a solid black background behind the spinning images
// Add black background
const blackBg = document.createElement('div');
blackBg.className = 'global-spinning-black-bg';
blackBg.style.position = 'fixed';
blackBg.style.left = '0';
blackBg.style.top = '0';
blackBg.style.width = '100vw';
blackBg.style.height = '100vh';
blackBg.style.background = '#000';
blackBg.style.zIndex = '-2';
blackBg.style.pointerEvents = 'none';
appContainer.appendChild(blackBg);
// Create and append spinning background images to the app container
const globalImg1 = document.createElement('img');
globalImg1.src = albumImageSrc;
globalImg1.className = 'global-spinning-image';
globalImg1.style.position = 'fixed';
globalImg1.style.left = '50%';
globalImg1.style.top = '50%';
globalImg1.style.transform = 'translate(-50%, -50%)';
globalImg1.style.width = '150vw';
globalImg1.style.height = '150vh';
globalImg1.style.objectFit = 'cover';
globalImg1.style.zIndex = '-1';
globalImg1.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
globalImg1.style.opacity = '1';
globalImg1.style.animation = 'spinGlobal 45s linear infinite';
globalImg1.style.animationDelay = '0s';
appContainer.appendChild(globalImg1);
const globalImg2 = document.createElement('img');
globalImg2.src = albumImageSrc;
globalImg2.className = 'global-spinning-image';
globalImg2.style.position = 'fixed';
globalImg2.style.left = '50%';
globalImg2.style.top = '50%';
globalImg2.style.transform = 'translate(-50%, -50%)';
globalImg2.style.width = '150vw';
globalImg2.style.height = '150vh';
globalImg2.style.objectFit = 'cover';
globalImg2.style.zIndex = '-1';
globalImg2.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
globalImg2.style.opacity = '1';
globalImg2.style.animation = 'spinGlobal 45s linear infinite';
globalImg2.style.animationDelay = '0s';
appContainer.appendChild(globalImg2);
// Add keyframe animation for global spinning if it doesn't exist
if (!document.querySelector('#spinGlobalAnimation')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'spinGlobalAnimation';
styleSheet.textContent = `
@keyframes spinGlobal {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Make background visible through all containers */
body,
#wimp,
main,
[class^="_sidebarWrapper"],
[class^="_mainContainer"],
[class*="smallHeader"],
[data-test="main-layout-sidebar-wrapper"],
[data-test="main-layout-header"],
[data-test="feed-sidebar"],
[data-test="stream-metadata"],
[data-test="footer-player"] {
background: unset !important;
}
/* Make sidebar and player bar semi-transparent */
[data-test="footer-player"],
[data-test="main-layout-sidebar-wrapper"],
[class^="_bar"],
[class^="_sidebarItem"]:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
/* Remove bottom gradient */
[class^="_bottomGradient"] {
display: none !important;
}
/* Make sure the background is visible through all containers */
[class^="_sidebarWrapper"],
[class^="_mainContainer"],
[class*="smallHeader"],
[data-test="main-layout-sidebar-wrapper"],
[data-test="main-layout-header"],
[data-test="feed-sidebar"],
[data-test="stream-metadata"],
[data-test="footer-player"] {
background: unset !important;
}
`;
document.head.appendChild(styleSheet);
// Add two spinning images
for (let i = 0; i < 2; i++) {
const img = document.createElement('img');
img.src = albumImageSrc;
img.className = 'global-spinning-image';
img.style.animationDelay = '0s';
appContainer.appendChild(img);
}
};
@@ -588,11 +496,6 @@ unloads.add(() => {
spinAnimationStyle.parentNode.removeChild(spinAnimationStyle);
}
const spinGlobalAnimationStyle = document.querySelector('#spinGlobalAnimation');
if (spinGlobalAnimationStyle && spinGlobalAnimationStyle.parentNode) {
spinGlobalAnimationStyle.parentNode.removeChild(spinGlobalAnimationStyle);
}
// Clean up global spinning backgrounds
cleanUpGlobalSpinningBackground();
});