mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-08-26 14:27:44 +10:00
Center Cover Art <3
This commit is contained in:
@@ -6,8 +6,6 @@ declare global {
|
||||
interface Window {
|
||||
updateRadiantLyricsStyles?: () => void;
|
||||
updateRadiantLyricsTextGlow?: () => void;
|
||||
updateStickyLyricsFeature?: () => void;
|
||||
updateStickyLyricsSetting?: (checked: boolean) => void;
|
||||
updateRadiantLyricsPlayerBarTint?: () => void;
|
||||
updateRadiantLyricsBackdrop?: () => void;
|
||||
updateQualityProgressColor?: () => void;
|
||||
@@ -31,7 +29,6 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
|
||||
bubbledLyrics: true,
|
||||
romanizeLyrics: false,
|
||||
aiSyllables: false,
|
||||
stickyLyrics: false,
|
||||
syllableStyle: 0, // MARKER: Syllable animations SETTINGS (WIP coming soon)
|
||||
syllableLogging: false,
|
||||
hideUIEnabled: true,
|
||||
@@ -153,14 +150,6 @@ export const Settings = () => {
|
||||
const [tintHoveredColorIndex, setTintHoveredColorIndex] = React.useState<
|
||||
number | null
|
||||
>(null);
|
||||
const [stickyLyrics, setStickyLyrics] = React.useState(settings.stickyLyrics);
|
||||
React.useEffect(() => {
|
||||
window.updateStickyLyricsSetting = (checked: boolean) =>
|
||||
setStickyLyrics(checked);
|
||||
return () => {
|
||||
window.updateStickyLyricsSetting = undefined;
|
||||
};
|
||||
}, []);
|
||||
const [lyricsStyle, setLyricsStyle] = React.useState(settings.lyricsStyle);
|
||||
React.useEffect(() => {
|
||||
window.updateLyricsStyleSetting = (value: number) => setLyricsStyle(value);
|
||||
@@ -317,19 +306,7 @@ export const Settings = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Sticky Lyrics"
|
||||
desc="auto-switches to Play Queue when lyrics aren't available (mirrored in lyrics dropdown)"
|
||||
checked={stickyLyrics}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.stickyLyrics = checked;
|
||||
setStickyLyrics(checked);
|
||||
if (window.updateStickyLyricsFeature) {
|
||||
window.updateStickyLyricsFeature();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
<AnySwitch
|
||||
title="Romanize Lyrics"
|
||||
desc="Display romanized (latin) text for non-latin lyrics (e.g. Korean, Japanese, Chinese)"
|
||||
checked={romanizeLyrics}
|
||||
@@ -926,29 +903,6 @@ export const Settings = () => {
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Style" // This feature is the result of a bug caused by my ADHD <3
|
||||
desc="0 = Fluid, 1 = Aurora"
|
||||
min={0}
|
||||
max={1}
|
||||
step={1}
|
||||
value={backdropStyle}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropStyle = value;
|
||||
setBackdropStyle(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Playback Reactive"
|
||||
desc="Cover shader reacts to playback state by freezing/resuming"
|
||||
checked={backdropPlaybackReactive}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.backdropPlaybackReactive = checked;
|
||||
setBackdropPlaybackReactive(checked);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Cover Everywhere"
|
||||
desc="Apply the cover art backdrop to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
|
||||
@@ -959,134 +913,161 @@ export const Settings = () => {
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Performance Mode | Experimental"
|
||||
desc="Caps the shader at 4 blur passes, disables dithering and renders at 1x pixel ratio to cut GPU load"
|
||||
checked={performanceMode}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.performanceMode = checked;
|
||||
setPerformanceMode(checked);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Opacity"
|
||||
desc="How strongly the backdrop shows through (0-100% default = 75)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropOpacity}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropOpacity = value;
|
||||
setBackdropOpacity(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Warp Intensity"
|
||||
desc="Strength of the fluidity effect (0-100% default = 100)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropWarp}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropWarp = value;
|
||||
setBackdropWarp(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Blur Passes"
|
||||
desc="Kawase blur passes, higher is softer but costs more GPU (1-40 default = 5)"
|
||||
min={1}
|
||||
max={40}
|
||||
step={1}
|
||||
value={backdropBlurPasses}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropBlurPasses = value;
|
||||
setBackdropBlurPasses(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Animation Speed"
|
||||
desc="How fast the backdrop flows (0-500% default = 175)"
|
||||
min={0}
|
||||
max={500}
|
||||
step={5}
|
||||
value={backdropSpeed}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropSpeed = value;
|
||||
setBackdropSpeed(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Contrast"
|
||||
desc="Contrast of the backdrop (0-300%, 100 = stock default = 125)"
|
||||
min={0}
|
||||
max={300}
|
||||
step={5}
|
||||
value={backdropContrast}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropContrast = value;
|
||||
setBackdropContrast(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Auto Darken Bright Covers"
|
||||
desc="Prevents bright covers from making text unreadable (0-100% 0 = Off default = 80)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropDarken}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropDarken = value;
|
||||
setBackdropDarken(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Saturation"
|
||||
desc="Colour intensity of the backdrop (0-400% default = 125)"
|
||||
min={0}
|
||||
max={400}
|
||||
step={5}
|
||||
value={backdropSaturation}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropSaturation = value;
|
||||
setBackdropSaturation(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Scale"
|
||||
desc="Zoom level of the effect (10-400% default = 100)"
|
||||
min={10}
|
||||
max={400}
|
||||
step={5}
|
||||
value={backdropScale}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropScale = value;
|
||||
setBackdropScale(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Dithering"
|
||||
desc="Breaks up color banding in smooth gradients (0-100 default = 15)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropDithering}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropDithering = value;
|
||||
setBackdropDithering(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
{backdropEnabled && (
|
||||
<>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Style" // This feature is the result of a bug caused by my ADHD <3
|
||||
desc="0 = Fluid, 1 = Aurora"
|
||||
min={0}
|
||||
max={1}
|
||||
step={1}
|
||||
value={backdropStyle}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropStyle = value;
|
||||
setBackdropStyle(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Playback Reactive"
|
||||
desc="Cover shader reacts to playback state by freezing/resuming"
|
||||
checked={backdropPlaybackReactive}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.backdropPlaybackReactive = checked;
|
||||
setBackdropPlaybackReactive(checked);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Performance Mode | Experimental"
|
||||
desc="Caps the shader at 4 blur passes, disables dithering and renders at 1x pixel ratio to cut GPU load"
|
||||
checked={performanceMode}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.performanceMode = checked;
|
||||
setPerformanceMode(checked);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Opacity"
|
||||
desc="How strongly the backdrop shows through (0-100% default = 75)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropOpacity}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropOpacity = value;
|
||||
setBackdropOpacity(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Warp Intensity"
|
||||
desc="Strength of the fluidity effect (0-100% default = 100)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropWarp}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropWarp = value;
|
||||
setBackdropWarp(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Blur Passes"
|
||||
desc="Kawase blur passes, higher is softer but costs more GPU (1-40 default = 5)"
|
||||
min={1}
|
||||
max={40}
|
||||
step={1}
|
||||
value={backdropBlurPasses}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropBlurPasses = value;
|
||||
setBackdropBlurPasses(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Animation Speed"
|
||||
desc="How fast the backdrop flows (0-500% default = 175)"
|
||||
min={0}
|
||||
max={500}
|
||||
step={5}
|
||||
value={backdropSpeed}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropSpeed = value;
|
||||
setBackdropSpeed(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Contrast"
|
||||
desc="Contrast of the backdrop (0-300%, 100 = stock default = 125)"
|
||||
min={0}
|
||||
max={300}
|
||||
step={5}
|
||||
value={backdropContrast}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropContrast = value;
|
||||
setBackdropContrast(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Auto Darken Bright Covers"
|
||||
desc="Prevents bright covers from making text unreadable (0-100% 0 = Off default = 80)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropDarken}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropDarken = value;
|
||||
setBackdropDarken(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Saturation"
|
||||
desc="Colour intensity of the backdrop (0-400% default = 125)"
|
||||
min={0}
|
||||
max={400}
|
||||
step={5}
|
||||
value={backdropSaturation}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropSaturation = value;
|
||||
setBackdropSaturation(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Backdrop Scale"
|
||||
desc="Zoom level of the effect (10-400% default = 100)"
|
||||
min={10}
|
||||
max={400}
|
||||
step={5}
|
||||
value={backdropScale}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropScale = value;
|
||||
setBackdropScale(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
<LunaNumberSetting
|
||||
title="Dithering"
|
||||
desc="Breaks up color banding in smooth gradients (0-100 default = 15)"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={backdropDithering}
|
||||
onNumber={(value: number) => {
|
||||
settings.backdropDithering = value;
|
||||
setBackdropDithering(value);
|
||||
refreshBackdrop();
|
||||
}}
|
||||
/>
|
||||
|
||||
</>
|
||||
)}
|
||||
</LunaSettings>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -187,6 +187,11 @@ const applyPlayerBarTintToElement = (): void => {
|
||||
footerPlayer.style.removeProperty("left");
|
||||
footerPlayer.style.removeProperty("width");
|
||||
}
|
||||
// Now Playing centres its artwork in a row running to the viewport bottom but the player bar overlays it so i do some complicaated thing to reserve the space <3
|
||||
document.documentElement.style.setProperty(
|
||||
"--rl-player-bar-inset",
|
||||
`${Math.round(footerPlayer.getBoundingClientRect().height) + (settings.floatingPlayerBar ? settings.playerBarSpacing : 0)}px`,
|
||||
);
|
||||
applyIntegratedSeekbarChrome();
|
||||
};
|
||||
|
||||
@@ -1089,9 +1094,9 @@ unloads.add(() => {
|
||||
if (btn?.parentNode) btn.parentNode.removeChild(btn);
|
||||
}
|
||||
|
||||
// Clean up sticky lyrics elements
|
||||
// Clean up lyrics menu elements
|
||||
document
|
||||
.querySelectorAll(".sticky-lyrics-trigger, .sticky-lyrics-dropdown")
|
||||
.querySelectorAll(".rl-lyrics-menu-trigger, .rl-lyrics-menu")
|
||||
.forEach((el) => {
|
||||
el.remove();
|
||||
});
|
||||
@@ -1100,17 +1105,17 @@ unloads.add(() => {
|
||||
cleanUpDynamicArt();
|
||||
});
|
||||
|
||||
// MARKER: Sticky Lyrics Feature
|
||||
// MARKER: Lyrics Menu (dropdown on the lyrics toggle)
|
||||
|
||||
const STICKY_ICON =
|
||||
const LYRICS_MENU_ICON =
|
||||
'<svg viewBox="0 0 512 512" width="16" height="16"><path fill="currentColor" d="M208,512a24.84,24.84,0,0,1-23.34-16l-39.84-103.6a16.06,16.06,0,0,0-9.19-9.19L32,343.34a25,25,0,0,1,0-46.68l103.6-39.84a16.06,16.06,0,0,0,9.19-9.19L184.66,144a25,25,0,0,1,46.68,0l39.84,103.6a16.06,16.06,0,0,0,9.19,9.19l103,39.63A25.49,25.49,0,0,1,400,320.52a24.82,24.82,0,0,1-16,22.82l-103.6,39.84a16.06,16.06,0,0,0-9.19,9.19L231.34,496A24.84,24.84,0,0,1,208,512Zm66.85-254.84h0Z"/><path fill="currentColor" d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"/><path fill="currentColor" d="M400,256a16,16,0,0,1-14.93-10.26l-22.84-59.37a8,8,0,0,0-4.6-4.6l-59.37-22.84a16,16,0,0,1,0-29.86l59.37-22.84a8,8,0,0,0,4.6-4.6L384.9,42.68a16.45,16.45,0,0,1,13.17-10.57,16,16,0,0,1,16.86,10.15l22.84,59.37a8,8,0,0,0,4.6,4.6l59.37,22.84a16,16,0,0,1,0,29.86l-59.37,22.84a8,8,0,0,0-4.6,4.6l-22.84,59.37A16,16,0,0,1,400,256Z"/></svg>';
|
||||
|
||||
const applyStickyIcon = (): void => {
|
||||
const applyLyricsMenuIcon = (): void => {
|
||||
const trigger = document.querySelector(
|
||||
".sticky-lyrics-trigger",
|
||||
".rl-lyrics-menu-trigger",
|
||||
) as HTMLElement;
|
||||
if (!trigger) return;
|
||||
trigger.innerHTML = STICKY_ICON;
|
||||
trigger.innerHTML = LYRICS_MENU_ICON;
|
||||
trigger.style.paddingLeft = "5px";
|
||||
};
|
||||
|
||||
@@ -1154,31 +1159,22 @@ const sylTrace = (...args: unknown[]) => {
|
||||
},
|
||||
};
|
||||
|
||||
// Called from Settings (mirrors dropdown checkbox)
|
||||
const updateStickyLyricsFeature = (): void => {
|
||||
const checkbox = document.querySelector(
|
||||
'input[data-setting="stickyLyrics"]',
|
||||
) as HTMLInputElement;
|
||||
if (checkbox) checkbox.checked = settings.stickyLyrics;
|
||||
};
|
||||
(window as any).updateStickyLyricsFeature = updateStickyLyricsFeature;
|
||||
|
||||
let stickyDropdownEl: HTMLElement | null = null;
|
||||
let stickyDropdownOpen = false;
|
||||
let lyricsMenuEl: HTMLElement | null = null;
|
||||
let lyricsMenuOpen = false;
|
||||
|
||||
const positionDropdown = (): void => {
|
||||
if (!stickyDropdownEl) return;
|
||||
if (!lyricsMenuEl) return;
|
||||
const toggle = document.querySelector('[data-test="toggle-lyrics"]') as HTMLElement;
|
||||
if (!toggle) return;
|
||||
const rect = toggle.getBoundingClientRect();
|
||||
stickyDropdownEl.style.top = `${rect.bottom}px`;
|
||||
stickyDropdownEl.style.left = `${rect.left}px`;
|
||||
stickyDropdownEl.style.width = `${rect.width}px`;
|
||||
stickyDropdownEl.style.display = "block";
|
||||
lyricsMenuEl.style.top = `${rect.bottom}px`;
|
||||
lyricsMenuEl.style.left = `${rect.left}px`;
|
||||
lyricsMenuEl.style.width = `${rect.width}px`;
|
||||
lyricsMenuEl.style.display = "block";
|
||||
};
|
||||
|
||||
const openStickyDropdown = (toggle: HTMLElement): void => {
|
||||
stickyDropdownOpen = true;
|
||||
const openLyricsMenu = (toggle: HTMLElement): void => {
|
||||
lyricsMenuOpen = true;
|
||||
document.body.classList.add("rl-dropdown-open");
|
||||
let positioned = false;
|
||||
const onWidened = (e: TransitionEvent) => {
|
||||
@@ -1199,41 +1195,35 @@ const openStickyDropdown = (toggle: HTMLElement): void => {
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const closeStickyDropdown = (): void => {
|
||||
stickyDropdownOpen = false;
|
||||
const closeLyricsMenu = (): void => {
|
||||
lyricsMenuOpen = false;
|
||||
document.body.classList.remove("rl-dropdown-open");
|
||||
if (stickyDropdownEl) stickyDropdownEl.style.display = "none";
|
||||
if (lyricsMenuEl) lyricsMenuEl.style.display = "none";
|
||||
};
|
||||
|
||||
const ensureStickyDropdown = (): HTMLElement => {
|
||||
if (stickyDropdownEl) return stickyDropdownEl;
|
||||
const ensureLyricsMenu = (): HTMLElement => {
|
||||
if (lyricsMenuEl) return lyricsMenuEl;
|
||||
|
||||
const dropdown = document.createElement("div");
|
||||
dropdown.className = "sticky-lyrics-dropdown";
|
||||
dropdown.className = "rl-lyrics-menu";
|
||||
dropdown.style.display = "none";
|
||||
|
||||
dropdown.innerHTML = `
|
||||
<div class="sticky-lyrics-dropdown-row">
|
||||
<span class="sticky-lyrics-label">Sticky Lyrics</span>
|
||||
<label class="sticky-lyrics-switch">
|
||||
<input type="checkbox" data-setting="stickyLyrics" ${settings.stickyLyrics ? "checked" : ""}>
|
||||
<span class="sticky-lyrics-slider"></span>
|
||||
</label>
|
||||
</div> <div class="sticky-lyrics-dropdown-row">
|
||||
<span class="sticky-lyrics-label">Romanization</span>
|
||||
<label class="sticky-lyrics-switch">
|
||||
<div class="rl-lyrics-menu-row">
|
||||
<span class="rl-lyrics-menu-label">Romanization</span>
|
||||
<label class="rl-lyrics-menu-switch">
|
||||
<input type="checkbox" data-setting="romanizeLyrics" ${settings.romanizeLyrics ? "checked" : ""}>
|
||||
<span class="sticky-lyrics-slider"></span>
|
||||
<span class="rl-lyrics-menu-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sticky-lyrics-dropdown-row">
|
||||
<span class="sticky-lyrics-label">AI Syllables | WIP</span>
|
||||
<label class="sticky-lyrics-switch">
|
||||
<div class="rl-lyrics-menu-row">
|
||||
<span class="rl-lyrics-menu-label">AI Syllables | WIP</span>
|
||||
<label class="rl-lyrics-menu-switch">
|
||||
<input type="checkbox" data-setting="aiSyllables" ${settings.aiSyllables ? "checked" : ""}>
|
||||
<span class="sticky-lyrics-slider"></span>
|
||||
<span class="rl-lyrics-menu-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sticky-lyrics-dropdown-row rl-style-row">
|
||||
<div class="rl-lyrics-menu-row rl-style-row">
|
||||
<div class="rl-seg-control">
|
||||
<button type="button" class="rl-seg-btn${settings.lyricsStyle === 0 ? " rl-seg-active" : ""}" data-style="0">Line</button>
|
||||
<button type="button" class="rl-seg-btn${settings.lyricsStyle === 1 ? " rl-seg-active" : ""}" data-style="1">Word</button>
|
||||
@@ -1242,17 +1232,6 @@ const ensureStickyDropdown = (): HTMLElement => {
|
||||
</div>
|
||||
`;
|
||||
|
||||
const stickyCheckbox = dropdown.querySelector(
|
||||
'input[data-setting="stickyLyrics"]',
|
||||
) as HTMLInputElement;
|
||||
stickyCheckbox.addEventListener("change", () => {
|
||||
settings.stickyLyrics = stickyCheckbox.checked;
|
||||
(window as any).updateStickyLyricsSetting?.(stickyCheckbox.checked);
|
||||
if (settings.stickyLyrics) {
|
||||
handleStickyLyricsTrackChange();
|
||||
}
|
||||
});
|
||||
|
||||
// AI Generated Syllables (Radiant AI [RL API])
|
||||
const synthCheckbox = dropdown.querySelector(
|
||||
'input[data-setting="aiSyllables"]',
|
||||
@@ -1293,15 +1272,15 @@ const ensureStickyDropdown = (): HTMLElement => {
|
||||
}
|
||||
|
||||
document.body.appendChild(dropdown);
|
||||
stickyDropdownEl = dropdown;
|
||||
lyricsMenuEl = dropdown;
|
||||
|
||||
const outsideHandler = (e: MouseEvent): void => {
|
||||
const trigger = document.querySelector(".sticky-lyrics-trigger");
|
||||
const trigger = document.querySelector(".rl-lyrics-menu-trigger");
|
||||
if (
|
||||
(!trigger || !trigger.contains(e.target as Node)) &&
|
||||
!dropdown.contains(e.target as Node)
|
||||
) {
|
||||
closeStickyDropdown();
|
||||
closeLyricsMenu();
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", outsideHandler);
|
||||
@@ -1310,26 +1289,26 @@ const ensureStickyDropdown = (): HTMLElement => {
|
||||
document.removeEventListener("click", outsideHandler);
|
||||
document.body.classList.remove("rl-dropdown-open");
|
||||
dropdown.remove();
|
||||
stickyDropdownEl = null;
|
||||
stickyDropdownOpen = false;
|
||||
lyricsMenuEl = null;
|
||||
lyricsMenuOpen = false;
|
||||
});
|
||||
|
||||
return dropdown;
|
||||
};
|
||||
|
||||
const createStickyLyricsDropdown = (): void => {
|
||||
const createLyricsMenu = (): void => {
|
||||
const lyricsToggle = document.querySelector(
|
||||
'[data-test="toggle-lyrics"]',
|
||||
) as HTMLElement;
|
||||
if (!lyricsToggle) return;
|
||||
if (lyricsToggle.querySelector(".sticky-lyrics-trigger")) return;
|
||||
if (lyricsToggle.querySelector(".rl-lyrics-menu-trigger")) return;
|
||||
|
||||
ensureStickyDropdown();
|
||||
ensureLyricsMenu();
|
||||
|
||||
const trigger = document.createElement("div");
|
||||
trigger.className = "sticky-lyrics-trigger";
|
||||
trigger.setAttribute("title", "Sticky Lyrics");
|
||||
trigger.innerHTML = STICKY_ICON;
|
||||
trigger.className = "rl-lyrics-menu-trigger";
|
||||
trigger.setAttribute("title", "Lyrics Options");
|
||||
trigger.innerHTML = LYRICS_MENU_ICON;
|
||||
|
||||
for (const evtName of [
|
||||
"pointerdown",
|
||||
@@ -1353,13 +1332,13 @@ const createStickyLyricsDropdown = (): void => {
|
||||
const isActive = lyricsToggle.getAttribute("aria-pressed") === "true";
|
||||
if (!isActive) {
|
||||
lyricsToggle.click();
|
||||
safeTimeout(unloads, () => openStickyDropdown(lyricsToggle), 150);
|
||||
safeTimeout(unloads, () => openLyricsMenu(lyricsToggle), 150);
|
||||
return;
|
||||
}
|
||||
if (stickyDropdownOpen) {
|
||||
closeStickyDropdown();
|
||||
if (lyricsMenuOpen) {
|
||||
closeLyricsMenu();
|
||||
} else {
|
||||
openStickyDropdown(lyricsToggle);
|
||||
openLyricsMenu(lyricsToggle);
|
||||
}
|
||||
},
|
||||
true,
|
||||
@@ -1367,86 +1346,35 @@ const createStickyLyricsDropdown = (): void => {
|
||||
|
||||
lyricsToggle.appendChild(trigger);
|
||||
|
||||
if (stickyDropdownOpen) {
|
||||
if (lyricsMenuOpen) {
|
||||
positionDropdown();
|
||||
}
|
||||
};
|
||||
|
||||
// Sticky Lyrics nav for injected lyrics tab
|
||||
const tryActivateStickyLyricsTab = (): boolean => {
|
||||
if (!settings.stickyLyrics) return false;
|
||||
|
||||
const lyricsToggle = document.querySelector(
|
||||
'[data-test="toggle-lyrics"]',
|
||||
) as HTMLElement;
|
||||
if (!lyricsToggle || lyricsToggle.getAttribute("aria-disabled") === "true") {
|
||||
tryActivateSimilarTracksTab();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (syntheticNativeLyrics) {
|
||||
notifyNativeLyricsStateChanged();
|
||||
}
|
||||
|
||||
if (lyricsToggle.getAttribute("aria-pressed") === "true") return true;
|
||||
|
||||
lyricsToggle.click();
|
||||
return true;
|
||||
};
|
||||
|
||||
const tryActivateSimilarTracksTab = (): void => {
|
||||
const btn = document.querySelector(
|
||||
'[data-test="toggle-similar-tracks"]',
|
||||
) as HTMLElement;
|
||||
if (!btn) return;
|
||||
if (btn.getAttribute("aria-pressed") === "true") return;
|
||||
btn.click();
|
||||
};
|
||||
|
||||
// Nav for injected lyrics tab
|
||||
const syncNativeLyricsAvailability = (): void => {
|
||||
if (!syntheticNativeLyrics) return;
|
||||
notifyNativeLyricsStateChanged();
|
||||
};
|
||||
|
||||
const handleStickyLyricsTrackChange = (): void => {
|
||||
if (!settings.stickyLyrics) return;
|
||||
tryActivateStickyLyricsTab();
|
||||
};
|
||||
|
||||
// Track change sequencing (used by onTrackChange)
|
||||
let isTrackChangeRunning = false;
|
||||
let trackChangeRunSeq = 0;
|
||||
|
||||
// Observer: create dropdown when lyrics toggle appears & detect track changes
|
||||
function setupStickyLyricsObserver(): void {
|
||||
function setupLyricsMenuObserver(): void {
|
||||
// Create dropdown if lyrics toggle already exists
|
||||
const existing = document.querySelector('[data-test="toggle-lyrics"]');
|
||||
if (existing && !existing.querySelector(".sticky-lyrics-trigger")) {
|
||||
createStickyLyricsDropdown();
|
||||
if (existing && !existing.querySelector(".rl-lyrics-menu-trigger")) {
|
||||
createLyricsMenu();
|
||||
}
|
||||
|
||||
// Re-create dropdown whenever lyrics toggle reappears
|
||||
observe<HTMLElement>(unloads, '[data-test="toggle-lyrics"]', () => {
|
||||
const toggle = document.querySelector('[data-test="toggle-lyrics"]');
|
||||
syncNativeLyricsAvailability();
|
||||
if (toggle && !toggle.querySelector(".sticky-lyrics-trigger")) {
|
||||
createStickyLyricsDropdown();
|
||||
if (settings.stickyLyrics) {
|
||||
tryActivateStickyLyricsTab();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// When lyrics toggle becomes disabled → similar tracks; enabled → lyrics
|
||||
observe<HTMLElement>(unloads, '[data-test="toggle-lyrics"][aria-disabled="true"]', () => {
|
||||
if (settings.stickyLyrics) {
|
||||
tryActivateSimilarTracksTab();
|
||||
}
|
||||
});
|
||||
|
||||
observe<HTMLElement>(unloads, '[data-test="toggle-lyrics"]:not([aria-disabled])', () => {
|
||||
if (settings.stickyLyrics) {
|
||||
tryActivateStickyLyricsTab();
|
||||
if (toggle && !toggle.querySelector(".rl-lyrics-menu-trigger")) {
|
||||
createLyricsMenu();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1467,12 +1395,6 @@ function setupStickyLyricsObserver(): void {
|
||||
}
|
||||
});
|
||||
|
||||
// sticky lyrics track changes
|
||||
onGlobalTrackChange(() => {
|
||||
if (settings.stickyLyrics) {
|
||||
handleStickyLyricsTrackChange();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// track change system (used everywhere)
|
||||
@@ -4082,9 +4004,6 @@ const onTrackChange = async (): Promise<void> => {
|
||||
safeTimeout(unloads, () => {
|
||||
if (token !== trackChangeToken) return;
|
||||
syncNativeLyricsAvailability();
|
||||
if (settings.stickyLyrics) {
|
||||
tryActivateStickyLyricsTab();
|
||||
}
|
||||
if (!nativeHasLyrics) {
|
||||
// Track had no native lyrics but API found them —
|
||||
// force navigate to lyrics view so the panel mounts
|
||||
@@ -4284,5 +4203,5 @@ onGlobalTrackChange(() => {
|
||||
|
||||
// Init observers
|
||||
setupHeaderObserver();
|
||||
setupStickyLyricsObserver();
|
||||
setupLyricsMenuObserver();
|
||||
setupTrackChangeListener();
|
||||
|
||||
@@ -46,16 +46,16 @@
|
||||
|
||||
|
||||
|
||||
/* MARKER: Sticky Lyrics CSS */
|
||||
/* MARKER: Lyrics Menu CSS */
|
||||
|
||||
/* Lyrics toggle button */
|
||||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||||
[data-test="toggle-lyrics"]:has(.rl-lyrics-menu-trigger) {
|
||||
position: relative !important;
|
||||
padding-right: 38px !important;
|
||||
}
|
||||
|
||||
/* Trigger */
|
||||
.sticky-lyrics-trigger {
|
||||
.rl-lyrics-menu-trigger {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
/* Divider line */
|
||||
.sticky-lyrics-trigger::before {
|
||||
.rl-lyrics-menu-trigger::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
@@ -85,21 +85,21 @@
|
||||
}
|
||||
|
||||
/* When Lyrics toggle is pressed — show divider & adjust icon */
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger {
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .rl-lyrics-menu-trigger {
|
||||
color: rgb(30, 30, 30);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before {
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .rl-lyrics-menu-trigger::before {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover {
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .rl-lyrics-menu-trigger:hover {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Animate widening when dropdown opens */
|
||||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||||
[data-test="toggle-lyrics"]:has(.rl-lyrics-menu-trigger) {
|
||||
transition: min-width 0.12s ease-out;
|
||||
}
|
||||
|
||||
@@ -111,7 +111,7 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
}
|
||||
|
||||
/* Dropdown — right-aligned under the Lyrics button */
|
||||
.sticky-lyrics-dropdown {
|
||||
.rl-lyrics-menu {
|
||||
position: fixed;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 0 0 12px 12px;
|
||||
@@ -120,10 +120,10 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
z-index: 10000;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||||
clip-path: inset(0 -20px -20px -20px);
|
||||
animation: stickyLyricsDropdownIn 0.12s ease-out;
|
||||
animation: rlLyricsMenuIn 0.12s ease-out;
|
||||
}
|
||||
|
||||
@keyframes stickyLyricsDropdownIn {
|
||||
@keyframes rlLyricsMenuIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
@@ -135,7 +135,7 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
}
|
||||
|
||||
/* Row containing label + toggle */
|
||||
.sticky-lyrics-dropdown-row {
|
||||
.rl-lyrics-menu-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -143,11 +143,11 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
}
|
||||
|
||||
/* Breathing room between stacked rows */
|
||||
.sticky-lyrics-dropdown-row + .sticky-lyrics-dropdown-row {
|
||||
.rl-lyrics-menu-row + .rl-lyrics-menu-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sticky-lyrics-label {
|
||||
.rl-lyrics-menu-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
@@ -155,7 +155,7 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.sticky-lyrics-switch {
|
||||
.rl-lyrics-menu-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
@@ -163,13 +163,13 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sticky-lyrics-switch input {
|
||||
.rl-lyrics-menu-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.sticky-lyrics-slider {
|
||||
.rl-lyrics-menu-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
@@ -181,7 +181,7 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.sticky-lyrics-slider::before {
|
||||
.rl-lyrics-menu-slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 14px;
|
||||
@@ -194,11 +194,11 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider {
|
||||
.rl-lyrics-menu-switch input:checked + .rl-lyrics-menu-slider {
|
||||
background-color: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before {
|
||||
.rl-lyrics-menu-switch input:checked + .rl-lyrics-menu-slider::before {
|
||||
transform: translateX(16px);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
@@ -951,3 +951,8 @@ body.rl-owns-lyric-scroll [class*="_syncButtonContainer_"] {
|
||||
/* Removes the veil for the play queue */
|
||||
._container_b3e8f28,._container_b3e8f28._nowPlayingVisible_6285d60 {
|
||||
background: rgba(0, 0, 0, 0.402);}
|
||||
|
||||
/* MARKER: Now Playing artwork centering */
|
||||
[class*="_artworkWrapper_"] {
|
||||
padding-bottom: var(--rl-player-bar-inset, 98px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user