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
+209 -162
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 { settings, Settings } from "./Settings";
// 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 separatedLyrics from "file://separated-lyrics.css?minify";
import playerBarHidden from "file://player-bar-hidden.css?minify";
import lyricsGlow from "file://lyrics-glow.css?minify";
import coverEverywhereCss from "file://cover-everywhere.css?minify";
@@ -32,24 +31,26 @@ var isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null;
const updateButtonStates = function (): void {
const hideButton = document.querySelector('.hide-ui-button') as HTMLElement;
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
const hideButton = document.querySelector(".hide-ui-button") as HTMLElement;
const unhideButton = document.querySelector(
".unhide-ui-button",
) as HTMLElement;
if (hideButton) {
if (settings.hideUIEnabled && !isHidden) {
hideButton.style.display = 'flex';
hideButton.style.display = "flex";
// Small delay to ensure display is set first, then fade in
setTimeout(() => {
hideButton.style.opacity = '1';
hideButton.style.visibility = 'visible';
hideButton.style.pointerEvents = 'auto';
hideButton.style.opacity = "1";
hideButton.style.visibility = "visible";
hideButton.style.pointerEvents = "auto";
}, 50);
} else {
// Hide UI button immediately when clicked - (couldn't get the fade to work)
hideButton.style.display = 'none';
hideButton.style.opacity = '0';
hideButton.style.visibility = 'hidden';
hideButton.style.pointerEvents = 'none';
hideButton.style.display = "none";
hideButton.style.opacity = "0";
hideButton.style.visibility = "hidden";
hideButton.style.pointerEvents = "none";
}
}
if (unhideButton) {
@@ -60,33 +61,33 @@ const updateButtonStates = function(): void {
}
if (settings.hideUIEnabled && isHidden) {
unhideButton.style.display = 'flex';
unhideButton.style.display = "flex";
// Remove the hide-immediately class and let it fade in smoothly
unhideButton.classList.remove('hide-immediately');
unhideButton.classList.remove('auto-faded');
unhideButton.classList.remove("hide-immediately");
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)
setTimeout(() => {
unhideButton.style.opacity = '1';
unhideButton.style.visibility = 'visible';
unhideButton.style.pointerEvents = 'auto';
unhideButton.style.opacity = "1";
unhideButton.style.visibility = "visible";
unhideButton.style.pointerEvents = "auto";
// Set up auto-fade after 2 seconds
unhideButtonAutoFadeTimeout = window.setTimeout(() => {
if (isHidden && unhideButton && !unhideButton.matches(':hover')) {
unhideButton.classList.add('auto-faded');
if (isHidden && unhideButton && !unhideButton.matches(":hover")) {
unhideButton.classList.add("auto-faded");
}
}, 2000);
}, 50);
} else {
// Smooth fade out for Unhide UI button
unhideButton.style.opacity = '0';
unhideButton.style.visibility = 'hidden';
unhideButton.style.pointerEvents = 'none';
unhideButton.classList.remove('auto-faded');
unhideButton.style.opacity = "0";
unhideButton.style.visibility = "hidden";
unhideButton.style.pointerEvents = "none";
unhideButton.classList.remove("auto-faded");
// Keep display: flex to maintain transitions, then hide after fade
setTimeout(() => {
if (unhideButton.style.opacity === '0') {
unhideButton.style.display = 'none';
if (unhideButton.style.opacity === "0") {
unhideButton.style.display = "none";
}
}, 500); // Wait for transition to complete
}
@@ -112,10 +113,10 @@ const updateRadiantLyricsStyles = function(): void {
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer && !isHidden) {
if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled');
lyricsContainer.classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
} else {
lyricsContainer.classList.add('lyrics-glow-disabled');
lyricsContainer.classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
}
@@ -123,7 +124,9 @@ const updateRadiantLyricsStyles = function(): void {
// Function to apply spinning background to the entire app (cover everywhere)
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) {
// Remove StyleTag and all background elements
if (globalSpinningBgStyleTag) {
@@ -131,40 +134,48 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalSpinningBgStyleTag = null;
}
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;
}
// Add StyleTag if not present (Don't know if this is needed.. But it's here)
if (!globalSpinningBgStyleTag) {
globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss);
globalSpinningBgStyleTag = new StyleTag(
"RadiantLyrics-global-spinning-bg",
unloads,
coverEverywhereCss,
);
}
if (!appContainer) return;
// 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)
const blackBg = document.createElement('div');
blackBg.className = 'global-spinning-black-bg';
const blackBg = document.createElement("div");
blackBg.className = "global-spinning-black-bg";
appContainer.appendChild(blackBg);
// 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.className = 'global-spinning-image';
img.style.animationDelay = '0s';
img.className = "global-spinning-image";
img.style.animationDelay = "0s";
img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
// Apply or remove animation based on performance mode
if (settings.performanceMode) {
img.style.animation = 'none';
img.classList.add('performance-mode-static');
img.style.animation = "none";
img.classList.add("performance-mode-static");
} else {
img.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
img.classList.remove('performance-mode-static');
img.classList.remove("performance-mode-static");
}
appContainer.appendChild(img);
@@ -177,12 +188,12 @@ const cleanUpGlobalSpinningBackground = function(): void {
element.remove();
});
// Also remove the overlay
const overlay = document.querySelector('.global-spinning-overlay');
const overlay = document.querySelector(".global-spinning-overlay");
if (overlay && overlay.parentNode) {
overlay.parentNode.removeChild(overlay);
}
// 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) {
blackBg.parentNode.removeChild(blackBg);
}
@@ -200,7 +211,9 @@ const updateRadiantLyricsGlobalBackground = function(): void {
// Function to update Now Playing background when settings change
const updateRadiantLyricsNowPlayingBackground = function (): void {
const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image');
const nowPlayingBackgroundImages = document.querySelectorAll(
".now-playing-background-image",
);
nowPlayingBackgroundImages.forEach((img: Element) => {
const imgElement = img as HTMLElement;
@@ -213,21 +226,21 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
if (settings.settingsAffectNowPlaying) {
// Use settings values
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
imgElement.style.animation = "none";
imgElement.classList.add("performance-mode-static");
} else {
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}%)`;
} else {
// Reset to default values
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
imgElement.style.animation = "none";
imgElement.classList.add("performance-mode-static");
} else {
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}%)`;
}
@@ -236,18 +249,24 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
// Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
(window as any).updateRadiantLyricsGlobalBackground =
updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsNowPlayingBackground =
updateRadiantLyricsNowPlayingBackground;
const toggleRadiantLyrics = function (): void {
const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
const nowPlayingContainer = document.querySelector(
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (isHidden) {
// currently hidden, so we're about to show UI
// 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) {
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
@@ -255,9 +274,9 @@ const toggleRadiantLyrics = function(): void {
// Don't remove StyleTags completely, just remove the class to show elements again
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)
setTimeout(() => {
if (!isHidden) {
@@ -283,9 +302,9 @@ const toggleRadiantLyrics = function(): void {
updateRadiantLyricsStyles();
// Add a class to the container to trigger CSS animations
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)
}
};
@@ -296,7 +315,9 @@ const createHideUIButton = function(): void {
if (!settings.hideUIEnabled) return;
// 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) {
// Retry if fullscreen button not found yet
setTimeout(() => createHideUIButton(), 1000);
@@ -304,44 +325,46 @@ const createHideUIButton = function(): void {
}
// Check if our button already exists
if (document.querySelector('.hide-ui-button')) return;
if (document.querySelector(".hide-ui-button")) return;
const buttonContainer = fullscreenButton.parentElement;
// Create our hide UI button
const hideUIButton = document.createElement("button");
hideUIButton.className = 'hide-ui-button';
hideUIButton.setAttribute('aria-label', 'Hide UI');
hideUIButton.setAttribute('title', 'Hide UI');
hideUIButton.textContent = 'Hide UI';
hideUIButton.className = "hide-ui-button";
hideUIButton.setAttribute("aria-label", "Hide UI");
hideUIButton.setAttribute("title", "Hide UI");
hideUIButton.textContent = "Hide UI";
// Style to match Tidal's buttons
hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
hideUIButton.style.color = 'black';
hideUIButton.style.border = 'none';
hideUIButton.style.borderRadius = '12px';
hideUIButton.style.height = '40px';
hideUIButton.style.padding = '0 12px';
hideUIButton.style.marginLeft = '8px';
hideUIButton.style.cursor = 'pointer';
hideUIButton.style.display = 'flex';
hideUIButton.style.alignItems = 'center';
hideUIButton.style.justifyContent = 'center';
hideUIButton.style.fontSize = '12px';
hideUIButton.style.fontWeight = '600';
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.opacity = '0';
hideUIButton.style.visibility = 'hidden';
hideUIButton.style.pointerEvents = 'none';
hideUIButton.style.backgroundColor = "var(--wave-color-solid-accent-fill)";
hideUIButton.style.color = "black";
hideUIButton.style.border = "none";
hideUIButton.style.borderRadius = "12px";
hideUIButton.style.height = "40px";
hideUIButton.style.padding = "0 12px";
hideUIButton.style.marginLeft = "8px";
hideUIButton.style.cursor = "pointer";
hideUIButton.style.display = "flex";
hideUIButton.style.alignItems = "center";
hideUIButton.style.justifyContent = "center";
hideUIButton.style.fontSize = "12px";
hideUIButton.style.fontWeight = "600";
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.opacity = "0";
hideUIButton.style.visibility = "hidden";
hideUIButton.style.pointerEvents = "none";
// Add hover effect
hideUIButton.addEventListener('mouseenter', () => {
hideUIButton.style.backgroundColor = 'lightgray';
hideUIButton.addEventListener("mouseenter", () => {
hideUIButton.style.backgroundColor = "lightgray";
});
hideUIButton.addEventListener('mouseleave', () => {
hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
hideUIButton.addEventListener("mouseleave", () => {
hideUIButton.style.backgroundColor =
"var(--wave-color-solid-accent-fill)";
});
hideUIButton.onclick = toggleRadiantLyrics;
@@ -352,9 +375,9 @@ const createHideUIButton = function(): void {
// Fade in the button after a small delay
setTimeout(() => {
if (settings.hideUIEnabled && !isHidden) {
hideUIButton.style.opacity = '1';
hideUIButton.style.visibility = 'visible';
hideUIButton.style.pointerEvents = 'auto';
hideUIButton.style.opacity = "1";
hideUIButton.style.visibility = "visible";
hideUIButton.style.pointerEvents = "auto";
}
}, 100); // Small delay to ensure DOM insertion is complete
@@ -368,10 +391,12 @@ const createUnhideUIButton = function(): void {
if (!settings.hideUIEnabled) return;
// 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
const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
const nowPlayingContainer = document.querySelector(
'[class*="_nowPlayingContainer"]',
) as HTMLElement;
if (!nowPlayingContainer) {
// Retry if container not found yet
setTimeout(() => createUnhideUIButton(), 1000);
@@ -380,10 +405,10 @@ const createUnhideUIButton = function(): void {
// Create unhide UI button
const unhideUIButton = document.createElement("button");
unhideUIButton.className = 'unhide-ui-button';
unhideUIButton.setAttribute('aria-label', 'Unhide UI');
unhideUIButton.setAttribute('title', 'Unhide UI');
unhideUIButton.textContent = 'Unhide';
unhideUIButton.className = "unhide-ui-button";
unhideUIButton.setAttribute("aria-label", "Unhide UI");
unhideUIButton.setAttribute("title", "Unhide UI");
unhideUIButton.textContent = "Unhide";
// Style for top-right positioning within the Now Playing container (is a pain)
unhideUIButton.style.cssText = `
@@ -414,19 +439,19 @@ const createUnhideUIButton = function(): void {
`;
// Add hover effect with auto-fade handling
unhideUIButton.addEventListener('mouseenter', () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
unhideUIButton.style.transform = 'scale(1.05)';
unhideUIButton.classList.remove('auto-faded');
unhideUIButton.addEventListener("mouseenter", () => {
unhideUIButton.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
unhideUIButton.style.transform = "scale(1.05)";
unhideUIButton.classList.remove("auto-faded");
});
unhideUIButton.addEventListener('mouseleave', () => {
unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
unhideUIButton.style.transform = 'scale(1)';
unhideUIButton.addEventListener("mouseleave", () => {
unhideUIButton.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
unhideUIButton.style.transform = "scale(1)";
// Re-add auto-fade after a short delay if still in hidden mode
window.setTimeout(() => {
if (isHidden && !unhideUIButton.matches(':hover')) {
unhideUIButton.classList.add('auto-faded');
if (isHidden && !unhideUIButton.matches(":hover")) {
unhideUIButton.classList.add("auto-faded");
}
}, 2000);
});
@@ -475,20 +500,28 @@ function observeForButtons(): void {
// Only observe for buttons if Hide UI is enabled
if (!settings.hideUIEnabled) return;
const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
if (fullscreenButton && !document.querySelector('.hide-ui-button')) {
const fullscreenButton = document.querySelector(
'[data-test="request-fullscreen"]',
);
if (fullscreenButton && !document.querySelector(".hide-ui-button")) {
createHideUIButton();
}
// Create unhide button if it doesn't exist
if (!document.querySelector('.unhide-ui-button')) {
if (!document.querySelector(".unhide-ui-button")) {
createUnhideUIButton();
}
// Fix unhide button visibility if UI is hidden but button isn't showing
if (isHidden) {
const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
if (unhideButton && (unhideButton.style.display === 'none' || unhideButton.style.opacity === '0')) {
const unhideButton = document.querySelector(
".unhide-ui-button",
) as HTMLElement;
if (
unhideButton &&
(unhideButton.style.display === "none" ||
unhideButton.style.opacity === "0")
) {
// Force update button states to fix visibility
updateButtonStates();
}
@@ -501,19 +534,21 @@ function observeForButtons(): void {
// Also observe for lyrics container changes to apply the setting
function observeLyricsContainer(): void {
const observer = new MutationObserver(() => {
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
const lyricsContainer = document.querySelector(
'[class^="_lyricsContainer"]',
);
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled');
lyricsContainer.classList.remove("lyrics-glow-disabled");
} else {
lyricsContainer.classList.add('lyrics-glow-disabled');
lyricsContainer.classList.add("lyrics-glow-disabled");
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true
subtree: true,
});
unloads.add(() => observer.disconnect());
@@ -527,21 +562,25 @@ const updateCoverArtBackground = function (method: number = 0): void {
}, 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;
if (coverArtImageElement) {
coverArtImageSrc = coverArtImageElement.src;
// Set res to 1280x1280
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, "1280x1280");
coverArtImageElement.src = coverArtImageSrc;
} 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) {
coverArtImageSrc = videoElement.getAttribute("poster");
if (coverArtImageSrc) {
// Set res to 1280x1280
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, '1280x1280');
coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, "1280x1280");
}
} else {
cleanUpDynamicArt();
@@ -557,68 +596,74 @@ const updateCoverArtBackground = function (method: number = 0): void {
}
// 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) {
// Remove existing background images if they exist
const existingBackgroundImages = nowPlayingContainerElement.querySelectorAll('.now-playing-background-image, .now-playing-black-bg');
existingBackgroundImages.forEach(img => img.remove());
const existingBackgroundImages =
nowPlayingContainerElement.querySelectorAll(
".now-playing-background-image, .now-playing-black-bg",
);
existingBackgroundImages.forEach((img) => img.remove());
// Add black background layer (to obscure image edges)
const blackBg = document.createElement('div');
blackBg.className = 'now-playing-black-bg';
blackBg.style.position = 'absolute';
blackBg.style.left = '0';
blackBg.style.top = '0';
blackBg.style.width = '100%';
blackBg.style.height = '100%';
blackBg.style.background = '#000';
blackBg.style.zIndex = '-2';
blackBg.style.pointerEvents = 'none';
const blackBg = document.createElement("div");
blackBg.className = "now-playing-black-bg";
blackBg.style.position = "absolute";
blackBg.style.left = "0";
blackBg.style.top = "0";
blackBg.style.width = "100%";
blackBg.style.height = "100%";
blackBg.style.background = "#000";
blackBg.style.zIndex = "-2";
blackBg.style.pointerEvents = "none";
nowPlayingContainerElement.appendChild(blackBg);
// Create and append single background layer (the cover art)
const backgroundImage = document.createElement('img');
const backgroundImage = document.createElement("img");
backgroundImage.src = coverArtImageSrc;
backgroundImage.className = 'now-playing-background-image';
backgroundImage.style.position = 'absolute';
backgroundImage.style.left = '50%';
backgroundImage.style.top = '50%';
backgroundImage.style.transform = 'translate(-50%, -50%)';
backgroundImage.style.width = '90vw';
backgroundImage.style.height = '90vh';
backgroundImage.style.objectFit = 'cover';
backgroundImage.style.zIndex = '-1';
backgroundImage.className = "now-playing-background-image";
backgroundImage.style.position = "absolute";
backgroundImage.style.left = "50%";
backgroundImage.style.top = "50%";
backgroundImage.style.transform = "translate(-50%, -50%)";
backgroundImage.style.width = "90vw";
backgroundImage.style.height = "90vh";
backgroundImage.style.objectFit = "cover";
backgroundImage.style.zIndex = "-1";
backgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
backgroundImage.style.willChange = 'transform, filter';
backgroundImage.style.transformOrigin = 'center center';
backgroundImage.style.willChange = "transform, filter";
backgroundImage.style.transformOrigin = "center center";
// Apply animation based on performance mode
if (settings.performanceMode) {
backgroundImage.style.animation = 'none';
backgroundImage.classList.add('performance-mode-static');
backgroundImage.style.animation = "none";
backgroundImage.classList.add("performance-mode-static");
} else {
backgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
backgroundImage.classList.remove('performance-mode-static');
backgroundImage.classList.remove("performance-mode-static");
}
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)
const gradientOverlay = document.createElement('div');
gradientOverlay.className = 'now-playing-gradient-overlay';
gradientOverlay.style.position = 'absolute';
gradientOverlay.style.left = '0';
gradientOverlay.style.top = '0';
gradientOverlay.style.width = '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.zIndex = '-1';
gradientOverlay.style.pointerEvents = 'none';
const gradientOverlay = document.createElement("div");
gradientOverlay.className = "now-playing-gradient-overlay";
gradientOverlay.style.position = "absolute";
gradientOverlay.style.left = "0";
gradientOverlay.style.top = "0";
gradientOverlay.style.width = "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.zIndex = "-1";
gradientOverlay.style.pointerEvents = "none";
nowPlayingContainerElement.appendChild(gradientOverlay);
// Add keyframe animation if it doesn't exist
if (!document.querySelector('#spinAnimation')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'spinAnimation';
if (!document.querySelector("#spinAnimation")) {
const styleSheet = document.createElement("style");
styleSheet.id = "spinAnimation";
styleSheet.textContent = `
@keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
@@ -632,7 +677,9 @@ const updateCoverArtBackground = function (method: number = 0): 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) => {
element.remove();
});
@@ -658,18 +705,18 @@ unloads.add(() => {
}
// Clean up our custom buttons
const hideButton = document.querySelector('.hide-ui-button');
const hideButton = document.querySelector(".hide-ui-button");
if (hideButton && hideButton.parentNode) {
hideButton.parentNode.removeChild(hideButton);
}
const unhideButton = document.querySelector('.unhide-ui-button');
const unhideButton = document.querySelector(".unhide-ui-button");
if (unhideButton && unhideButton.parentNode) {
unhideButton.parentNode.removeChild(unhideButton);
}
// Clean up spin animations
const spinAnimationStyle = document.querySelector('#spinAnimation');
const spinAnimationStyle = document.querySelector("#spinAnimation");
if (spinAnimationStyle && spinAnimationStyle.parentNode) {
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);
}