diff --git a/YoutubeMusicGeniusLyrics.user.js b/YoutubeMusicGeniusLyrics.user.js index 055412f..08a53fa 100644 --- a/YoutubeMusicGeniusLyrics.user.js +++ b/YoutubeMusicGeniusLyrics.user.js @@ -51,11 +51,33 @@ const SCRIPT_NAME = 'Youtube Music Genius Lyrics' let lyricsDisplayState = 'hidden' let lyricsWidth = '40%' let resizeRequested = false + +const elmBuild = (tag, ...contents) => { + /** @type {HTMLElement} */ + const elm = typeof tag === 'string' ? document.createElement(tag) : tag + for (const content of contents) { + if (!content || typeof content !== 'object' || (content instanceof Node)) { // eslint-disable-line no-undef + elm.append(content) + } else if (content.length > 0) { + elm.appendChild(elmBuild(...content)) + } else if (content.style) { + Object.assign(elm.style, content.style) + } else if (content.classList) { + elm.classList.add(...content.classList) + } else if (content.attr) { + for (const [attr, val] of Object.entries(content.attr)) elm.setAttribute(attr, val) + } else { + Object.assign(elm, content) + } + } + return elm +} + function addCss () { // Spotify const style = document.createElement('style') style.id = 'youtube-music-genius-lyrics-style' - style.innerHTML = ` + style.textContent = ` #lyricscontainer { position:fixed; right:0px; @@ -206,7 +228,7 @@ function getCleanLyricsContainer () { document.body.appendChild(container) } else { container = document.getElementById('lyricscontainer') - container.innerHTML = '' + container.textContent = '' } container.style = '' container.style.top = top + 'px' @@ -261,7 +283,7 @@ function addLyricsButton () { g.appendChild(document.createTextNode('🅖')) if (g.getBoundingClientRect().width < 10) { // in case the font doesn't have "🅖" symbol g.setAttribute('style', 'border: 2px solid #ffff64; border-radius: 100%; padding: 0px 3px; font-size: 11px; background-color: black; color: #ffff64; font-weight: 700;') - g.innerHTML = 'G' + g.textContent = 'G' } } @@ -422,10 +444,7 @@ function listSongs (hits, container, query) { hideLyrics() }) - // List search results - const trackhtml = '
📄
' + - '
$artist • $title
👁 $stats.pageviews $lyrics_state
' - container.innerHTML = '
    ' + elmBuild(container, ['ol', { classList: ['tracklist'] }, { style: { width: '99%', fontSize: '1.15em' } }]) container.style.border = '1px solid black' container.style.borderRadius = '3px' @@ -486,7 +505,44 @@ function listSongs (hits, container, query) { li.style.margin = '2px' li.style.borderRadius = '3px' li.style.backgroundColor = '#333' - li.innerHTML = trackhtml.replace(/\$title/g, hit.result.title_with_featured).replace(/\$artist/g, hit.result.primary_artist.name).replace(/\$lyrics_state/g, hit.result.lyrics_state).replace(/\$stats\.pageviews/g, genius.f.metricPrefix(hit.result.stats.pageviews, 1)) + + elmBuild(li, + ['div', + { + style: { + float: 'left' + } + }, + ['div', { classList: ['onhover'] }, { + style: { + marginTop: '-0.25em', + display: 'none' + } + }, ['span', '🅖', { + style: { + color: '#222', + fontSize: '2.0em' + } + }]], + ['div', { classList: ['onout'] }, ['span', '📄', { + style: { + fontSize: '1.5em' + } + }]] + ], + ['div', { + style: { + float: 'left', + marginLeft: '5px' + } + }, + `${hit.result.primary_artist.name} • ${hit.result.title_with_featured}`, + ['br'], + ['span', { style: { fontSize: '0.7em' } }, `👁 ${genius.f.metricPrefix(hit.result.stats.pageviews, 1)} ${hit.result.lyrics_state}`] + ], + ['div', { style: { clear: 'left' } }] + ) + li.dataset.hit = JSON.stringify(hit) li.addEventListener('click', onclick) @@ -497,26 +553,44 @@ function listSongs (hits, container, query) { } function loremIpsum () { - const classText = ['', ''] - const classWhitespace = ['', ''] const random = (x) => 1 + parseInt(Math.random() * x) - let text = '' - for (let v = 0; v < Math.max(3, random(5)); v++) { + + // Create a container for the entire content + const container = document.createElement('div') + + for (let v = 0; v < Math.max(3, random(5)) + 4; v++) { for (let b = 0; b < random(6); b++) { - const line = [] + const lineContainer = document.createElement('span') + lineContainer.classList.add('gray') + for (let l = 0; l < random(9); l++) { for (let w = 0; w < 1 + random(10); w++) { for (let i = 0; i < 1 + random(7); i++) { - line.push('x') + // Create and append 'x' text node + const xTextNode = document.createTextNode('x') + lineContainer.appendChild(xTextNode) } - line.push(classText[1] + classWhitespace[0] + ' ' + classWhitespace[1] + classText[0]) + + // Add the whitespace span + const whiteSpaceSpan = document.createElement('span') + whiteSpaceSpan.classList.add('white') + whiteSpaceSpan.textContent = '\u00A0' // Non-breaking space + lineContainer.appendChild(whiteSpaceSpan) } - line.push(classText[1] + '\n
    \n' + classText[0]) + + // Add line break (br) after each set + lineContainer.appendChild(document.createElement('br')) } - text += classText[0] + line.join('') + classText[1] + '\n
    \n' + + // Append the line container to the main container + container.appendChild(lineContainer) + + // Add a line break after each section + container.appendChild(document.createElement('br')) } } - return text + + return container // Return the main container with all generated elements } function createSpinner (spinnerHolder) { @@ -534,9 +608,9 @@ function createSpinner (spinnerHolder) { spinner.classList.add('loadingspinner') spinner.style.marginLeft = (rect.width / 2) + 'px' - const lorem = spinnerHolder.appendChild(document.createElement('div')) + const lorem = loremIpsum() lorem.classList.add('lorem') - lorem.innerHTML = loremIpsum() + spinnerHolder.appendChild(lorem) function resizeSpinner () { const spinnerHolder = document.querySelector('.loadingspinnerholder')