Lyrics Update

js/app.js

@@ -221,35 +221,18 @@ document.addEventListener('DOMContentLoaded', async () => {
         const mode = nowPlayingSettings.getMode();
 
         if (mode === 'karaoke') {
-            lyricsPanel.classList.add('hidden');
+            alert('We have updated how lyrics work, with this, we have unfortunately disabled karaoke for the time being.')
-            clearLyricsPanelSync(audioPlayer, lyricsPanel);
 
-            const lyricsData = await lyricsManager.fetchLyrics(player.currentTrack.id);
-            if (lyricsData) {
-                showKaraokeView(player.currentTrack, lyricsData, audioPlayer);
-            } else {
-                alert('No lyrics available for this track');
-            }
         } else if (mode === 'lyrics') {
             const isHidden = lyricsPanel.classList.contains('hidden');
             lyricsPanel.classList.toggle('hidden');
 
             if (isHidden) {
-                const content = lyricsPanel.querySelector('.lyrics-content');
+                await showSyncedLyricsPanel(player.currentTrack, audioPlayer, lyricsPanel);
-                content.innerHTML = '<div class="lyrics-loading">Loading lyrics...</div>';
-
-                const lyricsData = await lyricsManager.fetchLyrics(player.currentTrack.id);
-
-                if (lyricsData) {
-                    lyricsManager.currentLyrics = lyricsData;
-                    showSyncedLyricsPanel(lyricsData, audioPlayer, lyricsPanel);
-                } else {
-                    content.innerHTML = '<div class="lyrics-error">Failed to load lyrics</div>';
-                }
             } else {
-                // Clear sync when hiding
                 clearLyricsPanelSync(audioPlayer, lyricsPanel);
             }
+
         } else if (mode === 'cover') {
             const overlay = document.getElementById('fullscreen-cover-overlay');
             if (overlay && overlay.style.display === 'flex') {
@@ -280,13 +263,31 @@ document.addEventListener('DOMContentLoaded', async () => {
         clearLyricsPanelSync(audioPlayer, lyricsPanel);
     });
 
-    document.getElementById('download-lrc-btn')?.addEventListener('click', (e) => {
+    document.getElementById('download-lrc-btn')?.addEventListener('click', async (e) => {
         e.stopPropagation();
-        if (lyricsManager.currentLyrics && player.currentTrack) {
+        if (!player.currentTrack) {
-            lyricsManager.downloadLRC(lyricsManager.currentLyrics, player.currentTrack);
+            alert('No track is currently playing');
+            return;
+        }
+
+        const btn = e.target.closest('#download-lrc-btn');
+        btn.disabled = true;
+
+        try {
+            const lyricsData = await lyricsManager.fetchLyrics(player.currentTrack.id, player.currentTrack);
+
+            if (lyricsData) {
+                lyricsManager.downloadLRC(lyricsData, player.currentTrack);
+            } else {
+                alert('No synced lyrics available for download');
+            }
+        } catch (error) {
+            console.error('Failed to download lyrics!', error);
+            alert('Failed to Download Lyrics! check the console for more information.')
+        } finally {
+            btn.disabled = false;
         }
     });
-
     document.getElementById('download-current-btn')?.addEventListener('click', () => {
         if (player.currentTrack) {
             handleTrackAction('download', player.currentTrack, player, api, lyricsManager, 'track', ui);
@@ -309,19 +310,9 @@ document.addEventListener('DOMContentLoaded', async () => {
         if (!lyricsPanel.classList.contains('hidden')) {
             const mode = nowPlayingSettings.getMode();
             if (mode === 'lyrics') {
-                const content = lyricsPanel.querySelector('.lyrics-content');
+                clearLyricsPanelSync(audioPlayer, lyricsPanel);
-                content.innerHTML = '<div class="lyrics-loading">Loading lyrics...</div>';
+                await showSyncedLyricsPanel(player.currentTrack, audioPlayer, lyricsPanel);
 
-                const lyricsData = await lyricsManager.fetchLyrics(player.currentTrack.id);
-
-                if (lyricsData) {
-                    lyricsManager.currentLyrics = lyricsData;
-                    // Clear old sync before showing new
-                    clearLyricsPanelSync(audioPlayer, lyricsPanel);
-                    showSyncedLyricsPanel(lyricsData, audioPlayer, lyricsPanel);
-                } else {
-                    content.innerHTML = '<div class="lyrics-error">No lyrics available for this track</div>';
-                }
             }
         }
 

js/downloads.js

@@ -282,7 +282,7 @@ async function downloadTracksToZip(zip, tracks, folderName, api, quality, lyrics
 
             if (lyricsManager && lyricsSettings.shouldDownloadLyrics()) {
                 try {
-                    const lyricsData = await lyricsManager.fetchLyrics(track.id);
+                    const lyricsData = await lyricsManager.fetchLyrics(track.id, track);
                     if (lyricsData) {
                         const lrcContent = lyricsManager.generateLRCContent(lyricsData, track);
                         if (lrcContent) {
@@ -399,7 +399,7 @@ export async function downloadDiscography(artist, api, quality, lyricsManager =
 
                         if (lyricsManager && lyricsSettings.shouldDownloadLyrics()) {
                             try {
-                                const lyricsData = await lyricsManager.fetchLyrics(track.id);
+                                const lyricsData = await lyricsManager.fetchLyrics(track.id, track);
                                 if (lyricsData) {
                                     const lrcContent = lyricsManager.generateLRCContent(lyricsData, track);
                                     if (lrcContent) {
@@ -521,7 +521,7 @@ export async function downloadTrackWithMetadata(track, quality, api, lyricsManag
 
         if (lyricsManager && lyricsSettings.shouldDownloadLyrics()) {
             try {
-                const lyricsData = await lyricsManager.fetchLyrics(track.id);
+                const lyricsData = await lyricsManager.fetchLyrics(track.id, track);
                 if (lyricsData) {
                     lyricsManager.downloadLRC(lyricsData, track);
                 }

js/lyrics.js

@@ -7,33 +7,95 @@ export class LyricsManager {
         this.currentLyrics = null;
         this.syncedLyrics = [];
         this.lyricsCache = new Map();
+        this.componentLoaded = false;
+        this.amLyricsElement = null;
+        this.animationFrameId = null;
     }
 
-    async fetchLyrics(trackId) {
+    async ensureComponentLoaded() {
-        if (this.lyricsCache.has(trackId)) {
+        if (this.componentLoaded) return;
-            return this.lyricsCache.get(trackId);
+        
+        if (typeof customElements !== 'undefined' && customElements.get('am-lyrics')) {
+            this.componentLoaded = true;
+            return;
         }
 
-        try {
+        return new Promise((resolve, reject) => {
-            const response = await this.api.fetchWithRetry(`/lyrics/?id=${trackId}`);
+            const script = document.createElement('script');
-            const data = await response.json();
+            script.type = 'module';
+            script.src = 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@0.5.4/dist/src/am-lyrics.min.js';
+            
+            script.onload = () => {
+                if (typeof customElements !== 'undefined') {
+                    customElements.whenDefined('am-lyrics')
+                        .then(() => {
+                            this.componentLoaded = true;
+                            resolve();
+                        })
+                        .catch(reject);
+                } else {
+                    resolve();
+                }
+            };
+            
+            script.onerror = () => reject(new Error('Failed to load lyrics component'));
+            document.head.appendChild(script);
+        });
+    }
 
-            if (Array.isArray(data) && data.length > 0) {
+    async fetchLyrics(trackId, track = null) {
-                const lyricsData = data[0];
+        // LRCLIB
-                this.lyricsCache.set(trackId, lyricsData);
+        if (track) {
-                return lyricsData;
+            if (this.lyricsCache.has(trackId)) {
+                return this.lyricsCache.get(trackId);
             }
 
-            return null;
+            try {
-        } catch (error) {
+                const artist = Array.isArray(track.artists) 
-            console.error('Failed to fetch lyrics:', error);
+                    ? track.artists.map(a => a.name || a).join(', ')
-            return null;
+                    : track.artist?.name || '';
+                const title = track.title || '';
+                const album = track.album?.title || '';
+                const duration = track.duration ? Math.round(track.duration) : null;
+
+                if (!title || !artist) {
+                    console.warn('Missing required fields for LRCLIB');
+                    return null;
+                }
+
+                const params = new URLSearchParams({
+                    track_name: title,
+                    artist_name: artist
+                });
+                
+                if (album) params.append('album_name', album);
+                if (duration) params.append('duration', duration.toString());
+
+                const response = await fetch(`https://lrclib.net/api/get?${params.toString()}`);
+                
+                if (response.ok) {
+                    const data = await response.json();
+                    
+                    if (data.syncedLyrics) {
+                        const lyricsData = {
+                            subtitles: data.syncedLyrics,
+                            lyricsProvider: 'LRCLIB'
+                        };
+                        
+                        this.lyricsCache.set(trackId, lyricsData);
+                        return lyricsData;
+                    }
+                }
+            } catch (error) {
+                console.warn('LRCLIB fetch failed:', error);
+            }
         }
+
+        return null;
     }
 
     parseSyncedLyrics(subtitles) {
         if (!subtitles) return [];
-
         const lines = subtitles.split('\n').filter(line => line.trim());
         return lines.map(line => {
             const match = line.match(/\[(\d+):(\d+)\.(\d+)\]\s*(.+)/);
@@ -82,7 +144,6 @@ export class LyricsManager {
 
     getCurrentLine(currentTime) {
         if (!this.syncedLyrics || this.syncedLyrics.length === 0) return -1;
-
         let currentIndex = -1;
         for (let i = 0; i < this.syncedLyrics.length; i++) {
             if (currentTime >= this.syncedLyrics[i].time) {
@@ -119,64 +180,92 @@ export function createLyricsPanel() {
     return panel;
 }
 
-export function showSyncedLyricsPanel(lyricsData, audioPlayer, panel) {
+export async function showSyncedLyricsPanel(track, audioPlayer, panel) {
     const content = panel.querySelector('.lyrics-content');
-
+    content.innerHTML = '<div class="lyrics-loading">Loading lyrics...</div>';
-    const syncedLyrics = lyricsData.subtitles
+    
-        ? parseSyncedLyricsSimple(lyricsData.subtitles)
+    const lyricsManager = new LyricsManager();
-        : null;
+    
-
+    try {
-    if (syncedLyrics && syncedLyrics.length > 0) {
+        await lyricsManager.ensureComponentLoaded();
-        // Render synced lyrics
+        
+        const title = track.title;
+        const artist = getTrackArtists(track);
+        const album = track.album?.title;
+        const durationMs = track.duration ? Math.round(track.duration * 1000) : undefined;
+        const isrc = track.isrc || '';
+        
         content.innerHTML = '';
-        syncedLyrics.forEach((line, index) => {
+        const amLyrics = document.createElement('am-lyrics');
-            const lineEl = document.createElement('p');
+        amLyrics.setAttribute('song-title', title);
-            lineEl.className = 'lyrics-line synced-line';
+        amLyrics.setAttribute('song-artist', artist);
-            lineEl.textContent = line.text || '♪';
+        if (album) amLyrics.setAttribute('song-album', album);
-            lineEl.dataset.index = index;
+        if (durationMs) amLyrics.setAttribute('song-duration', durationMs);
-            lineEl.dataset.time = line.time;
+        amLyrics.setAttribute('query', `${title} ${artist}`.trim());
-            content.appendChild(lineEl);
+        if (isrc) amLyrics.setAttribute('isrc', isrc);
-        });
+        amLyrics.setAttribute('highlight-color', '#93c5fd');
-
+        amLyrics.setAttribute('hover-background-color', 'rgba(59, 130, 246, 0.14)');
-        let currentLineIndex = -1;
+        amLyrics.setAttribute('autoscroll', '');
-
+        amLyrics.setAttribute('interpolate', '');
-        const updateLyrics = () => {
+        amLyrics.style.height = '100%';
-            const currentTime = audioPlayer.currentTime;
+        amLyrics.style.width = '100%';
-            const newIndex = getCurrentLineIndex(syncedLyrics, currentTime);
+        
-
+        content.appendChild(amLyrics);
-            if (newIndex !== currentLineIndex) {
+        lyricsManager.amLyricsElement = amLyrics;
-                currentLineIndex = newIndex;
+        
-
+        let baseTimeMs = 0;
-                content.querySelectorAll('.synced-line').forEach((line, index) => {
+        let lastTimestamp = performance.now();
-                    line.classList.remove('active', 'upcoming', 'past');
+        
-
+        const updateTime = () => {
-                    if (index === currentLineIndex) {
+            const currentMs = audioPlayer.currentTime * 1000;
-                        line.classList.add('active');
+            baseTimeMs = currentMs;
-                        // Smooth scroll to active line
+            lastTimestamp = performance.now();
-                        line.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            amLyrics.currentTime = currentMs;
-                    } else if (index === currentLineIndex + 1) {
+        };
-                        line.classList.add('upcoming');
+        
-                    } else if (index < currentLineIndex) {
+        const tick = () => {
-                        line.classList.add('past');
+            if (!audioPlayer.paused) {
-                    }
+                const now = performance.now();
-                });
+                const elapsed = now - lastTimestamp;
+                const nextMs = baseTimeMs + elapsed;
+                amLyrics.currentTime = nextMs;
+                lyricsManager.animationFrameId = requestAnimationFrame(tick);
             }
         };
-
+        
-        // Store the update function so we can remove it later
+        audioPlayer.addEventListener('timeupdate', updateTime);
-        panel.lyricsUpdateHandler = updateLyrics;
+        audioPlayer.addEventListener('play', () => {
-        audioPlayer.addEventListener('timeupdate', updateLyrics);
+            baseTimeMs = audioPlayer.currentTime * 1000;
-
+            lastTimestamp = performance.now();
-        // Initial update
+            tick();
-        updateLyrics();
+        });
-    } else if (lyricsData.lyrics) {
+        audioPlayer.addEventListener('pause', () => {
-        // Fallback to static lyrics
+            if (lyricsManager.animationFrameId) {
-        const lines = lyricsData.lyrics.split('\n');
+                cancelAnimationFrame(lyricsManager.animationFrameId);
-        content.innerHTML = lines.map(line =>
+            }
-            `<p class="lyrics-line">${line || '&nbsp;'}</p>`
+        });
-        ).join('');
+        audioPlayer.addEventListener('seeked', updateTime);
-    } else {
+        
-        content.innerHTML = '<div class="lyrics-error">No lyrics available</div>';
+        amLyrics.addEventListener('line-click', (e) => {
+            if (e.detail && e.detail.timestamp) {
+                audioPlayer.currentTime = e.detail.timestamp / 1000;
+                audioPlayer.play();
+            }
+        });
+        
+        if (!audioPlayer.paused) {
+            tick();
+        }
+        
+        panel.lyricsCleanup = () => {
+            if (lyricsManager.animationFrameId) {
+                cancelAnimationFrame(lyricsManager.animationFrameId);
+            }
+        };
+        
+    } catch (error) {
+        console.error('Failed to load lyrics:', error);
+        content.innerHTML = '<div class="lyrics-error">Failed to load lyrics! :(</div>';
     }
 }
 
@@ -185,6 +274,10 @@ export function clearLyricsPanelSync(audioPlayer, panel) {
         audioPlayer.removeEventListener('timeupdate', panel.lyricsUpdateHandler);
         panel.lyricsUpdateHandler = null;
     }
+    if (panel.lyricsCleanup) {
+        panel.lyricsCleanup();
+        panel.lyricsCleanup = null;
+    }
 }
 
 export function showKaraokeView(track, lyricsData, audioPlayer) {