mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Added Setting for Glowing Lyrics
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -20,8 +20,10 @@ 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 immediately and keep them always active
|
||||
lyricsGlowStyleTag.css = lyricsGlow;
|
||||
// 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
|
||||
@@ -49,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();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -267,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(() => {
|
||||
@@ -369,6 +404,7 @@ const cleanUpDynamicArt = function (): void {
|
||||
// Initialize the button creation and observers
|
||||
observeForButtons();
|
||||
observeTrackTitle();
|
||||
observeLyricsContainer();
|
||||
onTrackChanged(1);
|
||||
|
||||
// Add cleanup to unloads
|
||||
|
||||
@@ -30,6 +30,8 @@
|
||||
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 {
|
||||
@@ -37,6 +39,8 @@
|
||||
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 {
|
||||
@@ -64,3 +68,20 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user