meoware.exe/TidaLuna-Plugins
1
0
Fork 0
mirror of https://github.com/meowarex/TidaLuna-Plugins.git synced 2026-06-18 03:43:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #35 from meowarex/dev

Browse Source 
Code Cleanup (Prettier)
This commit is contained in:
Meow Meow
2025-06-09 21:41:16 +10:00
committed by GitHub
parent 8babcbf741 242410884b
commit c7252443dc
2 changed files with 582 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/index.ts
+217 -170
View File
@@ -1,10 +1,9 @@
import { LunaUnload, Tracer, ftch } from "@luna/core"; import { LunaUnload, Tracer } from "@luna/core";
import { StyleTag, PlayState } from "@luna/lib"; import { StyleTag, PlayState } from "@luna/lib";
import { settings, Settings } from "./Settings"; import { settings, Settings } from "./Settings";
// Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3 // Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3
import baseStyles from "file://styles.css?minify"; 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 playerBarHidden from "file://player-bar-hidden.css?minify";
import lyricsGlow from "file://lyrics-glow.css?minify"; import lyricsGlow from "file://lyrics-glow.css?minify";
import coverEverywhereCss from "file://cover-everywhere.css?minify"; import coverEverywhereCss from "file://cover-everywhere.css?minify";
@@ -31,25 +30,27 @@ if (settings.lyricsGlowEnabled) {
var isHidden = false; var isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null; let unhideButtonAutoFadeTimeout: number | null = null;
const updateButtonStates = function(): void { const updateButtonStates = function (): void {
const hideButton = document.querySelector('.hide-ui-button') as HTMLElement; const hideButton = document.querySelector(".hide-ui-button") as HTMLElement;
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; const unhideButton = document.querySelector(
".unhide-ui-button",
) as HTMLElement;
if (hideButton) { if (hideButton) {
if (settings.hideUIEnabled && !isHidden) { if (settings.hideUIEnabled && !isHidden) {
hideButton.style.display = 'flex'; hideButton.style.display = "flex";
// Small delay to ensure display is set first, then fade in // Small delay to ensure display is set first, then fade in
setTimeout(() => { setTimeout(() => {
hideButton.style.opacity = '1'; hideButton.style.opacity = "1";
hideButton.style.visibility = 'visible'; hideButton.style.visibility = "visible";
hideButton.style.pointerEvents = 'auto'; hideButton.style.pointerEvents = "auto";
}, 50); }, 50);
} else { } else {
// Hide UI button immediately when clicked - (couldn't get the fade to work) // Hide UI button immediately when clicked - (couldn't get the fade to work)
hideButton.style.display = 'none'; hideButton.style.display = "none";
hideButton.style.opacity = '0'; hideButton.style.opacity = "0";
hideButton.style.visibility = 'hidden'; hideButton.style.visibility = "hidden";
hideButton.style.pointerEvents = 'none'; hideButton.style.pointerEvents = "none";
} }
} }
if (unhideButton) { if (unhideButton) {
@@ -60,33 +61,33 @@ const updateButtonStates = function(): void {
} }
if (settings.hideUIEnabled && isHidden) { if (settings.hideUIEnabled && isHidden) {
unhideButton.style.display = 'flex'; unhideButton.style.display = "flex";
// Remove the hide-immediately class and let it fade in smoothly // Remove the hide-immediately class and let it fade in smoothly
unhideButton.classList.remove('hide-immediately'); unhideButton.classList.remove("hide-immediately");
unhideButton.classList.remove('auto-faded'); unhideButton.classList.remove("auto-faded");
// Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk) // Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk)
setTimeout(() => { setTimeout(() => {
unhideButton.style.opacity = '1'; unhideButton.style.opacity = "1";
unhideButton.style.visibility = 'visible'; unhideButton.style.visibility = "visible";
unhideButton.style.pointerEvents = 'auto'; unhideButton.style.pointerEvents = "auto";
// Set up auto-fade after 2 seconds // Set up auto-fade after 2 seconds
unhideButtonAutoFadeTimeout = window.setTimeout(() => { unhideButtonAutoFadeTimeout = window.setTimeout(() => {
if (isHidden && unhideButton && !unhideButton.matches(':hover')) { if (isHidden && unhideButton && !unhideButton.matches(":hover")) {
unhideButton.classList.add('auto-faded'); unhideButton.classList.add("auto-faded");
} }
}, 2000); }, 2000);
}, 50); }, 50);
} else { } else {
// Smooth fade out for Unhide UI button // Smooth fade out for Unhide UI button
unhideButton.style.opacity = '0'; unhideButton.style.opacity = "0";
unhideButton.style.visibility = 'hidden'; unhideButton.style.visibility = "hidden";
unhideButton.style.pointerEvents = 'none'; unhideButton.style.pointerEvents = "none";
unhideButton.classList.remove('auto-faded'); unhideButton.classList.remove("auto-faded");
// Keep display: flex to maintain transitions, then hide after fade // Keep display: flex to maintain transitions, then hide after fade
setTimeout(() => { setTimeout(() => {
if (unhideButton.style.opacity === '0') { if (unhideButton.style.opacity === "0") {
unhideButton.style.display = 'none'; unhideButton.style.display = "none";
} }
}, 500); // Wait for transition to complete }, 500); // Wait for transition to complete
} }
@@ -94,7 +95,7 @@ const updateButtonStates = function(): void {
}; };
// Function to update styles when settings change // Function to update styles when settings change
const updateRadiantLyricsStyles = function(): void { const updateRadiantLyricsStyles = function (): void {
if (isHidden) { if (isHidden) {
// Apply only base styles (button hiding), NOT separated lyrics styles // Apply only base styles (button hiding), NOT separated lyrics styles
// to avoid affecting lyrics scrolling behavior // to avoid affecting lyrics scrolling behavior
@@ -112,10 +113,10 @@ const updateRadiantLyricsStyles = function(): void {
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer && !isHidden) { if (lyricsContainer && !isHidden) {
if (settings.lyricsGlowEnabled) { if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled'); lyricsContainer.classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow; lyricsGlowStyleTag.css = lyricsGlow;
} else { } else {
lyricsContainer.classList.add('lyrics-glow-disabled'); lyricsContainer.classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove(); lyricsGlowStyleTag.remove();
} }
} }
@@ -123,7 +124,9 @@ const updateRadiantLyricsStyles = function(): void {
// Function to apply spinning background to the entire app (cover everywhere) // Function to apply spinning background to the entire app (cover everywhere)
const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
const appContainer = document.querySelector('[data-test="main"]') as HTMLElement; const appContainer = document.querySelector(
'[data-test="main"]',
) as HTMLElement;
if (!settings.spinningCoverEverywhere) { if (!settings.spinningCoverEverywhere) {
// Remove StyleTag and all background elements // Remove StyleTag and all background elements
if (globalSpinningBgStyleTag) { if (globalSpinningBgStyleTag) {
@@ -131,65 +134,73 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalSpinningBgStyleTag = null; globalSpinningBgStyleTag = null;
} }
if (appContainer) { if (appContainer) {
appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove()); appContainer
.querySelectorAll(".global-spinning-image, .global-spinning-black-bg")
.forEach((el) => el.remove());
} }
return; return;
} }
// Add StyleTag if not present (Don't know if this is needed.. But it's here) // Add StyleTag if not present (Don't know if this is needed.. But it's here)
if (!globalSpinningBgStyleTag) { if (!globalSpinningBgStyleTag) {
globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss); globalSpinningBgStyleTag = new StyleTag(
"RadiantLyrics-global-spinning-bg",
unloads,
coverEverywhereCss,
);
} }
if (!appContainer) return; if (!appContainer) return;
// Remove any existing background elements // Remove any existing background elements
appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove()); appContainer
.querySelectorAll(".global-spinning-image, .global-spinning-black-bg")
.forEach((el) => el.remove());
// Add black background (to obscure image edges) // Add black background (to obscure image edges)
const blackBg = document.createElement('div'); const blackBg = document.createElement("div");
blackBg.className = 'global-spinning-black-bg'; blackBg.className = "global-spinning-black-bg";
appContainer.appendChild(blackBg); appContainer.appendChild(blackBg);
// Add one image for background (spinning or static based on performance mode) // Add one image for background (spinning or static based on performance mode)
const img = document.createElement('img'); const img = document.createElement("img");
img.src = coverArtImageSrc; img.src = coverArtImageSrc;
img.className = 'global-spinning-image'; img.className = "global-spinning-image";
img.style.animationDelay = '0s'; img.style.animationDelay = "0s";
img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
// Apply or remove animation based on performance mode // Apply or remove animation based on performance mode
if (settings.performanceMode) { if (settings.performanceMode) {
img.style.animation = 'none'; img.style.animation = "none";
img.classList.add('performance-mode-static'); img.classList.add("performance-mode-static");
} else { } else {
img.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; img.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
img.classList.remove('performance-mode-static'); img.classList.remove("performance-mode-static");
} }
appContainer.appendChild(img); appContainer.appendChild(img);
}; };
// Function to clean up global spinning background // Function to clean up global spinning background
const cleanUpGlobalSpinningBackground = function(): void { const cleanUpGlobalSpinningBackground = function (): void {
const globalImages = document.getElementsByClassName("global-spinning-image"); const globalImages = document.getElementsByClassName("global-spinning-image");
Array.from(globalImages).forEach((element) => { Array.from(globalImages).forEach((element) => {
element.remove(); element.remove();
}); });
// Also remove the overlay // Also remove the overlay
const overlay = document.querySelector('.global-spinning-overlay'); const overlay = document.querySelector(".global-spinning-overlay");
if (overlay && overlay.parentNode) { if (overlay && overlay.parentNode) {
overlay.parentNode.removeChild(overlay); overlay.parentNode.removeChild(overlay);
} }
// Also remove the black bg // Also remove the black bg
const blackBg = document.querySelector('.global-spinning-black-bg'); const blackBg = document.querySelector(".global-spinning-black-bg");
if (blackBg && blackBg.parentNode) { if (blackBg && blackBg.parentNode) {
blackBg.parentNode.removeChild(blackBg); blackBg.parentNode.removeChild(blackBg);
} }
}; };
// Function to update global background when settings change // Function to update global background when settings change
const updateRadiantLyricsGlobalBackground = function(): void { const updateRadiantLyricsGlobalBackground = function (): void {
if (settings.spinningCoverEverywhere) { if (settings.spinningCoverEverywhere) {
// Get current cover art and apply global background // Get current cover art and apply global background
updateCoverArtBackground(); updateCoverArtBackground();
@@ -199,8 +210,10 @@ const updateRadiantLyricsGlobalBackground = function(): void {
}; };
// Function to update Now Playing background when settings change // Function to update Now Playing background when settings change
const updateRadiantLyricsNowPlayingBackground = function(): void { const updateRadiantLyricsNowPlayingBackground = function (): void {
const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image'); const nowPlayingBackgroundImages = document.querySelectorAll(
".now-playing-background-image",
);
nowPlayingBackgroundImages.forEach((img: Element) => { nowPlayingBackgroundImages.forEach((img: Element) => {
const imgElement = img as HTMLElement; const imgElement = img as HTMLElement;
@@ -213,21 +226,21 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
if (settings.settingsAffectNowPlaying) { if (settings.settingsAffectNowPlaying) {
// Use settings values // Use settings values
if (settings.performanceMode) { if (settings.performanceMode) {
imgElement.style.animation = 'none'; imgElement.style.animation = "none";
imgElement.classList.add('performance-mode-static'); imgElement.classList.add("performance-mode-static");
} else { } else {
imgElement.style.animation = `spin ${settings.spinSpeed}s linear infinite`; imgElement.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
imgElement.classList.remove('performance-mode-static'); imgElement.classList.remove("performance-mode-static");
} }
imgElement.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; imgElement.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
} else { } else {
// Reset to default values // Reset to default values
if (settings.performanceMode) { if (settings.performanceMode) {
imgElement.style.animation = 'none'; imgElement.style.animation = "none";
imgElement.classList.add('performance-mode-static'); imgElement.classList.add("performance-mode-static");
} else { } else {
imgElement.style.animation = `spin ${defaultSpinSpeed}s linear infinite`; imgElement.style.animation = `spin ${defaultSpinSpeed}s linear infinite`;
imgElement.classList.remove('performance-mode-static'); imgElement.classList.remove("performance-mode-static");
} }
imgElement.style.filter = `blur(${defaultBlur}px) brightness(${defaultBrightness / 100}) contrast(${defaultContrast}%)`; imgElement.style.filter = `blur(${defaultBlur}px) brightness(${defaultBrightness / 100}) contrast(${defaultContrast}%)`;
} }
@@ -236,18 +249,24 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
// Make these functions available globally so Settings can call them // Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles; (window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground; (window as any).updateRadiantLyricsGlobalBackground =
(window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground; updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsNowPlayingBackground =
updateRadiantLyricsNowPlayingBackground;
const toggleRadiantLyrics = function(): void { const toggleRadiantLyrics = function (): void {
const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement; const nowPlayingContainer = document.querySelector(
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (isHidden) { if (isHidden) {
// currently hidden, so we're about to show UI // currently hidden, so we're about to show UI
// Add a class to immediately hide the unhide button with CSS // Add a class to immediately hide the unhide button with CSS
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; const unhideButton = document.querySelector(
".unhide-ui-button",
) as HTMLElement;
if (unhideButton) { if (unhideButton) {
unhideButton.classList.add('hide-immediately'); // actually uses fade out but.. still unhideButton.classList.add("hide-immediately"); // actually uses fade out but.. still
} }
// Toggle the state // Toggle the state
@@ -255,9 +274,9 @@ const toggleRadiantLyrics = function(): void {
// Don't remove StyleTags completely, just remove the class to show elements again // Don't remove StyleTags completely, just remove the class to show elements again
if (nowPlayingContainer) { if (nowPlayingContainer) {
nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden'); nowPlayingContainer.classList.remove("radiant-lyrics-ui-hidden");
} }
document.body.classList.remove('radiant-lyrics-ui-hidden'); document.body.classList.remove("radiant-lyrics-ui-hidden");
// Remove styles after animation completes (I think this is needed.. but not sure) // Remove styles after animation completes (I think this is needed.. but not sure)
setTimeout(() => { setTimeout(() => {
if (!isHidden) { if (!isHidden) {
@@ -283,20 +302,22 @@ const toggleRadiantLyrics = function(): void {
updateRadiantLyricsStyles(); updateRadiantLyricsStyles();
// Add a class to the container to trigger CSS animations // Add a class to the container to trigger CSS animations
if (nowPlayingContainer) { if (nowPlayingContainer) {
nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden'); nowPlayingContainer.classList.add("radiant-lyrics-ui-hidden");
} }
document.body.classList.add('radiant-lyrics-ui-hidden'); document.body.classList.add("radiant-lyrics-ui-hidden");
}, 50); // Small delay to let Hide UI button start its fade transition - (Had issues with the fade out.. so I removed it) }, 50); // Small delay to let Hide UI button start its fade transition - (Had issues with the fade out.. so I removed it)
} }
}; };
const createHideUIButton = function(): void { const createHideUIButton = function (): void {
setTimeout(() => { setTimeout(() => {
// Only create button if Hide UI is enabled in settings // Only create button if Hide UI is enabled in settings
if (!settings.hideUIEnabled) return; if (!settings.hideUIEnabled) return;
// Look for the fullscreen button's parent container // Look for the fullscreen button's parent container
const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]'); const fullscreenButton = document.querySelector(
'[data-test="request-fullscreen"]',
);
if (!fullscreenButton || !fullscreenButton.parentElement) { if (!fullscreenButton || !fullscreenButton.parentElement) {
// Retry if fullscreen button not found yet // Retry if fullscreen button not found yet
setTimeout(() => createHideUIButton(), 1000); setTimeout(() => createHideUIButton(), 1000);
@@ -304,44 +325,46 @@ const createHideUIButton = function(): void {
} }
// Check if our button already exists // Check if our button already exists
if (document.querySelector('.hide-ui-button')) return; if (document.querySelector(".hide-ui-button")) return;
const buttonContainer = fullscreenButton.parentElement; const buttonContainer = fullscreenButton.parentElement;
// Create our hide UI button // Create our hide UI button
const hideUIButton = document.createElement("button"); const hideUIButton = document.createElement("button");
hideUIButton.className = 'hide-ui-button'; hideUIButton.className = "hide-ui-button";
hideUIButton.setAttribute('aria-label', 'Hide UI'); hideUIButton.setAttribute("aria-label", "Hide UI");
hideUIButton.setAttribute('title', 'Hide UI'); hideUIButton.setAttribute("title", "Hide UI");
hideUIButton.textContent = 'Hide UI'; hideUIButton.textContent = "Hide UI";
// Style to match Tidal's buttons // Style to match Tidal's buttons
hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)'; hideUIButton.style.backgroundColor = "var(--wave-color-solid-accent-fill)";
hideUIButton.style.color = 'black'; hideUIButton.style.color = "black";
hideUIButton.style.border = 'none'; hideUIButton.style.border = "none";
hideUIButton.style.borderRadius = '12px'; hideUIButton.style.borderRadius = "12px";
hideUIButton.style.height = '40px'; hideUIButton.style.height = "40px";
hideUIButton.style.padding = '0 12px'; hideUIButton.style.padding = "0 12px";
hideUIButton.style.marginLeft = '8px'; hideUIButton.style.marginLeft = "8px";
hideUIButton.style.cursor = 'pointer'; hideUIButton.style.cursor = "pointer";
hideUIButton.style.display = 'flex'; hideUIButton.style.display = "flex";
hideUIButton.style.alignItems = 'center'; hideUIButton.style.alignItems = "center";
hideUIButton.style.justifyContent = 'center'; hideUIButton.style.justifyContent = "center";
hideUIButton.style.fontSize = '12px'; hideUIButton.style.fontSize = "12px";
hideUIButton.style.fontWeight = '600'; hideUIButton.style.fontWeight = "600";
hideUIButton.style.whiteSpace = 'nowrap'; hideUIButton.style.whiteSpace = "nowrap";
hideUIButton.style.transition = 'opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out'; hideUIButton.style.transition =
hideUIButton.style.opacity = '0'; "opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out";
hideUIButton.style.visibility = 'hidden'; hideUIButton.style.opacity = "0";
hideUIButton.style.pointerEvents = 'none'; hideUIButton.style.visibility = "hidden";
hideUIButton.style.pointerEvents = "none";
// Add hover effect // Add hover effect
hideUIButton.addEventListener('mouseenter', () => { hideUIButton.addEventListener("mouseenter", () => {
hideUIButton.style.backgroundColor = 'lightgray'; hideUIButton.style.backgroundColor = "lightgray";
}); });
hideUIButton.addEventListener('mouseleave', () => { hideUIButton.addEventListener("mouseleave", () => {
hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)'; hideUIButton.style.backgroundColor =
"var(--wave-color-solid-accent-fill)";
}); });
hideUIButton.onclick = toggleRadiantLyrics; hideUIButton.onclick = toggleRadiantLyrics;
@@ -352,9 +375,9 @@ const createHideUIButton = function(): void {
// Fade in the button after a small delay // Fade in the button after a small delay
setTimeout(() => { setTimeout(() => {
if (settings.hideUIEnabled && !isHidden) { if (settings.hideUIEnabled && !isHidden) {
hideUIButton.style.opacity = '1'; hideUIButton.style.opacity = "1";
hideUIButton.style.visibility = 'visible'; hideUIButton.style.visibility = "visible";
hideUIButton.style.pointerEvents = 'auto'; hideUIButton.style.pointerEvents = "auto";
} }
}, 100); // Small delay to ensure DOM insertion is complete }, 100); // Small delay to ensure DOM insertion is complete
@@ -362,16 +385,18 @@ const createHideUIButton = function(): void {
}, 1000); }, 1000);
}; };
const createUnhideUIButton = function(): void { const createUnhideUIButton = function (): void {
setTimeout(() => { setTimeout(() => {
// Only create button if Hide UI is enabled in settings // Only create button if Hide UI is enabled in settings
if (!settings.hideUIEnabled) return; if (!settings.hideUIEnabled) return;
// Check if our button already exists // Check if our button already exists
if (document.querySelector('.unhide-ui-button')) return; if (document.querySelector(".unhide-ui-button")) return;
// Find the Now Playing container to place the button within it // Find the Now Playing container to place the button within it
const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement; const nowPlayingContainer = document.querySelector(
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (!nowPlayingContainer) { if (!nowPlayingContainer) {
// Retry if container not found yet // Retry if container not found yet
setTimeout(() => createUnhideUIButton(), 1000); setTimeout(() => createUnhideUIButton(), 1000);
@@ -380,10 +405,10 @@ const createUnhideUIButton = function(): void {
// Create unhide UI button // Create unhide UI button
const unhideUIButton = document.createElement("button"); const unhideUIButton = document.createElement("button");
unhideUIButton.className = 'unhide-ui-button'; unhideUIButton.className = "unhide-ui-button";
unhideUIButton.setAttribute('aria-label', 'Unhide UI'); unhideUIButton.setAttribute("aria-label", "Unhide UI");
unhideUIButton.setAttribute('title', 'Unhide UI'); unhideUIButton.setAttribute("title", "Unhide UI");
unhideUIButton.textContent = 'Unhide'; unhideUIButton.textContent = "Unhide";
// Style for top-right positioning within the Now Playing container (is a pain) // Style for top-right positioning within the Now Playing container (is a pain)
unhideUIButton.style.cssText = ` unhideUIButton.style.cssText = `
@@ -414,19 +439,19 @@ const createUnhideUIButton = function(): void {
`; `;
// Add hover effect with auto-fade handling // Add hover effect with auto-fade handling
unhideUIButton.addEventListener('mouseenter', () => { unhideUIButton.addEventListener("mouseenter", () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; unhideUIButton.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
unhideUIButton.style.transform = 'scale(1.05)'; unhideUIButton.style.transform = "scale(1.05)";
unhideUIButton.classList.remove('auto-faded'); unhideUIButton.classList.remove("auto-faded");
}); });
unhideUIButton.addEventListener('mouseleave', () => { unhideUIButton.addEventListener("mouseleave", () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; unhideUIButton.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
unhideUIButton.style.transform = 'scale(1)'; unhideUIButton.style.transform = "scale(1)";
// Re-add auto-fade after a short delay if still in hidden mode // Re-add auto-fade after a short delay if still in hidden mode
window.setTimeout(() => { window.setTimeout(() => {
if (isHidden && !unhideUIButton.matches(':hover')) { if (isHidden && !unhideUIButton.matches(":hover")) {
unhideUIButton.classList.add('auto-faded'); unhideUIButton.classList.add("auto-faded");
} }
}, 2000); }, 2000);
}); });
@@ -475,20 +500,28 @@ function observeForButtons(): void {
// Only observe for buttons if Hide UI is enabled // Only observe for buttons if Hide UI is enabled
if (!settings.hideUIEnabled) return; if (!settings.hideUIEnabled) return;
const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]'); const fullscreenButton = document.querySelector(
if (fullscreenButton && !document.querySelector('.hide-ui-button')) { '[data-test="request-fullscreen"]',
);
if (fullscreenButton && !document.querySelector(".hide-ui-button")) {
createHideUIButton(); createHideUIButton();
} }
// Create unhide button if it doesn't exist // Create unhide button if it doesn't exist
if (!document.querySelector('.unhide-ui-button')) { if (!document.querySelector(".unhide-ui-button")) {
createUnhideUIButton(); createUnhideUIButton();
} }
// Fix unhide button visibility if UI is hidden but button isn't showing // Fix unhide button visibility if UI is hidden but button isn't showing
if (isHidden) { if (isHidden) {
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; const unhideButton = document.querySelector(
if (unhideButton && (unhideButton.style.display === 'none' || unhideButton.style.opacity === '0')) { ".unhide-ui-button",
) as HTMLElement;
if (
unhideButton &&
(unhideButton.style.display === "none" ||
unhideButton.style.opacity === "0")
) {
// Force update button states to fix visibility // Force update button states to fix visibility
updateButtonStates(); updateButtonStates();
} }
@@ -501,19 +534,21 @@ function observeForButtons(): void {
// Also observe for lyrics container changes to apply the setting // Also observe for lyrics container changes to apply the setting
function observeLyricsContainer(): void { function observeLyricsContainer(): void {
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); const lyricsContainer = document.querySelector(
'[class^="_lyricsContainer"]',
);
if (lyricsContainer) { if (lyricsContainer) {
if (settings.lyricsGlowEnabled) { if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled'); lyricsContainer.classList.remove("lyrics-glow-disabled");
} else { } else {
lyricsContainer.classList.add('lyrics-glow-disabled'); lyricsContainer.classList.add("lyrics-glow-disabled");
} }
} }
}); });
observer.observe(document.body, { observer.observe(document.body, {
childList: true, childList: true,
subtree: true subtree: true,
}); });
unloads.add(() => observer.disconnect()); unloads.add(() => observer.disconnect());
@@ -527,21 +562,25 @@ const updateCoverArtBackground = function (method: number = 0): void {
}, 2000); }, 2000);
} }
let coverArtImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement; let coverArtImageElement = document.querySelector(
'figure[class*="_albumImage"] > div > div > div > img',
) as HTMLImageElement;
let coverArtImageSrc: string | null = null; let coverArtImageSrc: string | null = null;
if (coverArtImageElement) { if (coverArtImageElement) {
coverArtImageSrc = coverArtImageElement.src; coverArtImageSrc = coverArtImageElement.src;
// Set res to 1280x1280 // Set res to 1280x1280
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280'); coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, "1280x1280");
coverArtImageElement.src = coverArtImageSrc; coverArtImageElement.src = coverArtImageSrc;
} else { } else {
const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement; const videoElement = document.querySelector(
'figure[class*="_albumImage"] > div > div > div > video',
) as HTMLVideoElement;
if (videoElement) { if (videoElement) {
coverArtImageSrc = videoElement.getAttribute("poster"); coverArtImageSrc = videoElement.getAttribute("poster");
if (coverArtImageSrc) { if (coverArtImageSrc) {
// Set res to 1280x1280 // Set res to 1280x1280
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280'); coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, "1280x1280");
} }
} else { } else {
cleanUpDynamicArt(); cleanUpDynamicArt();
@@ -557,68 +596,74 @@ const updateCoverArtBackground = function (method: number = 0): void {
} }
// Apply spinning CoverArt background to the Now Playing container // Apply spinning CoverArt background to the Now Playing container
const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement; const nowPlayingContainerElement = document.querySelector(
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (nowPlayingContainerElement) { if (nowPlayingContainerElement) {
// Remove existing background images if they exist // Remove existing background images if they exist
const existingBackgroundImages = nowPlayingContainerElement.querySelectorAll('.now-playing-background-image, .now-playing-black-bg'); const existingBackgroundImages =
existingBackgroundImages.forEach(img => img.remove()); nowPlayingContainerElement.querySelectorAll(
".now-playing-background-image, .now-playing-black-bg",
);
existingBackgroundImages.forEach((img) => img.remove());
// Add black background layer (to obscure image edges) // Add black background layer (to obscure image edges)
const blackBg = document.createElement('div'); const blackBg = document.createElement("div");
blackBg.className = 'now-playing-black-bg'; blackBg.className = "now-playing-black-bg";
blackBg.style.position = 'absolute'; blackBg.style.position = "absolute";
blackBg.style.left = '0'; blackBg.style.left = "0";
blackBg.style.top = '0'; blackBg.style.top = "0";
blackBg.style.width = '100%'; blackBg.style.width = "100%";
blackBg.style.height = '100%'; blackBg.style.height = "100%";
blackBg.style.background = '#000'; blackBg.style.background = "#000";
blackBg.style.zIndex = '-2'; blackBg.style.zIndex = "-2";
blackBg.style.pointerEvents = 'none'; blackBg.style.pointerEvents = "none";
nowPlayingContainerElement.appendChild(blackBg); nowPlayingContainerElement.appendChild(blackBg);
// Create and append single background layer (the cover art) // Create and append single background layer (the cover art)
const backgroundImage = document.createElement('img'); const backgroundImage = document.createElement("img");
backgroundImage.src = coverArtImageSrc; backgroundImage.src = coverArtImageSrc;
backgroundImage.className = 'now-playing-background-image'; backgroundImage.className = "now-playing-background-image";
backgroundImage.style.position = 'absolute'; backgroundImage.style.position = "absolute";
backgroundImage.style.left = '50%'; backgroundImage.style.left = "50%";
backgroundImage.style.top = '50%'; backgroundImage.style.top = "50%";
backgroundImage.style.transform = 'translate(-50%, -50%)'; backgroundImage.style.transform = "translate(-50%, -50%)";
backgroundImage.style.width = '90vw'; backgroundImage.style.width = "90vw";
backgroundImage.style.height = '90vh'; backgroundImage.style.height = "90vh";
backgroundImage.style.objectFit = 'cover'; backgroundImage.style.objectFit = "cover";
backgroundImage.style.zIndex = '-1'; backgroundImage.style.zIndex = "-1";
backgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; backgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
backgroundImage.style.willChange = 'transform, filter'; backgroundImage.style.willChange = "transform, filter";
backgroundImage.style.transformOrigin = 'center center'; backgroundImage.style.transformOrigin = "center center";
// Apply animation based on performance mode // Apply animation based on performance mode
if (settings.performanceMode) { if (settings.performanceMode) {
backgroundImage.style.animation = 'none'; backgroundImage.style.animation = "none";
backgroundImage.classList.add('performance-mode-static'); backgroundImage.classList.add("performance-mode-static");
} else { } else {
backgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`; backgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
backgroundImage.classList.remove('performance-mode-static'); backgroundImage.classList.remove("performance-mode-static");
} }
nowPlayingContainerElement.appendChild(backgroundImage); nowPlayingContainerElement.appendChild(backgroundImage);
// Create subtle gradient overlay to hide edges (Hate this approach but it's the only way I could get it to work) // Create subtle gradient overlay to hide edges (Hate this approach but it's the only way I could get it to work)
const gradientOverlay = document.createElement('div'); const gradientOverlay = document.createElement("div");
gradientOverlay.className = 'now-playing-gradient-overlay'; gradientOverlay.className = "now-playing-gradient-overlay";
gradientOverlay.style.position = 'absolute'; gradientOverlay.style.position = "absolute";
gradientOverlay.style.left = '0'; gradientOverlay.style.left = "0";
gradientOverlay.style.top = '0'; gradientOverlay.style.top = "0";
gradientOverlay.style.width = '100%'; gradientOverlay.style.width = "100%";
gradientOverlay.style.height = '100%'; gradientOverlay.style.height = "100%";
gradientOverlay.style.background = 'radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%)'; gradientOverlay.style.background =
gradientOverlay.style.zIndex = '-1'; "radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%)";
gradientOverlay.style.pointerEvents = 'none'; gradientOverlay.style.zIndex = "-1";
gradientOverlay.style.pointerEvents = "none";
nowPlayingContainerElement.appendChild(gradientOverlay); nowPlayingContainerElement.appendChild(gradientOverlay);
// Add keyframe animation if it doesn't exist // Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) { if (!document.querySelector("#spinAnimation")) {
const styleSheet = document.createElement('style'); const styleSheet = document.createElement("style");
styleSheet.id = 'spinAnimation'; styleSheet.id = "spinAnimation";
styleSheet.textContent = ` styleSheet.textContent = `
@keyframes spin { @keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); } from { transform: translate(-50%, -50%) rotate(0deg); }
@@ -632,7 +677,9 @@ const updateCoverArtBackground = function (method: number = 0): void {
}; };
const cleanUpDynamicArt = function (): void { const cleanUpDynamicArt = function (): void {
const nowPlayingBackgroundImages = document.getElementsByClassName("now-playing-background-image"); const nowPlayingBackgroundImages = document.getElementsByClassName(
"now-playing-background-image",
);
Array.from(nowPlayingBackgroundImages).forEach((element) => { Array.from(nowPlayingBackgroundImages).forEach((element) => {
element.remove(); element.remove();
}); });
@@ -658,18 +705,18 @@ unloads.add(() => {
} }
// Clean up our custom buttons // Clean up our custom buttons
const hideButton = document.querySelector('.hide-ui-button'); const hideButton = document.querySelector(".hide-ui-button");
if (hideButton && hideButton.parentNode) { if (hideButton && hideButton.parentNode) {
hideButton.parentNode.removeChild(hideButton); hideButton.parentNode.removeChild(hideButton);
} }
const unhideButton = document.querySelector('.unhide-ui-button'); const unhideButton = document.querySelector(".unhide-ui-button");
if (unhideButton && unhideButton.parentNode) { if (unhideButton && unhideButton.parentNode) {
unhideButton.parentNode.removeChild(unhideButton); unhideButton.parentNode.removeChild(unhideButton);
} }
// Clean up spin animations // Clean up spin animations
const spinAnimationStyle = document.querySelector('#spinAnimation'); const spinAnimationStyle = document.querySelector("#spinAnimation");
if (spinAnimationStyle && spinAnimationStyle.parentNode) { if (spinAnimationStyle && spinAnimationStyle.parentNode) {
spinAnimationStyle.parentNode.removeChild(spinAnimationStyle); spinAnimationStyle.parentNode.removeChild(spinAnimationStyle);
} }
plugins/radiant-lyrics-luna/src/separated-lyrics.css
-133
View File
@@ -1,133 +0,0 @@
/* 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 - only when UI is hidden */
.radiant-lyrics-ui-hidden [class*="tabItems"] {
opacity: 0 !important;
transition: opacity 0.4s ease-in-out;
}
/* Remove image container positioning - let it stay where it is */
.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover {
opacity: 1 !important;
}
.radiant-lyrics-ui-hidden [data-test="header-container"] {
opacity: 0 !important;
transition: opacity 0.4s ease-in-out;
}
/* Keep bottom gradient visible - may be needed for lyrics scrolling */
/* Remove credits button repositioning - let it stay where it is */
/* Keep lyrics provider visible - don't hide with UI */
/* 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;
line-height: 1.6;
}
[class^="_lyricsText"] > div > span {
transition: all 0.3s ease;
}
[class^="_lyricsText"] > div > span[data-current="true"] {
font-weight: 600;
transform: scale(1.05);
}
/* Enhanced lyrics visibility */
[class^="_lyricsText"] > div {
padding: 8px 0;
border-radius: 4px;
transition: all 0.2s ease;
}
[class^="_lyricsText"] > div:hover {
background-color: rgba(255, 255, 255, 0.05);
}