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 #36 from meowarex/dev

Browse Source 
Removed seperated-lyrics.css
This commit is contained in:
Meow Meow
2025-06-09 21:55:10 +10:00
committed by GitHub
parent c7252443dc e34a75c083
commit 2911046a11
2 changed files with 533 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/Settings.tsx
-3
View File
@@ -34,7 +34,6 @@ export const Settings = () => {
desc="Enable glowing effect for lyrics & Font Stytling Changes" desc="Enable glowing effect for lyrics & Font Stytling Changes"
checked={lyricsGlowEnabled} checked={lyricsGlowEnabled}
onChange={(_, checked: boolean) => { onChange={(_, checked: boolean) => {
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).updateRadiantLyricsStyles) { if ((window as any).updateRadiantLyricsStyles) {
@@ -47,7 +46,6 @@ export const Settings = () => {
desc="Enable hide/unhide UI functionality with toggle buttons" desc="Enable hide/unhide UI functionality with toggle buttons"
checked={hideUIEnabled} checked={hideUIEnabled}
onChange={(_, checked: boolean) => { onChange={(_, checked: boolean) => {
console.log("Hide UI Feature:", checked ? "enabled" : "disabled");
setHideUIEnabled((settings.hideUIEnabled = checked)); setHideUIEnabled((settings.hideUIEnabled = checked));
}} }}
/> />
@@ -101,7 +99,6 @@ export const Settings = () => {
step={1} step={1}
value={backgroundContrast} value={backgroundContrast}
onNumber={(value: number) => { onNumber={(value: number) => {
console.log("Background Contrast:", value);
setBackgroundContrast((settings.backgroundContrast = value)); setBackgroundContrast((settings.backgroundContrast = value));
if ((window as any).updateRadiantLyricsGlobalBackground) { if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); (window as any).updateRadiantLyricsGlobalBackground();
plugins/radiant-lyrics-luna/src/index.ts
+161 -209
View File
@@ -1,4 +1,4 @@
import { LunaUnload, Tracer } from "@luna/core"; import { LunaUnload, Tracer, ftch } 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";
@@ -31,26 +31,24 @@ 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( const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
".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) {
@@ -61,33 +59,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
} }
@@ -113,10 +111,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();
} }
} }
@@ -124,9 +122,7 @@ 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( const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
'[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) {
@@ -134,48 +130,40 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalSpinningBgStyleTag = null; globalSpinningBgStyleTag = null;
} }
if (appContainer) { if (appContainer) {
appContainer appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove());
.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( globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss);
"RadiantLyrics-global-spinning-bg",
unloads,
coverEverywhereCss,
);
} }
if (!appContainer) return; if (!appContainer) return;
// Remove any existing background elements // Remove any existing background elements
appContainer appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove());
.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);
@@ -188,12 +176,12 @@ const cleanUpGlobalSpinningBackground = function (): void {
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);
} }
@@ -211,9 +199,7 @@ 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( const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image');
".now-playing-background-image",
);
nowPlayingBackgroundImages.forEach((img: Element) => { nowPlayingBackgroundImages.forEach((img: Element) => {
const imgElement = img as HTMLElement; const imgElement = img as HTMLElement;
@@ -226,21 +212,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}%)`;
} }
@@ -249,24 +235,18 @@ 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 = (window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
updateRadiantLyricsGlobalBackground; (window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
(window as any).updateRadiantLyricsNowPlayingBackground =
updateRadiantLyricsNowPlayingBackground;
const toggleRadiantLyrics = function(): void { const toggleRadiantLyrics = function(): void {
const nowPlayingContainer = document.querySelector( const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
'[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( const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
".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
@@ -274,9 +254,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) {
@@ -302,9 +282,9 @@ 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)
} }
}; };
@@ -315,9 +295,7 @@ const createHideUIButton = function (): void {
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( const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
'[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);
@@ -325,46 +303,44 @@ 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 = hideUIButton.style.transition = 'opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out';
"opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out"; hideUIButton.style.opacity = '0';
hideUIButton.style.opacity = "0"; hideUIButton.style.visibility = 'hidden';
hideUIButton.style.visibility = "hidden"; hideUIButton.style.pointerEvents = 'none';
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 = hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
"var(--wave-color-solid-accent-fill)";
}); });
hideUIButton.onclick = toggleRadiantLyrics; hideUIButton.onclick = toggleRadiantLyrics;
@@ -375,9 +351,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
@@ -391,12 +367,10 @@ const createUnhideUIButton = function (): void {
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( const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
'[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);
@@ -405,10 +379,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 = `
@@ -439,19 +413,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);
}); });
@@ -500,28 +474,20 @@ 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( const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
'[data-test="request-fullscreen"]', if (fullscreenButton && !document.querySelector('.hide-ui-button')) {
);
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( const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
".unhide-ui-button", if (unhideButton && (unhideButton.style.display === 'none' || unhideButton.style.opacity === '0')) {
) 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();
} }
@@ -534,21 +500,19 @@ 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( const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
'[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());
@@ -562,25 +526,21 @@ const updateCoverArtBackground = function (method: number = 0): void {
}, 2000); }, 2000);
} }
let coverArtImageElement = document.querySelector( let coverArtImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement;
'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( const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement;
'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();
@@ -596,74 +556,68 @@ 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( const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (nowPlayingContainerElement) { if (nowPlayingContainerElement) {
// Remove existing background images if they exist // Remove existing background images if they exist
const existingBackgroundImages = const existingBackgroundImages = nowPlayingContainerElement.querySelectorAll('.now-playing-background-image, .now-playing-black-bg');
nowPlayingContainerElement.querySelectorAll( existingBackgroundImages.forEach(img => img.remove());
".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 = gradientOverlay.style.background = 'radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%)';
"radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%)"; gradientOverlay.style.zIndex = '-1';
gradientOverlay.style.zIndex = "-1"; gradientOverlay.style.pointerEvents = 'none';
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); }
@@ -677,9 +631,7 @@ const updateCoverArtBackground = function (method: number = 0): void {
}; };
const cleanUpDynamicArt = function (): void { const cleanUpDynamicArt = function (): void {
const nowPlayingBackgroundImages = document.getElementsByClassName( const nowPlayingBackgroundImages = document.getElementsByClassName("now-playing-background-image");
"now-playing-background-image",
);
Array.from(nowPlayingBackgroundImages).forEach((element) => { Array.from(nowPlayingBackgroundImages).forEach((element) => {
element.remove(); element.remove();
}); });
@@ -705,18 +657,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);
} }