mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-10 10:11:46 +00:00
fix(lyrics-genius): fix th-ch/youtube-music#1253
This commit is contained in:
@ -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 = `
|
||||
<div id="contents" class="style-scope ytmusic-section-list-renderer description ytmusic-description-shelf-renderer genius-lyrics">
|
||||
${lyrics?.replaceAll(/\r\n|\r|\n/g, '<br/>') ?? 'Could not retrieve lyrics from genius'}
|
||||
</div>
|
||||
<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer" style="align-self: baseline">
|
||||
</yt-formatted-string>
|
||||
`;
|
||||
|
||||
// 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<HTMLElement>('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 = `<div id="contents" class="style-scope ytmusic-section-list-renderer description ytmusic-description-shelf-renderer genius-lyrics">
|
||||
${
|
||||
hasLyrics
|
||||
? lyrics.replaceAll(/\r\n|\r|\n/g, '<br/>')
|
||||
: 'Could not retrieve lyrics from genius'
|
||||
}
|
||||
tryToInjectLyric();
|
||||
|
||||
</div>
|
||||
<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer" style="align-self: baseline"></yt-formatted-string>`;
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user