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", {
|
export const settings = await ReactiveStore.getPluginStorage("CleanView", {
|
||||||
hideUIEnabled: true,
|
hideUIEnabled: true,
|
||||||
playerBarVisible: true,
|
playerBarVisible: true,
|
||||||
|
lyricsGlowEnabled: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Settings = () => {
|
export const Settings = () => {
|
||||||
const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
|
const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
|
||||||
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
|
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
|
||||||
|
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LunaSettings>
|
<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
|
<LunaSwitchSetting
|
||||||
title="Hide UI Feature"
|
title="Hide UI Feature"
|
||||||
desc="Enable hide/unhide UI functionality with toggle buttons"
|
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 playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads);
|
||||||
const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads);
|
const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads);
|
||||||
|
|
||||||
// Apply lyrics glow styles immediately and keep them always active
|
// Apply lyrics glow styles if enabled
|
||||||
|
if (settings.lyricsGlowEnabled) {
|
||||||
lyricsGlowStyleTag.css = lyricsGlow;
|
lyricsGlowStyleTag.css = lyricsGlow;
|
||||||
|
}
|
||||||
|
|
||||||
var isCleanView = false;
|
var isCleanView = false;
|
||||||
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
|
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
|
||||||
@@ -49,7 +51,19 @@ const updateCleanViewStyles = function(): void {
|
|||||||
if (!settings.playerBarVisible) {
|
if (!settings.playerBarVisible) {
|
||||||
playerBarStyleTag.css = playerBarHidden;
|
playerBarStyleTag.css = playerBarHidden;
|
||||||
} else {
|
} 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());
|
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 {
|
const onTrackChanged = function (method: number = 0): void {
|
||||||
if (method === 1) {
|
if (method === 1) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -369,6 +404,7 @@ const cleanUpDynamicArt = function (): void {
|
|||||||
// Initialize the button creation and observers
|
// Initialize the button creation and observers
|
||||||
observeForButtons();
|
observeForButtons();
|
||||||
observeTrackTitle();
|
observeTrackTitle();
|
||||||
|
observeLyricsContainer();
|
||||||
onTrackChanged(1);
|
onTrackChanged(1);
|
||||||
|
|
||||||
// Add cleanup to unloads
|
// Add cleanup to unloads
|
||||||
|
|||||||
@@ -30,6 +30,8 @@
|
|||||||
transition-duration: 0.7s;
|
transition-duration: 0.7s;
|
||||||
font-size: 55px;
|
font-size: 55px;
|
||||||
color: white !important;
|
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 {
|
[class*="_lyricsText"] > div > span {
|
||||||
@@ -37,6 +39,8 @@
|
|||||||
transition-duration: 0.25s;
|
transition-duration: 0.25s;
|
||||||
color: rgba(128, 128, 128, 0.4);
|
color: rgba(128, 128, 128, 0.4);
|
||||||
font-size: 40px;
|
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 {
|
[class*="_lyricsText"] > div > span:hover {
|
||||||
@@ -64,3 +68,20 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 38px !important;
|
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