Merge pull request #16 from meowarex/dev

Rename Clean-View to Radiant-Lyrics
This commit is contained in:
Meow Meow
2025-06-03 20:41:22 +10:00
committed by GitHub
8 changed files with 30 additions and 30 deletions
+3 -3
View File
@@ -15,10 +15,10 @@ A dark OLED-friendly theme plugin that transforms Tidal Luna's appearance.
- Reduces battery consumption on OLED displays.. i guess <3 - Reduces battery consumption on OLED displays.. i guess <3
- Modern, sleek dark interface - Modern, sleek dark interface
### 🎵 Clean View Luna ### 🎵 Radiant Lyrics Luna
**Location:** `plugins/clean-view-luna/` **Location:** `plugins/radiant-lyrics-luna/`
Makes your "Play Queue" clean and immersive with dynamic visual effects. A radiant and beautiful lyrics view for TIDAL with dynamic visual effects.
**Features:** **Features:**
- Dynamic album art backgrounds with blur and rotation effects - Dynamic album art backgrounds with blur and rotation effects
@@ -1,6 +1,6 @@
{ {
"name": "@meowarex/clean-view", "name": "@meowarex/radiant-lyrics",
"description": "Make your \"Now Playing View\" allot cleaner, heavily based in beautiful-lyrics from @surfbryce!.", "description": "A radiant and beautiful lyrics view for TIDAL, heavily based in beautiful-lyrics from @surfbryce!",
"author": { "author": {
"name": "meowarex", "name": "meowarex",
"url": "https://github.com/meowarex", "url": "https://github.com/meowarex",
@@ -2,7 +2,7 @@ import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaSwitchSetting } from "@luna/ui"; import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
import React from "react"; import React from "react";
export const settings = await ReactiveStore.getPluginStorage("CleanView", { export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
hideUIEnabled: true, hideUIEnabled: true,
playerBarVisible: true, playerBarVisible: true,
lyricsGlowEnabled: true, lyricsGlowEnabled: true,
@@ -19,12 +19,12 @@ export const Settings = () => {
title="Lyrics Glow Effect" title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes" desc="Enable glowing effect for lyrics & Font Stytling Changes"
checked={lyricsGlowEnabled} checked={lyricsGlowEnabled}
onChange={(_, checked) => { onChange={(_, checked: boolean) => {
console.log("Lyrics Glow Effect:", checked ? "enabled" : "disabled"); console.log("Lyrics Glow Effect:", checked ? "enabled" : "disabled");
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked)); setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateCleanViewStyles) { if ((window as any).updateRadiantLyricsStyles) {
(window as any).updateCleanViewStyles(); (window as any).updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -32,7 +32,7 @@ export const Settings = () => {
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"
checked={hideUIEnabled} checked={hideUIEnabled}
onChange={(_, checked) => { onChange={(_, checked: boolean) => {
console.log("Hide UI Feature:", checked ? "enabled" : "disabled"); console.log("Hide UI Feature:", checked ? "enabled" : "disabled");
setHideUIEnabled((settings.hideUIEnabled = checked)); setHideUIEnabled((settings.hideUIEnabled = checked));
}} }}
@@ -41,12 +41,12 @@ export const Settings = () => {
title="Player Bar Visibility in Hide UI Mode" title="Player Bar Visibility in Hide UI Mode"
desc="Keep player bar visible when UI is hidden" desc="Keep player bar visible when UI is hidden"
checked={playerBarVisible} checked={playerBarVisible}
onChange={(_, checked) => { onChange={(_, checked: boolean) => {
console.log("Player Bar Visibility:", checked ? "visible" : "hidden"); console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
setPlayerBarVisible((settings.playerBarVisible = checked)); setPlayerBarVisible((settings.playerBarVisible = checked));
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateCleanViewStyles) { if ((window as any).updateRadiantLyricsStyles) {
(window as any).updateCleanViewStyles(); (window as any).updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -8,24 +8,24 @@ import separatedLyrics from "file://separated-lyrics.css?minify";
import playerBarHidden from "file://player-bar-hidden.css?minify"; import playerBarHidden from "file://player-bar-hidden.css?minify";
import lyricsGlow from "file://lyrics-glow.css?minify"; import lyricsGlow from "file://lyrics-glow.css?minify";
export const { trace } = Tracer("[Clean View]"); export const { trace } = Tracer("[Radiant Lyrics]");
export { Settings }; export { Settings };
// clean up resources // clean up resources
export const unloads = new Set<LunaUnload>(); export const unloads = new Set<LunaUnload>();
// StyleTag instances for different CSS modules // StyleTag instances for different CSS modules
const lyricsStyleTag = new StyleTag("CleanView-lyrics", unloads); const lyricsStyleTag = new StyleTag("RadiantLyrics-lyrics", unloads);
const baseStyleTag = new StyleTag("CleanView-base", unloads); const baseStyleTag = new StyleTag("RadiantLyrics-base", unloads);
const playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads); const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads); const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);
// Apply lyrics glow styles if enabled // Apply lyrics glow styles if enabled
if (settings.lyricsGlowEnabled) { if (settings.lyricsGlowEnabled) {
lyricsGlowStyleTag.css = lyricsGlow; lyricsGlowStyleTag.css = lyricsGlow;
} }
var isCleanView = false; var isHidden = 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
const updateButtonStates = function(): void { const updateButtonStates = function(): void {
@@ -33,16 +33,16 @@ const updateButtonStates = function(): void {
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
if (hideButton) { if (hideButton) {
hideButton.style.display = (settings.hideUIEnabled && !isCleanView) ? 'flex' : 'none'; hideButton.style.display = (settings.hideUIEnabled && !isHidden) ? 'flex' : 'none';
} }
if (unhideButton) { if (unhideButton) {
unhideButton.style.display = (settings.hideUIEnabled && isCleanView) ? 'flex' : 'none'; unhideButton.style.display = (settings.hideUIEnabled && isHidden) ? 'flex' : 'none';
} }
}; };
// Function to update styles when settings change // Function to update styles when settings change
const updateCleanViewStyles = function(): void { const updateRadiantLyricsStyles = function(): void {
if (isCleanView) { if (isHidden) {
// Apply all clean view styles // Apply all clean view styles
lyricsStyleTag.css = separatedLyrics; lyricsStyleTag.css = separatedLyrics;
baseStyleTag.css = baseStyles; baseStyleTag.css = baseStyles;
@@ -69,15 +69,15 @@ const updateCleanViewStyles = function(): void {
}; };
// Make this function available globally so Settings can call it // Make this function available globally so Settings can call it
(window as any).updateCleanViewStyles = updateCleanViewStyles; (window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
const toggleCleanView = function(): void { const toggleRadiantLyrics = function(): void {
// Toggle the state first // Toggle the state first
isCleanView = !isCleanView; isHidden = !isHidden;
if (isCleanView) { if (isHidden) {
// Apply clean view styles // Apply clean view styles
updateCleanViewStyles(); updateRadiantLyricsStyles();
} else { } else {
// Remove all clean view styles // Remove all clean view styles
lyricsStyleTag.remove(); lyricsStyleTag.remove();
@@ -140,7 +140,7 @@ const createHideUIButton = function(): void {
hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)'; hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
}); });
hideUIButton.onclick = toggleCleanView; hideUIButton.onclick = toggleRadiantLyrics;
// Insert after the fullscreen button // Insert after the fullscreen button
buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling); buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling);
@@ -201,7 +201,7 @@ const createUnhideUIButton = function(): void {
unhideUIButton.style.transform = 'scale(1)'; unhideUIButton.style.transform = 'scale(1)';
}); });
unhideUIButton.onclick = toggleCleanView; unhideUIButton.onclick = toggleRadiantLyrics;
// Append to body instead of a specific container // Append to body instead of a specific container
document.body.appendChild(unhideUIButton); document.body.appendChild(unhideUIButton);