diff --git a/plugins/clean-view-luna/src/Settings.tsx b/plugins/clean-view-luna/src/Settings.tsx index 7ee7c5c..6ba1991 100644 --- a/plugins/clean-view-luna/src/Settings.tsx +++ b/plugins/clean-view-luna/src/Settings.tsx @@ -5,14 +5,29 @@ import React from "react"; export const settings = await ReactiveStore.getPluginStorage("CleanView", { hideUIEnabled: true, playerBarVisible: true, + lyricsGlowEnabled: true, }); export const Settings = () => { const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled); const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible); + const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled); return ( + { + console.log("Lyrics Glow Effect:", checked ? "enabled" : "disabled"); + setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked)); + // Update styles immediately when setting changes + if ((window as any).updateCleanViewStyles) { + (window as any).updateCleanViewStyles(); + } + }} + /> (); const lyricsStyleTag = new StyleTag("CleanView-lyrics", unloads); const baseStyleTag = new StyleTag("CleanView-base", unloads); const playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads); +const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads); + +// Apply lyrics glow styles if enabled +if (settings.lyricsGlowEnabled) { + lyricsGlowStyleTag.css = lyricsGlow; +} var isCleanView = false; var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates @@ -44,7 +51,19 @@ const updateCleanViewStyles = function(): void { if (!settings.playerBarVisible) { playerBarStyleTag.css = playerBarHidden; } else { - playerBarStyleTag.css = undefined; + playerBarStyleTag.remove(); + } + } + + // Update lyrics glow based on setting + const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); + if (lyricsContainer) { + if (settings.lyricsGlowEnabled) { + lyricsContainer.classList.remove('lyrics-glow-disabled'); + lyricsGlowStyleTag.css = lyricsGlow; + } else { + lyricsContainer.classList.add('lyrics-glow-disabled'); + lyricsGlowStyleTag.remove(); } } }; @@ -262,6 +281,27 @@ function observeForButtons(): void { unloads.add(() => observer.disconnect()); } +// Also observe for lyrics container changes to apply the setting +function observeLyricsContainer(): void { + const observer = new MutationObserver(() => { + const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); + if (lyricsContainer) { + if (settings.lyricsGlowEnabled) { + lyricsContainer.classList.remove('lyrics-glow-disabled'); + } else { + lyricsContainer.classList.add('lyrics-glow-disabled'); + } + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + + unloads.add(() => observer.disconnect()); +} + const onTrackChanged = function (method: number = 0): void { if (method === 1) { setTimeout(() => { @@ -364,6 +404,7 @@ const cleanUpDynamicArt = function (): void { // Initialize the button creation and observers observeForButtons(); observeTrackTitle(); +observeLyricsContainer(); onTrackChanged(1); // Add cleanup to unloads diff --git a/plugins/clean-view-luna/src/lyrics-glow.css b/plugins/clean-view-luna/src/lyrics-glow.css new file mode 100644 index 0000000..ba55d4e --- /dev/null +++ b/plugins/clean-view-luna/src/lyrics-glow.css @@ -0,0 +1,87 @@ +/* Font imports for lyrics */ +@font-face { + font-family: "AbyssFont"; + font-weight: 400; + src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 500; + src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 600; + src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 700; + src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); +} + +/* Enhanced lyrics styling with glow effects */ +[class*="_lyricsText"] > div > span[data-current="true"] { + text-shadow: 0 0 2px #fff, 0 0 20px #fff !important; + padding-left: 20px; + transition-duration: 0.7s; + font-size: 55px; + color: white !important; + font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 700; +} + +[class*="_lyricsText"] > div > span { + text-shadow: 0 0 0px transparent, 0 0 0px transparent; + transition-duration: 0.25s; + color: rgba(128, 128, 128, 0.4); + font-size: 40px; + font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 700; +} + +[class*="_lyricsText"] > div > span:hover { + text-shadow: 0 0 2px lightgray, 0 0 20px lightgray !important; + color: lightgray !important; + padding-left: 20px; + transition-duration: 0.7s; +} + +/* Track title glow */ +[data-test="now-playing-track-title"] { + text-shadow: 0 0 1px #fff, 0 0 30px #fff !important; +} + +/* Current line transitions */ +[class*="_lyricsText"] > div > span { + transition: text-shadow 0.7s ease-in-out, color 0.7s ease-in-out, padding 0.7s ease-in-out !important; +} + +/* Lyrics container styling */ +[class^="_lyricsContainer"] > div > div > span { + margin-bottom: 2rem; + opacity: 1; + font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 700; + font-size: 38px !important; +} + +/* Reset all lyrics styling when disabled */ +.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"], +.lyrics-glow-disabled [class*="_lyricsText"] > div > span, +.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover, +.lyrics-glow-disabled [data-test="now-playing-track-title"], +.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span { + text-shadow: none !important; + padding-left: 0 !important; + transition: none !important; + font-size: inherit !important; + color: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + margin-bottom: inherit !important; + opacity: inherit !important; +} \ No newline at end of file diff --git a/plugins/clean-view-luna/src/separated-lyrics.css b/plugins/clean-view-luna/src/separated-lyrics.css index ae9976a..e61dc80 100644 --- a/plugins/clean-view-luna/src/separated-lyrics.css +++ b/plugins/clean-view-luna/src/separated-lyrics.css @@ -1,3 +1,29 @@ +/* Font imports for lyrics */ +@font-face { + font-family: "AbyssFont"; + font-weight: 400; + src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 500; + src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 600; + src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 700; + src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); +} + +/* Tab and container visibility */ [class*="tabItems"] { opacity: 0 !important; transition: opacity 0.3s ease-in-out; @@ -16,6 +42,81 @@ margin: -40px; } +/* Hide bottom gradient */ +[class^="_bottomGradient"] { + visibility: hidden; +} + +/* Credits button positioning */ +[aria-label="Show credits"] { + top: calc(var(--headerHeight) + 80px); +} + +/* Hide lyrics provider */ +[class^="_lyricsProvider"] { + visibility: hidden; +} + +/* Sync button margin */ +[class^="_syncButton"] { + margin-bottom: 10px; +} + +/* Smooth scrolling for lyrics */ +[class^="_lyricsContainer"] { + scroll-behavior: smooth; + padding-left: 20px !important; + padding-right: 20px !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + +/* Clean view specific styles */ +[class*="_lyricsText"] > div { + padding: 0 !important; + background-color: transparent !important; + transition: none !important; + margin-left: 0 !important; + margin-right: 0 !important; + width: 100% !important; +} + +[class*="_lyricsText"] > div:hover { + background-color: transparent !important; +} + +/* Ensure lyrics don't get cut off */ +[class^="_lyricsContainer"] { + padding-bottom: 200px !important; + margin-bottom: 0 !important; +} + +/* Remove any hover effects on lyrics container */ +[class^="_lyricsContainer"] > div > div { + background-color: transparent !important; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + width: 100% !important; +} + +[class^="_lyricsContainer"] > div > div:hover { + background-color: transparent !important; +} + +/* Ensure lyrics text has proper spacing */ +[class*="_lyricsText"] { + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + /* Lyrics text styling */ [class^="_lyricsText"] { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; @@ -31,11 +132,6 @@ transform: scale(1.05); } -/* Smooth scrolling for lyrics */ -[class^="_lyricsContainer"] { - scroll-behavior: smooth; -} - /* Enhanced lyrics visibility */ [class^="_lyricsText"] > div { padding: 8px 0;