Merge pull request #14 from meowarex/dev

Fixed Lyric Glow & Lyric Clipping + Added Lyric Glow Setting

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 (
 		<LunaSettings>
+			<LunaSwitchSetting
+				title="Lyrics Glow Effect"
+				desc="Enable glowing effect for lyrics & Font Stytling Changes"
+				checked={lyricsGlowEnabled}
+				onChange={(_, checked) => {
+					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();
+					}
+				}}
+			/>
 			<LunaSwitchSetting
 				title="Hide UI Feature"
 				desc="Enable hide/unhide UI functionality with toggle buttons"

plugins/clean-view-luna/src/index.ts

@@ -6,6 +6,7 @@ import { settings, Settings } from "./Settings";
 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";
 
 export const { trace } = Tracer("[Clean View]");
 export { Settings };
@@ -17,6 +18,12 @@ export const unloads = new Set<LunaUnload>();
 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

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;
+} 

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;