diff --git a/plugins/lyrics-genius/front.ts b/plugins/lyrics-genius/front.ts index 8e54ac94..ebfc0071 100644 --- a/plugins/lyrics-genius/front.ts +++ b/plugins/lyrics-genius/front.ts @@ -4,103 +4,105 @@ import is from 'electron-is'; import type { SongInfo } from '../../providers/song-info'; export default () => { - ipcRenderer.on('update-song-info', (_, extractedSongInfo: SongInfo) => setTimeout(async () => { - const tabList = document.querySelectorAll('tp-yt-paper-tab'); - const tabs = { - upNext: tabList[0], - lyrics: tabList[1], - discover: tabList[2], - }; + const setLyrics = (lyricsContainer: Element, lyrics: string | null) => { + lyricsContainer.innerHTML = ` +
+ ${lyrics?.replaceAll(/\r\n|\r|\n/g, '
') ?? 'Could not retrieve lyrics from genius'} +
+ + + `; - // Check if disabled - if (!tabs.lyrics?.hasAttribute('disabled')) { - return; + if (lyrics) { + const footer = lyricsContainer.querySelector('.footer'); + + if (footer) { + footer.textContent = 'Source: Genius'; + } } + }; - let hasLyrics = true; + let unregister: (() => void) | null = null; - const lyrics = await ipcRenderer.invoke( - 'search-genius-lyrics', - extractedSongInfo, - ) as string; - if (!lyrics) { - // Delete previous lyrics if tab is open and couldn't get new lyrics - checkLyricsContainer(() => { - hasLyrics = false; - setTabsOnclick(undefined); - }); - return; - } + ipcRenderer.on('update-song-info', (_, extractedSongInfo: SongInfo) => { + unregister?.(); - if (is.dev()) { - console.log('Fetched lyrics from Genius'); - } + setTimeout(async () => { + const tabList = document.querySelectorAll('tp-yt-paper-tab'); + const tabs = { + upNext: tabList[0], + lyrics: tabList[1], + discover: tabList[2], + }; - enableLyricsTab(); + // Check if disabled + if (!tabs.lyrics?.hasAttribute('disabled')) return; - setTabsOnclick(enableLyricsTab); + const lyrics = await ipcRenderer.invoke( + 'search-genius-lyrics', + extractedSongInfo, + ) as string | null; - checkLyricsContainer(); + if (!lyrics) { + // Delete previous lyrics if tab is open and couldn't get new lyrics + tabs.upNext.click(); + + return; + } + + if (is.dev()) { + console.log('Fetched lyrics from Genius'); + } + + const tryToInjectLyric = (callback?: () => void) => { + const lyricsContainer = document.querySelector( + '[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer', + ); + + if (lyricsContainer) { + callback?.(); + + setLyrics(lyricsContainer, lyrics); + applyLyricsTabState(); + } + }; + const applyLyricsTabState = () => { + if (lyrics) { + tabs.lyrics.removeAttribute('disabled'); + tabs.lyrics.removeAttribute('aria-disabled'); + } else { + tabs.lyrics.setAttribute('disabled', ''); + tabs.lyrics.setAttribute('aria-disabled', ''); + } + }; + const lyricsTabHandler = () => { + const tabContainer = document.querySelector('ytmusic-tab-renderer'); + if (!tabContainer) return; - const lyricsTabHandler = () => { - const tabContainer = document.querySelector('ytmusic-tab-renderer'); - if (tabContainer) { const observer = new MutationObserver((_, observer) => { - checkLyricsContainer(() => observer.disconnect()); + tryToInjectLyric(() => observer.disconnect()); }); + observer.observe(tabContainer, { attributes: true, childList: true, subtree: true, }); - } - }; + }; - tabs.lyrics.addEventListener('click', lyricsTabHandler); + applyLyricsTabState(); - function checkLyricsContainer(callback = () => { - }) { - const lyricsContainer = document.querySelector( - '[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer', - ); - if (lyricsContainer) { - callback(); - setLyrics(lyricsContainer); - } - } + tabs.discover.addEventListener('click', applyLyricsTabState); + tabs.lyrics.addEventListener('click', lyricsTabHandler); + tabs.upNext.addEventListener('click', applyLyricsTabState); - function setLyrics(lyricsContainer: Element) { - lyricsContainer.innerHTML = `
- ${ - hasLyrics - ? lyrics.replaceAll(/\r\n|\r|\n/g, '
') - : 'Could not retrieve lyrics from genius' - } + tryToInjectLyric(); -
- `; - if (hasLyrics) { - const footer = lyricsContainer.querySelector('.footer'); - if (footer) { - footer.textContent = 'Source: Genius'; - enableLyricsTab(); - } - } - } - - const defaultHandler = () => {}; - - function setTabsOnclick(callback: EventListenerOrEventListenerObject | undefined) { - for (const tab of [tabs.upNext, tabs.discover]) { - if (tab) { - tab.addEventListener('click', callback ?? defaultHandler); - } - } - } - - function enableLyricsTab() { - tabs.lyrics.removeAttribute('disabled'); - tabs.lyrics.removeAttribute('aria-disabled'); - } - }, 500)); + unregister = () => { + tabs.discover.removeEventListener('click', applyLyricsTabState); + tabs.lyrics.removeEventListener('click', lyricsTabHandler); + tabs.upNext.removeEventListener('click', applyLyricsTabState); + }; + }, 500); + }); };