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);
+ });
};