This commit is contained in:
2025-12-19 07:46:41 -05:00
parent 2327e330de
commit d5d2923dc5
6 changed files with 303 additions and 88 deletions

View File

@@ -334,7 +334,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
const duration = ((Date.now() - startTime) / 1000).toFixed(1);
setTextSize("normal");
setLyricsResult({ artist: data.artist, song: data.song, lyrics: data.lyrics });
setLyricsResult({ artist: data.artist, song: data.song, lyrics: data.lyrics, src: data.src });
setHighlightedVerse(null);
setIsLyricsVisible(false);
// Trigger fade-in animation
@@ -491,10 +491,28 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
{lyricsResult && (
<div className={`lyrics-card lyrics-card-${theme} mt-6 p-5 rounded-xl shadow-lg lyrics-card-animate ${isLyricsVisible ? 'lyrics-card-visible' : ''}`}>
<div className="lyrics-toolbar">
<div className="lyrics-title">
<div className="lyrics-title" title={`${lyricsResult.artist} - ${lyricsResult.song}`}>
{lyricsResult.artist} - {lyricsResult.song}
</div>
<div className="lyrics-actions">
{lyricsResult.src && (() => {
let sourceLabel, sourceClass;
const src = lyricsResult.src.toLowerCase();
if (src.includes('redis cache')) {
sourceLabel = 'Cache';
sourceClass = 'source-pill--cache';
} else if (src.includes('genius')) {
sourceLabel = 'Genius';
sourceClass = 'source-pill--genius';
} else if (src.includes('lrclib')) {
sourceLabel = 'LRCLib';
sourceClass = 'source-pill--lrclib';
} else {
sourceLabel = lyricsResult.src.split(' ')[0];
sourceClass = 'source-pill--other';
}
return <span className={`source-pill ${sourceClass}`}>{sourceLabel}</span>;
})()}
<div className="text-size-buttons" aria-label="Lyric text size">
<button
type="button"