diff --git a/plugins/radiant-lyrics-luna/src/cover-everywhere.css b/plugins/radiant-lyrics-luna/src/cover-everywhere.css new file mode 100644 index 0000000..9817156 --- /dev/null +++ b/plugins/radiant-lyrics-luna/src/cover-everywhere.css @@ -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; +} \ No newline at end of file diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index a16b2b3..e538342 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -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(); }); \ No newline at end of file